emoss08 · repo-ranger · Dec 20, 2023 · Dec 20, 2023 · Dec 20, 2023 · Dec 20, 2023
diff --git a/client/src/components/charge-types/charge-type-edit-dialog.tsx b/client/src/components/charge-types/charge-type-edit-dialog.tsx
@@ -19,7 +19,10 @@ import { useCustomMutation } from "@/hooks/useCustomMutation";
 import { formatDate } from "@/lib/date";
 import { chargeTypeSchema } from "@/lib/validations/BillingSchema";
 import { useTableStore } from "@/stores/TableStore";
-import { ChargeTypeFormValues as FormValues } from "@/types/billing";
+import {
+  ChargeType,
+  ChargeTypeFormValues as FormValues,
+} from "@/types/billing";
 import { TableSheetProps } from "@/types/tables";
 import { yupResolver } from "@hookform/resolvers/yup";
 import React from "react";
@@ -35,11 +38,7 @@ import {
 } from "../ui/dialog";
 import { ChargeTypeForm } from "./charge-type-dialog";
 
-function ChargeTypeEditForm({
-  chargeType,
-}: {
-  chargeType: Record<string, any>;
-}) {
+function ChargeTypeEditForm({ chargeType }: { chargeType: ChargeType }) {
   const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false);
   const { control, reset, handleSubmit } = useForm<FormValues>({
     resolver: yupResolver(chargeTypeSchema),

diff --git a/client/src/components/common/fields/async-select-input.tsx b/client/src/components/common/fields/async-select-input.tsx
@@ -29,7 +29,7 @@ import {
   ValueProcessor,
 } from "@/components/common/fields/select-components";
 import { cn } from "@/lib/utils";
-import { UseControllerProps, useController } from "react-hook-form";
+import { useController, UseControllerProps } from "react-hook-form";
 import { GroupBase, OptionsOrGroups, Props } from "react-select";
 import AsyncSelect from "react-select/async";
 
@@ -49,6 +49,9 @@ interface AsyncSelectInputProps<T extends Record<string, unknown>>
   options: OptionsOrGroups<SelectOption, GroupBase<SelectOption>>;
   hasContextMenu?: boolean;
   isFetchError?: boolean;
+  hasPopoutWindow?: boolean;
+  popoutLink?: string;
+  popoutLinkLabel?: string;
 }
 
 /**
@@ -111,7 +114,6 @@ export function AsyncSelectInput<T extends Record<string, unknown>>(
       )}
       <div className="relative">
         <AsyncSelect
-          label={label}
           aria-invalid={errorOccurred}
           aria-labelledby={controllerProps.id}
           inputId={controllerProps.id}
@@ -121,6 +123,7 @@ export function AsyncSelectInput<T extends Record<string, unknown>>(
           defaultOptions={options}
           hasPopoutWindow={hasPopoutWindow}
           popoutLink={popoutLink}
+          popoutLinkLabel={props.popoutLinkLabel}
           cacheOptions
           noOptionsMessage={() => "No options available..."}
           loadOptions={loadOptions}

diff --git a/client/src/components/common/fields/select-components.tsx b/client/src/components/common/fields/select-components.tsx
@@ -176,7 +176,7 @@ export function MenuList({
                 return (
                   <React.Fragment key={index}>
                     <AddNewButton
-                      label={props.selectProps?.label as string}
+                      label={props.selectProps?.popoutLinkLabel as string}
                       popoutLink={props.selectProps.popoutLink as string}
                     />
                     {child}
@@ -200,7 +200,6 @@ export function NoOptionsMessage({
     formError?: string;
     popoutLink?: string;
     hasPopoutWindow?: boolean;
-    label: string;
   };
 }) {
   const { popoutLink, hasPopoutWindow } = props.selectProps || {};
@@ -215,7 +214,7 @@ export function NoOptionsMessage({
         </p>
         {popoutLink && hasPopoutWindow && (
           <AddNewButton
-            label={props.selectProps?.label as string}
+            label={props.selectProps?.popoutLinkLabel as string}
             popoutLink={props.selectProps.popoutLink as string}
           />
         )}

diff --git a/client/src/components/common/fields/select-input.tsx b/client/src/components/common/fields/select-input.tsx
@@ -53,6 +53,7 @@ interface SelectInputProps<T extends Record<string, unknown>>
   isFetchError?: boolean;
   hasPopoutWindow?: boolean; // Set to true to open the popout window
   popoutLink?: string; // Link to the popout page
+  popoutLinkLabel?: string; // Label for the popout link
 }
 
 /**
@@ -80,6 +81,7 @@ export function SelectInput<T extends Record<string, unknown>>(
     hideSelectedOptions = false,
     hasPopoutWindow = false,
     popoutLink,
+    popoutLinkLabel,
     ...controllerProps
   } = props;
 
@@ -108,7 +110,7 @@ export function SelectInput<T extends Record<string, unknown>>(
           inputId={controllerProps.id}
           closeMenuOnSelect={!isMulti}
           hideSelectedOptions={hideSelectedOptions}
-          label={label}
+          popoutLinkLabel={popoutLinkLabel}
           options={options}
           isMulti={isMulti}
           isLoading={isLoading}
@@ -269,7 +271,6 @@ export function CreatableSelectField<T extends Record<string, unknown>, K>(
       )}
       <div className="relative">
         <CreatableSelect
-          label={label}
           unstyled
           aria-invalid={fieldState.invalid || isFetchError}
           isMulti={isMulti}

diff --git a/client/src/components/common/table/data-table-header.tsx b/client/src/components/common/table/data-table-header.tsx
@@ -81,7 +81,8 @@ const ButtonConfig: React.FC<{
   selectedRowCount: number;
   name: string;
   store: StoreType<TableStoreProps>;
-}> = React.memo(({ selectedRowCount, name, store }) => {
+  isDisabled?: boolean;
+}> = React.memo(({ selectedRowCount, name, store, isDisabled }) => {
   const buttonLabel =
     selectedRowCount > 0
       ? `Inactivate ${selectedRowCount} records`
@@ -93,6 +94,7 @@ const ButtonConfig: React.FC<{
       variant={buttonVariant}
       onClick={() => store.set("sheetOpen", true)}
       className="h-8"
+      disabled={isDisabled}
     >
       <PlusIcon className="mr-2 h-4 w-4" /> {buttonLabel}
     </Button>
@@ -168,13 +170,12 @@ export function DataTableTopBar<K>({
       <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 mt-2 sm:mt-0">
         <DataTableViewOptions table={table} />
         <DataTableImportExportOption />
-        {userHasPermission(addPermissionName) && (
-          <ButtonConfig
-            selectedRowCount={selectedRowCount}
-            name={name}
-            store={store}
-          />
-        )}
+        <ButtonConfig
+          selectedRowCount={selectedRowCount}
+          name={name}
+          store={store}
+          isDisabled={!userHasPermission(addPermissionName)}
+        />
       </div>
     </div>
   );

diff --git a/client/src/components/customer/customer-info-form.tsx b/client/src/components/customer/customer-info-form.tsx
@@ -177,6 +177,9 @@ export function CustomerInfoForm({
               isLoading={isUsersLoading}
               placeholder="Select Customer Advocate"
               description="Assign a customer advocate from your team."
+              hasPopoutWindow
+              popoutLink="#" // TODO: Change once User Management is added.
+              popoutLinkLabel="User"
             />
           </div>
         </div>

diff --git a/client/src/components/customer/customer-rule-profile-form.tsx b/client/src/components/customer/customer-rule-profile-form.tsx
@@ -66,6 +66,9 @@ export function CustomerRuleProfileForm({
               isLoading={isDocumentClassLoading}
               placeholder="Select Document Classification"
               description="Select the state or region for the customer."
+              hasPopoutWindow
+              popoutLink="#" // TODO: Change once Document Classification is added.
+              popoutLinkLabel="Document Classification"
             />
           </div>
         </div>

diff --git a/client/src/components/customer/customer-table-sub.tsx b/client/src/components/customer/customer-table-sub.tsx
@@ -15,7 +15,10 @@
  * Grant, and not modifying the license in any other way.
  */
 
-import { Button } from "@/components/ui/button";
+import {
+  BoolStatusBadge,
+  DataNotFound,
+} from "@/components/common/table/data-table-components";
 import {
   Table,
   TableBody,
@@ -24,17 +27,19 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { truncateText } from "@/lib/utils";
+import { cn, truncateText } from "@/lib/utils";
 import { useCustomerFormStore } from "@/stores/CustomerStore";
 import { useTableStore } from "@/stores/TableStore";
 import { Customer } from "@/types/customer";
+import { CircleBackslashIcon, PersonIcon } from "@radix-ui/react-icons";
 import { Row } from "@tanstack/react-table";
 import React from "react";
 import {
-  BoolStatusBadge,
-  DataNotFound,
-} from "@/components/common/table/data-table-components";
-import { CircleBackslashIcon, PersonIcon } from "@radix-ui/react-icons";
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
 
 const daysOfWeek = [
   "Monday", // 0
@@ -62,6 +67,9 @@ function CustomerContactTable({
       <h2 className="scroll-m-20 pb-2 pl-3 text-2xl font-semibold tracking-tight">
         Customer Contacts
       </h2>
+      <div className="border-l-4 border-red-500 text-red-500 pl-2 ml-3">
+        Payable Contact
+      </div>
       <Table className="flex flex-col overflow-hidden">
         <TableHeader>
           <TableRow>
@@ -70,7 +78,6 @@ function CustomerContactTable({
             <TableHead className="w-3/12">Email</TableHead>
             <TableHead className="w-2/12">Title</TableHead>
             <TableHead className="w-2/12">Phone</TableHead>
-            <TableHead className="w-2/12">Payable Contact?</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -85,15 +92,30 @@ function CustomerContactTable({
                   <TableCell className="w-1/12">
                     <BoolStatusBadge status={contact.isActive} />
                   </TableCell>
-                  <TableCell className="w-2/12">
-                    {truncateText(contact.name, 20)}
+                  <TableCell
+                    className={cn(
+                      "w-2/12",
+                      contact.isPayableContact && "text-red-500  font-semibold",
+                    )}
+                  >
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          {truncateText(contact.name, 20)}
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {contact.isPayableContact
+                            ? "This is the payable contact"
+                            : "This is not the payable contact"}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                   </TableCell>
                   <TableCell className="w-3/12">{contact.email}</TableCell>
-                  <TableCell className="w-2/12">{contact.title}</TableCell>
-                  <TableCell className="w-2/12">{contact.phone}</TableCell>
                   <TableCell className="w-2/12">
-                    <BoolStatusBadge status={contact.isPayableContact} />
+                    {truncateText(contact.title as string, 20)}
                   </TableCell>
+                  <TableCell className="w-2/12">{contact.phone}</TableCell>
                 </TableRow>
               ))
           ) : (
@@ -119,7 +141,7 @@ function DeliverySlotTable({
 }) {
   return (
     <div className="flex-1">
-      <h2 className="scroll-m-20 pb-3 pl-3 text-2xl font-semibold tracking-tight">
+      <h2 className="scroll-m-20 pb-2 pl-3 text-2xl font-semibold tracking-tight">
         Delivery Slots
       </h2>
       <Table className="flex flex-col overflow-hidden">

diff --git a/client/src/components/customer/delivery-slots-form.tsx b/client/src/components/customer/delivery-slots-form.tsx
@@ -106,6 +106,9 @@ export function DeliverySlotForm({
                         isClearable={false}
                         menuPlacement="bottom"
                         menuPosition="fixed"
+                        hasPopoutWindow
+                        popoutLink="/dispatch/locations/" // TODO: Change once Document Classification is added.
+                        popoutLinkLabel="Location"
                       />
                     </div>
                   </div>

diff --git a/client/src/components/division-codes/dc-table-dialog.tsx b/client/src/components/division-codes/dc-table-dialog.tsx
@@ -101,6 +101,9 @@ export function DCForm({
             placeholder="Select Cash Account"
             description="The Cash Account associated with the Division Code"
             isClearable
+            hasPopoutWindow
+            popoutLink="/accounting/gl-accounts"
+            popoutLinkLabel="GL Account"
           />
         </div>
         <div className="grid w-full max-w-sm items-center gap-0.5">
@@ -115,6 +118,9 @@ export function DCForm({
             placeholder="Select AP Account"
             description="The AP Account associated with the Division Code"
             isClearable
+            hasPopoutWindow
+            popoutLink="/accounting/gl-accounts"
+            popoutLinkLabel="GL Account"
           />
         </div>
         <div className="grid w-full max-w-sm items-center gap-0.5">
@@ -129,6 +135,9 @@ export function DCForm({
             placeholder="Select Expense Account"
             description="The Expense Account associated with the Revenue Code"
             isClearable
+            hasPopoutWindow
+            popoutLink="/accounting/gl-accounts"
+            popoutLinkLabel="GL Account"
           />
         </div>
       </div>