101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { useSearchParams } from "next/navigation"
|
|
import { Loader2 } from "lucide-react"
|
|
import { useDashboardData } from "./use-dashboard-data"
|
|
import { FinancialTotalsCards } from "./financial-totals-cards"
|
|
import { IncomeExpenseChart } from "./income-expense-chart"
|
|
import { FinancialSummaryChart } from "./financial-summary-chart"
|
|
import { WorkOrdersStatusCard } from "./work-orders-status-card"
|
|
import { AppointmentsSummaryCard } from "./appointments-summary-card"
|
|
import { UpcomingAppointmentsCard } from "./upcoming-appointments-card"
|
|
import { ItemsTotalsCard } from "./items-totals-card"
|
|
import { CustomersTotalsCard } from "./customers-totals-card"
|
|
import { SalesPurchaseCards } from "./sales-purchase-cards"
|
|
import { VehicleStatsCards } from "./vehicle-stats-cards"
|
|
import { DashboardPeriods, type DashboardPeriod, type HomeDashboardQuery } from "@garage/api"
|
|
|
|
const DEFAULT_PERIOD: DashboardPeriod = "this_month"
|
|
|
|
function isDashboardPeriod(value: string | null): value is DashboardPeriod {
|
|
return Boolean(value && (DashboardPeriods as readonly string[]).includes(value))
|
|
}
|
|
|
|
export function DashboardContent() {
|
|
const searchParams = useSearchParams()
|
|
const filters = useMemo<HomeDashboardQuery>(() => {
|
|
const periodValue = searchParams.get("period")
|
|
const period = isDashboardPeriod(periodValue) ? periodValue : DEFAULT_PERIOD
|
|
|
|
const nextFilters: HomeDashboardQuery = { period }
|
|
|
|
if (period === "custom") {
|
|
const startDate = searchParams.get("start_date")
|
|
const endDate = searchParams.get("end_date")
|
|
|
|
if (startDate) {
|
|
nextFilters.start_date = startDate
|
|
}
|
|
if (endDate) {
|
|
nextFilters.end_date = endDate
|
|
}
|
|
}
|
|
|
|
return nextFilters
|
|
}, [searchParams])
|
|
|
|
const { data, isLoading, isError, error } = useDashboardData(filters)
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-24">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
|
|
<p className="text-lg font-medium">Failed to load dashboard</p>
|
|
<p className="text-sm">{error?.message ?? "An unexpected error occurred"}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Financial Overview */}
|
|
<FinancialTotalsCards data={data} />
|
|
|
|
{/* Charts Row */}
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<IncomeExpenseChart data={data} />
|
|
<FinancialSummaryChart data={data} />
|
|
</div>
|
|
|
|
{/* Work Orders + Appointments */}
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<WorkOrdersStatusCard data={data} />
|
|
<AppointmentsSummaryCard data={data} />
|
|
</div>
|
|
|
|
{/* Upcoming Appointments */}
|
|
<UpcomingAppointmentsCard data={data} />
|
|
|
|
{/* Sales & Purchase Documents */}
|
|
<SalesPurchaseCards data={data} />
|
|
|
|
{/* Quick Stats Row */}
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<ItemsTotalsCard data={data} />
|
|
<CustomersTotalsCard data={data} />
|
|
</div>
|
|
|
|
{/* Vehicle Statistics */}
|
|
<VehicleStatsCards data={data} />
|
|
</div>
|
|
)
|
|
}
|