feat: stub-out the initial ui for accepting driver signatures

src/components/ui/icons.tsx

@@ -52,6 +52,7 @@ import {
   SearchIcon,
   SettingsIcon,
   SheetIcon,
+  SignatureIcon,
   SortAscIcon,
   SortDescIcon,
   SunIcon,
@@ -115,6 +116,7 @@ export const icons = {
   Clear: BanIcon,
   Copy: CopyIcon,
   DollarSign: DollarSignIcon,
+  Signature: SignatureIcon,
   FileSignature: FileSignatureIcon,
   Files: FilesIcon,
   Folder: FolderIcon,

src/lib/config/features.ts

@@ -44,15 +44,25 @@ const incompleteApplicationSettingsTabsFeatureFlag: SwitchFeatureFlag = {
   input_type: "switch",
   default_value: false,
 } as const;
+const incompleteAgreementCustomerSignatureFeatureFlag: SwitchFeatureFlag = {
+  id: "incomplete_agreement.customer.signature",
+  name: "Accept digital signatures from the drivers",
+  description:
+    "Toggle this feature to enable the digital signature acceptance from the drivers.",
+  input_type: "switch",
+  default_value: false,
+} as const;
 // Features END
 
 const featureFlags: FeatureFlags = [
   incompleteSettingsNavigationFeatureFlag,
   incompleteApplicationSettingsTabsFeatureFlag,
+  incompleteAgreementCustomerSignatureFeatureFlag,
 ] as const;
 
 export {
   featureFlags, // the array of all the feature flags
   incompleteSettingsNavigationFeatureFlag,
   incompleteApplicationSettingsTabsFeatureFlag,
+  incompleteAgreementCustomerSignatureFeatureFlag,
 };

src/lib/schemas/agreement/agreementData.ts

@@ -64,6 +64,55 @@ export const AgreementMiscChargeItem = z.object({
   monthlyQuantity: z.preprocess((val) => (val === null ? 0 : val), z.number()),
 });
 
+const AgreementDataDriver = z.object({
+  driverId: z.number(),
+  agreementId: z.number().nullable(),
+  customerId: z.number().nullable(),
+  driverName: z.string().nullable(),
+  firstName: z.string().nullable(),
+  lastName: z.string().nullable(),
+  dateOfBirth: z.string().nullable(),
+  driverType: z.number(),
+  createdBy: z.coerce.string().nullable(),
+  licenseNumber: z.string().nullable(),
+  licenseCategory: z.string().nullable(),
+  licenseExpiryDate: z.string().nullable(),
+  email: z.string().nullable(),
+  licenseIssueDate: z.string().nullable(),
+  licenseIssueState: z.string().nullable(),
+  hPhone: z.string().nullable(),
+  bPhone: z.string().nullable(),
+  cPhone: z.string().nullable(),
+  address: z.string().nullable(),
+  city: z.string().nullable(),
+  stateId: z.number().nullable(),
+  zipCode: z.string().nullable(),
+  countryId: z.number().nullable(),
+  signatureName: z.string().nullable(),
+  signatureImageUrl: z.string().nullable(),
+  reservationId: z.number().nullable(),
+  insuranceCompany: z.string().nullable(),
+  checkForDelete: z.number().nullable(),
+  dateofBirth: z.string().nullable(),
+  dateofBirthStr: z.string().nullable(),
+  createdDate: z.string().nullable(),
+  updatedDate: z.string().nullable(),
+  updateBy: z.coerce.string().nullable(),
+  driverLicenseNumber: z.string().nullable(),
+  driverLicenseCategory: z.string().nullable(),
+  driverLicenseExpiryDate: z.string().nullable(),
+  isDelete: z.boolean(),
+  isFromCustomer: z.boolean(),
+  phone: z.string().nullable(),
+  signatureImageUrlString: z.string().nullable(),
+  startDate: z.string().nullable(),
+  endDate: z.string().nullable(),
+  referenceType: z.string().nullable(),
+  referenceId: z.coerce.string().nullable(),
+  countryName: z.string().nullable(),
+  signatureDate: z.string().nullable(),
+});
+
 export const AgreementDataSchema = z.object({
   agreementId: z.number(),
   agreementNumber: z.string().nullable(),
@@ -290,56 +339,7 @@ export const AgreementDataSchema = z.object({
     })
   ),
 
-  driverList: z.array(
-    z.object({
-      driverId: z.number(),
-      agreementId: z.number().nullable(),
-      customerId: z.number().nullable(),
-      driverName: z.string().nullable(),
-      firstName: z.string().nullable(),
-      lastName: z.string().nullable(),
-      dateOfBirth: z.string().nullable(),
-      driverType: z.number(),
-      createdBy: z.coerce.string().nullable(),
-      licenseNumber: z.string().nullable(),
-      licenseCategory: z.string().nullable(),
-      licenseExpiryDate: z.string().nullable(),
-      email: z.string().nullable(),
-      licenseIssueDate: z.string().nullable(),
-      licenseIssueState: z.string().nullable(),
-      hPhone: z.string().nullable(),
-      bPhone: z.string().nullable(),
-      cPhone: z.string().nullable(),
-      address: z.string().nullable(),
-      city: z.string().nullable(),
-      stateId: z.number().nullable(),
-      zipCode: z.string().nullable(),
-      countryId: z.number().nullable(),
-      signatureName: z.string().nullable(),
-      signatureImageUrl: z.string().nullable(),
-      reservationId: z.number().nullable(),
-      insuranceCompany: z.string().nullable(),
-      checkForDelete: z.number().nullable(),
-      dateofBirth: z.string().nullable(),
-      dateofBirthStr: z.string().nullable(),
-      createdDate: z.string().nullable(),
-      updatedDate: z.string().nullable(),
-      updateBy: z.coerce.string().nullable(),
-      driverLicenseNumber: z.string().nullable(),
-      driverLicenseCategory: z.string().nullable(),
-      driverLicenseExpiryDate: z.string().nullable(),
-      isDelete: z.boolean(),
-      isFromCustomer: z.boolean(),
-      phone: z.string().nullable(),
-      signatureImageUrlString: z.string().nullable(),
-      startDate: z.string().nullable(),
-      endDate: z.string().nullable(),
-      referenceType: z.string().nullable(),
-      referenceId: z.coerce.string().nullable(),
-      countryName: z.string().nullable(),
-      signatureDate: z.string().nullable(),
-    })
-  ),
+  driverList: z.array(AgreementDataDriver),
 
   customerEmail: z.string().nullable(),
 

src/routes/-components/auth/header/command-menu.tsx

@@ -365,7 +365,6 @@ export const CommandMenu = () => {
                       navigate({
                         to: "/agreements/$agreementId/summary",
                         params: { agreementId: item.referenceId },
-                        search: () => ({ tab: "summary" }),
                       })
                     );
                   }}

src/routes/_auth/(agreements)/-components/summary-signature-card.tsx

@@ -0,0 +1,91 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { icons } from "@/components/ui/icons";
+
+import type { AgreementDataParsed } from "@/lib/schemas/agreement";
+
+import { cn } from "@/lib/utils";
+
+export default function SummarySignatureCard(props: {
+  agreement: AgreementDataParsed;
+}) {
+  const agreementId = props.agreement.agreementId.toString();
+  const drivers = props.agreement.driverList;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between border-b px-5 py-4">
+        <CardTitle className="text-base font-medium sm:text-lg">
+          Driver {drivers.length > 1 ? "signatures" : "signature"}
+        </CardTitle>
+        <span>
+          <icons.Signature className="h-5 w-5" />
+        </span>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ul className="divide-y">
+          {drivers.map((d) => (
+            <Driver
+              key={`${agreementId}_${d.driverId || "no-driver-id"}`}
+              driver={d}
+              agreementId={agreementId}
+              isPrimary={d.customerId === props.agreement.customerId}
+            />
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}
+
+function Driver(props: {
+  driver: AgreementDataParsed["driverList"][number];
+  agreementId: string;
+  isPrimary: boolean;
+}) {
+  const isSigned = !!props.driver.signatureDate;
+
+  return (
+    <li className="flex flex-row items-center justify-between gap-4 p-5 xl:gap-2">
+      <div className="grid min-w-0 justify-start text-sm">
+        <p className="inline-flex items-center gap-1 truncate font-semibold leading-6 text-foreground">
+          {props.isPrimary ? (
+            <icons.User className="size-3" />
+          ) : (
+            <icons.Users className="size-3" />
+          )}
+          <span>{props.driver.driverName}</span>
+        </p>
+        <p className="mt-1 leading-5 text-muted-foreground">
+          <icons.Signature
+            className={cn(
+              "mr-1 inline size-3",
+              isSigned ? "text-green-500" : "text-destructive"
+            )}
+          />
+          {isSigned ? (
+            <>
+              <span className="hidden 2xl:inline">Signed on:</span>
+              <span>&nbsp;{props.driver.signatureDate ?? "..."}</span>
+            </>
+          ) : (
+            <span>Not signed</span>
+          )}
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" className="gap-1 bg-transparent">
+          <icons.Signature className="size-3" />
+          <span className="hidden text-xs xl:inline">
+            {isSigned ? "Redo" : "Sign"}
+          </span>
+        </Button>
+        {isSigned ? (
+          <Button variant="ghost" size="icon" className="h-9">
+            <icons.More className="size-3" />
+          </Button>
+        ) : null}
+      </div>
+    </li>
+  );
+}

src/routes/_auth/(agreements)/agreements.$agreementId._details.summary.tsx

@@ -1,28 +1,59 @@
 import * as React from "react";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
+import { useFeature } from "@/lib/hooks/useFeature";
+import { useLocalStorage } from "@/lib/hooks/useLocalStorage";
+
 import CustomerInformation from "@/routes/_auth/-modules/information-block/customer-information";
 import RentalInformation from "@/routes/_auth/-modules/information-block/rental-information";
 import VehicleInformation from "@/routes/_auth/-modules/information-block/vehicle-information";
 import { RentalSummary } from "@/routes/_auth/-modules/summary/rental-summary";
 import { Container } from "@/routes/-components/container";
 
+import { incompleteAgreementCustomerSignatureFeatureFlag } from "@/lib/config/features";
+
 export const Route = createFileRoute(
   "/_auth/(agreements)/agreements/$agreementId/_details/summary"
 )({
   component: Component,
+  validateSearch: z.object({
+    summary_tab: z.string().optional(),
+  }),
 });
+const SummarySignatureCard = React.lazy(
+  () => import("@/routes/_auth/(agreements)/-components/summary-signature-card")
+);
 
 function Component() {
+  const navigate = Route.useNavigate();
+
+  const currentTab = Route.useSearch({
+    select: (s) => {
+      if (s.summary_tab && ["vehicle", "rental"].includes(s.summary_tab)) {
+        return s.summary_tab;
+      }
+      return "vehicle";
+    },
+  });
   const { viewAgreementOptions, viewAgreementSummaryOptions } =
     Route.useRouteContext();
 
   const canViewCustomerInformation = true;
   const canViewRentalInformation = true;
 
+  const [_, canViewDigitalSignaturePad] = useFeature(
+    "DIGITAL_SIGNATURE_PAD",
+    null
+  );
+  const [showIncompleteAgreementSignature] = useLocalStorage(
+    incompleteAgreementCustomerSignatureFeatureFlag.id,
+    incompleteAgreementCustomerSignatureFeatureFlag.default_value
+  );
+
   const agreementQuery = useSuspenseQuery(viewAgreementOptions);
   const agreement =
     agreementQuery.data?.status === 200 ? agreementQuery.data.body : null;
@@ -32,8 +63,6 @@ function Component() {
   const summaryData =
     summaryQuery.data?.status === 200 ? summaryQuery.data?.body : undefined;
 
-  const [currentTab, setCurrentTab] = React.useState("vehicle");
-
   const tabsConfig = React.useMemo(() => {
     const tabs: { id: string; label: string; component: React.ReactNode }[] =
       [];
@@ -109,6 +138,13 @@ function Component() {
     isCheckedIn,
   ]);
 
+  const setCurrentTab = (name: string) => {
+    navigate({
+      search: (s) => ({ ...s, summary_tab: name }),
+      resetScroll: false,
+    });
+  };
+
   return (
     <Container as="div">
       <div className="mb-6 grid max-w-full grid-cols-1 gap-4 px-2 sm:px-4 lg:grid-cols-12">
@@ -139,28 +175,40 @@ function Component() {
             />
           )}
 
-          <Tabs value={currentTab} onValueChange={setCurrentTab}>
-            <TabsList className="w-full sm:max-w-max">
+          {tabsConfig.length >= 1 ? (
+            <Tabs value={currentTab} onValueChange={setCurrentTab}>
+              <TabsList className="w-full sm:max-w-max">
+                {tabsConfig.map((tab, idx) => (
+                  <TabsTrigger
+                    key={`tab-summary-trigger-${idx}`}
+                    value={tab.id}
+                  >
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
               {tabsConfig.map((tab, idx) => (
-                <TabsTrigger key={`tab-summary-trigger-${idx}`} value={tab.id}>
-                  {tab.label}
-                </TabsTrigger>
+                <TabsContent
+                  key={`tab-summary-content-${idx}`}
+                  value={tab.id}
+                  className="min-h-[180px]"
+                >
+                  {tab.component}
+                </TabsContent>
               ))}
-            </TabsList>
-            {tabsConfig.map((tab, idx) => (
-              <TabsContent
-                key={`tab-summary-content-${idx}`}
-                value={tab.id}
-                className="min-h-[180px]"
-              >
-                {tab.component}
-              </TabsContent>
-            ))}
-          </Tabs>
+            </Tabs>
+          ) : null}
         </div>
 
         <div className="flex flex-col gap-4 lg:col-span-4">
           <RentalSummary module="agreements" summaryData={summaryData} />
+          <React.Suspense fallback={null}>
+            {showIncompleteAgreementSignature &&
+            canViewDigitalSignaturePad &&
+            agreement ? (
+              <SummarySignatureCard agreement={agreement} />
+            ) : null}
+          </React.Suspense>
         </div>
       </div>
     </Container>