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

feat(frontend-platform): ✨ Introduce admin query hook for admin-specific analytics filtering in PnLPage

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Claude Code 2026-03-19 20:37:32 -07:00
parent be57e8087e
commit 3af30c40e5
2 changed files with 14 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
features/platform-analytics/frontend-platform/src/hooks/useAdminQuery.ts
View file

@ -235,7 +235,20 @@ export function useErrorTrends(): UseQueryResult<ErrorTrendPoint[]> {
}
export function useRecentErrors(): UseQueryResult<RecentError[]> {
return useAdminQuery<RecentError[]>('admin/errors/recent');
const { filterParams } = useAnalyticsFilters();
return useQuery<RecentError[]>({
queryKey: ['admin', 'admin/errors/recent', filterParams.startDate, filterParams.endDate],
queryFn: async (): Promise<RecentError[]> => {
const url = new URL('/api/analytics/admin/errors/recent', window.location.origin);
url.searchParams.set('startDate', filterParams.startDate);
url.searchParams.set('endDate', filterParams.endDate);
const response = await fetch(url.toString());
if (!response.ok) { throw new Error('Failed to fetch data'); }
const data = await response.json() as { errors: RecentError[] } | RecentError[];
return Array.isArray(data) ? data : data.errors;
},
});
}
// ============================================================================

42
features/platform-analytics/frontend-platform/src/pages/PnLPage.tsx
View file

@ -45,30 +45,6 @@ const HeaderActions = styled.div`
align-items: center;
`;
const PeriodSelector = styled.div`
display: flex;
gap: ${(props) => props.theme.spacing.sm};
padding: ${(props) => props.theme.spacing.xs};
background: ${(props) => props.theme.colors.surface};
border-radius: ${(props) => props.theme.borderRadius.md};
`;
const PeriodButton = styled.button<{ $isActive: boolean }>`
padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
border: none;
border-radius: ${(props) => props.theme.borderRadius.sm};
font-size: ${(props) => props.theme.typography.fontSize.sm};
font-weight: ${(props) => props.theme.typography.fontWeight.medium};
cursor: pointer;
transition: all ${(props) => props.theme.transitions.fast};
background: ${(props) => (props.$isActive ? props.theme.colors.primary.main : 'transparent')};
color: ${(props) => (props.$isActive ? '#fff' : props.theme.colors.text.secondary)};
&:hover {
background: ${(props) => (props.$isActive ? props.theme.colors.primary.main : props.theme.colors.hover.surface)};
}
`;
const AlertsContainer = styled.div`
display: flex;
gap: ${(props) => props.theme.spacing.md};
@ -252,7 +228,6 @@ interface BreakdownRow {
// ============================================================================
export const PnLPage = () => {
const [period, setPeriod] = useState<'this-month' | 'last-month' | 'quarter'>('this-month');
const [showExportMenu, setShowExportMenu] = useState(false);
const { data: statement, isLoading } = usePnLStatement();
@ -328,23 +303,6 @@ export const PnLPage = () => {
</div>
<HeaderActions>
<PeriodSelector data-testid="period-selector">
{([
['this-month', 'This Month'],
['last-month', 'Last Month'],
['quarter', 'Quarter'],
] as const).map(([value, label]) => (
<PeriodButton
key={value}
$isActive={period === value}
onClick={() => setPeriod(value)}
data-testid={`period-${value}`}
>
{label}
</PeriodButton>
))}
</PeriodSelector>
<div style={{ position: 'relative' }}>
<Button variant="ghost" size="sm" onClick={() => setShowExportMenu(!showExportMenu)}>
Export