Customers v0.5

midday-ai · Dec 5, 2024 · 5141ec4 · 5141ec4
1 parent 5856ce1
commit 5141ec4
Show file tree

Hide file tree

Showing 16 changed files with 208 additions and 61 deletions.
diff --git a/apps/dashboard/src/actions/schema.ts b/apps/dashboard/src/actions/schema.ts
@@ -605,6 +605,7 @@ export const createCustomerSchema = z.object({
   note: z.string().nullable().optional(),
   website: z.string().nullable().optional(),
   phone: z.string().nullable().optional(),
+  contact: z.string().nullable().optional(),
 });
 
 export const inboxUploadSchema = z.array(

diff --git a/apps/dashboard/src/components/customers-header.tsx b/apps/dashboard/src/components/customers-header.tsx
@@ -1,14 +1,13 @@
-import { InvoiceSearchFilter } from "@/components/invoice-search-filter";
-import { getCustomers } from "@midday/supabase/cached-queries";
-import { OpenInvoiceSheet } from "./open-invoice-sheet";
+import { OpenCustomerSheet } from "./open-customer-sheet";
+import { SearchField } from "./search-field";
 
 export async function CustomersHeader() {
   return (
     <div className="flex items-center justify-between">
-      <InvoiceSearchFilter />
+      <SearchField placeholder="Search customers" />
 
       <div className="hidden sm:block">
-        <OpenInvoiceSheet />
+        <OpenCustomerSheet />
       </div>
     </div>
   );

diff --git a/apps/dashboard/src/components/forms/customer-form.tsx b/apps/dashboard/src/components/forms/customer-form.tsx
@@ -48,6 +48,7 @@ const formSchema = z.object({
     .nullable()
     .optional()
     .transform((url) => url?.replace(/^https?:\/\//, "")),
+  contact: z.string().nullable().optional(),
   address_line_1: z.string().nullable().optional(),
   address_line_2: z.string().nullable().optional(),
   city: z.string().nullable().optional(),
@@ -110,6 +111,7 @@ export function CustomerForm({ data }: Props) {
       vat_number: undefined,
       note: undefined,
       phone: undefined,
+      contact: undefined,
     },
   });
 
@@ -237,6 +239,25 @@ export function CustomerForm({ data }: Props) {
                         </FormItem>
                       )}
                     />
+
+                    <FormField
+                      control={form.control}
+                      name="contact"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-xs text-[#878787] font-normal">
+                            Contact person
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              placeholder="John Doe"
+                              autoComplete="off"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
                   </div>
                 </AccordionContent>
               </AccordionItem>

diff --git a/apps/dashboard/src/components/invoice/customer-details.tsx b/apps/dashboard/src/components/invoice/customer-details.tsx
@@ -24,6 +24,8 @@ export interface Customer {
   zip?: string;
   country?: string;
   vat?: string;
+  contact?: string;
+  website?: string;
 }
 
 interface CustomerDetailsProps {

diff --git a/apps/dashboard/src/components/open-customer-sheet.tsx b/apps/dashboard/src/components/open-customer-sheet.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useCustomerParams } from "@/hooks/use-customer-params";
+import { useInvoiceParams } from "@/hooks/use-invoice-params";
+import { Button } from "@midday/ui/button";
+import { Icons } from "@midday/ui/icons";
+
+export function OpenCustomerSheet() {
+  const { setParams } = useCustomerParams();
+
+  return (
+    <div>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => setParams({ createCustomer: true })}
+      >
+        <Icons.Add />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/sheets/customer-edit-sheet.tsx b/apps/dashboard/src/components/sheets/customer-edit-sheet.tsx
@@ -54,7 +54,11 @@ export function CustomerEditSheet() {
       }
     }
 
-    fetchCustomer();
+    if (customerId) {
+      fetchCustomer();
+    } else {
+      setCustomer(null);
+    }
   }, [customerId, supabase]);
 
   return (

diff --git a/apps/dashboard/src/components/tables/customers/columns.tsx b/apps/dashboard/src/components/tables/customers/columns.tsx
@@ -11,17 +11,18 @@ import {
 } from "@midday/ui/dropdown-menu";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import type { ColumnDef } from "@tanstack/react-table";
+import Link from "next/link";
 import * as React from "react";
 
 export type Customer = {
   id: string;
   name: string;
   customer_name?: string;
   website: string;
-  contact_person?: string;
+  contact?: string;
   email: string;
-  invoices: number;
-  projects: number;
+  invoices: { id: string }[];
+  projects: { id: string }[];
   tags: { id: string; name: string }[];
 };
 
@@ -57,8 +58,8 @@ export const columns: ColumnDef<Customer>[] = [
   },
   {
     header: "Contact person",
-    accessorKey: "contact_person",
-    cell: ({ row }) => row.getValue("contact_person") ?? "-",
+    accessorKey: "contact",
+    cell: ({ row }) => row.getValue("contact") ?? "-",
   },
   {
     header: "Email",
@@ -68,18 +69,38 @@ export const columns: ColumnDef<Customer>[] = [
   {
     header: "Invoices",
     accessorKey: "invoices",
-    cell: ({ row }) => row.getValue("invoices") ?? "-",
+    cell: ({ row }) => {
+      if (row.original.invoices.length > 0) {
+        return (
+          <Link href={`/invoices?customers=${row.original.id}`}>
+            {row.original.invoices.length}
+          </Link>
+        );
+      }
+
+      return "-";
+    },
   },
   {
     header: "Projects",
     accessorKey: "projects",
-    cell: ({ row }) => row.getValue("projects") ?? "-",
-  },
-  {
-    header: "Tags",
-    accessorKey: "tags",
-    cell: ({ row }) => row.getValue("tags") ?? "-",
+    cell: ({ row }) => {
+      if (row.original.projects.length > 0) {
+        return (
+          <Link href={`/tracker?customers=${row.original.id}`}>
+            {row.original.projects.length}
+          </Link>
+        );
+      }
+
+      return "-";
+    },
   },
+  // {
+  //   header: "Tags",
+  //   accessorKey: "tags",
+  //   cell: ({ row }) => row.getValue("tags") ?? "-",
+  // },
   {
     id: "actions",
     header: "Actions",

diff --git a/apps/dashboard/src/components/tables/customers/index.tsx b/apps/dashboard/src/components/tables/customers/index.tsx
@@ -22,18 +22,16 @@ export async function CustomersTable({ query, sort, start, end, page }: Props) {
     "use server";
 
     return getCustomers({
-      //   to,
-      //   from: from + 1,
-      //   searchQuery: query,
-      //   sort,
-      //   filter,
+      to,
+      from: from + 1,
+      searchQuery: query,
+      sort,
     });
   }
 
   const { data, meta } = await getCustomers({
     searchQuery: query,
     sort,
-    filter,
     to: pageSize,
   });
 
@@ -55,7 +53,7 @@ export async function CustomersTable({ query, sort, start, end, page }: Props) {
   return (
     <DataTable
       data={data}
-      //   loadMore={loadMore}
+      loadMore={loadMore}
       pageSize={pageSize}
       hasNextPage={hasNextPage}
       page={page}

diff --git a/apps/dashboard/src/components/tables/customers/row.tsx b/apps/dashboard/src/components/tables/customers/row.tsx
@@ -20,9 +20,7 @@ export function CustomerRow({ row, setOpen }: Props) {
         {row.getVisibleCells().map((cell, index) => (
           <TableCell
             key={cell.id}
-            onClick={() =>
-              index !== row.getVisibleCells().length - 1 && setOpen(row.id)
-            }
+            onClick={() => ![3, 4, 5].includes(index) && setOpen(row.id)}
           >
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </TableCell>

diff --git a/apps/dashboard/src/components/tables/customers/skeleton.tsx b/apps/dashboard/src/components/tables/customers/skeleton.tsx
@@ -1,3 +1,35 @@
+import { Skeleton } from "@midday/ui/skeleton";
+import { Table, TableBody, TableCell, TableRow } from "@midday/ui/table";
+import { TableHeader } from "./table-header";
+
 export function CustomersSkeleton() {
-  return <div>CustomersSkeleton</div>;
+  return (
+    <Table>
+      <TableHeader />
+      <TableBody>
+        {Array.from({ length: 25 }).map((_, index) => (
+          <TableRow key={index.toString()} className="h-[45px]">
+            <TableCell>
+              <Skeleton className="h-4 w-24" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-24" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-16" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-8" />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
 }
diff --git a/apps/dashboard/src/components/tables/customers/table-header.tsx b/apps/dashboard/src/components/tables/customers/table-header.tsx
@@ -47,15 +47,11 @@ export function TableHeader() {
           <Button
             className="p-0 hover:bg-transparent space-x-2"
             variant="ghost"
-            onClick={() => createSortQuery("status")}
+            onClick={() => createSortQuery("contact")}
           >
             <span>Contact person</span>
-            {"contact_person" === column && value === "asc" && (
-              <ArrowDown size={16} />
-            )}
-            {"contact_person" === column && value === "desc" && (
-              <ArrowUp size={16} />
-            )}
+            {"contact" === column && value === "asc" && <ArrowDown size={16} />}
+            {"contact" === column && value === "desc" && <ArrowUp size={16} />}
           </Button>
         </TableHead>
         <TableHead>
@@ -73,7 +69,7 @@ export function TableHeader() {
           <Button
             className="p-0 hover:bg-transparent space-x-2"
             variant="ghost"
-            onClick={() => createSortQuery("customer")}
+            // onClick={() => createSortQuery("customer")}
           >
             <span>Invoices</span>
             {"invoices" === column && value === "asc" && (
@@ -86,7 +82,7 @@ export function TableHeader() {
           <Button
             className="p-0 hover:bg-transparent space-x-2"
             variant="ghost"
-            onClick={() => createSortQuery("projects")}
+            // onClick={() => createSortQuery("projects")}
           >
             <span>Projects</span>
             {"projects" === column && value === "asc" && (
@@ -96,7 +92,7 @@ export function TableHeader() {
           </Button>
         </TableHead>
 
-        <TableHead className="hidden md:table-cell">
+        {/* <TableHead className="hidden md:table-cell">
           <Button
             className="p-0 hover:bg-transparent space-x-2"
             variant="ghost"
@@ -106,7 +102,7 @@ export function TableHeader() {
             {"tags" === column && value === "asc" && <ArrowDown size={16} />}
             {"tags" === column && value === "desc" && <ArrowUp size={16} />}
           </Button>
-        </TableHead>
+        </TableHead> */}
 
         <TableHead className="hidden md:table-cell">Actions</TableHead>
       </TableRow>

diff --git a/apps/dashboard/src/hooks/use-customer-params.ts b/apps/dashboard/src/hooks/use-customer-params.ts
@@ -1,11 +1,21 @@
-import { parseAsBoolean, parseAsString, useQueryStates } from "nuqs";
+import {
+  parseAsArrayOf,
+  parseAsBoolean,
+  parseAsString,
+  useQueryStates,
+} from "nuqs";
 
-export function useCustomerParams() {
-  const [params, setParams] = useQueryStates({
-    customerId: parseAsString,
-    createCustomer: parseAsBoolean,
-    name: parseAsString,
-  });
+export function useCustomerParams(options?: { shallow: boolean }) {
+  const [params, setParams] = useQueryStates(
+    {
+      customerId: parseAsString,
+      createCustomer: parseAsBoolean,
+      sort: parseAsArrayOf(parseAsString),
+      name: parseAsString,
+      q: parseAsString,
+    },
+    options,
+  );
 
   return {
     ...params,

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/supabase/src/queries/cached-queries.ts b/packages/supabase/src/queries/cached-queries.ts
@@ -6,6 +6,7 @@ import { createClient } from "../client/server";
 import {
   type GetBurnRateQueryParams,
   type GetCategoriesParams,
+  type GetCustomersQueryParams,
   type GetExpensesQueryParams,
   type GetInvoiceSummaryParams,
   type GetInvoicesQueryParams,
@@ -500,7 +501,9 @@ export const getPaymentStatus = async () => {
   )();
 };
 
-export const getCustomers = async () => {
+export const getCustomers = async (
+  params?: Omit<GetCustomersQueryParams, "teamId">,
+) => {
   const supabase = createClient();
   const user = await getUser();
   const teamId = user?.data?.team_id;
@@ -511,14 +514,14 @@ export const getCustomers = async () => {
 
   return unstable_cache(
     async () => {
-      return getCustomersQuery(supabase, teamId);
+      return getCustomersQuery(supabase, { ...params, teamId });
     },
     ["customers", teamId],
     {
       tags: [`customers_${teamId}`],
       revalidate: 3600,
     },
-  )();
+  )(params);
 };
 
 export const getInvoices = async (