feat: Implement invoice number generation and integrate into invoice creation and display

Author: aimensahnoun

src/app/i/[id]/page.tsx

@@ -2,6 +2,7 @@ import { BackgroundWrapper } from "@/components/background-wrapper";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { InvoiceCreator } from "@/components/invoice-creator";
+import { generateInvoiceNumber } from "@/lib/invoice";
 import { api } from "@/trpc/server";
 import { ArrowLeft } from "lucide-react";
 import type { Metadata } from "next";
@@ -24,6 +25,8 @@ export default async function InvoiceMePage({
     notFound();
   }
 
+  const invoiceNumber = await generateInvoiceNumber(invoiceMeLink.user.id);
+
   return (
     <BackgroundWrapper
       topGradient={{ from: "purple-100", to: "purple-200" }}
@@ -49,6 +52,7 @@ export default async function InvoiceMePage({
             clientEmail: invoiceMeLink.user.email ?? "",
             userId: invoiceMeLink.user.id,
           }}
+          invoiceNumber={invoiceNumber}
         />
       </main>
       <Footer />

src/app/invoices/create/page.tsx

@@ -2,6 +2,7 @@ import { BackgroundWrapper } from "@/components/background-wrapper";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 import { InvoiceCreator } from "@/components/invoice-creator";
+import { generateInvoiceNumber } from "@/lib/invoice";
 import { getCurrentSession } from "@/server/auth";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
@@ -14,6 +15,8 @@ export default async function CreateInvoicePage() {
     redirect("/");
   }
 
+  const invoiceNumber = await generateInvoiceNumber(user.id);
+
   return (
     <BackgroundWrapper
       topGradient={{ from: "purple-100", to: "purple-200" }}
@@ -38,6 +41,7 @@ export default async function CreateInvoicePage() {
             email: user.email ?? "",
             name: user.name ?? "",
           }}
+          invoiceNumber={invoiceNumber}
         />
       </main>
       <Footer />

src/components/invoice-creator.tsx

@@ -23,11 +23,13 @@ interface InvoiceCreatorProps {
     name: string;
     email: string;
   };
+  invoiceNumber?: string;
 }
 
 export function InvoiceCreator({
   recipientDetails,
   currentUser,
+  invoiceNumber,
 }: InvoiceCreatorProps) {
   const router = useRouter();
   const isInvoiceMe = !!recipientDetails?.userId;
@@ -52,7 +54,7 @@ export function InvoiceCreator({
   const form = useForm<InvoiceFormValues>({
     resolver: zodResolver(invoiceFormSchema),
     defaultValues: {
-      invoiceNumber: "",
+      invoiceNumber: invoiceNumber,
       dueDate: "",
       creatorName: !isInvoiceMe ? (currentUser?.name ?? "") : "",
       creatorEmail: !isInvoiceMe ? (currentUser?.email ?? "") : "",

src/components/invoice-form.tsx

@@ -51,7 +51,11 @@ export function InvoiceForm({
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div className="space-y-2">
           <Label htmlFor="invoiceNumber">Invoice Number</Label>
-          <Input {...form.register("invoiceNumber")} placeholder="INV-001" />
+          <Input
+            disabled
+            {...form.register("invoiceNumber")}
+            placeholder="INV-001"
+          />
           {form.formState.errors.invoiceNumber && (
             <p className="text-sm text-red-500">
               {form.formState.errors.invoiceNumber.message}

src/lib/invoice/index.ts

@@ -0,0 +1,31 @@
+import { db } from "@/server/db";
+import { requestTable } from "@/server/db/schema";
+import { and, count, eq, gte } from "drizzle-orm";
+
+export const generateInvoiceNumber = async (userId: string) => {
+  const invoicesCountThisMonth = await db
+    .select({
+      count: count(),
+    })
+    .from(requestTable)
+    .where(
+      and(
+        eq(requestTable.userId, userId),
+        gte(
+          requestTable.createdAt,
+          new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+        ),
+      ),
+    );
+
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const invoiceCount = String(invoicesCountThisMonth[0].count + 1).padStart(
+    4,
+    "0",
+  ); // Pad with zeros to 4 digits
+
+  const invoiceNumber = `${year}${month}-${invoiceCount}`;
+  return invoiceNumber;
+};