import AppLayout from '@/layouts/app-layout'; import { Head, router } from '@inertiajs/react'; import { Card, CardContent, CardHeader } from '@/components/ui/card'; import { buttonVariants } from '@/components/ui/button'; import React, { useEffect, useState } from 'react'; interface UserReportRow { id: number; name: string; email: string; residency_program: string | null; total_points: number; unique_questions_total: number; unique_questions_app: number; unique_questions_web: number; questions_total: number; questions_app: number; questions_web: number; usage_days_total: number; usage_days_app: number; usage_days_web: number; minutes_total: number; minutes_app: number; minutes_web: number; days_email_notifications_on: number; days_app_notifications_on: number; days_daily_quest: number; days_weekly_quest: number; } interface PaginatedUsers { data: UserReportRow[]; current_page: number; last_page: number; per_page: number; total: number; } interface Filters { search: string; } interface Props { users: PaginatedUsers; filters: Filters; } export default function Index({ users, filters }: Props) { const [fromDate, setFromDate] = useState(''); const [toDate, setToDate] = useState(''); const [searchInput, setSearchInput] = useState(filters.search ?? ''); const debounceTimerRef = React.useRef(null); useEffect(() => { setSearchInput(filters.search ?? ''); }, [filters.search]); const runExport = () => { const params: Record = {}; if (fromDate) params.from = fromDate; if (toDate) params.to = toDate; if (filters.search) params.search = filters.search; const exportUrl = route('user.exportCsv', params); window.location.href = exportUrl; }; const navigate = (params: Record) => { router.get(window.location.pathname, params, { preserveState: true, replace: true }); }; const currentParams = () => Object.fromEntries(new URLSearchParams(window.location.search).entries()); const onPageChange = (page: number) => navigate({ ...currentParams(), page }); const onPerPageChange = (perPage: number) => navigate({ ...currentParams(), page: 1, per_page: perPage }); const onSearchChange = (searchVal: string) => { const params = currentParams(); if (searchVal) { params.search = searchVal; } else { delete params.search; } navigate({ ...params, page: 1 }); }; const totalPages = Math.max(1, Math.ceil(users.total / users.per_page)); const startItem = (users.current_page - 1) * users.per_page + 1; const endItem = Math.min(startItem + users.data.length - 1, users.total); const formatMinutes = (val: number | null) => (val !== null && val !== undefined ? Number(val).toFixed(2) : '—'); const formatVal = (val: any) => (val === null || val === undefined || val === '' ? '—' : val); return (

User Report

{/* */}
setFromDate(e.target.value)} className="h-9 rounded-md border px-3 text-sm" />
setToDate(e.target.value)} className="h-9 rounded-md border px-3 text-sm" />
{/* Controls */}
{ const value = e.target.value; setSearchInput(value); if (debounceTimerRef.current) { clearTimeout(debounceTimerRef.current); } debounceTimerRef.current = setTimeout(() => { onSearchChange(value); }, 500); }} className="border px-3 py-1 rounded w-full dark:text-white sm:w-auto" />
Showing {users.data.length > 0 ? `${startItem} to ${endItem}` : '0'} of {users.total} entries
{/* Table with grouped headers */}
{/* Group header row */} {/* Sub-header row for grouped columns */} {/* Unique Q Completed */} {/* Q Completed Incl Repeats */} {/* Unique Usage Days */} {/* Time Spent Minutes */} {users.data.length === 0 ? ( ) : ( users.data.map((row, rowIndex) => ( {/* Unique Q Completed */} {/* Q Completed Incl Repeats */} {/* Unique Usage Days */} {/* Time Spent Minutes */} )) )}
Name Email Residency Program Total Points Unique Q Completed Q Completed With Repeats Unique Usage Days Time Spent (Minutes) Days Email Notif. On Days App Notif. On Days Daily Quest Days Weekly Quest
Total Web AppTotal Web AppTotal Web AppTotal Web App
No data found.
{formatVal(row.name)} {formatVal(row.email)} {formatVal(row.residency_program)} {formatVal(row.total_points)}{formatVal(row.unique_questions_total)} {formatVal(row.unique_questions_web)} {formatVal(row.unique_questions_app)}{formatVal(row.questions_total)} {formatVal(row.questions_web)} {formatVal(row.questions_app)}{formatVal(row.usage_days_total)} {formatVal(row.usage_days_web)} {formatVal(row.usage_days_app)}{formatMinutes(row.minutes_total)} {formatMinutes(row.minutes_web)} {formatMinutes(row.minutes_app)} {formatVal(row.days_email_notifications_on)} {formatVal(row.days_app_notifications_on)} {formatVal(row.days_daily_quest)} {formatVal(row.days_weekly_quest)}
{/* Pagination */}
{Array.from({ length: totalPages }, (_, i) => i + 1) .filter((page) => { return ( page === 1 || page === totalPages || (page >= users.current_page - 1 && page <= users.current_page + 1) ); }) .reduce((acc, page, i, arr) => { if (i > 0 && page - arr[i - 1] > 1) { acc.push(-1); } acc.push(page); return acc; }, []) .map((page, i) => page === -1 ? ( ... ) : ( ) )}
); }