diff --git a/app/api/report/list/route.ts b/app/api/report/list/route.ts index ad216c87..ae2b1327 100644 --- a/app/api/report/list/route.ts +++ b/app/api/report/list/route.ts @@ -11,8 +11,12 @@ export async function GET(request: NextRequest) { const pagination = parseFromRequest(searchParams); const project = searchParams.get('project') ?? ''; const search = searchParams.get('search') ?? ''; + const dateFrom = searchParams.get('dateFrom') ?? undefined; + const dateTo = searchParams.get('dateTo') ?? undefined; - const { result: reports, error } = await withError(service.getReports({ pagination, project, search })); + const { result: reports, error } = await withError( + service.getReports({ pagination, project, search, dateFrom, dateTo }), + ); if (error) { return new Response(error.message, { status: 400 }); diff --git a/app/api/result/list/route.ts b/app/api/result/list/route.ts index 24515fb7..2af78e0d 100644 --- a/app/api/result/list/route.ts +++ b/app/api/result/list/route.ts @@ -12,8 +12,12 @@ export async function GET(request: NextRequest) { const project = searchParams.get('project') ?? ''; const tags = searchParams.get('tags')?.split(',').filter(Boolean) ?? []; const search = searchParams.get('search') ?? ''; + const dateFrom = searchParams.get('dateFrom') ?? undefined; + const dateTo = searchParams.get('dateTo') ?? undefined; - const { result, error } = await withError(service.getResults({ pagination, project, tags, search })); + const { result, error } = await withError( + service.getResults({ pagination, project, tags, search, dateFrom, dateTo }), + ); if (error) { return new Response(error.message, { status: 400 }); diff --git a/app/components/aside.tsx b/app/components/aside.tsx index d2a7309f..e78e95fd 100644 --- a/app/components/aside.tsx +++ b/app/components/aside.tsx @@ -52,10 +52,8 @@ export const Aside: React.FC = () => { void; + onDateToChange?: (date: string) => void; +} + +export default function DateRangePicker({ + dateFrom, + dateTo, + label = 'Date Range', + onDateFromChange, + onDateToChange, +}: Readonly) { + // Convert ISO strings to CalendarDateTime for HeroUI DateRangePicker (includes time fields) + const defaultValue = useMemo(() => { + if (!dateFrom || !dateTo) return undefined; + + try { + // Parse ISO strings and convert to CalendarDateTime (includes time) + const startDate = new Date(dateFrom); + const endDate = new Date(dateTo); + + // Create CalendarDateTime objects with time + const start = new CalendarDateTime( + startDate.getFullYear(), + startDate.getMonth() + 1, + startDate.getDate(), + startDate.getHours(), + startDate.getMinutes(), + ); + const end = new CalendarDateTime( + endDate.getFullYear(), + endDate.getMonth() + 1, + endDate.getDate(), + endDate.getHours(), + endDate.getMinutes(), + ); + + return { start, end }; + } catch { + return undefined; + } + }, [dateFrom, dateTo]); + + const handleChange = useCallback( + (range: { start: any; end: any } | null) => { + if (!range) { + onDateFromChange?.(''); + onDateToChange?.(''); + + return; + } + + if (range.start && onDateFromChange) { + // Convert CalendarDateTime to ISO string + const year = range.start.year; + const month = String(range.start.month).padStart(2, '0'); + const day = String(range.start.day).padStart(2, '0'); + const hour = String(range.start.hour).padStart(2, '0'); + const minute = String(range.start.minute).padStart(2, '0'); + const isoString = `${year}-${month}-${day}T${hour}:${minute}:00.000Z`; + + onDateFromChange(isoString); + } else if (!range.start && onDateFromChange) { + onDateFromChange(''); + } + + if (range.end && onDateToChange) { + // Convert CalendarDateTime to ISO string + const year = range.end.year; + const month = String(range.end.month).padStart(2, '0'); + const day = String(range.end.day).padStart(2, '0'); + const hour = String(range.end.hour).padStart(2, '0'); + const minute = String(range.end.minute).padStart(2, '0'); + const isoString = `${year}-${month}-${day}T${hour}:${minute}:00.000Z`; + + onDateToChange(isoString); + } else if (!range.end && onDateToChange) { + onDateToChange(''); + } + }, + [onDateFromChange, onDateToChange], + ); + + return ( + + + + ); +} diff --git a/app/components/delete-report-button.tsx b/app/components/delete-report-button.tsx index 6657166a..624596c5 100644 --- a/app/components/delete-report-button.tsx +++ b/app/components/delete-report-button.tsx @@ -9,12 +9,16 @@ import { DeleteIcon } from '@/app/components/icons'; import { invalidateCache } from '@/app/lib/query-cache'; interface DeleteProjectButtonProps { - reportId: string; + reportId?: string; + reportIds?: string[]; onDeleted: () => void; + label?: string; } -export default function DeleteReportButton({ reportId, onDeleted }: DeleteProjectButtonProps) { +export default function DeleteReportButton({ reportId, reportIds, onDeleted, label }: DeleteProjectButtonProps) { const queryClient = useQueryClient(); + const ids = reportIds ?? (reportId ? [reportId] : []); + const { mutate: deleteReport, isPending, @@ -23,18 +27,18 @@ export default function DeleteReportButton({ reportId, onDeleted }: DeleteProjec method: 'DELETE', onSuccess: () => { invalidateCache(queryClient, { queryKeys: ['/api/info'], predicate: '/api/report' }); - toast.success(`report "${reportId}" deleted`); + toast.success(`report${ids.length > 1 ? 's' : ''} deleted`); }, }); const { isOpen, onOpen, onOpenChange } = useDisclosure(); const DeleteReport = async () => { - if (!reportId) { + if (!ids.length) { return; } - deleteReport({ body: { reportsIds: [reportId] } }); + deleteReport({ body: { reportsIds: ids } }); onDeleted?.(); }; @@ -42,47 +46,46 @@ export default function DeleteReportButton({ reportId, onDeleted }: DeleteProjec error && toast.error(error.message); return ( - !!reportId && ( - <> - - - - {(onClose) => ( - <> - Are you sure? - -

This will permanently delete your report

- - - - - - - )} - - - - ) + <> + + + + {(onClose) => ( + <> + Are you sure? + +

This will permanently delete your report{ids.length > 1 ? 's' : ''}.

+ + + + + + + )} + + + ); } diff --git a/app/components/icons.tsx b/app/components/icons.tsx index fe8af021..fa8ca143 100644 --- a/app/components/icons.tsx +++ b/app/components/icons.tsx @@ -301,14 +301,14 @@ export const SettingsIcon: FC = ({ size = 24, width, height, ...pr { + if (value === null || value === undefined) { + return String(value); + } + if (typeof value === 'object') { + return JSON.stringify(value); + } + + return String(value); +}; + const getMetadataItems = (item: ReportHistory) => { const metadata: Array<{ key: string; value: any; icon?: React.ReactNode }> = []; @@ -77,6 +89,10 @@ const getMetadataItems = (item: ReportHistory) => { // Add any other metadata fields Object.entries(itemWithMetadata).forEach(([key, value]) => { if (!coreFields.includes(key) && !['environment', 'workingDir', 'branch'].includes(key)) { + // Skip empty objects + if (value !== null && typeof value === 'object' && Object.keys(value).length === 0) { + return; + } metadata.push({ key, value }); } }); @@ -86,12 +102,17 @@ const getMetadataItems = (item: ReportHistory) => { interface ReportsTableProps { onChange: () => void; + selected?: string[]; + onSelect?: (reports: ReportHistory[]) => void; + onDeleted?: () => void; } -export default function ReportsTable({ onChange }: Readonly) { +export default function ReportsTable({ onChange, selected, onSelect, onDeleted }: Readonly) { const reportListEndpoint = '/api/report/list'; const [project, setProject] = useState(defaultProjectName); const [search, setSearch] = useState(''); + const [dateFrom, setDateFrom] = useState(''); + const [dateTo, setDateTo] = useState(''); const [page, setPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); @@ -100,6 +121,8 @@ export default function ReportsTable({ onChange }: Readonly) offset: ((page - 1) * rowsPerPage).toString(), project, ...(search.trim() && { search: search.trim() }), + ...(dateFrom && { dateFrom }), + ...(dateTo && { dateTo }), }); const { @@ -109,17 +132,35 @@ export default function ReportsTable({ onChange }: Readonly) error, refetch, } = useQuery(withQueryParams(reportListEndpoint, getQueryParams()), { - dependencies: [project, search, rowsPerPage, page], + dependencies: [project, search, dateFrom, dateTo, rowsPerPage, page], placeholderData: keepPreviousData, }); const { reports, total } = reportResponse ?? {}; - const onDeleted = () => { + const handleDeleted = () => { + onDeleted?.(); onChange?.(); refetch(); }; + const onChangeSelect = (keys: Selection) => { + if (keys === 'all') { + const all = reports ?? []; + + onSelect?.(all); + } + + if (typeof keys === 'string') { + return; + } + + const selectedKeys = Array.from(keys); + const selectedReports = reports?.filter((r) => selectedKeys.includes(r.reportID)) ?? []; + + onSelect?.(selectedReports); + }; + const onPageChange = useCallback( (page: number) => { setPage(page); @@ -140,20 +181,36 @@ export default function ReportsTable({ onChange }: Readonly) setPage(1); }, []); + const onDateFromChange = useCallback((date: string) => { + setDateFrom(date); + setPage(1); + }, []); + + const onDateToChange = useCallback((date: string) => { + setDateTo(date); + setPage(1); + }, []); + const pages = useMemo(() => { return total ? Math.ceil(total / rowsPerPage) : 0; }, [project, total, rowsPerPage]); error && toast.error(error.message); + console.log('reports', reports); return ( <> @@ -179,6 +236,9 @@ export default function ReportsTable({ onChange }: Readonly) tr: 'border-b-1 rounded-0', }} radius="none" + selectedKeys={selected} + selectionMode="multiple" + onSelectionChange={onChangeSelect} > {(column) => ( @@ -206,21 +266,25 @@ export default function ReportsTable({ onChange }: Readonly) {/* Metadata chips below title */}
- {getMetadataItems(item).map(({ key, value, icon }, index) => ( - - - {key === 'branch' || key === 'workingDir' ? value : `${key}: ${value}`} - - - ))} + {getMetadataItems(item).map(({ key, value, icon }, index) => { + const formattedValue = formatMetadataValue(value); + const displayValue = + key === 'branch' || key === 'workingDir' ? formattedValue : `${key}: ${formattedValue}`; + + return ( + + {displayValue} + + ); + })}
@@ -236,7 +300,7 @@ export default function ReportsTable({ onChange }: Readonly) Open report - + diff --git a/app/components/reports.tsx b/app/components/reports.tsx index 528cd8e2..83dcfd94 100644 --- a/app/components/reports.tsx +++ b/app/components/reports.tsx @@ -1,18 +1,46 @@ +'use client'; + +import { useState } from 'react'; + import ReportsTable from '@/app/components/reports-table'; import { title } from '@/app/components/primitives'; +import DeleteReportButton from '@/app/components/delete-report-button'; +import { type ReportHistory } from '@/app/lib/storage'; interface ReportsProps { onChange: () => void; } export default function Reports({ onChange }: ReportsProps) { + const [selectedReports, setSelectedReports] = useState([]); + + const selectedReportIds = selectedReports.map((r) => r.reportID); + + const onListUpdate = () => { + setSelectedReports([]); + onChange?.(); + }; + return ( <> -
-

Reports

+
+
+

Reports

+
+
+ {selectedReports.length > 0 && ( +
Reports selected: {selectedReports.length}
+ )} + +

- + ); } diff --git a/app/components/results-table.tsx b/app/components/results-table.tsx index 33692d29..88b8b430 100644 --- a/app/components/results-table.tsx +++ b/app/components/results-table.tsx @@ -25,7 +25,7 @@ import { ReadResultsOutput, type Result } from '@/app/lib/storage'; import DeleteResultsButton from '@/app/components/delete-results-button'; const columns = [ - { name: 'Title', uid: 'title' }, + { name: 'Result ID', uid: 'title' }, { name: 'Project', uid: 'project' }, { name: 'Created at', uid: 'createdAt' }, { name: 'Tags', uid: 'tags' }, @@ -50,6 +50,8 @@ export default function ResultsTable({ onSelect, onDeleted, selected }: Readonly const [project, setProject] = useState(defaultProjectName); const [selectedTags, setSelectedTags] = useState([]); const [search, setSearch] = useState(''); + const [dateFrom, setDateFrom] = useState(''); + const [dateTo, setDateTo] = useState(''); const [page, setPage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(10); @@ -59,6 +61,8 @@ export default function ResultsTable({ onSelect, onDeleted, selected }: Readonly project, ...(selectedTags.length > 0 && { tags: selectedTags.join(',') }), ...(search.trim() && { search: search.trim() }), + ...(dateFrom && { dateFrom }), + ...(dateTo && { dateTo }), }); const { @@ -68,7 +72,7 @@ export default function ResultsTable({ onSelect, onDeleted, selected }: Readonly error, refetch, } = useQuery(withQueryParams(resultListEndpoint, getQueryParams()), { - dependencies: [project, selectedTags, search, rowsPerPage, page], + dependencies: [project, selectedTags, search, dateFrom, dateTo, rowsPerPage, page], placeholderData: keepPreviousData, }); @@ -104,6 +108,16 @@ export default function ResultsTable({ onSelect, onDeleted, selected }: Readonly setPage(1); }, []); + const onDateFromChange = useCallback((date: string) => { + setDateFrom(date); + setPage(1); + }, []); + + const onDateToChange = useCallback((date: string) => { + setDateTo(date); + setPage(1); + }, []); + const pages = useMemo(() => { return total ? Math.ceil(total / rowsPerPage) : 0; }, [project, total, rowsPerPage]); @@ -130,12 +144,16 @@ export default function ResultsTable({ onSelect, onDeleted, selected }: Readonly return ( <> void; onSearchChange?: (search: string) => void; onTagsChange?: (tags: string[]) => void; + onDateFromChange?: (date: string) => void; + onDateToChange?: (date: string) => void; + dateFrom?: string; + dateTo?: string; rowPerPageOptions?: number[]; entity: 'report' | 'result'; } @@ -29,6 +34,10 @@ export default function TablePaginationOptions({ onProjectChange, onSearchChange, onTagsChange, + onDateFromChange, + onDateToChange, + dateFrom, + dateTo, }: TablePaginationRowProps) { const rowPerPageItems = rowPerPageOptions ?? defaultRowPerPageOptions; @@ -55,6 +64,14 @@ export default function TablePaginationOptions({ /> {entity === 'result' && } + {(onDateFromChange || onDateToChange) && ( + + )}