frontend fully integreated with the backend

2026-08-25 23:47:33 +05:30
parent 1bee5f91c6
commit 83d3272784
151 changed files with 10724 additions and 573 deletions
@@ -0,0 +1,221 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useForm, zodResolver, z } from '@/lib/form'
+import { FormField } from '@/components/shared/form-field'
+import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { FieldGroup } from '@/components/ui/field'
+import { toast } from '@/components/ui/toast'
+import { drivers as driversApi, users as usersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { DriverProfileResponse, UserResponse } from '@/types/api'
+
+const schema = z.object({
+  userId: z.string().min(1, 'User is required'),
+  licenseNumber: z.string().min(1, 'License number is required'),
+  licenseExpiry: z.string().min(1, 'License expiry is required'),
+  medicalClearanceExpiry: z.string().min(1, 'Medical clearance expiry is required'),
+  isActive: z.boolean(),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface DriverSheetProps {
+  open: boolean
+  onClose: () => void
+  driver: DriverProfileResponse | null
+  onSuccess: () => void
+}
+
+export function DriverSheet({ open, onClose, driver, onSuccess }: DriverSheetProps) {
+  const isEdit = !!driver
+  const [usersList, setUsersList] = useState<UserResponse[]>([])
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      userId: '',
+      licenseNumber: '',
+      licenseExpiry: '',
+      medicalClearanceExpiry: '',
+      isActive: true,
+    },
+  })
+
+  useEffect(() => {
+    if (open) {
+      usersApi.list({ pageSize: 100 }).then((res) => setUsersList(getPaginatedItems(res))).catch((err) =>
+        toast.add({ title: 'Failed to load users', description: getApiError(err), type: 'error' })
+      )
+
+      form.reset(
+        driver
+          ? {
+              userId: driver.userId,
+              licenseNumber: driver.licenseNumber,
+              licenseExpiry: driver.licenseExpiry.split('T')[0],
+              medicalClearanceExpiry: driver.medicalClearanceExpiry.split('T')[0],
+              isActive: driver.isActive,
+            }
+          : {
+              userId: '',
+              licenseNumber: '',
+              licenseExpiry: '',
+              medicalClearanceExpiry: '',
+              isActive: true,
+            }
+      )
+    }
+  }, [open, driver])
+
+  async function onSubmit(values: FormValues) {
+    try {
+      if (isEdit) {
+        await driversApi.update(driver!.id, values)
+        toast.add({ title: 'Driver updated', type: 'success' })
+      } else {
+        await driversApi.create(values)
+        toast.add({ title: 'Driver created', type: 'success' })
+      }
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to save', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? 'Edit Driver' : 'Add Driver'}</DialogTitle>
+          <DialogDescription>
+            {isEdit ? 'Update the driver profile below.' : 'Add a new driver profile to the system.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+          <FieldGroup>
+            <FormField
+              control={form.control}
+              name="userId"
+              label="User"
+              required
+              render={({ field }) => (
+                <Select value={field.value as string} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a user" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {usersList.map((u) => (
+                      <SelectItem key={u.id} value={u.id}>
+                        {u.fullName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="licenseNumber"
+              label="License Number"
+              required
+              render={({ field, invalid }) => (
+                <Input
+                  id="licenseNumber"
+                  name={field.name}
+                  ref={field.ref}
+                  value={field.value as string}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  placeholder="e.g. B1234567"
+                  aria-invalid={invalid}
+                />
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="licenseExpiry"
+              label="License Expiry"
+              required
+              render={({ field }) => (
+                <Input
+                  type="date"
+                  id="licenseExpiry"
+                  name={field.name}
+                  ref={field.ref}
+                  value={field.value as string}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="medicalClearanceExpiry"
+              label="Medical Clearance Expiry"
+              required
+              render={({ field }) => (
+                <Input
+                  type="date"
+                  id="medicalClearanceExpiry"
+                  name={field.name}
+                  ref={field.ref}
+                  value={field.value as string}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="isActive"
+              render={({ field }) => (
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="isActive"
+                    checked={field.value as boolean}
+                    onCheckedChange={field.onChange}
+                  />
+                  <label htmlFor="isActive" className="text-sm font-medium cursor-pointer">
+                    Active
+                  </label>
+                </div>
+              )}
+            />
+          </FieldGroup>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting ? 'Saving…' : isEdit ? 'Save Changes' : 'Create Driver'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -0,0 +1,177 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { Add01Icon } from '@hugeicons/core-free-icons'
+
+import { DataTable } from '@/components/shared/data-table'
+import type { TableConfig } from '@/components/shared/data-table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/toast'
+import { drivers as driversApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { DriverProfileResponse } from '@/types/api'
+
+import { DriverSheet } from './driver-sheet'
+
+export function DriversClient() {
+  const [data, setData] = useState<DriverProfileResponse[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [editing, setEditing] = useState<DriverProfileResponse | null>(null)
+
+  const fetchData = useCallback(async (p: number, ps: number) => {
+    setLoading(true)
+    try {
+      const res = await driversApi.list({ page: p, pageSize: ps })
+      setData(getPaginatedItems(res))
+      setTotal(res.total)
+    } catch (err) {
+      toast.add({ title: 'Failed to load drivers', description: getApiError(err), type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData(page, pageSize)
+  }, [fetchData, page, pageSize])
+
+  function openCreate() {
+    setEditing(null)
+    setSheetOpen(true)
+  }
+
+  function openEdit(driver: DriverProfileResponse) {
+    setEditing(driver)
+    setSheetOpen(true)
+  }
+
+  async function toggleActive(driver: DriverProfileResponse) {
+    try {
+      await driversApi.update(driver.id, { isActive: !driver.isActive })
+      toast.add({
+        title: driver.isActive ? 'Driver deactivated' : 'Driver activated',
+        type: 'success',
+      })
+      fetchData(page, pageSize)
+    } catch (err) {
+      toast.add({ title: 'Failed to update driver', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  const tableConfig = useMemo<TableConfig<DriverProfileResponse>>(() => ({
+    rowKey: 'id',
+    serverSide: true,
+    stickyHeader: true,
+    emptyMessage: 'No driver profiles yet. Add one to get started.',
+    pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
+    columns: [
+      {
+        key: 'userFullName',
+        title: 'Driver',
+        fields: [{ key: 'userFullName', primary: true }],
+        minWidth: 180,
+      },
+      {
+        key: 'licenseNumber',
+        title: 'License No.',
+        fields: [{ key: 'licenseNumber' }],
+        minWidth: 140,
+      },
+      {
+        key: 'licenseExpiry',
+        title: 'License Expiry',
+        fields: [{
+          key: 'licenseExpiry',
+          transform: (v) => new Date(v as string).toLocaleDateString('en-GB', {
+            day: '2-digit', month: 'short', year: 'numeric',
+          }),
+        }],
+        width: 150,
+      },
+      {
+        key: 'medicalClearanceExpiry',
+        title: 'Medical Expiry',
+        fields: [{
+          key: 'medicalClearanceExpiry',
+          transform: (v) => new Date(v as string).toLocaleDateString('en-GB', {
+            day: '2-digit', month: 'short', year: 'numeric',
+          }),
+        }],
+        width: 150,
+      },
+      {
+        key: 'status',
+        title: 'Status',
+        fields: ['isActive'],
+        width: 120,
+        cellRender: (row) => (
+          <Badge variant={row.isActive ? 'default' : 'secondary'}>
+            {row.isActive ? 'Active' : 'Inactive'}
+          </Badge>
+        ),
+      },
+    ],
+    rowActions: {
+      actions: () => [
+        {
+          action: 'edit',
+          label: 'Edit driver',
+          onClick: openEdit,
+        },
+        {
+          action: 'deactivate',
+          label: 'Deactivate driver',
+          onClick: toggleActive,
+          visible: (target) => target.isActive,
+        },
+        {
+          action: 'activate',
+          label: 'Activate driver',
+          onClick: toggleActive,
+          visible: (target) => !target.isActive,
+        },
+      ],
+    },
+  }), [pageSize, openEdit, toggleActive])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Driver Profiles</h1>
+          <p className="text-sm text-muted-foreground mt-0.5">
+            Driver records including license and medical clearance dates
+          </p>
+        </div>
+        <Button onClick={openCreate}>
+          <HugeiconsIcon icon={Add01Icon} size={16} />
+          Add Driver
+        </Button>
+      </div>
+
+      <DataTable
+        config={tableConfig}
+        data={data}
+        loading={loading}
+        totalCount={total}
+        onServerSideChange={({ page: p }) => {
+          setPage(p.page)
+          setPageSize(p.pageSize)
+        }}
+      />
+
+      <DriverSheet
+        open={sheetOpen}
+        onClose={() => setSheetOpen(false)}
+        driver={editing}
+        onSuccess={() => fetchData(page, pageSize)}
+      />
+    </>
+  )
+}
@@ -0,0 +1,73 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useForm, zodResolver, z } from '@/lib/form'
+import { FormField } from '@/components/shared/form-field'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Button } from '@/components/ui/button'
+import { FieldGroup } from '@/components/ui/field'
+import { toast } from '@/components/ui/toast'
+import { compliance as complianceApi, getApiError } from '@/lib/api/index'
+
+const schema = z.object({
+  enforceLicenseExpiry: z.boolean(),
+  enforceMedicalClearance: z.boolean(),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export default function CompliancePage() {
+  const [loading, setLoading] = useState(true)
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { enforceLicenseExpiry: false, enforceMedicalClearance: false },
+  })
+
+  useEffect(() => {
+    complianceApi.get().then(cfg => {
+      form.reset({ enforceLicenseExpiry: cfg.enforceLicenseExpiry, enforceMedicalClearance: cfg.enforceMedicalClearance })
+    }).catch(err => toast.add({ title: 'Failed to load config', description: getApiError(err), type: 'error' }))
+      .finally(() => setLoading(false))
+  }, [])
+
+  async function onSubmit(values: FormValues) {
+    try {
+      await complianceApi.update(values)
+      toast.add({ title: 'Compliance config saved', type: 'success' })
+    } catch (err) {
+      toast.add({ title: 'Failed to save', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6 max-w-lg">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground">Compliance</h1>
+        <p className="text-sm text-muted-foreground mt-0.5">Rules that enforce license and medical clearance before a ride starts</p>
+      </div>
+      {loading ? <p className="text-muted-foreground text-sm">Loading...</p> : (
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+          <FieldGroup>
+            <FormField control={form.control} name="enforceLicenseExpiry"
+              render={({ field }) => (
+                <div className="flex items-center gap-2">
+                  <Checkbox id="enforceLicenseExpiry" checked={field.value as boolean} onCheckedChange={field.onChange} />
+                  <label htmlFor="enforceLicenseExpiry" className="text-sm font-medium cursor-pointer">Enforce license expiry check</label>
+                </div>
+              )} />
+            <FormField control={form.control} name="enforceMedicalClearance"
+              render={({ field }) => (
+                <div className="flex items-center gap-2">
+                  <Checkbox id="enforceMedicalClearance" checked={field.value as boolean} onCheckedChange={field.onChange} />
+                  <label htmlFor="enforceMedicalClearance" className="text-sm font-medium cursor-pointer">Enforce medical clearance check</label>
+                </div>
+              )} />
+          </FieldGroup>
+          <div>
+            <Button type="submit" disabled={form.formState.isSubmitting}>{form.formState.isSubmitting ? 'Saving…' : 'Save Changes'}</Button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,5 @@
+import { DriversClient } from './_components/drivers-client'
+
+export default function DriversPage() {
+  return <DriversClient />
+}