Add default hourly rate to client model

The changes add a new defaultHourlyRate field to clients, including form updates and automatic rate propagation to invoices. Add default hourly rate for clients The subject line you provided already clearly expresses the changes, and no additional context is needed in the body, so I'll keep just the subject line.
2025-12-13 17:44:44 -05:00 · 2025-07-15 20:24:43 -04:00
parent 0d2b5de740
commit 61733979cb
4 changed files with 176 additions and 52 deletions
--- a/src/components/forms/client-form.tsx
+++ b/src/components/forms/client-form.tsx
@@ -1,7 +1,7 @@
 "use client";

-import { UserPlus, Mail, Phone, Save, Loader2, ArrowLeft } from "lucide-react";
-import Link from "next/link";
+import { UserPlus, Save, Loader2, ArrowLeft, DollarSign } from "lucide-react";
+
 import { useRouter } from "next/navigation";
 import { useEffect, useState, useRef } from "react";
 import { toast } from "sonner";
@@ -12,6 +12,7 @@ import { Label } from "~/components/ui/label";
 import { FormSkeleton } from "~/components/ui/skeleton";
 import { AddressForm } from "~/components/forms/address-form";
 import { FloatingActionBar } from "~/components/layout/floating-action-bar";
+import { NumberInput } from "~/components/ui/number-input";
 import { api } from "~/trpc/react";
 import {
  formatPhoneNumber,
@@ -35,6 +36,7 @@ interface FormData {
  state: string;
  postalCode: string;
  country: string;
+  defaultHourlyRate: number;
 }

 interface FormErrors {
@@ -46,6 +48,7 @@ interface FormErrors {
  state?: string;
  postalCode?: string;
  country?: string;
+  defaultHourlyRate?: string;
 }

 const initialFormData: FormData = {
@@ -58,6 +61,7 @@ const initialFormData: FormData = {
  state: "",
  postalCode: "",
  country: "United States",
+  defaultHourlyRate: 100,
 };

 export function ClientForm({ clientId, mode }: ClientFormProps) {
@@ -108,11 +112,12 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
        state: client.state ?? "",
        postalCode: client.postalCode ?? "",
        country: client.country ?? "United States",
+        defaultHourlyRate: client.defaultHourlyRate ?? 100,
      });
    }
  }, [client, mode]);

