humam kerdiah
4f0a2f790f
feat: integrate dialog close context in vendor select field and CRUD dialog components feat: enhance vendor general info to format status using utility function feat: implement form dialog context for managing dialog close actions feat: add async select field dialog close context for better form handling fix: update form mutation hook to close dialog on successful submission feat: extend document print types to include expense and credit note feat: add settings update payload type to include logo and other fields feat: create employee attendance and work history pages with resource management feat: implement payment made and received detail pages with actions feat: add quick shortcuts component for easy navigation in the dashboard feat: create actions for payment made and received with print and delete options feat: implement dialog close context for better dialog management feat: add error parsing utility for improved error handling in API responses
105 lines
3.7 KiB
TypeScript
105 lines
3.7 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 { QuickShortcuts } from "./quick-shortcuts"
|
|
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">
|
|
{/* Quick Shortcuts */}
|
|
<QuickShortcuts />
|
|
|
|
{/* 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>
|
|
)
|
|
}
|