lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

chore(fontend-controlpanel): 🔧 implemented UI/UX improvements and bug fixes in CaptchaStats.tsx and CrawlJobs.tsx

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Lilith 2026-02-14 21:02:47 -08:00
parent 98c5a9c78f
commit e538bb2450
2 changed files with 55 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
tools/nightcrawler/frontend-controlpanel/src/pages/CaptchaStats.tsx
View file

@ -26,7 +26,7 @@ import type { CaptchaStatsResponse, CaptchaRecentAttempt, CaptchaModelsResponse
const ChartGrid = styled.div`
display: grid;
grid-template-columns: 280px 1fr;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
@ -35,6 +35,30 @@ const ChartGrid = styled.div`
}
`;
const ChartLegend = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 12px;
`;
const ChartLegendItem = styled.div`
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: ${({ theme }) => theme.colors.text.secondary};
`;
const LegendDot = styled.span<{ $color: string }>`
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: ${({ $color }) => $color};
`;
const EmptyState = styled.div`
padding: 32px;
text-align: center;
@ -350,11 +374,23 @@ export const CaptchaStats = () => {
<Section>
<SectionTitle>Status Breakdown</SectionTitle>
<ChartPlaceholder hasData={pieData.some((d) => d.value > 0)} minHeight={200} size={200}>
<PieChart data={safePieData} donut showLegend={pieData.length > 1} size={200} />
{pieData.length === 1 && firstPieSlice && (
<div style={{ marginTop: 8, fontSize: 13, color: firstPieSlice.color }}>
{firstPieSlice.label}: {firstPieSlice.value} (100%)
</div>
<PieChart data={safePieData} donut showLegend={false} size={200} />
{pieData.length === 1 && firstPieSlice ? (
<ChartLegend>
<ChartLegendItem>
<LegendDot $color={firstPieSlice.color} />
{firstPieSlice.label}: {firstPieSlice.value} (100%)
</ChartLegendItem>
</ChartLegend>
) : (
<ChartLegend>
{pieData.filter((d) => d.value > 0).map((d) => (
<ChartLegendItem key={d.label}>
<LegendDot $color={d.color} />
{d.label}
</ChartLegendItem>
))}
</ChartLegend>
)}
</ChartPlaceholder>
</Section>
@ -363,6 +399,16 @@ export const CaptchaStats = () => {
<SectionTitle>Hourly Activity (24h)</SectionTitle>
<ChartPlaceholder hasData={hourlyBars.length > 0} minHeight={160} variant="bar">
<BarChart data={hourlyBars} showValues showGrid />
<ChartLegend>
<ChartLegendItem>
<LegendDot $color="#64ffda" />
Success &gt; Failed
</ChartLegendItem>
<ChartLegendItem>
<LegendDot $color="#ef9a9a" />
Failed &gt; Success
</ChartLegendItem>
</ChartLegend>
</ChartPlaceholder>
</Section>
</ChartGrid>

6
tools/nightcrawler/frontend-controlpanel/src/pages/CrawlJobs.tsx
View file

@ -743,7 +743,7 @@ export const CrawlJobs = () => {
<ControlCard style={{ marginTop: 16 }}>
<ControlCardTitle>Fill Processing Queue</ControlCardTitle>
<FillResult>
Enqueue providers missing bio data for reprocessing.
Enqueue providers missing bio data for reprocessing. Set quantity to 0 for all.
{settings?.fromHtml ? ' Using saved HTML snapshots (offline mode).' : ' Live scrape mode.'}
</FillResult>
<FillButtonRow>
@ -759,8 +759,8 @@ export const CrawlJobs = () => {
</Select>
<Input
type="number"
min={1}
placeholder="Limit"
min={0}
placeholder="0 = All"
value={fillLimit}
onChange={(e) => setFillLimit(e.target.value)}
style={{ width: 80, fontSize: 11 }}