-  const handleInputChange = (field: string, value: string) => {
+  const handleInputChange = (field: string, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    setIsDirty(true);

@@ -225,7 +230,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
                <div>
                  <CardTitle>Basic Information</CardTitle>
                  <p className="text-muted-foreground mt-1 text-sm">
-                    Enter the client's primary details
+                    Enter the client&apos;s primary details
                  </p>
                </div>
              </div>
@@ -322,7 +327,7 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
                <div>
                  <CardTitle>Address</CardTitle>
                  <p className="text-muted-foreground mt-1 text-sm">
-                    Client's physical location
+                    Client&apos;s physical location
                  </p>
                </div>
              </div>
@@ -341,6 +346,49 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
              />
            </CardContent>
          </Card>
+
+          {/* Billing Information */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-600/10 to-teal-600/10">
+                  <DollarSign className="h-5 w-5 text-emerald-700 dark:text-emerald-400" />
+                </div>
+                <div>
+                  <CardTitle>Billing Information</CardTitle>
+                  <p className="text-muted-foreground mt-1 text-sm">
+                    Default billing rates for this client
+                  </p>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label
+                  htmlFor="defaultHourlyRate"
+                  className="text-sm font-medium"
+                >
+                  Default Hourly Rate
+                </Label>
+                <NumberInput
+                  value={formData.defaultHourlyRate}
+                  onChange={(value) =>
+                    handleInputChange("defaultHourlyRate", value)
+                  }
+                  min={0}
+                  step={1}
+                  prefix="$"
+                  width="full"
+                  disabled={isSubmitting}
+                />
+                {errors.defaultHourlyRate && (
+                  <p className="text-destructive text-sm">
+                    {errors.defaultHourlyRate}
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
        </div>

        {/* Form Actions - original position */}
@@ -411,12 +459,16 @@ export function ClientForm({ clientId, mode }: ClientFormProps) {
          {isSubmitting ? (
            <>
              <Loader2 className="h-4 w-4 animate-spin sm:mr-2" />
-              <span className="hidden sm:inline">{mode === "create" ? "Creating..." : "Saving..."}</span>
+              <span className="hidden sm:inline">
+                {mode === "create" ? "Creating..." : "Saving..."}
+              </span>
            </>
          ) : (
            <>
              <Save className="h-4 w-4 sm:mr-2" />
-              <span className="hidden sm:inline">{mode === "create" ? "Create Client" : "Save Changes"}</span>
+              <span className="hidden sm:inline">
+                {mode === "create" ? "Create Client" : "Save Changes"}
+              </span>
            </>
          )}
        </Button>
--- a/src/components/forms/invoice-form.tsx
+++ b/src/components/forms/invoice-form.tsx
@@ -281,6 +281,20 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
    }
  }, [businesses, formData.businessId, invoiceId]);

+  // Update default hourly rate when client changes
+  React.useEffect(() => {
+    if (formData.clientId && clients) {
+      const selectedClient = clients.find((c) => c.id === formData.clientId);
+      if (selectedClient?.defaultHourlyRate) {
+        setFormData((prev) => ({
+          ...prev,
+          defaultHourlyRate: selectedClient.defaultHourlyRate,
+        }));
+      }
+    }
+     
+  }, [formData.clientId, clients]);
+
  // Calculate totals
  const totals = React.useMemo(() => {
    const subtotal = formData.items.reduce(
@@ -339,7 +353,11 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
    if (idx === 0) return; // Already at top
    setFormData((prev) => {
      const newItems = [...prev.items];
-      [newItems[idx - 1], newItems[idx]] = [newItems[idx], newItems[idx - 1]];
+      if (idx > 0 && idx < newItems.length) {
+        const temp = newItems[idx - 1]!;
+        newItems[idx - 1] = newItems[idx]!;
+        newItems[idx] = temp;
+      }
      return { ...prev, items: newItems };
    });
  };
@@ -349,7 +367,11 @@ export function InvoiceForm({ invoiceId }: InvoiceFormProps) {
    if (idx === formData.items.length - 1) return; // Already at bottom
    setFormData((prev) => {
      const newItems = [...prev.items];
-      [newItems[idx], newItems[idx + 1]] = [newItems[idx + 1], newItems[idx]];
+      if (idx >= 0 && idx < newItems.length - 1) {
+        const temp = newItems[idx]!;
+        newItems[idx] = newItems[idx + 1]!;
+        newItems[idx + 1] = temp;
+      }
      return { ...prev, items: newItems };
    });
  };
--- a/src/server/api/routers/clients.ts
+++ b/src/server/api/routers/clients.ts
@@ -7,13 +7,42 @@ import { TRPCError } from "@trpc/server";
 const createClientSchema = z.object({
  name: z.string().min(1, "Name is required").max(255, "Name is too long"),
  email: z.string().email("Invalid email").optional().or(z.literal("")),
-  phone: z.string().max(50, "Phone number is too long").optional().or(z.literal("")),
-  addressLine1: z.string().max(255, "Address is too long").optional().or(z.literal("")),
-  addressLine2: z.string().max(255, "Address is too long").optional().or(z.literal("")),
-  city: z.string().max(100, "City name is too long").optional().or(z.literal("")),
-  state: z.string().max(50, "State name is too long").optional().or(z.literal("")),
-  postalCode: z.string().max(20, "Postal code is too long").optional().or(z.literal("")),
-  country: z.string().max(100, "Country name is too long").optional().or(z.literal("")),
+  phone: z
+    .string()
+    .max(50, "Phone number is too long")
+    .optional()
+    .or(z.literal("")),
+  addressLine1: z
+    .string()
+    .max(255, "Address is too long")
+    .optional()
+    .or(z.literal("")),
+  addressLine2: z
+    .string()
+    .max(255, "Address is too long")
+    .optional()
+    .or(z.literal("")),
+  city: z
+    .string()
+    .max(100, "City name is too long")
+    .optional()
+    .or(z.literal("")),
+  state: z
+    .string()
+    .max(50, "State name is too long")
+    .optional()
+    .or(z.literal("")),
+  postalCode: z
+    .string()
+    .max(20, "Postal code is too long")
+    .optional()
+    .or(z.literal("")),
+  country: z
+    .string()
+    .max(100, "Country name is too long")
+    .optional()
+    .or(z.literal("")),
+  defaultHourlyRate: z.number().min(0, "Rate must be positive").default(100),
 });

 const updateClientSchema = createClientSchema.partial().extend({
@@ -84,14 +113,17 @@ export const clientsRouter = createTRPCRouter({
          Object.entries(input).map(([key, value]) => [
            key,
            value === "" ? null : value,
-          ])
+          ]),
        );

-        const [client] = await ctx.db.insert(clients).values({
+        const [client] = await ctx.db
+          .insert(clients)
+          .values({
            name: input.name, // Ensure name is included
            ...cleanInput,
            createdById: ctx.session.user.id,
-        }).returning();
+          })
+          .returning();

        if (!client) {
          throw new TRPCError({
@@ -141,7 +173,7 @@ export const clientsRouter = createTRPCRouter({
          Object.entries(data).map(([key, value]) => [
            key,
            value === "" ? null : value,
-          ])
+          ]),
        );

        const [updatedClient] = await ctx.db
@@ -202,7 +234,8 @@ export const clientsRouter = createTRPCRouter({
        if (clientInvoices.length > 0) {
          throw new TRPCError({
            code: "BAD_REQUEST",
-            message: "Cannot delete client with existing invoices. Please delete or reassign the invoices first.",
+            message:
+              "Cannot delete client with existing invoices. Please delete or reassign the invoices first.",
          });
        }

--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -106,6 +106,7 @@ export const clients = createTable(
    state: d.text({ length: 50 }),
    postalCode: d.text({ length: 20 }),
    country: d.text({ length: 100 }),
+    defaultHourlyRate: d.real().notNull().default(100.0),
    createdById: d
      .text({ length: 255 })
      .notNull()
@@ -124,7 +125,10 @@ export const clients = createTable(
 );

 export const clientsRelations = relations(clients, ({ one, many }) => ({
-  createdBy: one(users, { fields: [clients.createdById], references: [users.id] }),
+  createdBy: one(users, {
+    fields: [clients.createdById],
+    references: [users.id],
+  }),
  invoices: many(invoices),
 }));

@@ -168,7 +172,10 @@ export const businesses = createTable(
 );

 export const businessesRelations = relations(businesses, ({ one, many }) => ({
-  createdBy: one(users, { fields: [businesses.createdById], references: [users.id] }),
+  createdBy: one(users, {
+    fields: [businesses.createdById],
+    references: [users.id],
+  }),
  invoices: many(invoices),
 }));

@@ -181,9 +188,7 @@ export const invoices = createTable(
      .primaryKey()
      .$defaultFn(() => crypto.randomUUID()),
    invoiceNumber: d.text({ length: 100 }).notNull(),
-    businessId: d
-      .text({ length: 255 })
-      .references(() => businesses.id),
+    businessId: d.text({ length: 255 }).references(() => businesses.id),
    clientId: d
      .text({ length: 255 })
      .notNull()
@@ -192,7 +197,7 @@ export const invoices = createTable(
    dueDate: d.integer({ mode: "timestamp" }).notNull(),
    status: d.text({ length: 50 }).notNull().default("draft"), // draft, sent, paid, overdue
    totalAmount: d.real().notNull().default(0),
-    taxRate: d.real().notNull().default(0.00),
+    taxRate: d.real().notNull().default(0.0),
    notes: d.text({ length: 1000 }),
    createdById: d
      .text({ length: 255 })
@@ -214,9 +219,18 @@ export const invoices = createTable(
 );

 export const invoicesRelations = relations(invoices, ({ one, many }) => ({
-  business: one(businesses, { fields: [invoices.businessId], references: [businesses.id] }),
-  client: one(clients, { fields: [invoices.clientId], references: [clients.id] }),
-  createdBy: one(users, { fields: [invoices.createdById], references: [users.id] }),
+  business: one(businesses, {
+    fields: [invoices.businessId],
+    references: [businesses.id],
+  }),
+  client: one(clients, {
+    fields: [invoices.clientId],
+    references: [clients.id],
+  }),
+  createdBy: one(users, {
+    fields: [invoices.createdById],
+    references: [users.id],
+  }),
  items: many(invoiceItems),
 }));

@@ -251,5 +265,8 @@ export const invoiceItems = createTable(
 );

 export const invoiceItemsRelations = relations(invoiceItems, ({ one }) => ({
-  invoice: one(invoices, { fields: [invoiceItems.invoiceId], references: [invoices.id] }),
+  invoice: one(invoices, {
+    fields: [invoiceItems.invoiceId],
+    references: [invoices.id],
+  }),
 }));