From 9d98cbc2a651133575f2d93e28dc715238b872ad Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Tue, 16 Sep 2025 14:24:56 +0700
Subject: [PATCH 1/9] feat: implement IDR currency formatting for invoices

- Enhanced currency formatting in invoice preview and email templates
- Added proper IDR formatting (no decimals, thousands separators) using Intl.NumberFormat
- Updated formatCurrency and formatDecimal utility functions in server utils
- Improved invoice preview dialog with organization logo display and responsive design
- Added comprehensive currency formatting utilities in /lib/currency-utils.ts
- Updated backend invoice email generation to use proper IDR formatting
- Enhanced organization logo support across invoice preview and email templates
- Added image upload functionality for organization logos
- Created responsive invoice preview dialog with print/download capabilities
- Updated invoice router to include organization data in API responses

The changes ensure IDR amounts display as '1.000.000' instead of '1000000.00'
while maintaining proper formatting for other currencies like USD, EUR, etc.
---
 public/uploads/organization-logo/.gitkeep     |   1 +
 public/uploads/user-avatar/.gitkeep           |   1 +
 src/app/api/upload/route.ts                   | 152 +++++
 .../finance/invoicing/invoice-client.tsx      |  27 +-
 .../invoicing/invoice-preview-dialog.tsx      | 521 ++++++++++++++++++
 .../organizations/add-organization-dialog.tsx |  23 +
 .../edit-organization-dialog.tsx              |  26 +
 .../organizations/organization-card.tsx       |   8 +-
 .../settings/organization-info-form.tsx       |  42 ++
 src/components/ui/image-upload.tsx            | 239 ++++++++
 src/hooks/use-file-upload.ts                  | 122 ++++
 src/lib/currency-utils.ts                     |  80 +++
 src/server/api/routers/finance/invoice.ts     |  45 +-
 src/server/utils/format.ts                    |  34 ++
 src/types/currencies.ts                       |   1 +
 15 files changed, 1302 insertions(+), 20 deletions(-)
 create mode 100644 public/uploads/organization-logo/.gitkeep
 create mode 100644 public/uploads/user-avatar/.gitkeep
 create mode 100644 src/app/api/upload/route.ts
 create mode 100644 src/components/finance/invoicing/invoice-preview-dialog.tsx
 create mode 100644 src/components/ui/image-upload.tsx
 create mode 100644 src/hooks/use-file-upload.ts
 create mode 100644 src/lib/currency-utils.ts

diff --git a/public/uploads/organization-logo/.gitkeep b/public/uploads/organization-logo/.gitkeep
new file mode 100644
index 0000000..b3ca6a7
--- /dev/null
+++ b/public/uploads/organization-logo/.gitkeep
@@ -0,0 +1 @@
+# Keep this directory in git
diff --git a/public/uploads/user-avatar/.gitkeep b/public/uploads/user-avatar/.gitkeep
new file mode 100644
index 0000000..b3ca6a7
--- /dev/null
+++ b/public/uploads/user-avatar/.gitkeep
@@ -0,0 +1 @@
+# Keep this directory in git
diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
new file mode 100644
index 0000000..b22e28f
--- /dev/null
+++ b/src/app/api/upload/route.ts
@@ -0,0 +1,152 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+import { auth } from "~/lib/auth";
+import { z } from "zod";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/webp",
+  "image/svg+xml",
+];
+
+const uploadSchema = z.object({
+  type: z
+    .enum(["organization-logo", "user-avatar"])
+    .default("organization-logo"),
+  organizationId: z.string().optional(),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const session = await auth.api.getSession({ headers: request.headers });
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const formData = await request.formData();
+    const file = formData.get("file") as File;
+    const type = (formData.get("type") as string) ?? "organization-logo";
+    const organizationId = formData.get("organizationId") as string;
+
+    // Validate input
+    const validatedData = uploadSchema.parse({ type, organizationId });
+
+    if (!file) {
+      return NextResponse.json({ error: "No file provided" }, { status: 400 });
+    }
+
+    // Validate file type
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      return NextResponse.json(
+        {
+          error:
+            "Invalid file type. Only JPEG, PNG, WebP, and SVG files are allowed.",
+        },
+        { status: 400 }
+      );
+    }
+
+    // Validate file size
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json(
+        { error: "File too large. Maximum size is 5MB." },
+        { status: 400 }
+      );
+    }
+
+    // Create filename with timestamp and random string
+    const timestamp = Date.now();
+    const randomString = Math.random().toString(36).substring(2, 15);
+    const fileExtension = file.name.split(".").pop();
+    const fileName = `${validatedData.type}-${timestamp}-${randomString}.${fileExtension}`;
+
+    // Create upload directory path
+    const uploadDir = join(
+      process.cwd(),
+      "public",
+      "uploads",
+      validatedData.type
+    );
+    await mkdir(uploadDir, { recursive: true });
+
+    // Convert file to buffer and save
+    const bytes = await file.arrayBuffer();
+    const buffer = Buffer.from(bytes);
+    const filePath = join(uploadDir, fileName);
+
+    await writeFile(filePath, buffer);
+
+    // Return the public URL
+    const fileUrl = `/uploads/${validatedData.type}/${fileName}`;
+
+    return NextResponse.json({
+      success: true,
+      url: fileUrl,
+      filename: fileName,
+      size: file.size,
+      type: file.type,
+    });
+  } catch (error) {
+    console.error("File upload error:", error);
+
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: "Invalid input parameters" },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
+
+// Handle file deletion
+export async function DELETE(request: NextRequest) {
+  try {
+    // Check authentication
+    const session = await auth.api.getSession({ headers: request.headers });
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const filePath = searchParams.get("path");
+
+    if (!filePath?.startsWith("/uploads/")) {
+      return NextResponse.json({ error: "Invalid file path" }, { status: 400 });
+    }
+
+    // Construct full file path
+    const fullPath = join(process.cwd(), "public", filePath);
+
+    try {
+      const { unlink } = await import("fs/promises");
+      await unlink(fullPath);
+
+      return NextResponse.json({
+        success: true,
+        message: "File deleted successfully",
+      });
+    } catch (fileError) {
+      // File might not exist, which is okay
+      return NextResponse.json({
+        success: true,
+        message: "File not found or already deleted",
+      });
+    }
+  } catch (error) {
+    console.error("File deletion error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/components/finance/invoicing/invoice-client.tsx b/src/components/finance/invoicing/invoice-client.tsx
index cfc240c..88af1e5 100644
--- a/src/components/finance/invoicing/invoice-client.tsx
+++ b/src/components/finance/invoicing/invoice-client.tsx
@@ -22,10 +22,11 @@ import {
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 import { Badge } from "~/components/ui/badge";
-import { MoreHorizontal, Edit, Trash2, Send, Shield } from "lucide-react";
+import { MoreHorizontal, Edit, Trash2, Send, Shield, Eye } from "lucide-react";
 import { InvoiceCreateDialog } from "./invoice-create-dialog";
 import { InvoiceEditDialog } from "./invoice-edit-dialog";
 import { InvoiceDeleteDialog } from "./invoice-delete-dialog";
+import { InvoicePreviewDialog } from "./invoice-preview-dialog";
 import { InvoiceTableSkeleton } from "./invoice-skeletons";
 import { invoiceStatusColors, invoiceStatusLabels } from "~/types";
 import type { InvoiceClientProps } from "~/types";
@@ -67,6 +68,9 @@ export function InvoiceClient({ organizationId }: InvoiceClientProps) {
   const [openCreate, setOpenCreate] = useState(false);
   const [editingInvoice, setEditingInvoice] = useState<string | null>(null);
   const [deletingInvoice, setDeletingInvoice] = useState<string | null>(null);
+  const [previewingInvoice, setPreviewingInvoice] = useState<string | null>(
+    null
+  );
   const utils = api.useUtils();
   const { data: invoices = [], isLoading } = api.invoice.listInvoices.useQuery({
     organizationId,
@@ -177,6 +181,14 @@ export function InvoiceClient({ organizationId }: InvoiceClientProps) {
                   </TableCell>
                   <TableCell className="text-right">
                     <div className="flex items-center justify-end gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => setPreviewingInvoice(inv.id)}
+                      >
+                        <Eye className="h-4 w-4 mr-1" />
+                        Preview
+                      </Button>
                       <Button
                         size="sm"
                         variant="outline"
@@ -270,6 +282,19 @@ export function InvoiceClient({ organizationId }: InvoiceClientProps) {
           onDeleted={() => void utils.invoice.listInvoices.invalidate()}
         />
       )}
+
+      <InvoicePreviewDialog
+        open={!!previewingInvoice}
+        onOpenChange={(open: boolean) => !open && setPreviewingInvoice(null)}
+        invoiceId={previewingInvoice}
+        organizationId={organizationId}
+        onSendEmail={(invoiceId: string) => {
+          const invoice = invoices.find(inv => inv.id === invoiceId);
+          if (invoice) {
+            handleSendEmail(invoiceId, invoice.customerEmail);
+          }
+        }}
+      />
     </div>
   );
 }
diff --git a/src/components/finance/invoicing/invoice-preview-dialog.tsx b/src/components/finance/invoicing/invoice-preview-dialog.tsx
new file mode 100644
index 0000000..731aff8
--- /dev/null
+++ b/src/components/finance/invoicing/invoice-preview-dialog.tsx
@@ -0,0 +1,521 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { api } from "~/trpc/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
+import { Skeleton } from "~/components/ui/skeleton";
+import {
+  Printer,
+  Download,
+  Send,
+  User,
+  Calendar,
+  DollarSign,
+  FileText,
+  Building,
+} from "lucide-react";
+import { invoiceStatusColors, invoiceStatusLabels } from "~/types";
+
+interface InvoicePreviewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  invoiceId: string | null;
+  organizationId: string;
+  onSendEmail?: (invoiceId: string) => void;
+}
+
+interface InvoiceItem {
+  id?: string;
+  description: string;
+  quantity: unknown;
+  unitPrice: unknown;
+  taxRate: unknown;
+  discountRate: unknown;
+}
+
+export function InvoicePreviewDialog({
+  open,
+  onOpenChange,
+  invoiceId,
+  onSendEmail,
+}: InvoicePreviewDialogProps) {
+  const [isPrinting, setIsPrinting] = useState(false);
+
+  const {
+    data: invoice,
+    isLoading,
+    error,
+  } = api.invoice.getInvoiceById.useQuery(
+    { id: invoiceId! },
+    { enabled: !!invoiceId && open }
+  );
+
+  const handlePrint = () => {
+    setIsPrinting(true);
+    window.print();
+    setTimeout(() => setIsPrinting(false), 1000);
+  };
+
+  const handleDownload = () => {
+    if (!invoice) return;
+
+    // Create a simplified HTML version for download
+    const printWindow = window.open("", "_blank");
+    if (printWindow) {
+      printWindow.document.write(generateInvoiceHTML());
+      printWindow.document.close();
+      printWindow.print();
+    }
+  };
+
+  const formatAmount = (value: unknown, currency?: string): string => {
+    let numericValue: number;
+    
+    if (typeof value === "number") {
+      numericValue = value;
+    } else if (typeof value === "string") {
+      numericValue = parseFloat(value);
+      if (isNaN(numericValue)) return value;
+    } else if (value && typeof value === "object" && "toString" in value) {
+      try {
+        numericValue = parseFloat((value as { toString(): string }).toString());
+        if (isNaN(numericValue)) return (value as { toString(): string }).toString();
+      } catch {
+        return "0";
+      }
+    } else {
+      return "0";
+    }
+
+    // Format based on currency
+    const currencyCode = currency ?? "USD";
+    
+    // IDR doesn't use decimal places and uses thousands separators
+    if (currencyCode === "IDR") {
+      return new Intl.NumberFormat("id-ID").format(Math.round(numericValue));
+    }
+    
+    // For other currencies, use 2 decimal places with appropriate locale
+    const locale = currencyCode === "USD" ? "en-US" : "en-US"; // Can be extended for other currencies
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(numericValue);
+  };
+
+  const formatDate = (value: unknown): string => {
+    if (value instanceof Date) return value.toLocaleDateString();
+    if (typeof value === "string") {
+      const d = new Date(value);
+      return isNaN(d.getTime()) ? value : d.toLocaleDateString();
+    }
+    return "";
+  };
+
+  const calculateItemTotal = (item: InvoiceItem) => {
+    const quantity =
+      typeof item.quantity === "number"
+        ? item.quantity
+        : parseFloat(
+            (item.quantity as { toString(): string })?.toString() ?? "0"
+          );
+    const unitPrice =
+      typeof item.unitPrice === "number"
+        ? item.unitPrice
+        : parseFloat(
+            (item.unitPrice as { toString(): string })?.toString() ?? "0"
+          );
+    const subtotal = quantity * unitPrice;
+    const discount =
+      subtotal *
+      (parseFloat(
+        (item.discountRate as { toString(): string })?.toString() ?? "0"
+      ) /
+        100);
+    const afterDiscount = subtotal - discount;
+    const tax =
+      afterDiscount *
+      (parseFloat((item.taxRate as { toString(): string })?.toString() ?? "0") /
+        100);
+    return afterDiscount + tax;
+  };
+
+  const generateInvoiceHTML = () => {
+    if (!invoice) return "";
+
+    return `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Invoice ${invoice.invoiceNumber}</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #ddd; padding-bottom: 20px; }
+            .org-info { display: flex; align-items: center; gap: 15px; }
+            .org-logo { width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 8px; }
+            .org-placeholder { width: 80px; height: 80px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #666; }
+            .invoice-title { text-align: center; }
+            .invoice-info { display: flex; justify-content: space-between; margin-bottom: 30px; }
+            .customer-info { margin-bottom: 30px; }
+            table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+            th { background-color: #f2f2f2; }
+            .total-row { font-weight: bold; }
+            .text-right { text-align: right; }
+          </style>
+        </head>
+        <body>
+          <div class="header">
+            <div class="org-info">
+              ${
+                invoice.organization?.logo
+                  ? `<img src="${invoice.organization.logo}" alt="${invoice.organization.name ?? "Organization"}" class="org-logo" />`
+                  : `<div class="org-placeholder">🏢</div>`
+              }
+              <div>
+                <h3 style="margin: 0; color: #666;">${invoice.organization?.name ?? "Organization"}</h3>
+                ${invoice.organization?.website ? `<p style="margin: 5px 0 0 0; color: #888; font-size: 14px;">${invoice.organization.website}</p>` : ""}
+              </div>
+            </div>
+            <div class="invoice-title">
+              <h1 style="margin: 0; color: #333;">INVOICE</h1>
+              <h2 style="margin: 5px 0 0 0; color: #666;">${invoice.invoiceNumber}</h2>
+            </div>
+          </div>
+          
+          <div class="invoice-info">
+            <div>
+              <strong>Issue Date:</strong> ${formatDate(invoice.issueDate)}<br>
+              <strong>Due Date:</strong> ${formatDate(invoice.dueDate)}<br>
+              <strong>Payment Terms:</strong> ${invoice.paymentTerms}
+            </div>
+            <div>
+              <strong>Status:</strong> ${invoiceStatusLabels[invoice.status]}<br>
+              <strong>Currency:</strong> ${invoice.currency}
+            </div>
+          </div>
+
+          <div class="customer-info">
+            <strong>Bill To:</strong><br>
+            ${invoice.customerName ?? `${invoice.customer?.firstName ?? ""} ${invoice.customer?.lastName ?? ""}`.trim()}<br>
+            ${invoice.customerEmail}<br>
+            ${invoice.customer?.address ?? ""}
+          </div>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Description</th>
+                <th>Qty</th>
+                <th>Unit Price</th>
+                <th>Discount</th>
+                <th>Tax Rate</th>
+                <th class="text-right">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${invoice.items
+                .map(
+                  item => `
+                <tr>
+                  <td>${item.description}</td>
+                  <td>${formatAmount(item.quantity)}</td>
+                  <td>${formatAmount(item.unitPrice, invoice.currency)} ${invoice.currency}</td>
+                  <td>${formatAmount(item.discountRate)}%</td>
+                  <td>${formatAmount(item.taxRate)}%</td>
+                  <td class="text-right">${formatAmount(calculateItemTotal(item), invoice.currency)} ${invoice.currency}</td>
+                </tr>
+              `
+                )
+                .join("")}
+              <tr class="total-row">
+                <td colspan="5"><strong>Total Amount</strong></td>
+                <td class="text-right"><strong>${formatAmount(invoice.totalAmount, invoice.currency)} ${invoice.currency}</strong></td>
+              </tr>
+            </tbody>
+          </table>
+
+          ${invoice.notes ? `<div><strong>Notes:</strong><br>${invoice.notes}</div>` : ""}
+          ${invoice.termsAndConditions ? `<div><strong>Terms & Conditions:</strong><br>${invoice.termsAndConditions}</div>` : ""}
+        </body>
+      </html>
+    `;
+  };
+
+  if (!open || !invoiceId) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl w-[90vw] max-h-[90vh] overflow-y-auto p-6 lg:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <FileText className="h-5 w-5" />
+            Invoice Preview
+          </DialogTitle>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="space-y-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-32 w-full" />
+          </div>
+        ) : error ? (
+          <div className="py-8 text-center text-red-600">
+            Failed to load invoice. Please try again.
+          </div>
+        ) : !invoice ? (
+          <div className="py-8 text-center text-muted-foreground">
+            Invoice not found.
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* Action Buttons */}
+            <div className="flex flex-wrap gap-2 justify-end print:hidden">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handlePrint}
+                disabled={isPrinting}
+              >
+                <Printer className="h-4 w-4 mr-2" />
+                {isPrinting ? "Printing..." : "Print"}
+              </Button>
+              <Button variant="outline" size="sm" onClick={handleDownload}>
+                <Download className="h-4 w-4 mr-2" />
+                Download
+              </Button>
+              {onSendEmail && invoice.customerEmail && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onSendEmail(invoice.id)}
+                >
+                  <Send className="h-4 w-4 mr-2" />
+                  Send Email
+                </Button>
+              )}
+            </div>
+
+            {/* Invoice Header */}
+            <div className="flex items-center justify-between border-b pb-6">
+              {/* Organization Logo */}
+              <div className="flex items-center gap-4">
+                {invoice.organization?.logo ? (
+                  <Image
+                    src={invoice.organization.logo}
+                    alt={invoice.organization.name ?? "Organization"}
+                    width={80}
+                    height={80}
+                    className="object-contain rounded-lg border"
+                  />
+                ) : (
+                  <div className="w-20 h-20 bg-primary/10 rounded-lg flex items-center justify-center border">
+                    <Building className="h-8 w-8 text-primary" />
+                  </div>
+                )}
+                <div className="text-left">
+                  <h3 className="text-lg font-semibold text-muted-foreground">
+                    {invoice.organization?.name ?? "Organization"}
+                  </h3>
+                  {invoice.organization?.website && (
+                    <p className="text-sm text-muted-foreground">
+                      {invoice.organization.website}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Invoice Title */}
+              <div className="text-center">
+                <h1 className="text-3xl font-bold text-primary mb-2">
+                  INVOICE
+                </h1>
+                <h2 className="text-xl font-semibold text-muted-foreground">
+                  {invoice.invoiceNumber}
+                </h2>
+              </div>
+            </div>
+
+            {/* Invoice Info Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Issue Date:</span>
+                  <span>{formatDate(invoice.issueDate)}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Due Date:</span>
+                  <span>{formatDate(invoice.dueDate)}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Payment Terms:</span>
+                  <span>{invoice.paymentTerms}</span>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">Status:</span>
+                  <Badge
+                    variant="outline"
+                    className={invoiceStatusColors[invoice.status]}
+                  >
+                    {invoiceStatusLabels[invoice.status]}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  <DollarSign className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Currency:</span>
+                  <span>{invoice.currency}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <DollarSign className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Paid Amount:</span>
+                  <span>
+                    {formatAmount(invoice.paidAmount, invoice.currency)} {invoice.currency}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* Customer Information */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <User className="h-5 w-5 text-muted-foreground" />
+                <h3 className="text-lg font-semibold">Bill To</h3>
+              </div>
+              <div className="pl-7 space-y-2">
+                <p className="font-medium">
+                  {invoice.customerName ??
+                    `${invoice.customer?.firstName ?? ""} ${invoice.customer?.lastName ?? ""}`.trim()}
+                </p>
+                <p className="text-muted-foreground">{invoice.customerEmail}</p>
+                {invoice.customer?.address && (
+                  <p className="text-muted-foreground">
+                    {invoice.customer.address}
+                  </p>
+                )}
+                {invoice.customer?.phone && (
+                  <p className="text-muted-foreground">
+                    {invoice.customer.phone}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* Invoice Items */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold">Items</h3>
+              <div className="overflow-x-auto">
+                <table className="w-full border-collapse border border-border">
+                  <thead>
+                    <tr className="bg-muted/50">
+                      <th className="border border-border p-3 text-left">
+                        Description
+                      </th>
+                      <th className="border border-border p-3 text-center">
+                        Qty
+                      </th>
+                      <th className="border border-border p-3 text-right">
+                        Unit Price
+                      </th>
+                      <th className="border border-border p-3 text-center">
+                        Discount
+                      </th>
+                      <th className="border border-border p-3 text-center">
+                        Tax Rate
+                      </th>
+                      <th className="border border-border p-3 text-right">
+                        Total
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {invoice.items.map((item, index) => (
+                      <tr key={item.id ?? index}>
+                        <td className="border border-border p-3">
+                          {item.description}
+                        </td>
+                        <td className="border border-border p-3 text-center">
+                          {formatAmount(item.quantity)}
+                        </td>
+                        <td className="border border-border p-3 text-right">
+                          {formatAmount(item.unitPrice, invoice.currency)} {invoice.currency}
+                        </td>
+                        <td className="border border-border p-3 text-center">
+                          {formatAmount(item.discountRate)}%
+                        </td>
+                        <td className="border border-border p-3 text-center">
+                          {formatAmount(item.taxRate)}%
+                        </td>
+                        <td className="border border-border p-3 text-right font-medium">
+                          {formatAmount(calculateItemTotal(item), invoice.currency)}{" "}
+                          {invoice.currency}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                  <tfoot>
+                    <tr className="bg-muted/50">
+                      <td
+                        colSpan={5}
+                        className="border border-border p-3 text-right font-semibold"
+                      >
+                        Total Amount:
+                      </td>
+                      <td className="border border-border p-3 text-right font-bold text-lg">
+                        {formatAmount(invoice.totalAmount, invoice.currency)} {invoice.currency}
+                      </td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+
+            {/* Notes and Terms */}
+            {(invoice.notes ?? invoice.termsAndConditions) && (
+              <>
+                <Separator />
+                <div className="space-y-4">
+                  {invoice.notes && (
+                    <div>
+                      <h4 className="font-semibold mb-2">Notes</h4>
+                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                        {invoice.notes}
+                      </p>
+                    </div>
+                  )}
+                  {invoice.termsAndConditions && (
+                    <div>
+                      <h4 className="font-semibold mb-2">Terms & Conditions</h4>
+                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                        {invoice.termsAndConditions}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/organizations/add-organization-dialog.tsx b/src/components/organizations/add-organization-dialog.tsx
index f3977ad..4e1f6cf 100644
--- a/src/components/organizations/add-organization-dialog.tsx
+++ b/src/components/organizations/add-organization-dialog.tsx
@@ -24,12 +24,14 @@ import {
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
+import { ImageUpload } from "~/components/ui/image-upload";
 
 const organizationFormSchema = z.object({
   name: z.string().min(1, "Organization name is required"),
   description: z.string().optional(),
   website: z.string().url().optional().or(z.literal("")),
   industry: z.string().optional(),
+  logo: z.string().optional(),
 });
 
 export type OrganizationFormValues = z.infer<typeof organizationFormSchema>;
@@ -62,6 +64,7 @@ export function AddOrganizationDialog({
       description: "",
       website: "",
       industry: "",
+      logo: "",
     },
   });
 
@@ -109,6 +112,26 @@ export function AddOrganizationDialog({
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name="logo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <ImageUpload
+                        value={field.value}
+                        onChange={field.onChange}
+                        disabled={isLoading}
+                        label="Organization Logo"
+                        description="Upload a logo to represent your organization (optional)"
+                        type="organization-logo"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <FormField
                 control={form.control}
                 name="description"
diff --git a/src/components/organizations/edit-organization-dialog.tsx b/src/components/organizations/edit-organization-dialog.tsx
index f6ef66a..5a54c68 100644
--- a/src/components/organizations/edit-organization-dialog.tsx
+++ b/src/components/organizations/edit-organization-dialog.tsx
@@ -23,12 +23,14 @@ import {
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
+import { ImageUpload } from "~/components/ui/image-upload";
 
 const organizationFormSchema = z.object({
   name: z.string().min(1, "Organization name is required"),
   description: z.string().optional(),
   website: z.string().url().optional().or(z.literal("")),
   industry: z.string().optional(),
+  logo: z.string().optional(),
 });
 
 export type EditOrganizationFormValues = z.infer<typeof organizationFormSchema>;
@@ -39,6 +41,7 @@ interface OrganizationData {
   description?: string | null;
   website?: string | null;
   industry?: string | null;
+  logo?: string | null;
 }
 
 interface EditOrganizationDialogProps {
@@ -63,6 +66,7 @@ export function EditOrganizationDialog({
       description: "",
       website: "",
       industry: "",
+      logo: "",
     },
   });
 
@@ -73,6 +77,7 @@ export function EditOrganizationDialog({
         description: organization.description ?? "",
         website: organization.website ?? "",
         industry: organization.industry ?? "",
+        logo: organization.logo ?? "",
       });
     }
   }, [organization, form]);
@@ -121,6 +126,27 @@ export function EditOrganizationDialog({
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name="logo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <ImageUpload
+                        value={field.value}
+                        onChange={field.onChange}
+                        disabled={isLoading}
+                        label="Organization Logo"
+                        description="Upload a logo to represent your organization (optional)"
+                        type="organization-logo"
+                        organizationId={organization?.id}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <FormField
                 control={form.control}
                 name="description"
diff --git a/src/components/organizations/organization-card.tsx b/src/components/organizations/organization-card.tsx
index 46d988b..5eb27d6 100644
--- a/src/components/organizations/organization-card.tsx
+++ b/src/components/organizations/organization-card.tsx
@@ -60,14 +60,14 @@ export function OrganizationCard({
         <CardHeader className="space-y-3 pb-3">
           <div className="flex items-start justify-between gap-2">
             <div className="flex min-w-0 items-center gap-3">
-              <div className="bg-primary/10 text-primary flex h-12 w-12 shrink-0 items-center justify-center rounded-lg">
+              <div className="bg-primary/10 text-primary flex h-12 w-12 shrink-0 items-center justify-center rounded-lg overflow-hidden">
                 {logo ? (
                   <Image
                     src={logo}
                     alt={name}
-                    width={36}
-                    height={36}
-                    className="rounded-md"
+                    width={48}
+                    height={48}
+                    className="object-cover w-full h-full"
                   />
                 ) : (
                   <BuildingIcon className="h-6 w-6" />
diff --git a/src/components/settings/organization-info-form.tsx b/src/components/settings/organization-info-form.tsx
index 42f2f11..f6236d9 100644
--- a/src/components/settings/organization-info-form.tsx
+++ b/src/components/settings/organization-info-form.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
+import Image from "next/image";
 import { api } from "~/trpc/react";
 import { authClient } from "~/lib/auth-client";
 import {
@@ -22,6 +23,7 @@ import { Badge } from "~/components/ui/badge";
 import { Separator } from "~/components/ui/separator";
 import { Save, Lock, AlertCircle } from "lucide-react";
 import { toast } from "sonner";
+import { ImageUpload } from "~/components/ui/image-upload";
 
 const organizationFormSchema = z.object({
   name: z
@@ -41,6 +43,7 @@ const organizationFormSchema = z.object({
     .string()
     .max(100, "Industry must be less than 100 characters")
     .optional(),
+  logo: z.string().optional(),
 });
 
 type OrganizationFormValues = z.infer<typeof organizationFormSchema>;
@@ -52,6 +55,7 @@ interface OrganizationInfoFormProps {
     description?: string | null;
     website?: string | null;
     industry?: string | null;
+    logo?: string | null;
   };
   canEdit: boolean;
 }
@@ -70,6 +74,7 @@ export function OrganizationInfoForm({
       description: organization.description ?? "",
       website: organization.website ?? "",
       industry: organization.industry ?? "",
+      logo: organization.logo ?? "",
     },
   });
 
@@ -119,6 +124,21 @@ export function OrganizationInfoForm({
             </div>
           </div>
 
+          {organization.logo && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Logo</label>
+              <div className="w-16 h-16 rounded-lg overflow-hidden border bg-muted">
+                <Image
+                  src={organization.logo}
+                  alt={`${organization.name} logo`}
+                  width={64}
+                  height={64}
+                  className="object-cover w-full h-full"
+                />
+              </div>
+            </div>
+          )}
+
           {organization.description && (
             <div className="space-y-2">
               <label className="text-sm font-medium">Description</label>
@@ -193,6 +213,28 @@ export function OrganizationInfoForm({
               )}
             />
 
+            {/* Logo Upload */}
+            <FormField
+              control={form.control}
+              name="logo"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <ImageUpload
+                      value={field.value}
+                      onChange={field.onChange}
+                      disabled={!isEditing || isPending}
+                      label="Organization Logo"
+                      description="Upload a logo to represent your organization (optional)"
+                      type="organization-logo"
+                      organizationId={organization.id}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             {/* Description */}
             <FormField
               control={form.control}
diff --git a/src/components/ui/image-upload.tsx b/src/components/ui/image-upload.tsx
new file mode 100644
index 0000000..95a97f7
--- /dev/null
+++ b/src/components/ui/image-upload.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { useState, useRef } from "react";
+import Image from "next/image";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Badge } from "~/components/ui/badge";
+import { Upload, X, ImageIcon, AlertCircle } from "lucide-react";
+import { cn } from "~/lib/utils";
+import { useFileUpload } from "~/hooks/use-file-upload";
+
+interface ImageUploadProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  disabled?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+  maxSizeMB?: number;
+  acceptedFormats?: string[];
+  type?: "organization-logo" | "user-avatar";
+  organizationId?: string;
+}
+
+export function ImageUpload({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  label = "Logo",
+  description = "Upload a logo for your organization",
+  maxSizeMB = 5,
+  acceptedFormats = ["image/jpeg", "image/png", "image/webp", "image/svg+xml"],
+  type = "organization-logo",
+  organizationId,
+}: ImageUploadProps) {
+  const [dragOver, setDragOver] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { uploadFile, deleteFile, isUploading } = useFileUpload();
+
+  const handleFileUpload = async (file: File) => {
+    setError(null);
+
+    const result = await uploadFile(file, {
+      type,
+      organizationId,
+      maxSizeMB,
+      allowedTypes: acceptedFormats,
+    });
+
+    if (result?.url) {
+      // If there was a previous file, delete it
+      if (value?.startsWith("/uploads/")) {
+        await deleteFile(value);
+      }
+      onChange(result.url);
+    }
+  };
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      void handleFileUpload(file);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDragOver(false);
+
+    const file = event.dataTransfer.files[0];
+    if (file) {
+      void handleFileUpload(file);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDragOver(false);
+  };
+
+  const handleRemove = async () => {
+    // Delete file from server if it's a local upload
+    if (value?.startsWith("/uploads/")) {
+      await deleteFile(value);
+    }
+    onChange(null);
+    setError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleBrowse = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {label && (
+        <div className="space-y-1">
+          <Label className="text-sm font-medium">{label}</Label>
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {/* Current Image Preview */}
+        {value && (
+          <div className="relative inline-block">
+            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
+              <Image
+                src={value}
+                alt="Uploaded logo"
+                fill
+                className="object-cover"
+              />
+            </div>
+            {!disabled && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
+                onClick={handleRemove}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Upload Area */}
+        {!value && (
+          <div
+            className={cn(
+              "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+              dragOver && !disabled
+                ? "border-primary bg-primary/5"
+                : "border-muted-foreground/25",
+              disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+              "hover:border-primary/50 hover:bg-primary/5"
+            )}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onClick={handleBrowse}
+          >
+            <div className="space-y-3">
+              <div className="flex justify-center">
+                <div className="p-3 bg-muted rounded-full">
+                  {isUploading ? (
+                    <div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
+                  ) : (
+                    <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium">
+                  {isUploading
+                    ? "Uploading..."
+                    : "Drop your logo here, or browse"}
+                </p>
+                <div className="flex flex-wrap justify-center gap-1">
+                  {acceptedFormats.map(format => (
+                    <Badge key={format} variant="secondary" className="text-xs">
+                      {format.split("/")[1]?.toUpperCase()}
+                    </Badge>
+                  ))}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Max {maxSizeMB}MB
+                </p>
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={disabled || isUploading}
+                className="pointer-events-none"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Browse Files
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Replace/Change Button for existing image */}
+        {value && !disabled && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleBrowse}
+            disabled={isUploading}
+            className="w-full sm:w-auto"
+          >
+            <Upload className="h-4 w-4 mr-2" />
+            {isUploading ? "Uploading..." : "Change Logo"}
+          </Button>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <AlertCircle className="h-4 w-4 text-destructive" />
+            <p className="text-sm text-destructive">{error}</p>
+          </div>
+        )}
+      </div>
+
+      {/* Hidden File Input */}
+      <Input
+        ref={fileInputRef}
+        type="file"
+        accept={acceptedFormats.join(",")}
+        onChange={handleFileSelect}
+        disabled={disabled}
+        className="hidden"
+      />
+    </div>
+  );
+}
diff --git a/src/hooks/use-file-upload.ts b/src/hooks/use-file-upload.ts
new file mode 100644
index 0000000..5da475e
--- /dev/null
+++ b/src/hooks/use-file-upload.ts
@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface UploadOptions {
+  type?: "organization-logo" | "user-avatar";
+  organizationId?: string;
+  maxSizeMB?: number;
+  allowedTypes?: string[];
+}
+
+interface UploadResponse {
+  success: boolean;
+  url?: string;
+  filename?: string;
+  size?: number;
+  type?: string;
+  error?: string;
+}
+
+export function useFileUpload() {
+  const [isUploading, setIsUploading] = useState(false);
+
+  const uploadFile = async (
+    file: File,
+    options: UploadOptions = {}
+  ): Promise<UploadResponse | null> => {
+    const {
+      type = "organization-logo",
+      organizationId,
+      maxSizeMB = 5,
+      allowedTypes = [
+        "image/jpeg",
+        "image/jpg",
+        "image/png",
+        "image/webp",
+        "image/svg+xml",
+      ],
+    } = options;
+
+    // Client-side validation
+    if (!allowedTypes.includes(file.type)) {
+      toast.error(
+        `Invalid file type. Please upload ${allowedTypes.map(t => t.split("/")[1]).join(", ")} files.`
+      );
+      return null;
+    }
+
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      toast.error(`File too large. Maximum size is ${maxSizeMB}MB.`);
+      return null;
+    }
+
+    setIsUploading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("type", type);
+      if (organizationId) {
+        formData.append("organizationId", organizationId);
+      }
+
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      const result = (await response.json()) as UploadResponse;
+
+      if (!response.ok) {
+        throw new Error(result.error ?? "Upload failed");
+      }
+
+      if (result.success && result.url) {
+        toast.success("File uploaded successfully");
+        return result;
+      } else {
+        throw new Error("Upload failed");
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Upload failed";
+      toast.error(errorMessage);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const deleteFile = async (filePath: string): Promise<boolean> => {
+    try {
+      const response = await fetch(
+        `/api/upload?path=${encodeURIComponent(filePath)}`,
+        {
+          method: "DELETE",
+        }
+      );
+
+      const result = (await response.json()) as {
+        success: boolean;
+        error?: string;
+      };
+
+      if (!response.ok) {
+        throw new Error(result.error ?? "Delete failed");
+      }
+
+      return result.success;
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Delete failed";
+      toast.error(errorMessage);
+      return false;
+    }
+  };
+
+  return {
+    uploadFile,
+    deleteFile,
+    isUploading,
+  };
+}
diff --git a/src/lib/currency-utils.ts b/src/lib/currency-utils.ts
new file mode 100644
index 0000000..47c0b6e
--- /dev/null
+++ b/src/lib/currency-utils.ts
@@ -0,0 +1,80 @@
+/**
+ * Shared currency formatting utilities for both client and server
+ */
+
+/**
+ * Format currency values based on currency type
+ */
+export function formatCurrency(
+  value: number | string | { toString(): string },
+  currency = "USD"
+): string {
+  let numericValue: number;
+  
+  if (typeof value === "number") {
+    numericValue = value;
+  } else if (typeof value === "string") {
+    numericValue = parseFloat(value);
+    if (isNaN(numericValue)) return "0";
+  } else if (value && typeof value === "object" && "toString" in value) {
+    try {
+      numericValue = parseFloat(value.toString());
+      if (isNaN(numericValue)) return "0";
+    } catch {
+      return "0";
+    }
+  } else {
+    return "0";
+  }
+
+  // IDR doesn't use decimal places and uses thousands separators
+  if (currency === "IDR") {
+    return new Intl.NumberFormat("id-ID", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(Math.round(numericValue));
+  }
+  
+  // For other currencies, use 2 decimal places with appropriate locale
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(numericValue);
+}
+
+/**
+ * Get currency symbol for display
+ */
+export function getCurrencySymbol(currency: string): string {
+  const symbols: Record<string, string> = {
+    USD: "$",
+    EUR: "€",
+    GBP: "£",
+    IDR: "Rp",
+    JPY: "¥",
+    CNY: "¥",
+    AUD: "A$",
+    CAD: "C$",
+  };
+  
+  return symbols[currency] ?? currency;
+}
+
+/**
+ * Format currency with symbol
+ */
+export function formatCurrencyWithSymbol(
+  value: number | string | { toString(): string },
+  currency = "USD"
+): string {
+  const formattedAmount = formatCurrency(value, currency);
+  const symbol = getCurrencySymbol(currency);
+  
+  // For IDR, put symbol before the amount
+  if (currency === "IDR") {
+    return `${symbol} ${formattedAmount}`;
+  }
+  
+  // For most other currencies, put symbol after
+  return `${formattedAmount} ${symbol}`;
+}
diff --git a/src/server/api/routers/finance/invoice.ts b/src/server/api/routers/finance/invoice.ts
index 5b4fdc4..a87879f 100644
--- a/src/server/api/routers/finance/invoice.ts
+++ b/src/server/api/routers/finance/invoice.ts
@@ -12,7 +12,7 @@ import { Resend } from "resend";
 import { env } from "~/env";
 import { render } from "@react-email/components";
 import { InvoiceEmail } from "~/server/email/templates/invoice-email";
-import { formatDecimalLike } from "~/server/utils/format";
+import { formatCurrency, formatDecimal } from "~/server/utils/format";
 
 // Shared schemas for better reusability and consistency
 const invoiceItemSchema = z.object({
@@ -316,7 +316,20 @@ export const invoiceRouter = createTRPCRouter({
       // Note: invoice access is organization specific; we fetch invoice then verify organization permissions
       const invoice = await db.invoice.findUnique({
         where: { id: input.id },
-        include: { items: true, payments: true, customer: true },
+        include: {
+          items: true,
+          payments: true,
+          customer: true,
+          organization: {
+            select: {
+              id: true,
+              name: true,
+              logo: true,
+              industry: true,
+              website: true,
+            },
+          },
+        },
       });
       if (!invoice) throw new Error("Invoice not found");
       await ctx.requireAnyPermission(invoice.organizationId);
@@ -398,18 +411,18 @@ export const invoiceRouter = createTRPCRouter({
           currency: invoice.currency,
           items: invoice.items.map(i => ({
             description: i.description,
-            quantity: formatDecimalLike(i.quantity),
-            unitPrice: formatDecimalLike(i.unitPrice),
-            taxRate: formatDecimalLike(i.taxRate),
-            discountRate: formatDecimalLike(i.discountRate),
-            lineTotal: formatDecimalLike(i.subtotal),
+            quantity: formatDecimal(i.quantity),
+            unitPrice: formatCurrency(i.unitPrice, invoice.currency),
+            taxRate: formatDecimal(i.taxRate),
+            discountRate: formatDecimal(i.discountRate),
+            lineTotal: formatCurrency(i.subtotal, invoice.currency),
           })),
-          subtotal: formatDecimalLike(invoice.subtotal),
-          taxAmount: formatDecimalLike(invoice.taxAmount),
-          discountAmount: formatDecimalLike(invoice.discountAmount),
-          shippingAmount: formatDecimalLike(invoice.shippingAmount),
-          totalAmount: formatDecimalLike(invoice.totalAmount),
-          paidAmount: formatDecimalLike(invoice.paidAmount),
+          subtotal: formatCurrency(invoice.subtotal, invoice.currency),
+          taxAmount: formatCurrency(invoice.taxAmount, invoice.currency),
+          discountAmount: formatCurrency(invoice.discountAmount, invoice.currency),
+          shippingAmount: formatCurrency(invoice.shippingAmount, invoice.currency),
+          totalAmount: formatCurrency(invoice.totalAmount, invoice.currency),
+          paidAmount: formatCurrency(invoice.paidAmount, invoice.currency),
           paymentTerms: invoice.paymentTerms,
           notes: invoice.notes,
           termsAndConditions: invoice.termsAndConditions,
@@ -417,13 +430,15 @@ export const invoiceRouter = createTRPCRouter({
       );
 
       const resend = new Resend(env.RESEND_API_KEY);
-      await resend.emails.send({
-        from: "Acme <onboarding@resend.dev>",
+      const sendMail = await resend.emails.send({
+        from: env.RESEND_FROM_EMAIL,
         to: invoice.customerEmail,
         subject: `Invoice ${invoice.invoiceNumber}`,
         html: emailHtml,
       });
 
+      console.log("Resend response", sendMail);
+
       const updated = await db.invoice.update({
         where: { id: invoice.id },
         data: {
diff --git a/src/server/utils/format.ts b/src/server/utils/format.ts
index e2a2f0c..bbb887b 100644
--- a/src/server/utils/format.ts
+++ b/src/server/utils/format.ts
@@ -14,3 +14,37 @@ export function formatDecimalLike(
   }
   return value.toFixed(2);
 }
+
+/**
+ * Format currency values based on currency type
+ */
+export function formatCurrency(
+  value: Prisma.Decimal | number | string,
+  currency: string
+): string {
+  const numValue = typeof value === "string" ? parseFloat(value) : Number(value);
+  
+  if (currency === "IDR") {
+    return new Intl.NumberFormat("id-ID", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(numValue);
+  }
+  
+  // Default formatting for other currencies
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(numValue);
+}
+
+/**
+ * Format decimal values for display (quantities, rates, etc.)
+ */
+export function formatDecimal(
+  value: Prisma.Decimal | number | string,
+  decimals = 2
+): string {
+  const numValue = typeof value === "string" ? parseFloat(value) : Number(value);
+  return numValue.toFixed(decimals);
+}
diff --git a/src/types/currencies.ts b/src/types/currencies.ts
index 30cc914..6aa9bfb 100644
--- a/src/types/currencies.ts
+++ b/src/types/currencies.ts
@@ -9,6 +9,7 @@ export const currencies = [
   { code: "AUD", name: "Australian Dollar", symbol: "A$" },
   { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
   { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
+  { code: "IDR", name: "Indonesian Rupiah", symbol: "Rp" },
   { code: "INR", name: "Indian Rupee", symbol: "₹" },
   { code: "BRL", name: "Brazilian Real", symbol: "R$" },
   { code: "MXN", name: "Mexican Peso", symbol: "$" },

From ae9beb015b129cc3fdc9834bf3ead5a6fe77e7a4 Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Tue, 16 Sep 2025 14:29:01 +0700
Subject: [PATCH 2/9] style: apply code formatting and linting fixes

- Remove trailing whitespace
- Improve line breaks for better readability
- Apply consistent spacing and formatting
- No functional changes, only style improvements
---
 .../invoicing/invoice-preview-dialog.tsx      | 23 ++++++++++++-------
 src/lib/currency-utils.ts                     | 10 ++++----
 src/server/api/routers/finance/invoice.ts     | 10 ++++++--
 src/server/utils/format.ts                    | 10 ++++----
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/components/finance/invoicing/invoice-preview-dialog.tsx b/src/components/finance/invoicing/invoice-preview-dialog.tsx
index 731aff8..f90563c 100644
--- a/src/components/finance/invoicing/invoice-preview-dialog.tsx
+++ b/src/components/finance/invoicing/invoice-preview-dialog.tsx
@@ -79,7 +79,7 @@ export function InvoicePreviewDialog({
 
   const formatAmount = (value: unknown, currency?: string): string => {
     let numericValue: number;
-    
+
     if (typeof value === "number") {
       numericValue = value;
     } else if (typeof value === "string") {
@@ -88,7 +88,8 @@ export function InvoicePreviewDialog({
     } else if (value && typeof value === "object" && "toString" in value) {
       try {
         numericValue = parseFloat((value as { toString(): string }).toString());
-        if (isNaN(numericValue)) return (value as { toString(): string }).toString();
+        if (isNaN(numericValue))
+          return (value as { toString(): string }).toString();
       } catch {
         return "0";
       }
@@ -98,12 +99,12 @@ export function InvoicePreviewDialog({
 
     // Format based on currency
     const currencyCode = currency ?? "USD";
-    
+
     // IDR doesn't use decimal places and uses thousands separators
     if (currencyCode === "IDR") {
       return new Intl.NumberFormat("id-ID").format(Math.round(numericValue));
     }
-    
+
     // For other currencies, use 2 decimal places with appropriate locale
     const locale = currencyCode === "USD" ? "en-US" : "en-US"; // Can be extended for other currencies
     return new Intl.NumberFormat(locale, {
@@ -385,7 +386,8 @@ export function InvoicePreviewDialog({
                   <DollarSign className="h-4 w-4 text-muted-foreground" />
                   <span className="font-medium">Paid Amount:</span>
                   <span>
-                    {formatAmount(invoice.paidAmount, invoice.currency)} {invoice.currency}
+                    {formatAmount(invoice.paidAmount, invoice.currency)}{" "}
+                    {invoice.currency}
                   </span>
                 </div>
               </div>
@@ -457,7 +459,8 @@ export function InvoicePreviewDialog({
                           {formatAmount(item.quantity)}
                         </td>
                         <td className="border border-border p-3 text-right">
-                          {formatAmount(item.unitPrice, invoice.currency)} {invoice.currency}
+                          {formatAmount(item.unitPrice, invoice.currency)}{" "}
+                          {invoice.currency}
                         </td>
                         <td className="border border-border p-3 text-center">
                           {formatAmount(item.discountRate)}%
@@ -466,7 +469,10 @@ export function InvoicePreviewDialog({
                           {formatAmount(item.taxRate)}%
                         </td>
                         <td className="border border-border p-3 text-right font-medium">
-                          {formatAmount(calculateItemTotal(item), invoice.currency)}{" "}
+                          {formatAmount(
+                            calculateItemTotal(item),
+                            invoice.currency
+                          )}{" "}
                           {invoice.currency}
                         </td>
                       </tr>
@@ -481,7 +487,8 @@ export function InvoicePreviewDialog({
                         Total Amount:
                       </td>
                       <td className="border border-border p-3 text-right font-bold text-lg">
-                        {formatAmount(invoice.totalAmount, invoice.currency)} {invoice.currency}
+                        {formatAmount(invoice.totalAmount, invoice.currency)}{" "}
+                        {invoice.currency}
                       </td>
                     </tr>
                   </tfoot>
diff --git a/src/lib/currency-utils.ts b/src/lib/currency-utils.ts
index 47c0b6e..2ad80ff 100644
--- a/src/lib/currency-utils.ts
+++ b/src/lib/currency-utils.ts
@@ -10,7 +10,7 @@ export function formatCurrency(
   currency = "USD"
 ): string {
   let numericValue: number;
-  
+
   if (typeof value === "number") {
     numericValue = value;
   } else if (typeof value === "string") {
@@ -34,7 +34,7 @@ export function formatCurrency(
       maximumFractionDigits: 0,
     }).format(Math.round(numericValue));
   }
-  
+
   // For other currencies, use 2 decimal places with appropriate locale
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 2,
@@ -56,7 +56,7 @@ export function getCurrencySymbol(currency: string): string {
     AUD: "A$",
     CAD: "C$",
   };
-  
+
   return symbols[currency] ?? currency;
 }
 
@@ -69,12 +69,12 @@ export function formatCurrencyWithSymbol(
 ): string {
   const formattedAmount = formatCurrency(value, currency);
   const symbol = getCurrencySymbol(currency);
-  
+
   // For IDR, put symbol before the amount
   if (currency === "IDR") {
     return `${symbol} ${formattedAmount}`;
   }
-  
+
   // For most other currencies, put symbol after
   return `${formattedAmount} ${symbol}`;
 }
diff --git a/src/server/api/routers/finance/invoice.ts b/src/server/api/routers/finance/invoice.ts
index a87879f..87f806e 100644
--- a/src/server/api/routers/finance/invoice.ts
+++ b/src/server/api/routers/finance/invoice.ts
@@ -419,8 +419,14 @@ export const invoiceRouter = createTRPCRouter({
           })),
           subtotal: formatCurrency(invoice.subtotal, invoice.currency),
           taxAmount: formatCurrency(invoice.taxAmount, invoice.currency),
-          discountAmount: formatCurrency(invoice.discountAmount, invoice.currency),
-          shippingAmount: formatCurrency(invoice.shippingAmount, invoice.currency),
+          discountAmount: formatCurrency(
+            invoice.discountAmount,
+            invoice.currency
+          ),
+          shippingAmount: formatCurrency(
+            invoice.shippingAmount,
+            invoice.currency
+          ),
           totalAmount: formatCurrency(invoice.totalAmount, invoice.currency),
           paidAmount: formatCurrency(invoice.paidAmount, invoice.currency),
           paymentTerms: invoice.paymentTerms,
diff --git a/src/server/utils/format.ts b/src/server/utils/format.ts
index bbb887b..d8a97d6 100644
--- a/src/server/utils/format.ts
+++ b/src/server/utils/format.ts
@@ -22,15 +22,16 @@ export function formatCurrency(
   value: Prisma.Decimal | number | string,
   currency: string
 ): string {
-  const numValue = typeof value === "string" ? parseFloat(value) : Number(value);
-  
+  const numValue =
+    typeof value === "string" ? parseFloat(value) : Number(value);
+
   if (currency === "IDR") {
     return new Intl.NumberFormat("id-ID", {
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
     }).format(numValue);
   }
-  
+
   // Default formatting for other currencies
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 2,
@@ -45,6 +46,7 @@ export function formatDecimal(
   value: Prisma.Decimal | number | string,
   decimals = 2
 ): string {
-  const numValue = typeof value === "string" ? parseFloat(value) : Number(value);
+  const numValue =
+    typeof value === "string" ? parseFloat(value) : Number(value);
   return numValue.toFixed(decimals);
 }

From e92ba331b724f7a5468d416f893deba20e461bde Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Wed, 17 Sep 2025 09:49:27 +0700
Subject: [PATCH 3/9] fix(api): update baseURL with environment variable for
 better-auth client

---
 src/app/api/upload/route.ts | 1 +
 src/lib/auth-client.ts      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
index b22e28f..9ab8371 100644
--- a/src/app/api/upload/route.ts
+++ b/src/app/api/upload/route.ts
@@ -140,6 +140,7 @@ export async function DELETE(request: NextRequest) {
       return NextResponse.json({
         success: true,
         message: "File not found or already deleted",
+        fileError: fileError,
       });
     }
   } catch (error) {
diff --git a/src/lib/auth-client.ts b/src/lib/auth-client.ts
index 7b6d51e..690ae63 100644
--- a/src/lib/auth-client.ts
+++ b/src/lib/auth-client.ts
@@ -2,5 +2,5 @@ import { createAuthClient } from "better-auth/react";
 
 export const authClient = createAuthClient({
   /** the base url of the server (optional if you're using the same domain) */
-  baseURL: "http://localhost:3000",
+  baseURL: process.env.BETTER_AUTH_URL ?? "http://localhost:3000",
 });

From 239821fa9c0a2c368f0e0c6443f75d77973bc2ab Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Wed, 17 Sep 2025 09:52:33 +0700
Subject: [PATCH 4/9] feat(api/upload): update file upload logic for better
 error handling and code refactoring

---
 src/app/api/upload/route.ts                   |  306 ++---
 .../invoicing/invoice-preview-dialog.tsx      | 1056 ++++++++---------
 src/components/ui/image-upload.tsx            |  478 ++++----
 src/hooks/use-file-upload.ts                  |  244 ++--
 src/lib/currency-utils.ts                     |  160 +--
 src/server/api/routers/finance/invoice.ts     |   10 +-
 6 files changed, 1127 insertions(+), 1127 deletions(-)

diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
index 9ab8371..efe690a 100644
--- a/src/app/api/upload/route.ts
+++ b/src/app/api/upload/route.ts
@@ -1,153 +1,153 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { writeFile, mkdir } from "fs/promises";
-import { join } from "path";
-import { auth } from "~/lib/auth";
-import { z } from "zod";
-
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const ALLOWED_TYPES = [
-  "image/jpeg",
-  "image/jpg",
-  "image/png",
-  "image/webp",
-  "image/svg+xml",
-];
-
-const uploadSchema = z.object({
-  type: z
-    .enum(["organization-logo", "user-avatar"])
-    .default("organization-logo"),
-  organizationId: z.string().optional(),
-});
-
-export async function POST(request: NextRequest) {
-  try {
-    // Check authentication
-    const session = await auth.api.getSession({ headers: request.headers });
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-    }
-
-    const formData = await request.formData();
-    const file = formData.get("file") as File;
-    const type = (formData.get("type") as string) ?? "organization-logo";
-    const organizationId = formData.get("organizationId") as string;
-
-    // Validate input
-    const validatedData = uploadSchema.parse({ type, organizationId });
-
-    if (!file) {
-      return NextResponse.json({ error: "No file provided" }, { status: 400 });
-    }
-
-    // Validate file type
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      return NextResponse.json(
-        {
-          error:
-            "Invalid file type. Only JPEG, PNG, WebP, and SVG files are allowed.",
-        },
-        { status: 400 }
-      );
-    }
-
-    // Validate file size
-    if (file.size > MAX_FILE_SIZE) {
-      return NextResponse.json(
-        { error: "File too large. Maximum size is 5MB." },
-        { status: 400 }
-      );
-    }
-
-    // Create filename with timestamp and random string
-    const timestamp = Date.now();
-    const randomString = Math.random().toString(36).substring(2, 15);
-    const fileExtension = file.name.split(".").pop();
-    const fileName = `${validatedData.type}-${timestamp}-${randomString}.${fileExtension}`;
-
-    // Create upload directory path
-    const uploadDir = join(
-      process.cwd(),
-      "public",
-      "uploads",
-      validatedData.type
-    );
-    await mkdir(uploadDir, { recursive: true });
-
-    // Convert file to buffer and save
-    const bytes = await file.arrayBuffer();
-    const buffer = Buffer.from(bytes);
-    const filePath = join(uploadDir, fileName);
-
-    await writeFile(filePath, buffer);
-
-    // Return the public URL
-    const fileUrl = `/uploads/${validatedData.type}/${fileName}`;
-
-    return NextResponse.json({
-      success: true,
-      url: fileUrl,
-      filename: fileName,
-      size: file.size,
-      type: file.type,
-    });
-  } catch (error) {
-    console.error("File upload error:", error);
-
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: "Invalid input parameters" },
-        { status: 400 }
-      );
-    }
-
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
-
-// Handle file deletion
-export async function DELETE(request: NextRequest) {
-  try {
-    // Check authentication
-    const session = await auth.api.getSession({ headers: request.headers });
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-    }
-
-    const { searchParams } = new URL(request.url);
-    const filePath = searchParams.get("path");
-
-    if (!filePath?.startsWith("/uploads/")) {
-      return NextResponse.json({ error: "Invalid file path" }, { status: 400 });
-    }
-
-    // Construct full file path
-    const fullPath = join(process.cwd(), "public", filePath);
-
-    try {
-      const { unlink } = await import("fs/promises");
-      await unlink(fullPath);
-
-      return NextResponse.json({
-        success: true,
-        message: "File deleted successfully",
-      });
-    } catch (fileError) {
-      // File might not exist, which is okay
-      return NextResponse.json({
-        success: true,
-        message: "File not found or already deleted",
-        fileError: fileError,
-      });
-    }
-  } catch (error) {
-    console.error("File deletion error:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
+import { type NextRequest, NextResponse } from "next/server";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+import { auth } from "~/lib/auth";
+import { z } from "zod";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/webp",
+  "image/svg+xml",
+];
+
+const uploadSchema = z.object({
+  type: z
+    .enum(["organization-logo", "user-avatar"])
+    .default("organization-logo"),
+  organizationId: z.string().optional(),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const session = await auth.api.getSession({ headers: request.headers });
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const formData = await request.formData();
+    const file = formData.get("file") as File;
+    const type = (formData.get("type") as string) ?? "organization-logo";
+    const organizationId = formData.get("organizationId") as string;
+
+    // Validate input
+    const validatedData = uploadSchema.parse({ type, organizationId });
+
+    if (!file) {
+      return NextResponse.json({ error: "No file provided" }, { status: 400 });
+    }
+
+    // Validate file type
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      return NextResponse.json(
+        {
+          error:
+            "Invalid file type. Only JPEG, PNG, WebP, and SVG files are allowed.",
+        },
+        { status: 400 }
+      );
+    }
+
+    // Validate file size
+    if (file.size > MAX_FILE_SIZE) {
+      return NextResponse.json(
+        { error: "File too large. Maximum size is 5MB." },
+        { status: 400 }
+      );
+    }
+
+    // Create filename with timestamp and random string
+    const timestamp = Date.now();
+    const randomString = Math.random().toString(36).substring(2, 15);
+    const fileExtension = file.name.split(".").pop();
+    const fileName = `${validatedData.type}-${timestamp}-${randomString}.${fileExtension}`;
+
+    // Create upload directory path
+    const uploadDir = join(
+      process.cwd(),
+      "public",
+      "uploads",
+      validatedData.type
+    );
+    await mkdir(uploadDir, { recursive: true });
+
+    // Convert file to buffer and save
+    const bytes = await file.arrayBuffer();
+    const buffer = Buffer.from(bytes);
+    const filePath = join(uploadDir, fileName);
+
+    await writeFile(filePath, buffer);
+
+    // Return the public URL
+    const fileUrl = `/uploads/${validatedData.type}/${fileName}`;
+
+    return NextResponse.json({
+      success: true,
+      url: fileUrl,
+      filename: fileName,
+      size: file.size,
+      type: file.type,
+    });
+  } catch (error) {
+    console.error("File upload error:", error);
+
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: "Invalid input parameters" },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
+
+// Handle file deletion
+export async function DELETE(request: NextRequest) {
+  try {
+    // Check authentication
+    const session = await auth.api.getSession({ headers: request.headers });
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const filePath = searchParams.get("path");
+
+    if (!filePath?.startsWith("/uploads/")) {
+      return NextResponse.json({ error: "Invalid file path" }, { status: 400 });
+    }
+
+    // Construct full file path
+    const fullPath = join(process.cwd(), "public", filePath);
+
+    try {
+      const { unlink } = await import("fs/promises");
+      await unlink(fullPath);
+
+      return NextResponse.json({
+        success: true,
+        message: "File deleted successfully",
+      });
+    } catch (fileError) {
+      // File might not exist, which is okay
+      return NextResponse.json({
+        success: true,
+        message: "File not found or already deleted",
+        fileError: fileError,
+      });
+    }
+  } catch (error) {
+    console.error("File deletion error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/components/finance/invoicing/invoice-preview-dialog.tsx b/src/components/finance/invoicing/invoice-preview-dialog.tsx
index f90563c..fe3505a 100644
--- a/src/components/finance/invoicing/invoice-preview-dialog.tsx
+++ b/src/components/finance/invoicing/invoice-preview-dialog.tsx
@@ -1,528 +1,528 @@
-"use client";
-
-import { useState } from "react";
-import Image from "next/image";
-import { api } from "~/trpc/react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
-import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
-import { Separator } from "~/components/ui/separator";
-import { Skeleton } from "~/components/ui/skeleton";
-import {
-  Printer,
-  Download,
-  Send,
-  User,
-  Calendar,
-  DollarSign,
-  FileText,
-  Building,
-} from "lucide-react";
-import { invoiceStatusColors, invoiceStatusLabels } from "~/types";
-
-interface InvoicePreviewDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  invoiceId: string | null;
-  organizationId: string;
-  onSendEmail?: (invoiceId: string) => void;
-}
-
-interface InvoiceItem {
-  id?: string;
-  description: string;
-  quantity: unknown;
-  unitPrice: unknown;
-  taxRate: unknown;
-  discountRate: unknown;
-}
-
-export function InvoicePreviewDialog({
-  open,
-  onOpenChange,
-  invoiceId,
-  onSendEmail,
-}: InvoicePreviewDialogProps) {
-  const [isPrinting, setIsPrinting] = useState(false);
-
-  const {
-    data: invoice,
-    isLoading,
-    error,
-  } = api.invoice.getInvoiceById.useQuery(
-    { id: invoiceId! },
-    { enabled: !!invoiceId && open }
-  );
-
-  const handlePrint = () => {
-    setIsPrinting(true);
-    window.print();
-    setTimeout(() => setIsPrinting(false), 1000);
-  };
-
-  const handleDownload = () => {
-    if (!invoice) return;
-
-    // Create a simplified HTML version for download
-    const printWindow = window.open("", "_blank");
-    if (printWindow) {
-      printWindow.document.write(generateInvoiceHTML());
-      printWindow.document.close();
-      printWindow.print();
-    }
-  };
-
-  const formatAmount = (value: unknown, currency?: string): string => {
-    let numericValue: number;
-
-    if (typeof value === "number") {
-      numericValue = value;
-    } else if (typeof value === "string") {
-      numericValue = parseFloat(value);
-      if (isNaN(numericValue)) return value;
-    } else if (value && typeof value === "object" && "toString" in value) {
-      try {
-        numericValue = parseFloat((value as { toString(): string }).toString());
-        if (isNaN(numericValue))
-          return (value as { toString(): string }).toString();
-      } catch {
-        return "0";
-      }
-    } else {
-      return "0";
-    }
-
-    // Format based on currency
-    const currencyCode = currency ?? "USD";
-
-    // IDR doesn't use decimal places and uses thousands separators
-    if (currencyCode === "IDR") {
-      return new Intl.NumberFormat("id-ID").format(Math.round(numericValue));
-    }
-
-    // For other currencies, use 2 decimal places with appropriate locale
-    const locale = currencyCode === "USD" ? "en-US" : "en-US"; // Can be extended for other currencies
-    return new Intl.NumberFormat(locale, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }).format(numericValue);
-  };
-
-  const formatDate = (value: unknown): string => {
-    if (value instanceof Date) return value.toLocaleDateString();
-    if (typeof value === "string") {
-      const d = new Date(value);
-      return isNaN(d.getTime()) ? value : d.toLocaleDateString();
-    }
-    return "";
-  };
-
-  const calculateItemTotal = (item: InvoiceItem) => {
-    const quantity =
-      typeof item.quantity === "number"
-        ? item.quantity
-        : parseFloat(
-            (item.quantity as { toString(): string })?.toString() ?? "0"
-          );
-    const unitPrice =
-      typeof item.unitPrice === "number"
-        ? item.unitPrice
-        : parseFloat(
-            (item.unitPrice as { toString(): string })?.toString() ?? "0"
-          );
-    const subtotal = quantity * unitPrice;
-    const discount =
-      subtotal *
-      (parseFloat(
-        (item.discountRate as { toString(): string })?.toString() ?? "0"
-      ) /
-        100);
-    const afterDiscount = subtotal - discount;
-    const tax =
-      afterDiscount *
-      (parseFloat((item.taxRate as { toString(): string })?.toString() ?? "0") /
-        100);
-    return afterDiscount + tax;
-  };
-
-  const generateInvoiceHTML = () => {
-    if (!invoice) return "";
-
-    return `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>Invoice ${invoice.invoiceNumber}</title>
-          <style>
-            body { font-family: Arial, sans-serif; margin: 20px; }
-            .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #ddd; padding-bottom: 20px; }
-            .org-info { display: flex; align-items: center; gap: 15px; }
-            .org-logo { width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 8px; }
-            .org-placeholder { width: 80px; height: 80px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #666; }
-            .invoice-title { text-align: center; }
-            .invoice-info { display: flex; justify-content: space-between; margin-bottom: 30px; }
-            .customer-info { margin-bottom: 30px; }
-            table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
-            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-            th { background-color: #f2f2f2; }
-            .total-row { font-weight: bold; }
-            .text-right { text-align: right; }
-          </style>
-        </head>
-        <body>
-          <div class="header">
-            <div class="org-info">
-              ${
-                invoice.organization?.logo
-                  ? `<img src="${invoice.organization.logo}" alt="${invoice.organization.name ?? "Organization"}" class="org-logo" />`
-                  : `<div class="org-placeholder">🏢</div>`
-              }
-              <div>
-                <h3 style="margin: 0; color: #666;">${invoice.organization?.name ?? "Organization"}</h3>
-                ${invoice.organization?.website ? `<p style="margin: 5px 0 0 0; color: #888; font-size: 14px;">${invoice.organization.website}</p>` : ""}
-              </div>
-            </div>
-            <div class="invoice-title">
-              <h1 style="margin: 0; color: #333;">INVOICE</h1>
-              <h2 style="margin: 5px 0 0 0; color: #666;">${invoice.invoiceNumber}</h2>
-            </div>
-          </div>
-          
-          <div class="invoice-info">
-            <div>
-              <strong>Issue Date:</strong> ${formatDate(invoice.issueDate)}<br>
-              <strong>Due Date:</strong> ${formatDate(invoice.dueDate)}<br>
-              <strong>Payment Terms:</strong> ${invoice.paymentTerms}
-            </div>
-            <div>
-              <strong>Status:</strong> ${invoiceStatusLabels[invoice.status]}<br>
-              <strong>Currency:</strong> ${invoice.currency}
-            </div>
-          </div>
-
-          <div class="customer-info">
-            <strong>Bill To:</strong><br>
-            ${invoice.customerName ?? `${invoice.customer?.firstName ?? ""} ${invoice.customer?.lastName ?? ""}`.trim()}<br>
-            ${invoice.customerEmail}<br>
-            ${invoice.customer?.address ?? ""}
-          </div>
-
-          <table>
-            <thead>
-              <tr>
-                <th>Description</th>
-                <th>Qty</th>
-                <th>Unit Price</th>
-                <th>Discount</th>
-                <th>Tax Rate</th>
-                <th class="text-right">Total</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${invoice.items
-                .map(
-                  item => `
-                <tr>
-                  <td>${item.description}</td>
-                  <td>${formatAmount(item.quantity)}</td>
-                  <td>${formatAmount(item.unitPrice, invoice.currency)} ${invoice.currency}</td>
-                  <td>${formatAmount(item.discountRate)}%</td>
-                  <td>${formatAmount(item.taxRate)}%</td>
-                  <td class="text-right">${formatAmount(calculateItemTotal(item), invoice.currency)} ${invoice.currency}</td>
-                </tr>
-              `
-                )
-                .join("")}
-              <tr class="total-row">
-                <td colspan="5"><strong>Total Amount</strong></td>
-                <td class="text-right"><strong>${formatAmount(invoice.totalAmount, invoice.currency)} ${invoice.currency}</strong></td>
-              </tr>
-            </tbody>
-          </table>
-
-          ${invoice.notes ? `<div><strong>Notes:</strong><br>${invoice.notes}</div>` : ""}
-          ${invoice.termsAndConditions ? `<div><strong>Terms & Conditions:</strong><br>${invoice.termsAndConditions}</div>` : ""}
-        </body>
-      </html>
-    `;
-  };
-
-  if (!open || !invoiceId) return null;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl w-[90vw] max-h-[90vh] overflow-y-auto p-6 lg:max-w-5xl">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <FileText className="h-5 w-5" />
-            Invoice Preview
-          </DialogTitle>
-        </DialogHeader>
-
-        {isLoading ? (
-          <div className="space-y-4">
-            <Skeleton className="h-8 w-full" />
-            <Skeleton className="h-24 w-full" />
-            <Skeleton className="h-32 w-full" />
-          </div>
-        ) : error ? (
-          <div className="py-8 text-center text-red-600">
-            Failed to load invoice. Please try again.
-          </div>
-        ) : !invoice ? (
-          <div className="py-8 text-center text-muted-foreground">
-            Invoice not found.
-          </div>
-        ) : (
-          <div className="space-y-6">
-            {/* Action Buttons */}
-            <div className="flex flex-wrap gap-2 justify-end print:hidden">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handlePrint}
-                disabled={isPrinting}
-              >
-                <Printer className="h-4 w-4 mr-2" />
-                {isPrinting ? "Printing..." : "Print"}
-              </Button>
-              <Button variant="outline" size="sm" onClick={handleDownload}>
-                <Download className="h-4 w-4 mr-2" />
-                Download
-              </Button>
-              {onSendEmail && invoice.customerEmail && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onSendEmail(invoice.id)}
-                >
-                  <Send className="h-4 w-4 mr-2" />
-                  Send Email
-                </Button>
-              )}
-            </div>
-
-            {/* Invoice Header */}
-            <div className="flex items-center justify-between border-b pb-6">
-              {/* Organization Logo */}
-              <div className="flex items-center gap-4">
-                {invoice.organization?.logo ? (
-                  <Image
-                    src={invoice.organization.logo}
-                    alt={invoice.organization.name ?? "Organization"}
-                    width={80}
-                    height={80}
-                    className="object-contain rounded-lg border"
-                  />
-                ) : (
-                  <div className="w-20 h-20 bg-primary/10 rounded-lg flex items-center justify-center border">
-                    <Building className="h-8 w-8 text-primary" />
-                  </div>
-                )}
-                <div className="text-left">
-                  <h3 className="text-lg font-semibold text-muted-foreground">
-                    {invoice.organization?.name ?? "Organization"}
-                  </h3>
-                  {invoice.organization?.website && (
-                    <p className="text-sm text-muted-foreground">
-                      {invoice.organization.website}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {/* Invoice Title */}
-              <div className="text-center">
-                <h1 className="text-3xl font-bold text-primary mb-2">
-                  INVOICE
-                </h1>
-                <h2 className="text-xl font-semibold text-muted-foreground">
-                  {invoice.invoiceNumber}
-                </h2>
-              </div>
-            </div>
-
-            {/* Invoice Info Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="space-y-4">
-                <div className="flex items-center gap-2">
-                  <Calendar className="h-4 w-4 text-muted-foreground" />
-                  <span className="font-medium">Issue Date:</span>
-                  <span>{formatDate(invoice.issueDate)}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Calendar className="h-4 w-4 text-muted-foreground" />
-                  <span className="font-medium">Due Date:</span>
-                  <span>{formatDate(invoice.dueDate)}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <FileText className="h-4 w-4 text-muted-foreground" />
-                  <span className="font-medium">Payment Terms:</span>
-                  <span>{invoice.paymentTerms}</span>
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div className="flex items-center gap-2">
-                  <span className="font-medium">Status:</span>
-                  <Badge
-                    variant="outline"
-                    className={invoiceStatusColors[invoice.status]}
-                  >
-                    {invoiceStatusLabels[invoice.status]}
-                  </Badge>
-                </div>
-                <div className="flex items-center gap-2">
-                  <DollarSign className="h-4 w-4 text-muted-foreground" />
-                  <span className="font-medium">Currency:</span>
-                  <span>{invoice.currency}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <DollarSign className="h-4 w-4 text-muted-foreground" />
-                  <span className="font-medium">Paid Amount:</span>
-                  <span>
-                    {formatAmount(invoice.paidAmount, invoice.currency)}{" "}
-                    {invoice.currency}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <Separator />
-
-            {/* Customer Information */}
-            <div className="space-y-4">
-              <div className="flex items-center gap-2">
-                <User className="h-5 w-5 text-muted-foreground" />
-                <h3 className="text-lg font-semibold">Bill To</h3>
-              </div>
-              <div className="pl-7 space-y-2">
-                <p className="font-medium">
-                  {invoice.customerName ??
-                    `${invoice.customer?.firstName ?? ""} ${invoice.customer?.lastName ?? ""}`.trim()}
-                </p>
-                <p className="text-muted-foreground">{invoice.customerEmail}</p>
-                {invoice.customer?.address && (
-                  <p className="text-muted-foreground">
-                    {invoice.customer.address}
-                  </p>
-                )}
-                {invoice.customer?.phone && (
-                  <p className="text-muted-foreground">
-                    {invoice.customer.phone}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            <Separator />
-
-            {/* Invoice Items */}
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold">Items</h3>
-              <div className="overflow-x-auto">
-                <table className="w-full border-collapse border border-border">
-                  <thead>
-                    <tr className="bg-muted/50">
-                      <th className="border border-border p-3 text-left">
-                        Description
-                      </th>
-                      <th className="border border-border p-3 text-center">
-                        Qty
-                      </th>
-                      <th className="border border-border p-3 text-right">
-                        Unit Price
-                      </th>
-                      <th className="border border-border p-3 text-center">
-                        Discount
-                      </th>
-                      <th className="border border-border p-3 text-center">
-                        Tax Rate
-                      </th>
-                      <th className="border border-border p-3 text-right">
-                        Total
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {invoice.items.map((item, index) => (
-                      <tr key={item.id ?? index}>
-                        <td className="border border-border p-3">
-                          {item.description}
-                        </td>
-                        <td className="border border-border p-3 text-center">
-                          {formatAmount(item.quantity)}
-                        </td>
-                        <td className="border border-border p-3 text-right">
-                          {formatAmount(item.unitPrice, invoice.currency)}{" "}
-                          {invoice.currency}
-                        </td>
-                        <td className="border border-border p-3 text-center">
-                          {formatAmount(item.discountRate)}%
-                        </td>
-                        <td className="border border-border p-3 text-center">
-                          {formatAmount(item.taxRate)}%
-                        </td>
-                        <td className="border border-border p-3 text-right font-medium">
-                          {formatAmount(
-                            calculateItemTotal(item),
-                            invoice.currency
-                          )}{" "}
-                          {invoice.currency}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                  <tfoot>
-                    <tr className="bg-muted/50">
-                      <td
-                        colSpan={5}
-                        className="border border-border p-3 text-right font-semibold"
-                      >
-                        Total Amount:
-                      </td>
-                      <td className="border border-border p-3 text-right font-bold text-lg">
-                        {formatAmount(invoice.totalAmount, invoice.currency)}{" "}
-                        {invoice.currency}
-                      </td>
-                    </tr>
-                  </tfoot>
-                </table>
-              </div>
-            </div>
-
-            {/* Notes and Terms */}
-            {(invoice.notes ?? invoice.termsAndConditions) && (
-              <>
-                <Separator />
-                <div className="space-y-4">
-                  {invoice.notes && (
-                    <div>
-                      <h4 className="font-semibold mb-2">Notes</h4>
-                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
-                        {invoice.notes}
-                      </p>
-                    </div>
-                  )}
-                  {invoice.termsAndConditions && (
-                    <div>
-                      <h4 className="font-semibold mb-2">Terms & Conditions</h4>
-                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
-                        {invoice.termsAndConditions}
-                      </p>
-                    </div>
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { api } from "~/trpc/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
+import { Skeleton } from "~/components/ui/skeleton";
+import {
+  Printer,
+  Download,
+  Send,
+  User,
+  Calendar,
+  DollarSign,
+  FileText,
+  Building,
+} from "lucide-react";
+import { invoiceStatusColors, invoiceStatusLabels } from "~/types";
+
+interface InvoicePreviewDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  invoiceId: string | null;
+  organizationId: string;
+  onSendEmail?: (invoiceId: string) => void;
+}
+
+interface InvoiceItem {
+  id?: string;
+  description: string;
+  quantity: unknown;
+  unitPrice: unknown;
+  taxRate: unknown;
+  discountRate: unknown;
+}
+
+export function InvoicePreviewDialog({
+  open,
+  onOpenChange,
+  invoiceId,
+  onSendEmail,
+}: InvoicePreviewDialogProps) {
+  const [isPrinting, setIsPrinting] = useState(false);
+
+  const {
+    data: invoice,
+    isLoading,
+    error,
+  } = api.invoice.getInvoiceById.useQuery(
+    { id: invoiceId! },
+    { enabled: !!invoiceId && open }
+  );
+
+  const handlePrint = () => {
+    setIsPrinting(true);
+    window.print();
+    setTimeout(() => setIsPrinting(false), 1000);
+  };
+
+  const handleDownload = () => {
+    if (!invoice) return;
+
+    // Create a simplified HTML version for download
+    const printWindow = window.open("", "_blank");
+    if (printWindow) {
+      printWindow.document.write(generateInvoiceHTML());
+      printWindow.document.close();
+      printWindow.print();
+    }
+  };
+
+  const formatAmount = (value: unknown, currency?: string): string => {
+    let numericValue: number;
+
+    if (typeof value === "number") {
+      numericValue = value;
+    } else if (typeof value === "string") {
+      numericValue = parseFloat(value);
+      if (isNaN(numericValue)) return value;
+    } else if (value && typeof value === "object" && "toString" in value) {
+      try {
+        numericValue = parseFloat((value as { toString(): string }).toString());
+        if (isNaN(numericValue))
+          return (value as { toString(): string }).toString();
+      } catch {
+        return "0";
+      }
+    } else {
+      return "0";
+    }
+
+    // Format based on currency
+    const currencyCode = currency ?? "USD";
+
+    // IDR doesn't use decimal places and uses thousands separators
+    if (currencyCode === "IDR") {
+      return new Intl.NumberFormat("id-ID").format(Math.round(numericValue));
+    }
+
+    // For other currencies, use 2 decimal places with appropriate locale
+    const locale = currencyCode === "USD" ? "en-US" : "en-US"; // Can be extended for other currencies
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(numericValue);
+  };
+
+  const formatDate = (value: unknown): string => {
+    if (value instanceof Date) return value.toLocaleDateString();
+    if (typeof value === "string") {
+      const d = new Date(value);
+      return isNaN(d.getTime()) ? value : d.toLocaleDateString();
+    }
+    return "";
+  };
+
+  const calculateItemTotal = (item: InvoiceItem) => {
+    const quantity =
+      typeof item.quantity === "number"
+        ? item.quantity
+        : parseFloat(
+            (item.quantity as { toString(): string })?.toString() ?? "0"
+          );
+    const unitPrice =
+      typeof item.unitPrice === "number"
+        ? item.unitPrice
+        : parseFloat(
+            (item.unitPrice as { toString(): string })?.toString() ?? "0"
+          );
+    const subtotal = quantity * unitPrice;
+    const discount =
+      subtotal *
+      (parseFloat(
+        (item.discountRate as { toString(): string })?.toString() ?? "0"
+      ) /
+        100);
+    const afterDiscount = subtotal - discount;
+    const tax =
+      afterDiscount *
+      (parseFloat((item.taxRate as { toString(): string })?.toString() ?? "0") /
+        100);
+    return afterDiscount + tax;
+  };
+
+  const generateInvoiceHTML = () => {
+    if (!invoice) return "";
+
+    return `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Invoice ${invoice.invoiceNumber}</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #ddd; padding-bottom: 20px; }
+            .org-info { display: flex; align-items: center; gap: 15px; }
+            .org-logo { width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 8px; }
+            .org-placeholder { width: 80px; height: 80px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #666; }
+            .invoice-title { text-align: center; }
+            .invoice-info { display: flex; justify-content: space-between; margin-bottom: 30px; }
+            .customer-info { margin-bottom: 30px; }
+            table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+            th { background-color: #f2f2f2; }
+            .total-row { font-weight: bold; }
+            .text-right { text-align: right; }
+          </style>
+        </head>
+        <body>
+          <div class="header">
+            <div class="org-info">
+              ${
+                invoice.organization?.logo
+                  ? `<img src="${invoice.organization.logo}" alt="${invoice.organization.name ?? "Organization"}" class="org-logo" />`
+                  : `<div class="org-placeholder">🏢</div>`
+              }
+              <div>
+                <h3 style="margin: 0; color: #666;">${invoice.organization?.name ?? "Organization"}</h3>
+                ${invoice.organization?.website ? `<p style="margin: 5px 0 0 0; color: #888; font-size: 14px;">${invoice.organization.website}</p>` : ""}
+              </div>
+            </div>
+            <div class="invoice-title">
+              <h1 style="margin: 0; color: #333;">INVOICE</h1>
+              <h2 style="margin: 5px 0 0 0; color: #666;">${invoice.invoiceNumber}</h2>
+            </div>
+          </div>
+          
+          <div class="invoice-info">
+            <div>
+              <strong>Issue Date:</strong> ${formatDate(invoice.issueDate)}<br>
+              <strong>Due Date:</strong> ${formatDate(invoice.dueDate)}<br>
+              <strong>Payment Terms:</strong> ${invoice.paymentTerms}
+            </div>
+            <div>
+              <strong>Status:</strong> ${invoiceStatusLabels[invoice.status]}<br>
+              <strong>Currency:</strong> ${invoice.currency}
+            </div>
+          </div>
+
+          <div class="customer-info">
+            <strong>Bill To:</strong><br>
+            ${invoice.customerName ?? `${invoice.customer?.firstName ?? ""} ${invoice.customer?.lastName ?? ""}`.trim()}<br>
+            ${invoice.customerEmail}<br>
+            ${invoice.customer?.address ?? ""}
+          </div>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Description</th>
+                <th>Qty</th>
+                <th>Unit Price</th>
+                <th>Discount</th>
+                <th>Tax Rate</th>
+                <th class="text-right">Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${invoice.items
+                .map(
+                  item => `
+                <tr>
+                  <td>${item.description}</td>
+                  <td>${formatAmount(item.quantity)}</td>
+                  <td>${formatAmount(item.unitPrice, invoice.currency)} ${invoice.currency}</td>
+                  <td>${formatAmount(item.discountRate)}%</td>
+                  <td>${formatAmount(item.taxRate)}%</td>
+                  <td class="text-right">${formatAmount(calculateItemTotal(item), invoice.currency)} ${invoice.currency}</td>
+                </tr>
+              `
+                )
+                .join("")}
+              <tr class="total-row">
+                <td colspan="5"><strong>Total Amount</strong></td>
+                <td class="text-right"><strong>${formatAmount(invoice.totalAmount, invoice.currency)} ${invoice.currency}</strong></td>
+              </tr>
+            </tbody>
+          </table>
+
+          ${invoice.notes ? `<div><strong>Notes:</strong><br>${invoice.notes}</div>` : ""}
+          ${invoice.termsAndConditions ? `<div><strong>Terms & Conditions:</strong><br>${invoice.termsAndConditions}</div>` : ""}
+        </body>
+      </html>
+    `;
+  };
+
+  if (!open || !invoiceId) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl w-[90vw] max-h-[90vh] overflow-y-auto p-6 lg:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <FileText className="h-5 w-5" />
+            Invoice Preview
+          </DialogTitle>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="space-y-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-32 w-full" />
+          </div>
+        ) : error ? (
+          <div className="py-8 text-center text-red-600">
+            Failed to load invoice. Please try again.
+          </div>
+        ) : !invoice ? (
+          <div className="py-8 text-center text-muted-foreground">
+            Invoice not found.
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* Action Buttons */}
+            <div className="flex flex-wrap gap-2 justify-end print:hidden">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handlePrint}
+                disabled={isPrinting}
+              >
+                <Printer className="h-4 w-4 mr-2" />
+                {isPrinting ? "Printing..." : "Print"}
+              </Button>
+              <Button variant="outline" size="sm" onClick={handleDownload}>
+                <Download className="h-4 w-4 mr-2" />
+                Download
+              </Button>
+              {onSendEmail && invoice.customerEmail && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onSendEmail(invoice.id)}
+                >
+                  <Send className="h-4 w-4 mr-2" />
+                  Send Email
+                </Button>
+              )}
+            </div>
+
+            {/* Invoice Header */}
+            <div className="flex items-center justify-between border-b pb-6">
+              {/* Organization Logo */}
+              <div className="flex items-center gap-4">
+                {invoice.organization?.logo ? (
+                  <Image
+                    src={invoice.organization.logo}
+                    alt={invoice.organization.name ?? "Organization"}
+                    width={80}
+                    height={80}
+                    className="object-contain rounded-lg border"
+                  />
+                ) : (
+                  <div className="w-20 h-20 bg-primary/10 rounded-lg flex items-center justify-center border">
+                    <Building className="h-8 w-8 text-primary" />
+                  </div>
+                )}
+                <div className="text-left">
+                  <h3 className="text-lg font-semibold text-muted-foreground">
+                    {invoice.organization?.name ?? "Organization"}
+                  </h3>
+                  {invoice.organization?.website && (
+                    <p className="text-sm text-muted-foreground">
+                      {invoice.organization.website}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Invoice Title */}
+              <div className="text-center">
+                <h1 className="text-3xl font-bold text-primary mb-2">
+                  INVOICE
+                </h1>
+                <h2 className="text-xl font-semibold text-muted-foreground">
+                  {invoice.invoiceNumber}
+                </h2>
+              </div>
+            </div>
+
+            {/* Invoice Info Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Issue Date:</span>
+                  <span>{formatDate(invoice.issueDate)}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Due Date:</span>
+                  <span>{formatDate(invoice.dueDate)}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Payment Terms:</span>
+                  <span>{invoice.paymentTerms}</span>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">Status:</span>
+                  <Badge
+                    variant="outline"
+                    className={invoiceStatusColors[invoice.status]}
+                  >
+                    {invoiceStatusLabels[invoice.status]}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  <DollarSign className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Currency:</span>
+                  <span>{invoice.currency}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <DollarSign className="h-4 w-4 text-muted-foreground" />
+                  <span className="font-medium">Paid Amount:</span>
+                  <span>
+                    {formatAmount(invoice.paidAmount, invoice.currency)}{" "}
+                    {invoice.currency}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* Customer Information */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <User className="h-5 w-5 text-muted-foreground" />
+                <h3 className="text-lg font-semibold">Bill To</h3>
+              </div>
+              <div className="pl-7 space-y-2">
+                <p className="font-medium">
+                  {invoice.customerName ??
+                    `${invoice.customer?.firstName ?? ""} ${invoice.customer?.lastName ?? ""}`.trim()}
+                </p>
+                <p className="text-muted-foreground">{invoice.customerEmail}</p>
+                {invoice.customer?.address && (
+                  <p className="text-muted-foreground">
+                    {invoice.customer.address}
+                  </p>
+                )}
+                {invoice.customer?.phone && (
+                  <p className="text-muted-foreground">
+                    {invoice.customer.phone}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* Invoice Items */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold">Items</h3>
+              <div className="overflow-x-auto">
+                <table className="w-full border-collapse border border-border">
+                  <thead>
+                    <tr className="bg-muted/50">
+                      <th className="border border-border p-3 text-left">
+                        Description
+                      </th>
+                      <th className="border border-border p-3 text-center">
+                        Qty
+                      </th>
+                      <th className="border border-border p-3 text-right">
+                        Unit Price
+                      </th>
+                      <th className="border border-border p-3 text-center">
+                        Discount
+                      </th>
+                      <th className="border border-border p-3 text-center">
+                        Tax Rate
+                      </th>
+                      <th className="border border-border p-3 text-right">
+                        Total
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {invoice.items.map((item, index) => (
+                      <tr key={item.id ?? index}>
+                        <td className="border border-border p-3">
+                          {item.description}
+                        </td>
+                        <td className="border border-border p-3 text-center">
+                          {formatAmount(item.quantity)}
+                        </td>
+                        <td className="border border-border p-3 text-right">
+                          {formatAmount(item.unitPrice, invoice.currency)}{" "}
+                          {invoice.currency}
+                        </td>
+                        <td className="border border-border p-3 text-center">
+                          {formatAmount(item.discountRate)}%
+                        </td>
+                        <td className="border border-border p-3 text-center">
+                          {formatAmount(item.taxRate)}%
+                        </td>
+                        <td className="border border-border p-3 text-right font-medium">
+                          {formatAmount(
+                            calculateItemTotal(item),
+                            invoice.currency
+                          )}{" "}
+                          {invoice.currency}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                  <tfoot>
+                    <tr className="bg-muted/50">
+                      <td
+                        colSpan={5}
+                        className="border border-border p-3 text-right font-semibold"
+                      >
+                        Total Amount:
+                      </td>
+                      <td className="border border-border p-3 text-right font-bold text-lg">
+                        {formatAmount(invoice.totalAmount, invoice.currency)}{" "}
+                        {invoice.currency}
+                      </td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+
+            {/* Notes and Terms */}
+            {(invoice.notes ?? invoice.termsAndConditions) && (
+              <>
+                <Separator />
+                <div className="space-y-4">
+                  {invoice.notes && (
+                    <div>
+                      <h4 className="font-semibold mb-2">Notes</h4>
+                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                        {invoice.notes}
+                      </p>
+                    </div>
+                  )}
+                  {invoice.termsAndConditions && (
+                    <div>
+                      <h4 className="font-semibold mb-2">Terms & Conditions</h4>
+                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                        {invoice.termsAndConditions}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/ui/image-upload.tsx b/src/components/ui/image-upload.tsx
index 95a97f7..4f19927 100644
--- a/src/components/ui/image-upload.tsx
+++ b/src/components/ui/image-upload.tsx
@@ -1,239 +1,239 @@
-"use client";
-
-import { useState, useRef } from "react";
-import Image from "next/image";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
-import { Badge } from "~/components/ui/badge";
-import { Upload, X, ImageIcon, AlertCircle } from "lucide-react";
-import { cn } from "~/lib/utils";
-import { useFileUpload } from "~/hooks/use-file-upload";
-
-interface ImageUploadProps {
-  value?: string | null;
-  onChange: (value: string | null) => void;
-  disabled?: boolean;
-  className?: string;
-  label?: string;
-  description?: string;
-  maxSizeMB?: number;
-  acceptedFormats?: string[];
-  type?: "organization-logo" | "user-avatar";
-  organizationId?: string;
-}
-
-export function ImageUpload({
-  value,
-  onChange,
-  disabled = false,
-  className,
-  label = "Logo",
-  description = "Upload a logo for your organization",
-  maxSizeMB = 5,
-  acceptedFormats = ["image/jpeg", "image/png", "image/webp", "image/svg+xml"],
-  type = "organization-logo",
-  organizationId,
-}: ImageUploadProps) {
-  const [dragOver, setDragOver] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const { uploadFile, deleteFile, isUploading } = useFileUpload();
-
-  const handleFileUpload = async (file: File) => {
-    setError(null);
-
-    const result = await uploadFile(file, {
-      type,
-      organizationId,
-      maxSizeMB,
-      allowedTypes: acceptedFormats,
-    });
-
-    if (result?.url) {
-      // If there was a previous file, delete it
-      if (value?.startsWith("/uploads/")) {
-        await deleteFile(value);
-      }
-      onChange(result.url);
-    }
-  };
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      void handleFileUpload(file);
-    }
-  };
-
-  const handleDrop = (event: React.DragEvent) => {
-    event.preventDefault();
-    setDragOver(false);
-
-    const file = event.dataTransfer.files[0];
-    if (file) {
-      void handleFileUpload(file);
-    }
-  };
-
-  const handleDragOver = (event: React.DragEvent) => {
-    event.preventDefault();
-    setDragOver(true);
-  };
-
-  const handleDragLeave = (event: React.DragEvent) => {
-    event.preventDefault();
-    setDragOver(false);
-  };
-
-  const handleRemove = async () => {
-    // Delete file from server if it's a local upload
-    if (value?.startsWith("/uploads/")) {
-      await deleteFile(value);
-    }
-    onChange(null);
-    setError(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  const handleBrowse = () => {
-    if (!disabled) {
-      fileInputRef.current?.click();
-    }
-  };
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      {label && (
-        <div className="space-y-1">
-          <Label className="text-sm font-medium">{label}</Label>
-          {description && (
-            <p className="text-xs text-muted-foreground">{description}</p>
-          )}
-        </div>
-      )}
-
-      <div className="space-y-3">
-        {/* Current Image Preview */}
-        {value && (
-          <div className="relative inline-block">
-            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
-              <Image
-                src={value}
-                alt="Uploaded logo"
-                fill
-                className="object-cover"
-              />
-            </div>
-            {!disabled && (
-              <Button
-                type="button"
-                variant="destructive"
-                size="sm"
-                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
-                onClick={handleRemove}
-              >
-                <X className="h-3 w-3" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Upload Area */}
-        {!value && (
-          <div
-            className={cn(
-              "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
-              dragOver && !disabled
-                ? "border-primary bg-primary/5"
-                : "border-muted-foreground/25",
-              disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-              "hover:border-primary/50 hover:bg-primary/5"
-            )}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onClick={handleBrowse}
-          >
-            <div className="space-y-3">
-              <div className="flex justify-center">
-                <div className="p-3 bg-muted rounded-full">
-                  {isUploading ? (
-                    <div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
-                  ) : (
-                    <ImageIcon className="h-6 w-6 text-muted-foreground" />
-                  )}
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <p className="text-sm font-medium">
-                  {isUploading
-                    ? "Uploading..."
-                    : "Drop your logo here, or browse"}
-                </p>
-                <div className="flex flex-wrap justify-center gap-1">
-                  {acceptedFormats.map(format => (
-                    <Badge key={format} variant="secondary" className="text-xs">
-                      {format.split("/")[1]?.toUpperCase()}
-                    </Badge>
-                  ))}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Max {maxSizeMB}MB
-                </p>
-              </div>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                disabled={disabled || isUploading}
-                className="pointer-events-none"
-              >
-                <Upload className="h-4 w-4 mr-2" />
-                Browse Files
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* Replace/Change Button for existing image */}
-        {value && !disabled && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={handleBrowse}
-            disabled={isUploading}
-            className="w-full sm:w-auto"
-          >
-            <Upload className="h-4 w-4 mr-2" />
-            {isUploading ? "Uploading..." : "Change Logo"}
-          </Button>
-        )}
-
-        {/* Error Message */}
-        {error && (
-          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
-            <AlertCircle className="h-4 w-4 text-destructive" />
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        )}
-      </div>
-
-      {/* Hidden File Input */}
-      <Input
-        ref={fileInputRef}
-        type="file"
-        accept={acceptedFormats.join(",")}
-        onChange={handleFileSelect}
-        disabled={disabled}
-        className="hidden"
-      />
-    </div>
-  );
-}
+"use client";
+
+import { useState, useRef } from "react";
+import Image from "next/image";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Badge } from "~/components/ui/badge";
+import { Upload, X, ImageIcon, AlertCircle } from "lucide-react";
+import { cn } from "~/lib/utils";
+import { useFileUpload } from "~/hooks/use-file-upload";
+
+interface ImageUploadProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  disabled?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+  maxSizeMB?: number;
+  acceptedFormats?: string[];
+  type?: "organization-logo" | "user-avatar";
+  organizationId?: string;
+}
+
+export function ImageUpload({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  label = "Logo",
+  description = "Upload a logo for your organization",
+  maxSizeMB = 5,
+  acceptedFormats = ["image/jpeg", "image/png", "image/webp", "image/svg+xml"],
+  type = "organization-logo",
+  organizationId,
+}: ImageUploadProps) {
+  const [dragOver, setDragOver] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { uploadFile, deleteFile, isUploading } = useFileUpload();
+
+  const handleFileUpload = async (file: File) => {
+    setError(null);
+
+    const result = await uploadFile(file, {
+      type,
+      organizationId,
+      maxSizeMB,
+      allowedTypes: acceptedFormats,
+    });
+
+    if (result?.url) {
+      // If there was a previous file, delete it
+      if (value?.startsWith("/uploads/")) {
+        await deleteFile(value);
+      }
+      onChange(result.url);
+    }
+  };
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      void handleFileUpload(file);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDragOver(false);
+
+    const file = event.dataTransfer.files[0];
+    if (file) {
+      void handleFileUpload(file);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDragOver(false);
+  };
+
+  const handleRemove = async () => {
+    // Delete file from server if it's a local upload
+    if (value?.startsWith("/uploads/")) {
+      await deleteFile(value);
+    }
+    onChange(null);
+    setError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleBrowse = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {label && (
+        <div className="space-y-1">
+          <Label className="text-sm font-medium">{label}</Label>
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {/* Current Image Preview */}
+        {value && (
+          <div className="relative inline-block">
+            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
+              <Image
+                src={value}
+                alt="Uploaded logo"
+                fill
+                className="object-cover"
+              />
+            </div>
+            {!disabled && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
+                onClick={handleRemove}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Upload Area */}
+        {!value && (
+          <div
+            className={cn(
+              "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+              dragOver && !disabled
+                ? "border-primary bg-primary/5"
+                : "border-muted-foreground/25",
+              disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+              "hover:border-primary/50 hover:bg-primary/5"
+            )}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onClick={handleBrowse}
+          >
+            <div className="space-y-3">
+              <div className="flex justify-center">
+                <div className="p-3 bg-muted rounded-full">
+                  {isUploading ? (
+                    <div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
+                  ) : (
+                    <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium">
+                  {isUploading
+                    ? "Uploading..."
+                    : "Drop your logo here, or browse"}
+                </p>
+                <div className="flex flex-wrap justify-center gap-1">
+                  {acceptedFormats.map(format => (
+                    <Badge key={format} variant="secondary" className="text-xs">
+                      {format.split("/")[1]?.toUpperCase()}
+                    </Badge>
+                  ))}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Max {maxSizeMB}MB
+                </p>
+              </div>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={disabled || isUploading}
+                className="pointer-events-none"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Browse Files
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Replace/Change Button for existing image */}
+        {value && !disabled && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleBrowse}
+            disabled={isUploading}
+            className="w-full sm:w-auto"
+          >
+            <Upload className="h-4 w-4 mr-2" />
+            {isUploading ? "Uploading..." : "Change Logo"}
+          </Button>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <AlertCircle className="h-4 w-4 text-destructive" />
+            <p className="text-sm text-destructive">{error}</p>
+          </div>
+        )}
+      </div>
+
+      {/* Hidden File Input */}
+      <Input
+        ref={fileInputRef}
+        type="file"
+        accept={acceptedFormats.join(",")}
+        onChange={handleFileSelect}
+        disabled={disabled}
+        className="hidden"
+      />
+    </div>
+  );
+}
diff --git a/src/hooks/use-file-upload.ts b/src/hooks/use-file-upload.ts
index 5da475e..23ac5a8 100644
--- a/src/hooks/use-file-upload.ts
+++ b/src/hooks/use-file-upload.ts
@@ -1,122 +1,122 @@
-import { useState } from "react";
-import { toast } from "sonner";
-
-interface UploadOptions {
-  type?: "organization-logo" | "user-avatar";
-  organizationId?: string;
-  maxSizeMB?: number;
-  allowedTypes?: string[];
-}
-
-interface UploadResponse {
-  success: boolean;
-  url?: string;
-  filename?: string;
-  size?: number;
-  type?: string;
-  error?: string;
-}
-
-export function useFileUpload() {
-  const [isUploading, setIsUploading] = useState(false);
-
-  const uploadFile = async (
-    file: File,
-    options: UploadOptions = {}
-  ): Promise<UploadResponse | null> => {
-    const {
-      type = "organization-logo",
-      organizationId,
-      maxSizeMB = 5,
-      allowedTypes = [
-        "image/jpeg",
-        "image/jpg",
-        "image/png",
-        "image/webp",
-        "image/svg+xml",
-      ],
-    } = options;
-
-    // Client-side validation
-    if (!allowedTypes.includes(file.type)) {
-      toast.error(
-        `Invalid file type. Please upload ${allowedTypes.map(t => t.split("/")[1]).join(", ")} files.`
-      );
-      return null;
-    }
-
-    if (file.size > maxSizeMB * 1024 * 1024) {
-      toast.error(`File too large. Maximum size is ${maxSizeMB}MB.`);
-      return null;
-    }
-
-    setIsUploading(true);
-
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("type", type);
-      if (organizationId) {
-        formData.append("organizationId", organizationId);
-      }
-
-      const response = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-      });
-
-      const result = (await response.json()) as UploadResponse;
-
-      if (!response.ok) {
-        throw new Error(result.error ?? "Upload failed");
-      }
-
-      if (result.success && result.url) {
-        toast.success("File uploaded successfully");
-        return result;
-      } else {
-        throw new Error("Upload failed");
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Upload failed";
-      toast.error(errorMessage);
-      return null;
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const deleteFile = async (filePath: string): Promise<boolean> => {
-    try {
-      const response = await fetch(
-        `/api/upload?path=${encodeURIComponent(filePath)}`,
-        {
-          method: "DELETE",
-        }
-      );
-
-      const result = (await response.json()) as {
-        success: boolean;
-        error?: string;
-      };
-
-      if (!response.ok) {
-        throw new Error(result.error ?? "Delete failed");
-      }
-
-      return result.success;
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Delete failed";
-      toast.error(errorMessage);
-      return false;
-    }
-  };
-
-  return {
-    uploadFile,
-    deleteFile,
-    isUploading,
-  };
-}
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface UploadOptions {
+  type?: "organization-logo" | "user-avatar";
+  organizationId?: string;
+  maxSizeMB?: number;
+  allowedTypes?: string[];
+}
+
+interface UploadResponse {
+  success: boolean;
+  url?: string;
+  filename?: string;
+  size?: number;
+  type?: string;
+  error?: string;
+}
+
+export function useFileUpload() {
+  const [isUploading, setIsUploading] = useState(false);
+
+  const uploadFile = async (
+    file: File,
+    options: UploadOptions = {}
+  ): Promise<UploadResponse | null> => {
+    const {
+      type = "organization-logo",
+      organizationId,
+      maxSizeMB = 5,
+      allowedTypes = [
+        "image/jpeg",
+        "image/jpg",
+        "image/png",
+        "image/webp",
+        "image/svg+xml",
+      ],
+    } = options;
+
+    // Client-side validation
+    if (!allowedTypes.includes(file.type)) {
+      toast.error(
+        `Invalid file type. Please upload ${allowedTypes.map(t => t.split("/")[1]).join(", ")} files.`
+      );
+      return null;
+    }
+
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      toast.error(`File too large. Maximum size is ${maxSizeMB}MB.`);
+      return null;
+    }
+
+    setIsUploading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("type", type);
+      if (organizationId) {
+        formData.append("organizationId", organizationId);
+      }
+
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData,
+      });
+
+      const result = (await response.json()) as UploadResponse;
+
+      if (!response.ok) {
+        throw new Error(result.error ?? "Upload failed");
+      }
+
+      if (result.success && result.url) {
+        toast.success("File uploaded successfully");
+        return result;
+      } else {
+        throw new Error("Upload failed");
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Upload failed";
+      toast.error(errorMessage);
+      return null;
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const deleteFile = async (filePath: string): Promise<boolean> => {
+    try {
+      const response = await fetch(
+        `/api/upload?path=${encodeURIComponent(filePath)}`,
+        {
+          method: "DELETE",
+        }
+      );
+
+      const result = (await response.json()) as {
+        success: boolean;
+        error?: string;
+      };
+
+      if (!response.ok) {
+        throw new Error(result.error ?? "Delete failed");
+      }
+
+      return result.success;
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Delete failed";
+      toast.error(errorMessage);
+      return false;
+    }
+  };
+
+  return {
+    uploadFile,
+    deleteFile,
+    isUploading,
+  };
+}
diff --git a/src/lib/currency-utils.ts b/src/lib/currency-utils.ts
index 2ad80ff..0774162 100644
--- a/src/lib/currency-utils.ts
+++ b/src/lib/currency-utils.ts
@@ -1,80 +1,80 @@
-/**
- * Shared currency formatting utilities for both client and server
- */
-
-/**
- * Format currency values based on currency type
- */
-export function formatCurrency(
-  value: number | string | { toString(): string },
-  currency = "USD"
-): string {
-  let numericValue: number;
-
-  if (typeof value === "number") {
-    numericValue = value;
-  } else if (typeof value === "string") {
-    numericValue = parseFloat(value);
-    if (isNaN(numericValue)) return "0";
-  } else if (value && typeof value === "object" && "toString" in value) {
-    try {
-      numericValue = parseFloat(value.toString());
-      if (isNaN(numericValue)) return "0";
-    } catch {
-      return "0";
-    }
-  } else {
-    return "0";
-  }
-
-  // IDR doesn't use decimal places and uses thousands separators
-  if (currency === "IDR") {
-    return new Intl.NumberFormat("id-ID", {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(Math.round(numericValue));
-  }
-
-  // For other currencies, use 2 decimal places with appropriate locale
-  return new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(numericValue);
-}
-
-/**
- * Get currency symbol for display
- */
-export function getCurrencySymbol(currency: string): string {
-  const symbols: Record<string, string> = {
-    USD: "$",
-    EUR: "€",
-    GBP: "£",
-    IDR: "Rp",
-    JPY: "¥",
-    CNY: "¥",
-    AUD: "A$",
-    CAD: "C$",
-  };
-
-  return symbols[currency] ?? currency;
-}
-
-/**
- * Format currency with symbol
- */
-export function formatCurrencyWithSymbol(
-  value: number | string | { toString(): string },
-  currency = "USD"
-): string {
-  const formattedAmount = formatCurrency(value, currency);
-  const symbol = getCurrencySymbol(currency);
-
-  // For IDR, put symbol before the amount
-  if (currency === "IDR") {
-    return `${symbol} ${formattedAmount}`;
-  }
-
-  // For most other currencies, put symbol after
-  return `${formattedAmount} ${symbol}`;
-}
+/**
+ * Shared currency formatting utilities for both client and server
+ */
+
+/**
+ * Format currency values based on currency type
+ */
+export function formatCurrency(
+  value: number | string | { toString(): string },
+  currency = "USD"
+): string {
+  let numericValue: number;
+
+  if (typeof value === "number") {
+    numericValue = value;
+  } else if (typeof value === "string") {
+    numericValue = parseFloat(value);
+    if (isNaN(numericValue)) return "0";
+  } else if (value && typeof value === "object" && "toString" in value) {
+    try {
+      numericValue = parseFloat(value.toString());
+      if (isNaN(numericValue)) return "0";
+    } catch {
+      return "0";
+    }
+  } else {
+    return "0";
+  }
+
+  // IDR doesn't use decimal places and uses thousands separators
+  if (currency === "IDR") {
+    return new Intl.NumberFormat("id-ID", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(Math.round(numericValue));
+  }
+
+  // For other currencies, use 2 decimal places with appropriate locale
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(numericValue);
+}
+
+/**
+ * Get currency symbol for display
+ */
+export function getCurrencySymbol(currency: string): string {
+  const symbols: Record<string, string> = {
+    USD: "$",
+    EUR: "€",
+    GBP: "£",
+    IDR: "Rp",
+    JPY: "¥",
+    CNY: "¥",
+    AUD: "A$",
+    CAD: "C$",
+  };
+
+  return symbols[currency] ?? currency;
+}
+
+/**
+ * Format currency with symbol
+ */
+export function formatCurrencyWithSymbol(
+  value: number | string | { toString(): string },
+  currency = "USD"
+): string {
+  const formattedAmount = formatCurrency(value, currency);
+  const symbol = getCurrencySymbol(currency);
+
+  // For IDR, put symbol before the amount
+  if (currency === "IDR") {
+    return `${symbol} ${formattedAmount}`;
+  }
+
+  // For most other currencies, put symbol after
+  return `${formattedAmount} ${symbol}`;
+}
diff --git a/src/server/api/routers/finance/invoice.ts b/src/server/api/routers/finance/invoice.ts
index 2ab1d66..6c6b616 100644
--- a/src/server/api/routers/finance/invoice.ts
+++ b/src/server/api/routers/finance/invoice.ts
@@ -12,12 +12,12 @@ import { Resend } from "resend";
 import { env } from "~/env";
 import { render } from "@react-email/components";
 import { InvoiceEmail } from "~/server/email/templates/invoice-email";
-<<<<<<< HEAD
-import { formatCurrency, formatDecimal } from "~/server/utils/format";
-=======
-import { formatDecimalLike } from "~/server/utils/format";
+import {
+  formatCurrency,
+  formatDecimal,
+  formatDecimalLike,
+} from "~/server/utils/format";
 import { WorkflowEvents } from "~/lib/workflow-dispatcher";
->>>>>>> upstream/main
 
 // Shared schemas for better reusability and consistency
 const invoiceItemSchema = z.object({

From 3829eea6834af3d6f16911c4e6a3bcfb03c2c572 Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Wed, 17 Sep 2025 12:11:22 +0700
Subject: [PATCH 5/9] feat: add organization address field

- Add address field to Organization model in Prisma schema
- Update organization creation and editing forms to include address input
- Add address field to organization info form with textarea component
- Update tRPC organization router to handle address field in create/update operations
- Update invoice email template to display organization address
- Regenerate Zod schemas to include new address field
- Ensure address is properly handled in both frontend forms and backend API
---
 prisma/generated/zod/index.ts                 | 87 ++++++++++++++++++-
 prisma/schema.prisma                          |  1 +
 .../organizations/add-organization-dialog.tsx | 28 +++++-
 .../edit-organization-dialog.tsx              | 31 ++++++-
 .../settings/organization-info-form.tsx       | 46 +++++++++-
 src/server/api/routers/finance/invoice.ts     | 16 ++--
 src/server/api/routers/organization.ts        |  7 ++
 src/server/email/templates/invoice-email.tsx  | 19 ++++
 8 files changed, 217 insertions(+), 18 deletions(-)

diff --git a/prisma/generated/zod/index.ts b/prisma/generated/zod/index.ts
index 73e3995..3dc08de 100644
--- a/prisma/generated/zod/index.ts
+++ b/prisma/generated/zod/index.ts
@@ -85,7 +85,7 @@ export const CustomRoleScalarFieldEnumSchema = z.enum(['id','organizationId','na
 
 export const CustomRolePermissionScalarFieldEnumSchema = z.enum(['id','customRoleId','permissionId','createdAt']);
 
-export const OrganizationScalarFieldEnumSchema = z.enum(['id','name','logo','website','industry','description','createdAt','updatedAt']);
+export const OrganizationScalarFieldEnumSchema = z.enum(['id','name','logo','website','industry','address','description','createdAt','updatedAt']);
 
 export const UserOrganizationScalarFieldEnumSchema = z.enum(['userId','organizationId','role','customRoleId','joinedAt']);
 
@@ -453,6 +453,7 @@ export const OrganizationSchema = z.object({
   logo: z.string().nullable(),
   website: z.string().nullable(),
   industry: z.string().nullable(),
+  address: z.string().nullable(),
   description: z.string().nullable(),
   createdAt: z.coerce.date(),
   updatedAt: z.coerce.date(),
@@ -1882,6 +1883,7 @@ export const OrganizationSelectSchema: z.ZodType<Prisma.OrganizationSelect> = z.
   logo: z.boolean().optional(),
   website: z.boolean().optional(),
   industry: z.boolean().optional(),
+  address: z.boolean().optional(),
   description: z.boolean().optional(),
   createdAt: z.boolean().optional(),
   updatedAt: z.boolean().optional(),
@@ -4186,6 +4188,7 @@ export const OrganizationWhereInputSchema: z.ZodType<Prisma.OrganizationWhereInp
   logo: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   website: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   industry: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
+  address: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   description: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   createdAt: z.union([ z.lazy(() => DateTimeFilterSchema),z.coerce.date() ]).optional(),
   updatedAt: z.union([ z.lazy(() => DateTimeFilterSchema),z.coerce.date() ]).optional(),
@@ -4214,6 +4217,7 @@ export const OrganizationOrderByWithRelationInputSchema: z.ZodType<Prisma.Organi
   logo: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   website: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   industry: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
+  address: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   description: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   createdAt: z.lazy(() => SortOrderSchema).optional(),
   updatedAt: z.lazy(() => SortOrderSchema).optional(),
@@ -4248,6 +4252,7 @@ export const OrganizationWhereUniqueInputSchema: z.ZodType<Prisma.OrganizationWh
   logo: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   website: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   industry: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
+  address: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   description: z.union([ z.lazy(() => StringNullableFilterSchema),z.string() ]).optional().nullable(),
   createdAt: z.union([ z.lazy(() => DateTimeFilterSchema),z.coerce.date() ]).optional(),
   updatedAt: z.union([ z.lazy(() => DateTimeFilterSchema),z.coerce.date() ]).optional(),
@@ -4276,6 +4281,7 @@ export const OrganizationOrderByWithAggregationInputSchema: z.ZodType<Prisma.Org
   logo: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   website: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   industry: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
+  address: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   description: z.union([ z.lazy(() => SortOrderSchema),z.lazy(() => SortOrderInputSchema) ]).optional(),
   createdAt: z.lazy(() => SortOrderSchema).optional(),
   updatedAt: z.lazy(() => SortOrderSchema).optional(),
@@ -4293,6 +4299,7 @@ export const OrganizationScalarWhereWithAggregatesInputSchema: z.ZodType<Prisma.
   logo: z.union([ z.lazy(() => StringNullableWithAggregatesFilterSchema),z.string() ]).optional().nullable(),
   website: z.union([ z.lazy(() => StringNullableWithAggregatesFilterSchema),z.string() ]).optional().nullable(),
   industry: z.union([ z.lazy(() => StringNullableWithAggregatesFilterSchema),z.string() ]).optional().nullable(),
+  address: z.union([ z.lazy(() => StringNullableWithAggregatesFilterSchema),z.string() ]).optional().nullable(),
   description: z.union([ z.lazy(() => StringNullableWithAggregatesFilterSchema),z.string() ]).optional().nullable(),
   createdAt: z.union([ z.lazy(() => DateTimeWithAggregatesFilterSchema),z.coerce.date() ]).optional(),
   updatedAt: z.union([ z.lazy(() => DateTimeWithAggregatesFilterSchema),z.coerce.date() ]).optional(),
@@ -10601,6 +10608,7 @@ export const OrganizationCreateInputSchema: z.ZodType<Prisma.OrganizationCreateI
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -10629,6 +10637,7 @@ export const OrganizationUncheckedCreateInputSchema: z.ZodType<Prisma.Organizati
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -10657,6 +10666,7 @@ export const OrganizationUpdateInputSchema: z.ZodType<Prisma.OrganizationUpdateI
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -10685,6 +10695,7 @@ export const OrganizationUncheckedUpdateInputSchema: z.ZodType<Prisma.Organizati
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -10713,6 +10724,7 @@ export const OrganizationCreateManyInputSchema: z.ZodType<Prisma.OrganizationCre
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional()
@@ -10724,6 +10736,7 @@ export const OrganizationUpdateManyMutationInputSchema: z.ZodType<Prisma.Organiz
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -10735,6 +10748,7 @@ export const OrganizationUncheckedUpdateManyInputSchema: z.ZodType<Prisma.Organi
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -17674,6 +17688,7 @@ export const OrganizationCountOrderByAggregateInputSchema: z.ZodType<Prisma.Orga
   logo: z.lazy(() => SortOrderSchema).optional(),
   website: z.lazy(() => SortOrderSchema).optional(),
   industry: z.lazy(() => SortOrderSchema).optional(),
+  address: z.lazy(() => SortOrderSchema).optional(),
   description: z.lazy(() => SortOrderSchema).optional(),
   createdAt: z.lazy(() => SortOrderSchema).optional(),
   updatedAt: z.lazy(() => SortOrderSchema).optional()
@@ -17685,6 +17700,7 @@ export const OrganizationMaxOrderByAggregateInputSchema: z.ZodType<Prisma.Organi
   logo: z.lazy(() => SortOrderSchema).optional(),
   website: z.lazy(() => SortOrderSchema).optional(),
   industry: z.lazy(() => SortOrderSchema).optional(),
+  address: z.lazy(() => SortOrderSchema).optional(),
   description: z.lazy(() => SortOrderSchema).optional(),
   createdAt: z.lazy(() => SortOrderSchema).optional(),
   updatedAt: z.lazy(() => SortOrderSchema).optional()
@@ -17696,6 +17712,7 @@ export const OrganizationMinOrderByAggregateInputSchema: z.ZodType<Prisma.Organi
   logo: z.lazy(() => SortOrderSchema).optional(),
   website: z.lazy(() => SortOrderSchema).optional(),
   industry: z.lazy(() => SortOrderSchema).optional(),
+  address: z.lazy(() => SortOrderSchema).optional(),
   description: z.lazy(() => SortOrderSchema).optional(),
   createdAt: z.lazy(() => SortOrderSchema).optional(),
   updatedAt: z.lazy(() => SortOrderSchema).optional()
@@ -27707,6 +27724,7 @@ export const OrganizationCreateWithoutCustomRolesInputSchema: z.ZodType<Prisma.O
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -27734,6 +27752,7 @@ export const OrganizationUncheckedCreateWithoutCustomRolesInputSchema: z.ZodType
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -27823,6 +27842,7 @@ export const OrganizationUpdateWithoutCustomRolesInputSchema: z.ZodType<Prisma.O
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -27850,6 +27870,7 @@ export const OrganizationUncheckedUpdateWithoutCustomRolesInputSchema: z.ZodType
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -29536,6 +29557,7 @@ export const OrganizationCreateWithoutUsersInputSchema: z.ZodType<Prisma.Organiz
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -29563,6 +29585,7 @@ export const OrganizationUncheckedCreateWithoutUsersInputSchema: z.ZodType<Prism
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -29637,6 +29660,7 @@ export const OrganizationUpdateWithoutUsersInputSchema: z.ZodType<Prisma.Organiz
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -29664,6 +29688,7 @@ export const OrganizationUncheckedUpdateWithoutUsersInputSchema: z.ZodType<Prism
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -29728,6 +29753,7 @@ export const OrganizationCreateWithoutCustomersInputSchema: z.ZodType<Prisma.Org
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -29755,6 +29781,7 @@ export const OrganizationUncheckedCreateWithoutCustomersInputSchema: z.ZodType<P
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -29958,6 +29985,7 @@ export const OrganizationUpdateWithoutCustomersInputSchema: z.ZodType<Prisma.Org
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -29985,6 +30013,7 @@ export const OrganizationUncheckedUpdateWithoutCustomersInputSchema: z.ZodType<P
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -30397,6 +30426,7 @@ export const OrganizationCreateWithoutProjectsInputSchema: z.ZodType<Prisma.Orga
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -30424,6 +30454,7 @@ export const OrganizationUncheckedCreateWithoutProjectsInputSchema: z.ZodType<Pr
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -30667,6 +30698,7 @@ export const OrganizationUpdateWithoutProjectsInputSchema: z.ZodType<Prisma.Orga
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -30694,6 +30726,7 @@ export const OrganizationUncheckedUpdateWithoutProjectsInputSchema: z.ZodType<Pr
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -30820,6 +30853,7 @@ export const OrganizationCreateWithoutTasksInputSchema: z.ZodType<Prisma.Organiz
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -30847,6 +30881,7 @@ export const OrganizationUncheckedCreateWithoutTasksInputSchema: z.ZodType<Prism
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -31177,6 +31212,7 @@ export const OrganizationUpdateWithoutTasksInputSchema: z.ZodType<Prisma.Organiz
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -31204,6 +31240,7 @@ export const OrganizationUncheckedUpdateWithoutTasksInputSchema: z.ZodType<Prism
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -31761,6 +31798,7 @@ export const OrganizationCreateWithoutInvoicesInputSchema: z.ZodType<Prisma.Orga
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -31788,6 +31826,7 @@ export const OrganizationUncheckedCreateWithoutInvoicesInputSchema: z.ZodType<Pr
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -31966,6 +32005,7 @@ export const OrganizationUpdateWithoutInvoicesInputSchema: z.ZodType<Prisma.Orga
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -31993,6 +32033,7 @@ export const OrganizationUncheckedUpdateWithoutInvoicesInputSchema: z.ZodType<Pr
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -32462,6 +32503,7 @@ export const OrganizationCreateWithoutExpensesInputSchema: z.ZodType<Prisma.Orga
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -32489,6 +32531,7 @@ export const OrganizationUncheckedCreateWithoutExpensesInputSchema: z.ZodType<Pr
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -32618,6 +32661,7 @@ export const OrganizationUpdateWithoutExpensesInputSchema: z.ZodType<Prisma.Orga
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -32645,6 +32689,7 @@ export const OrganizationUncheckedUpdateWithoutExpensesInputSchema: z.ZodType<Pr
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -32776,6 +32821,7 @@ export const OrganizationCreateWithoutExpenseCategoriesInputSchema: z.ZodType<Pr
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -32803,6 +32849,7 @@ export const OrganizationUncheckedCreateWithoutExpenseCategoriesInputSchema: z.Z
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -32912,6 +32959,7 @@ export const OrganizationUpdateWithoutExpenseCategoriesInputSchema: z.ZodType<Pr
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -32939,6 +32987,7 @@ export const OrganizationUncheckedUpdateWithoutExpenseCategoriesInputSchema: z.Z
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -32982,6 +33031,7 @@ export const OrganizationCreateWithoutExpenseTagsInputSchema: z.ZodType<Prisma.O
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -33009,6 +33059,7 @@ export const OrganizationUncheckedCreateWithoutExpenseTagsInputSchema: z.ZodType
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -33070,6 +33121,7 @@ export const OrganizationUpdateWithoutExpenseTagsInputSchema: z.ZodType<Prisma.O
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -33097,6 +33149,7 @@ export const OrganizationUncheckedUpdateWithoutExpenseTagsInputSchema: z.ZodType
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -33667,6 +33720,7 @@ export const OrganizationCreateWithoutInvitationsInputSchema: z.ZodType<Prisma.O
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -33694,6 +33748,7 @@ export const OrganizationUncheckedCreateWithoutInvitationsInputSchema: z.ZodType
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -33737,6 +33792,7 @@ export const OrganizationUpdateWithoutInvitationsInputSchema: z.ZodType<Prisma.O
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -33764,6 +33820,7 @@ export const OrganizationUncheckedUpdateWithoutInvitationsInputSchema: z.ZodType
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -33791,6 +33848,7 @@ export const OrganizationCreateWithoutEmployeesInputSchema: z.ZodType<Prisma.Org
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -33818,6 +33876,7 @@ export const OrganizationUncheckedCreateWithoutEmployeesInputSchema: z.ZodType<P
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -33987,6 +34046,7 @@ export const OrganizationUpdateWithoutEmployeesInputSchema: z.ZodType<Prisma.Org
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -34014,6 +34074,7 @@ export const OrganizationUncheckedUpdateWithoutEmployeesInputSchema: z.ZodType<P
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -34533,6 +34594,7 @@ export const OrganizationCreateWithoutCampaignsInputSchema: z.ZodType<Prisma.Org
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -34560,6 +34622,7 @@ export const OrganizationUncheckedCreateWithoutCampaignsInputSchema: z.ZodType<P
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -34679,6 +34742,7 @@ export const OrganizationUpdateWithoutCampaignsInputSchema: z.ZodType<Prisma.Org
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -34706,6 +34770,7 @@ export const OrganizationUncheckedUpdateWithoutCampaignsInputSchema: z.ZodType<P
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -35232,6 +35297,7 @@ export const OrganizationCreateWithoutFinancialReportsInputSchema: z.ZodType<Pri
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -35259,6 +35325,7 @@ export const OrganizationUncheckedCreateWithoutFinancialReportsInputSchema: z.Zo
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -35408,6 +35475,7 @@ export const OrganizationUpdateWithoutFinancialReportsInputSchema: z.ZodType<Pri
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -35435,6 +35503,7 @@ export const OrganizationUncheckedUpdateWithoutFinancialReportsInputSchema: z.Zo
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -35872,6 +35941,7 @@ export const OrganizationCreateWithoutWorkflowsInputSchema: z.ZodType<Prisma.Org
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -35899,6 +35969,7 @@ export const OrganizationUncheckedCreateWithoutWorkflowsInputSchema: z.ZodType<P
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -36216,6 +36287,7 @@ export const OrganizationUpdateWithoutWorkflowsInputSchema: z.ZodType<Prisma.Org
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -36243,6 +36315,7 @@ export const OrganizationUncheckedUpdateWithoutWorkflowsInputSchema: z.ZodType<P
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -38494,6 +38567,7 @@ export const OrganizationCreateWithoutActionTemplatesInputSchema: z.ZodType<Pris
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -38521,6 +38595,7 @@ export const OrganizationUncheckedCreateWithoutActionTemplatesInputSchema: z.Zod
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -38594,6 +38669,7 @@ export const OrganizationUpdateWithoutActionTemplatesInputSchema: z.ZodType<Pris
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -38621,6 +38697,7 @@ export const OrganizationUncheckedUpdateWithoutActionTemplatesInputSchema: z.Zod
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -38782,6 +38859,7 @@ export const OrganizationCreateWithoutVariableDefinitionsInputSchema: z.ZodType<
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -38809,6 +38887,7 @@ export const OrganizationUncheckedCreateWithoutVariableDefinitionsInputSchema: z
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -38918,6 +38997,7 @@ export const OrganizationUpdateWithoutVariableDefinitionsInputSchema: z.ZodType<
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -38945,6 +39025,7 @@ export const OrganizationUncheckedUpdateWithoutVariableDefinitionsInputSchema: z
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -40231,6 +40312,7 @@ export const OrganizationCreateWithoutIntegrationConfigsInputSchema: z.ZodType<P
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -40258,6 +40340,7 @@ export const OrganizationUncheckedCreateWithoutIntegrationConfigsInputSchema: z.
   logo: z.string().optional().nullable(),
   website: z.string().optional().nullable(),
   industry: z.string().optional().nullable(),
+  address: z.string().optional().nullable(),
   description: z.string().optional().nullable(),
   createdAt: z.coerce.date().optional(),
   updatedAt: z.coerce.date().optional(),
@@ -40301,6 +40384,7 @@ export const OrganizationUpdateWithoutIntegrationConfigsInputSchema: z.ZodType<P
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
@@ -40328,6 +40412,7 @@ export const OrganizationUncheckedUpdateWithoutIntegrationConfigsInputSchema: z.
   logo: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   website: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   industry: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
+  address: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   description: z.union([ z.string(),z.lazy(() => NullableStringFieldUpdateOperationsInputSchema) ]).optional().nullable(),
   createdAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
   updatedAt: z.union([ z.coerce.date(),z.lazy(() => DateTimeFieldUpdateOperationsInputSchema) ]).optional(),
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 6fb074a..51f69c8 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -95,6 +95,7 @@ model Organization {
   logo        String?
   website     String?
   industry    String?
+  address     String?
   description String?
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
diff --git a/src/components/organizations/add-organization-dialog.tsx b/src/components/organizations/add-organization-dialog.tsx
index 4e1f6cf..e730570 100644
--- a/src/components/organizations/add-organization-dialog.tsx
+++ b/src/components/organizations/add-organization-dialog.tsx
@@ -24,13 +24,14 @@ import {
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
-import { ImageUpload } from "~/components/ui/image-upload";
+import { UploadThingImageUpload } from "~/components/ui/uploadthing-image-upload";
 
 const organizationFormSchema = z.object({
   name: z.string().min(1, "Organization name is required"),
   description: z.string().optional(),
   website: z.string().url().optional().or(z.literal("")),
   industry: z.string().optional(),
+  address: z.string().optional(),
   logo: z.string().optional(),
 });
 
@@ -64,6 +65,7 @@ export function AddOrganizationDialog({
       description: "",
       website: "",
       industry: "",
+      address: "",
       logo: "",
     },
   });
@@ -118,13 +120,13 @@ export function AddOrganizationDialog({
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <ImageUpload
+                      <UploadThingImageUpload
                         value={field.value}
                         onChange={field.onChange}
                         disabled={isLoading}
                         label="Organization Logo"
                         description="Upload a logo to represent your organization (optional)"
-                        type="organization-logo"
+                        endpoint="organizationLogo"
                       />
                     </FormControl>
                     <FormMessage />
@@ -189,6 +191,26 @@ export function AddOrganizationDialog({
                   )}
                 />
               </div>
+
+              <FormField
+                control={form.control}
+                name="address"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Address</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Organization address"
+                        className="min-h-[80px] resize-none"
+                        rows={3}
+                        {...field}
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </div>
 
             <DialogFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end sm:space-x-1">
diff --git a/src/components/organizations/edit-organization-dialog.tsx b/src/components/organizations/edit-organization-dialog.tsx
index 5a54c68..8b03906 100644
--- a/src/components/organizations/edit-organization-dialog.tsx
+++ b/src/components/organizations/edit-organization-dialog.tsx
@@ -23,13 +23,14 @@ import {
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import { Textarea } from "~/components/ui/textarea";
-import { ImageUpload } from "~/components/ui/image-upload";
+import { UploadThingImageUpload } from "~/components/ui/uploadthing-image-upload";
 
 const organizationFormSchema = z.object({
   name: z.string().min(1, "Organization name is required"),
   description: z.string().optional(),
   website: z.string().url().optional().or(z.literal("")),
   industry: z.string().optional(),
+  address: z.string().optional(),
   logo: z.string().optional(),
 });
 
@@ -41,6 +42,7 @@ interface OrganizationData {
   description?: string | null;
   website?: string | null;
   industry?: string | null;
+  address?: string | null;
   logo?: string | null;
 }
 
@@ -66,6 +68,7 @@ export function EditOrganizationDialog({
       description: "",
       website: "",
       industry: "",
+      address: "",
       logo: "",
     },
   });
@@ -77,6 +80,7 @@ export function EditOrganizationDialog({
         description: organization.description ?? "",
         website: organization.website ?? "",
         industry: organization.industry ?? "",
+        address: organization.address ?? "",
         logo: organization.logo ?? "",
       });
     }
@@ -132,14 +136,13 @@ export function EditOrganizationDialog({
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <ImageUpload
+                      <UploadThingImageUpload
                         value={field.value}
                         onChange={field.onChange}
                         disabled={isLoading}
                         label="Organization Logo"
                         description="Upload a logo to represent your organization (optional)"
-                        type="organization-logo"
-                        organizationId={organization?.id}
+                        endpoint="organizationLogo"
                       />
                     </FormControl>
                     <FormMessage />
@@ -204,6 +207,26 @@ export function EditOrganizationDialog({
                   )}
                 />
               </div>
+
+              <FormField
+                control={form.control}
+                name="address"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Address</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Organization address"
+                        className="min-h-[80px] resize-none"
+                        rows={3}
+                        {...field}
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </div>
 
             <DialogFooter className="flex flex-col gap-2 sm:flex-row sm:justify-end sm:space-x-1">
diff --git a/src/components/settings/organization-info-form.tsx b/src/components/settings/organization-info-form.tsx
index f6236d9..4b67cd3 100644
--- a/src/components/settings/organization-info-form.tsx
+++ b/src/components/settings/organization-info-form.tsx
@@ -23,7 +23,7 @@ import { Badge } from "~/components/ui/badge";
 import { Separator } from "~/components/ui/separator";
 import { Save, Lock, AlertCircle } from "lucide-react";
 import { toast } from "sonner";
-import { ImageUpload } from "~/components/ui/image-upload";
+import { UploadThingImageUpload } from "~/components/ui/uploadthing-image-upload";
 
 const organizationFormSchema = z.object({
   name: z
@@ -43,6 +43,10 @@ const organizationFormSchema = z.object({
     .string()
     .max(100, "Industry must be less than 100 characters")
     .optional(),
+  address: z
+    .string()
+    .max(500, "Address must be less than 500 characters")
+    .optional(),
   logo: z.string().optional(),
 });
 
@@ -55,6 +59,7 @@ interface OrganizationInfoFormProps {
     description?: string | null;
     website?: string | null;
     industry?: string | null;
+    address?: string | null;
     logo?: string | null;
   };
   canEdit: boolean;
@@ -74,6 +79,7 @@ export function OrganizationInfoForm({
       description: organization.description ?? "",
       website: organization.website ?? "",
       industry: organization.industry ?? "",
+      address: organization.address ?? "",
       logo: organization.logo ?? "",
     },
   });
@@ -170,6 +176,15 @@ export function OrganizationInfoForm({
               </a>
             </div>
           )}
+
+          {organization.address && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Address</label>
+              <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                {organization.address}
+              </p>
+            </div>
+          )}
         </div>
 
         <div className="flex items-center gap-2 p-4 rounded-lg bg-muted/50 border">
@@ -220,14 +235,13 @@ export function OrganizationInfoForm({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <ImageUpload
+                    <UploadThingImageUpload
                       value={field.value}
                       onChange={field.onChange}
                       disabled={!isEditing || isPending}
                       label="Organization Logo"
                       description="Upload a logo to represent your organization (optional)"
-                      type="organization-logo"
-                      organizationId={organization.id}
+                      endpoint="organizationLogo"
                     />
                   </FormControl>
                   <FormMessage />
@@ -301,6 +315,30 @@ export function OrganizationInfoForm({
                 )}
               />
             </div>
+
+            {/* Address */}
+            <FormField
+              control={form.control}
+              name="address"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Address</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      placeholder="Enter organization address (optional)"
+                      disabled={!isEditing || isPending}
+                      className={`min-h-[80px] resize-none ${!isEditing ? "bg-muted/50" : ""}`}
+                      maxLength={500}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    {field.value?.length ?? 0}/500 characters
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </div>
 
           {isEditing && (
diff --git a/src/server/api/routers/finance/invoice.ts b/src/server/api/routers/finance/invoice.ts
index 6c6b616..f22034a 100644
--- a/src/server/api/routers/finance/invoice.ts
+++ b/src/server/api/routers/finance/invoice.ts
@@ -12,11 +12,7 @@ import { Resend } from "resend";
 import { env } from "~/env";
 import { render } from "@react-email/components";
 import { InvoiceEmail } from "~/server/email/templates/invoice-email";
-import {
-  formatCurrency,
-  formatDecimal,
-  formatDecimalLike,
-} from "~/server/utils/format";
+import { formatCurrency, formatDecimal } from "~/server/utils/format";
 import { WorkflowEvents } from "~/lib/workflow-dispatcher";
 
 // Shared schemas for better reusability and consistency
@@ -468,7 +464,13 @@ export const invoiceRouter = createTRPCRouter({
 
       const organization = await db.organization.findUnique({
         where: { id: invoice.organizationId },
-        select: { name: true, website: true, industry: true },
+        select: {
+          name: true,
+          website: true,
+          industry: true,
+          logo: true,
+          address: true,
+        },
       });
 
       // HTML email using react-email template
@@ -483,6 +485,8 @@ export const invoiceRouter = createTRPCRouter({
           customerAddress: invoice.customerAddress,
           customerPhone: invoice.customerPhone,
           organizationName: organization?.name ?? "Organization",
+          organizationAddress: organization?.address ?? null,
+          organizationLogo: organization?.logo ?? null,
           organizationWebsite: organization?.website ?? null,
           organizationIndustry: organization?.industry ?? null,
           currency: invoice.currency,
diff --git a/src/server/api/routers/organization.ts b/src/server/api/routers/organization.ts
index d86bb98..6efcefd 100644
--- a/src/server/api/routers/organization.ts
+++ b/src/server/api/routers/organization.ts
@@ -9,6 +9,7 @@ const createOrganizationSchema = z.object({
   description: z.string().optional(),
   website: z.string().url().optional().or(z.literal("")),
   industry: z.string().optional(),
+  address: z.string().optional(),
   logo: z.string().optional(),
 });
 
@@ -18,6 +19,7 @@ const updateOrganizationSchema = z.object({
   description: z.string().optional(),
   website: z.string().url().optional().or(z.literal("")),
   industry: z.string().optional(),
+  address: z.string().optional(),
   logo: z.string().optional(),
 });
 
@@ -63,6 +65,7 @@ export const organizationRouter = createTRPCRouter({
           logo: org.logo,
           website: org.website,
           industry: org.industry,
+          address: org.address,
           membersCount: org._count.users,
           customersCount: org._count.customers,
           projectsCount: org._count.projects,
@@ -124,6 +127,7 @@ export const organizationRouter = createTRPCRouter({
           logo: organization.logo,
           website: organization.website,
           industry: organization.industry,
+          address: organization.address,
           membersCount: organization._count.users,
           customersCount: organization._count.customers,
           projectsCount: organization._count.projects,
@@ -153,6 +157,7 @@ export const organizationRouter = createTRPCRouter({
             description: input.description,
             website: input.website,
             industry: input.industry,
+            address: input.address,
             logo: input.logo,
             users: {
               create: {
@@ -186,6 +191,7 @@ export const organizationRouter = createTRPCRouter({
           logo: organization.logo,
           website: organization.website,
           industry: organization.industry,
+          address: organization.address,
           membersCount: organization._count.users,
           customersCount: organization._count.customers,
           projectsCount: organization._count.projects,
@@ -288,6 +294,7 @@ export const organizationRouter = createTRPCRouter({
           logo: organization.logo,
           website: organization.website,
           industry: organization.industry,
+          address: organization.address,
           membersCount: organization._count.users,
           customersCount: organization._count.customers,
           projectsCount: organization._count.projects,
diff --git a/src/server/email/templates/invoice-email.tsx b/src/server/email/templates/invoice-email.tsx
index cf862a2..4783647 100644
--- a/src/server/email/templates/invoice-email.tsx
+++ b/src/server/email/templates/invoice-email.tsx
@@ -30,8 +30,10 @@ export interface InvoiceEmailProps {
   customerAddress?: string | null;
   customerPhone?: string | null;
   organizationName: string;
+  organizationLogo?: string | null;
   organizationWebsite?: string | null;
   organizationIndustry?: string | null;
+  organizationAddress?: string | null;
   currency: string;
   items: InvoiceEmailItem[];
   subtotal: string;
@@ -64,7 +66,24 @@ export function InvoiceEmail(props: InvoiceEmailProps) {
             <Section style={sectionCol}>
               <Text style={sectionTitle}>From</Text>
               <Text style={text}>
+                {props.organizationLogo && (
+                  <>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={props.organizationLogo}
+                      alt={props.organizationName}
+                      style={{ maxWidth: 120, marginBottom: 8 }}
+                    />
+                    <br />
+                  </>
+                )}
                 {props.organizationName}
+                {props.organizationAddress && (
+                  <>
+                    <br />
+                    {props.organizationAddress}
+                  </>
+                )}
                 {props.organizationWebsite && (
                   <>
                     <br />

From 18272700dfd40ed6e6bc17be671a892a75590013 Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Wed, 17 Sep 2025 12:13:00 +0700
Subject: [PATCH 6/9] feat: implement UploadThing integration for file uploads

- Replace custom file upload with UploadThing service
- Add UploadThing configuration and API routes
- Create new uploadthing-image-upload component with improved UX
- Update environment variables for UploadThing integration
- Remove legacy upload route and image-upload component
- Add comprehensive error handling and loading states
- Support organization logos and other file uploads
- Add documentation for UploadThing integration setup

Breaking changes:
- Removed src/app/api/upload/route.ts (replaced with UploadThing)
- Removed src/components/ui/image-upload.tsx (replaced with uploadthing version)
- Removed src/hooks/use-file-upload.ts (no longer needed)

New files:
- src/app/api/uploadthing/route.ts - UploadThing API endpoint
- src/lib/uploadthing.ts - UploadThing client configuration
- src/server/uploadthing.ts - UploadThing server configuration
- src/components/ui/uploadthing-image-upload.tsx - New upload component
- docs/guides/uploadthing-integration.md - Integration documentation
---
 .env.example                                  |  11 +-
 bun.lock                                      |  50 ++++
 docs/guides/uploadthing-integration.md        | 204 +++++++++++++++
 next.config.js                                |  19 +-
 package.json                                  |   2 +
 src/app/api/upload/route.ts                   | 153 -----------
 src/app/api/uploadthing/route.ts              |  11 +
 src/components/ui/image-upload.tsx            | 239 -----------------
 .../ui/uploadthing-image-upload.tsx           | 245 ++++++++++++++++++
 src/env.js                                    |   4 +
 src/hooks/use-file-upload.ts                  | 122 ---------
 src/lib/uploadthing.ts                        |  39 +++
 src/server/uploadthing.ts                     | 169 ++++++++++++
 13 files changed, 751 insertions(+), 517 deletions(-)
 create mode 100644 docs/guides/uploadthing-integration.md
 delete mode 100644 src/app/api/upload/route.ts
 create mode 100644 src/app/api/uploadthing/route.ts
 delete mode 100644 src/components/ui/image-upload.tsx
 create mode 100644 src/components/ui/uploadthing-image-upload.tsx
 delete mode 100644 src/hooks/use-file-upload.ts
 create mode 100644 src/lib/uploadthing.ts
 create mode 100644 src/server/uploadthing.ts

diff --git a/.env.example b/.env.example
index 27dbabb..4d9f38b 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
-# OpenSyte  Example Environment Variables
-# Copy this file to .env and fill in the required values.
+# OpenSyte Example Environment Variables
+# Copy to .env and fill in the required values.
 # Lines starting with '#' are comments.
 
 ########################################
@@ -49,6 +49,13 @@ RESEND_API_KEY=
 # TWILIO_AUTH_TOKEN=
 # TWILIO_PHONE_NUMBER=
 
+########################################
+# File Uploads (UploadThing)
+########################################
+# Required: UploadThing API token for file uploads
+# Get this from your UploadThing dashboard at https://uploadthing.com
+UPLOADTHING_TOKEN=
+
 ########################################
 # Build / CI (Optional)
 ########################################
diff --git a/bun.lock b/bun.lock
index 62c354f..9766671 100644
--- a/bun.lock
+++ b/bun.lock
@@ -38,6 +38,7 @@
         "@trpc/server": "^11.0.0",
         "@types/pdfkit": "^0.17.2",
         "@uidotdev/usehooks": "^2.4.1",
+        "@uploadthing/react": "^7.3.3",
         "@xyflow/react": "^12.8.4",
         "better-auth": "^1.2.4",
         "class-variance-authority": "^0.7.1",
@@ -63,6 +64,7 @@
         "tunnel-rat": "^0.1.2",
         "tw-animate-css": "^1.2.4",
         "twilio": "^5.9.0",
+        "uploadthing": "^7.7.4",
         "uuid": "^11.1.0",
         "zod": "^3.24.2",
       },
@@ -104,6 +106,8 @@
 
     "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
 
+    "@effect/platform": ["@effect/platform@0.90.3", "", { "dependencies": { "@opentelemetry/semantic-conventions": "^1.33.0", "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.17.7" } }, "sha512-XvQ37yzWQKih4Du2CYladd1i/MzqtgkTPNCaN6Ku6No4CK83hDtXIV/rP03nEoBg2R3Pqgz6gGWmE2id2G81HA=="],
+
     "@emnapi/core": ["@emnapi/core@1.3.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.1", "tslib": "^2.4.0" } }, "sha512-pVGjBIt1Y6gg3EJN8jTcfpP/+uuRksIo055oE/OBkDNcjZqVbfkWCksG1Jp4yZnj3iKWyWX8fdG/j6UDYPbFog=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.3.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw=="],
@@ -188,6 +192,18 @@
 
     "@levischuck/tiny-cbor": ["@levischuck/tiny-cbor@0.2.11", "", {}, "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow=="],
 
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64": ["@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw=="],
+
+    "@msgpackr-extract/msgpackr-extract-darwin-x64": ["@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-arm": ["@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-arm64": ["@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg=="],
+
+    "@msgpackr-extract/msgpackr-extract-linux-x64": ["@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg=="],
+
+    "@msgpackr-extract/msgpackr-extract-win32-x64": ["@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@0.2.7", "", { "dependencies": { "@emnapi/core": "^1.3.1", "@emnapi/runtime": "^1.3.1", "@tybys/wasm-util": "^0.9.0" } }, "sha512-5yximcFK5FNompXfJFoWanu5l8v1hNGqNHh9du1xETp9HWk/B/PzvchX55WYOPaIeNglG8++68AAiauBAtbnzw=="],
 
     "@next/env": ["@next/env@15.2.3", "", {}, "sha512-a26KnbW9DFEUsSxAxKBORR/uD9THoYoKbkpFywMN/AFvboTt94b8+g/07T8J6ACsdLag8/PDU60ov4rPxRAixw=="],
@@ -222,6 +238,8 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
+    "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.37.0", "", {}, "sha512-JD6DerIKdJGmRp4jQyX5FlrQjA4tjOw1cvfsPAZXfOOEErMUHjPcPSICS+6WnM0nB0efSFARh0KAZss+bvExOA=="],
+
     "@pdf-lib/standard-fonts": ["@pdf-lib/standard-fonts@1.0.0", "", { "dependencies": { "pako": "^1.0.6" } }, "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA=="],
 
     "@pdf-lib/upng": ["@pdf-lib/upng@1.0.1", "", { "dependencies": { "pako": "^1.0.10" } }, "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ=="],
@@ -390,6 +408,8 @@
 
     "@simplewebauthn/server": ["@simplewebauthn/server@13.1.1", "", { "dependencies": { "@hexagon/base64": "^1.1.27", "@levischuck/tiny-cbor": "^0.2.2", "@peculiar/asn1-android": "^2.3.10", "@peculiar/asn1-ecc": "^2.3.8", "@peculiar/asn1-rsa": "^2.3.8", "@peculiar/asn1-schema": "^2.3.8", "@peculiar/asn1-x509": "^2.3.8" } }, "sha512-1hsLpRHfSuMB9ee2aAdh0Htza/X3f4djhYISrggqGe3xopNjOcePiSDkDDoPzDYaaMCrbqGP1H2TYU7bgL9PmA=="],
 
+    "@standard-schema/spec": ["@standard-schema/spec@1.0.0-beta.4", "", {}, "sha512-d3IxtzLo7P1oZ8s8YNvxzBUXRXojSut8pbPrTYtzsc5sn4+53jVqbk66pQerSZbZSJZQux6LkclB/+8IDordHg=="],
+
     "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
 
     "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
@@ -578,6 +598,12 @@
 
     "@unrs/rspack-resolver-binding-win32-x64-msvc": ["@unrs/rspack-resolver-binding-win32-x64-msvc@1.2.2", "", { "os": "win32", "cpu": "x64" }, "sha512-hewo/UMGP1a7O6FG/ThcPzSJdm/WwrYDNkdGgWl6M18H6K6MSitklomWpT9MUtT5KGj++QJb06va/14QBC4pvw=="],
 
+    "@uploadthing/mime-types": ["@uploadthing/mime-types@0.3.6", "", {}, "sha512-t3tTzgwFV9+1D7lNDYc7Lr7kBwotHaX0ZsvoCGe7xGnXKo9z0jG2Sjl/msll12FeoLj77nyhsxevXyGpQDBvLg=="],
+
+    "@uploadthing/react": ["@uploadthing/react@7.3.3", "", { "dependencies": { "@uploadthing/shared": "7.1.10", "file-selector": "0.6.0" }, "peerDependencies": { "next": "*", "react": "^17.0.2 || ^18.0.0 || ^19.0.0", "uploadthing": "^7.2.0" }, "optionalPeers": ["next"] }, "sha512-GhKbK42jL2Qs7OhRd2Z6j0zTLsnJTRJH31nR7RZnUYVoRh2aS/NabMAnHBNqfunIAGXVaA717Pvzq7vtxuPTmQ=="],
+
+    "@uploadthing/shared": ["@uploadthing/shared@7.1.10", "", { "dependencies": { "@uploadthing/mime-types": "0.3.6", "effect": "3.17.7", "sqids": "^0.3.0" } }, "sha512-R/XSA3SfCVnLIzFpXyGaKPfbwlYlWYSTuGjTFHuJhdAomuBuhopAHLh2Ois5fJibAHzi02uP1QCKbgTAdmArqg=="],
+
     "@xyflow/react": ["@xyflow/react@12.8.4", "", { "dependencies": { "@xyflow/system": "0.0.68", "classcat": "^5.0.3", "zustand": "^4.4.0" }, "peerDependencies": { "react": ">=17", "react-dom": ">=17" } }, "sha512-bqUu4T5QSHiCFPkoH+b+LROKwQJdLvcjhGbNW9c1dLafCBRjmH1IYz0zPE+lRDXCtQ9kRyFxz3tG19+8VORJ1w=="],
 
     "@xyflow/system": ["@xyflow/system@0.0.68", "", { "dependencies": { "@types/d3-drag": "^3.0.7", "@types/d3-interpolate": "^3.0.4", "@types/d3-selection": "^3.0.10", "@types/d3-transition": "^3.0.8", "@types/d3-zoom": "^3.0.8", "d3-drag": "^3.0.0", "d3-interpolate": "^3.0.1", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0" } }, "sha512-QDG2wxIG4qX+uF8yzm1ULVZrcXX3MxPBoxv7O52FWsX87qIImOqifUhfa/TwsvLdzn7ic2DDBH1uI8TKbdNTYA=="],
@@ -756,6 +782,8 @@
 
     "ecdsa-sig-formatter": ["ecdsa-sig-formatter@1.0.11", "", { "dependencies": { "safe-buffer": "^5.0.1" } }, "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ=="],
 
+    "effect": ["effect@3.17.7", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "fast-check": "^3.23.1" } }, "sha512-dpt0ONUn3zzAuul6k4nC/coTTw27AL5nhkORXgTi6NfMPzqWYa1M05oKmOMTxpVSTKepqXVcW9vIwkuaaqx9zA=="],
+
     "emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
 
     "enhanced-resolve": ["enhanced-resolve@5.18.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="],
@@ -812,6 +840,8 @@
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
 
+    "fast-check": ["fast-check@3.23.2", "", { "dependencies": { "pure-rand": "^6.1.0" } }, "sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A=="],
+
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
@@ -826,8 +856,12 @@
 
     "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
 
+    "file-selector": ["file-selector@0.6.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw=="],
+
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
+    "find-my-way-ts": ["find-my-way-ts@0.1.6", "", {}, "sha512-a85L9ZoXtNAey3Y6Z+eBWW658kO/MwR7zIafkIUPUMf3isZG0NCs2pjW2wtjxAKuJPxMAsHUIP4ZPGv0o5gyTA=="],
+
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
 
     "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
@@ -1076,6 +1110,12 @@
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
+    "msgpackr": ["msgpackr@1.11.5", "", { "optionalDependencies": { "msgpackr-extract": "^3.0.2" } }, "sha512-UjkUHN0yqp9RWKy0Lplhh+wlpdt9oQBYgULZOiFhV3VclSF1JnSQWZ5r9gORQlNYaUKQoR8itv7g7z1xDDuACA=="],
+
+    "msgpackr-extract": ["msgpackr-extract@3.0.3", "", { "dependencies": { "node-gyp-build-optional-packages": "5.2.2" }, "optionalDependencies": { "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3" }, "bin": { "download-msgpackr-prebuilds": "bin/download-prebuilds.js" } }, "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA=="],
+
+    "multipasta": ["multipasta@0.2.7", "", {}, "sha512-KPA58d68KgGil15oDqXjkUBEBYc00XvbPj5/X+dyzeo/lWm9Nc25pQRlf1D+gv4OpK7NM0J1odrbu9JNNGvynA=="],
+
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "nanostores": ["nanostores@0.11.4", "", {}, "sha512-k1oiVNN4hDK8NcNERSZLQiMfRzEGtfnvZvdBvey3SQbgn8Dcrk0h1I6vpxApjb10PFUflZrgJ2WEZyJQ+5v7YQ=="],
@@ -1086,6 +1126,8 @@
 
     "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
 
+    "node-gyp-build-optional-packages": ["node-gyp-build-optional-packages@5.2.2", "", { "dependencies": { "detect-libc": "^2.0.1" }, "bin": { "node-gyp-build-optional-packages": "bin.js", "node-gyp-build-optional-packages-optional": "optional.js", "node-gyp-build-optional-packages-test": "build-test.js" } }, "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw=="],
+
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
     "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],
@@ -1194,6 +1236,8 @@
 
     "punycode.js": ["punycode.js@2.3.1", "", {}, "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="],
 
+    "pure-rand": ["pure-rand@6.1.0", "", {}, "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA=="],
+
     "pvtsutils": ["pvtsutils@1.3.6", "", { "dependencies": { "tslib": "^2.8.1" } }, "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg=="],
 
     "pvutils": ["pvutils@1.1.3", "", {}, "sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ=="],
@@ -1292,6 +1336,8 @@
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "sqids": ["sqids@0.3.0", "", {}, "sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw=="],
+
     "stable-hash": ["stable-hash@0.0.5", "", {}, "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA=="],
 
     "streamsearch": ["streamsearch@1.1.0", "", {}, "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="],
@@ -1370,6 +1416,8 @@
 
     "unicode-trie": ["unicode-trie@2.0.0", "", { "dependencies": { "pako": "^0.2.5", "tiny-inflate": "^1.0.0" } }, "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ=="],
 
+    "uploadthing": ["uploadthing@7.7.4", "", { "dependencies": { "@effect/platform": "0.90.3", "@standard-schema/spec": "1.0.0-beta.4", "@uploadthing/mime-types": "0.3.6", "@uploadthing/shared": "7.1.10", "effect": "3.17.7" }, "peerDependencies": { "express": "*", "h3": "*", "tailwindcss": "^3.0.0 || ^4.0.0-beta.0" }, "optionalPeers": ["express", "h3", "tailwindcss"] }, "sha512-rlK/4JWHW5jP30syzWGBFDDXv3WJDdT8gn9OoxRJmXLoXi94hBmyyjxihGlNrKhBc81czyv8TkzMioe/OuKGfA=="],
+
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
     "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
@@ -1576,6 +1624,8 @@
 
     "brotli/base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
 
+    "effect/@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
+
     "eslint-import-resolver-node/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
 
     "eslint-module-utils/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
diff --git a/docs/guides/uploadthing-integration.md b/docs/guides/uploadthing-integration.md
new file mode 100644
index 0000000..a18968b
--- /dev/null
+++ b/docs/guides/uploadthing-integration.md
@@ -0,0 +1,204 @@
+# UploadThing S3 File Upload Integration Guide
+
+This guide covers the UploadThing integration in OpenSyte for S3-backed file uploads.
+
+## Overview
+
+UploadThing has been integrated to replace the previous local file upload system with S3-backed cloud storage. This provides better scalability, reliability, and performance for file uploads.
+
+## Features
+
+- **S3 Cloud Storage**: Files are stored in AWS S3 through UploadThing
+- **Type-Safe API**: Full TypeScript support with tRPC integration
+- **Authentication**: All uploads require user authentication
+- **Multiple Endpoints**: Separate endpoints for different file types
+- **Progress Tracking**: Real-time upload progress and error handling
+- **Drag & Drop**: Modern UI with drag-and-drop file upload
+- **File Validation**: Client and server-side file type and size validation
+
+## Setup
+
+### 1. Environment Variables
+
+Add the following environment variable to your `.env` file:
+
+```bash
+# Required: UploadThing API token for file uploads
+UPLOADTHING_TOKEN=your_uploadthing_token_here
+```
+
+To get this value:
+
+1. Sign up at [UploadThing](https://uploadthing.com)
+2. Create a new app
+3. Copy the API token from your dashboard (replaces the old secret/app ID approach)
+
+### 2. File Router Configuration
+
+The UploadThing file router is configured in `src/server/uploadthing.ts` with the following endpoints:
+
+#### Organization Logo (`organizationLogo`)
+
+- **Max Size**: 4MB
+- **File Types**: JPEG, PNG, WebP, SVG
+- **Authentication**: Required
+- **Use Case**: Organization profile logos
+
+#### User Avatar (`userAvatar`)
+
+- **Max Size**: 2MB
+- **File Types**: JPEG, PNG, WebP
+- **Authentication**: Required
+- **Use Case**: User profile pictures
+
+#### Document Upload (`documentUpload`)
+
+- **Max Size**: 8MB per file (up to 5 files)
+- **File Types**: PDF, JPEG, PNG, WebP
+- **Authentication**: Required
+- **Use Case**: Invoice attachments, receipts, documents
+
+## Components
+
+### UploadThingImageUpload
+
+The main reusable component for image uploads:
+
+```tsx
+import { UploadThingImageUpload } from "~/components/ui/uploadthing-image-upload";
+
+<UploadThingImageUpload
+  value={logoUrl}
+  onChange={setLogoUrl}
+  disabled={false}
+  label="Organization Logo"
+  description="Upload a logo for your organization"
+  endpoint="organizationLogo"
+/>;
+```
+
+**Props:**
+
+- `value`: Current image URL (string | null)
+- `onChange`: Callback when image changes
+- `disabled`: Disable upload functionality
+- `label`: Display label for the upload area
+- `description`: Help text description
+- `endpoint`: UploadThing endpoint to use
+
+### UploadDropzone
+
+For custom implementations, you can use the raw UploadDropzone:
+
+```tsx
+import { UploadDropzone } from "~/lib/uploadthing";
+
+<UploadDropzone
+  endpoint="organizationLogo"
+  onClientUploadComplete={res => {
+    console.log("Files: ", res);
+    setImageUrl(res[0]?.url);
+  }}
+  onUploadError={(error: Error) => {
+    console.error("Error: ", error);
+  }}
+/>;
+```
+
+## API Routes
+
+The UploadThing API route is automatically handled at `/api/uploadthing` and configured in:
+
+- `src/app/api/uploadthing/route.ts` - Next.js API route handler
+- `src/server/uploadthing.ts` - File router configuration
+
+## Utilities
+
+Helper utilities are available in `src/lib/uploadthing.ts`:
+
+```tsx
+import {
+  UploadButton,
+  UploadDropzone,
+  getUploadConfig,
+} from "~/lib/uploadthing";
+
+// Get configuration for an endpoint
+const config = getUploadConfig("organizationLogo");
+// Returns: { maxFileSize: "4MB", acceptedTypes: ["image/*"], endpoint: "organizationLogo" }
+```
+
+## Migration from Local Upload
+
+The following components have been migrated to use UploadThing:
+
+- ✅ `AddOrganizationDialog` - Uses UploadThingImageUpload
+- ✅ `EditOrganizationDialog` - Uses UploadThingImageUpload
+- ✅ `OrganizationInfoForm` - Uses UploadThingImageUpload
+
+### Removed Components
+
+The old local file upload system has been replaced:
+
+- `ImageUpload` component - Replaced with `UploadThingImageUpload`
+- `useFileUpload` hook - No longer needed
+- `/api/upload` route - Replaced with `/api/uploadthing`
+
+## Error Handling
+
+The integration includes comprehensive error handling:
+
+- **Client-side validation**: File type and size validation before upload
+- **Server-side validation**: Authentication and file validation
+- **User feedback**: Toast notifications for success/error states
+- **Loading states**: Upload progress indicators
+
+## Security
+
+- **Authentication Required**: All uploads require valid user session
+- **File Type Validation**: Both client and server-side validation
+- **Size Limits**: Enforced per endpoint
+- **S3 Security**: Files stored in secure S3 buckets through UploadThing
+
+## Troubleshooting
+
+### Environment Variables Missing
+
+If you see "Invalid environment variables" errors, ensure:
+
+1. `.env` file exists in project root
+2. `UPLOADTHING_TOKEN` is set with your API token from UploadThing dashboard
+3. Token is copied correctly from UploadThing dashboard
+
+### Upload Failures
+
+Common issues:
+
+- **File too large**: Check endpoint size limits
+- **Invalid file type**: Ensure file matches accepted types
+- **Authentication**: User must be signed in
+- **Network issues**: Check internet connection and UploadThing status
+
+### Development vs Production
+
+- Development: Uses UploadThing test environment
+- Production: Uses UploadThing production environment
+- Ensure environment variables are set correctly for each environment
+
+## Best Practices
+
+1. **File Validation**: Always validate files on both client and server
+2. **Error Handling**: Provide clear error messages to users
+3. **Loading States**: Show upload progress for better UX
+4. **Cleanup**: Remove old files when replacing (if needed)
+5. **Testing**: Test uploads in both development and production environments
+
+## Future Enhancements
+
+Potential improvements for the UploadThing integration:
+
+- **File Management**: Admin interface to manage uploaded files
+- **Image Optimization**: Automatic image resizing and optimization
+- **CDN Integration**: Optional CDN for faster file delivery
+- **Bulk Uploads**: Support for multiple file uploads
+- **File Versioning**: Keep history of file changes
diff --git a/next.config.js b/next.config.js
index 121c4f4..724a5e8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,23 @@
 import "./src/env.js";
 
 /** @type {import("next").NextConfig} */
-const config = {};
+const config = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "utfs.io",
+        port: "",
+        pathname: "/f/**",
+      },
+      {
+        protocol: "https",
+        hostname: "*.ufs.sh",
+        port: "",
+        pathname: "/f/**",
+      },
+    ],
+  },
+};
 
 export default config;
diff --git a/package.json b/package.json
index 5f70ac2..6ea32ed 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@trpc/server": "^11.0.0",
     "@types/pdfkit": "^0.17.2",
     "@uidotdev/usehooks": "^2.4.1",
+    "@uploadthing/react": "^7.3.3",
     "@xyflow/react": "^12.8.4",
     "better-auth": "^1.2.4",
     "class-variance-authority": "^0.7.1",
@@ -81,6 +82,7 @@
     "tunnel-rat": "^0.1.2",
     "tw-animate-css": "^1.2.4",
     "twilio": "^5.9.0",
+    "uploadthing": "^7.7.4",
     "uuid": "^11.1.0",
     "zod": "^3.24.2"
   },
diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
deleted file mode 100644
index efe690a..0000000
--- a/src/app/api/upload/route.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { writeFile, mkdir } from "fs/promises";
-import { join } from "path";
-import { auth } from "~/lib/auth";
-import { z } from "zod";
-
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const ALLOWED_TYPES = [
-  "image/jpeg",
-  "image/jpg",
-  "image/png",
-  "image/webp",
-  "image/svg+xml",
-];
-
-const uploadSchema = z.object({
-  type: z
-    .enum(["organization-logo", "user-avatar"])
-    .default("organization-logo"),
-  organizationId: z.string().optional(),
-});
-
-export async function POST(request: NextRequest) {
-  try {
-    // Check authentication
-    const session = await auth.api.getSession({ headers: request.headers });
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-    }
-
-    const formData = await request.formData();
-    const file = formData.get("file") as File;
-    const type = (formData.get("type") as string) ?? "organization-logo";
-    const organizationId = formData.get("organizationId") as string;
-
-    // Validate input
-    const validatedData = uploadSchema.parse({ type, organizationId });
-
-    if (!file) {
-      return NextResponse.json({ error: "No file provided" }, { status: 400 });
-    }
-
-    // Validate file type
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      return NextResponse.json(
-        {
-          error:
-            "Invalid file type. Only JPEG, PNG, WebP, and SVG files are allowed.",
-        },
-        { status: 400 }
-      );
-    }
-
-    // Validate file size
-    if (file.size > MAX_FILE_SIZE) {
-      return NextResponse.json(
-        { error: "File too large. Maximum size is 5MB." },
-        { status: 400 }
-      );
-    }
-
-    // Create filename with timestamp and random string
-    const timestamp = Date.now();
-    const randomString = Math.random().toString(36).substring(2, 15);
-    const fileExtension = file.name.split(".").pop();
-    const fileName = `${validatedData.type}-${timestamp}-${randomString}.${fileExtension}`;
-
-    // Create upload directory path
-    const uploadDir = join(
-      process.cwd(),
-      "public",
-      "uploads",
-      validatedData.type
-    );
-    await mkdir(uploadDir, { recursive: true });
-
-    // Convert file to buffer and save
-    const bytes = await file.arrayBuffer();
-    const buffer = Buffer.from(bytes);
-    const filePath = join(uploadDir, fileName);
-
-    await writeFile(filePath, buffer);
-
-    // Return the public URL
-    const fileUrl = `/uploads/${validatedData.type}/${fileName}`;
-
-    return NextResponse.json({
-      success: true,
-      url: fileUrl,
-      filename: fileName,
-      size: file.size,
-      type: file.type,
-    });
-  } catch (error) {
-    console.error("File upload error:", error);
-
-    if (error instanceof z.ZodError) {
-      return NextResponse.json(
-        { error: "Invalid input parameters" },
-        { status: 400 }
-      );
-    }
-
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
-
-// Handle file deletion
-export async function DELETE(request: NextRequest) {
-  try {
-    // Check authentication
-    const session = await auth.api.getSession({ headers: request.headers });
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
-    }
-
-    const { searchParams } = new URL(request.url);
-    const filePath = searchParams.get("path");
-
-    if (!filePath?.startsWith("/uploads/")) {
-      return NextResponse.json({ error: "Invalid file path" }, { status: 400 });
-    }
-
-    // Construct full file path
-    const fullPath = join(process.cwd(), "public", filePath);
-
-    try {
-      const { unlink } = await import("fs/promises");
-      await unlink(fullPath);
-
-      return NextResponse.json({
-        success: true,
-        message: "File deleted successfully",
-      });
-    } catch (fileError) {
-      // File might not exist, which is okay
-      return NextResponse.json({
-        success: true,
-        message: "File not found or already deleted",
-        fileError: fileError,
-      });
-    }
-  } catch (error) {
-    console.error("File deletion error:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/src/app/api/uploadthing/route.ts b/src/app/api/uploadthing/route.ts
new file mode 100644
index 0000000..5dedf43
--- /dev/null
+++ b/src/app/api/uploadthing/route.ts
@@ -0,0 +1,11 @@
+import { createRouteHandler } from "uploadthing/next";
+import { uploadRouter } from "~/server/uploadthing";
+
+// Export routes for Next.js App Router
+export const { GET, POST } = createRouteHandler({
+  router: uploadRouter,
+  config: {
+    // Optional: Add custom error handling
+    // logLevel: "debug",
+  },
+});
diff --git a/src/components/ui/image-upload.tsx b/src/components/ui/image-upload.tsx
deleted file mode 100644
index 4f19927..0000000
--- a/src/components/ui/image-upload.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client";
-
-import { useState, useRef } from "react";
-import Image from "next/image";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
-import { Badge } from "~/components/ui/badge";
-import { Upload, X, ImageIcon, AlertCircle } from "lucide-react";
-import { cn } from "~/lib/utils";
-import { useFileUpload } from "~/hooks/use-file-upload";
-
-interface ImageUploadProps {
-  value?: string | null;
-  onChange: (value: string | null) => void;
-  disabled?: boolean;
-  className?: string;
-  label?: string;
-  description?: string;
-  maxSizeMB?: number;
-  acceptedFormats?: string[];
-  type?: "organization-logo" | "user-avatar";
-  organizationId?: string;
-}
-
-export function ImageUpload({
-  value,
-  onChange,
-  disabled = false,
-  className,
-  label = "Logo",
-  description = "Upload a logo for your organization",
-  maxSizeMB = 5,
-  acceptedFormats = ["image/jpeg", "image/png", "image/webp", "image/svg+xml"],
-  type = "organization-logo",
-  organizationId,
-}: ImageUploadProps) {
-  const [dragOver, setDragOver] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const { uploadFile, deleteFile, isUploading } = useFileUpload();
-
-  const handleFileUpload = async (file: File) => {
-    setError(null);
-
-    const result = await uploadFile(file, {
-      type,
-      organizationId,
-      maxSizeMB,
-      allowedTypes: acceptedFormats,
-    });
-
-    if (result?.url) {
-      // If there was a previous file, delete it
-      if (value?.startsWith("/uploads/")) {
-        await deleteFile(value);
-      }
-      onChange(result.url);
-    }
-  };
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      void handleFileUpload(file);
-    }
-  };
-
-  const handleDrop = (event: React.DragEvent) => {
-    event.preventDefault();
-    setDragOver(false);
-
-    const file = event.dataTransfer.files[0];
-    if (file) {
-      void handleFileUpload(file);
-    }
-  };
-
-  const handleDragOver = (event: React.DragEvent) => {
-    event.preventDefault();
-    setDragOver(true);
-  };
-
-  const handleDragLeave = (event: React.DragEvent) => {
-    event.preventDefault();
-    setDragOver(false);
-  };
-
-  const handleRemove = async () => {
-    // Delete file from server if it's a local upload
-    if (value?.startsWith("/uploads/")) {
-      await deleteFile(value);
-    }
-    onChange(null);
-    setError(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  const handleBrowse = () => {
-    if (!disabled) {
-      fileInputRef.current?.click();
-    }
-  };
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      {label && (
-        <div className="space-y-1">
-          <Label className="text-sm font-medium">{label}</Label>
-          {description && (
-            <p className="text-xs text-muted-foreground">{description}</p>
-          )}
-        </div>
-      )}
-
-      <div className="space-y-3">
-        {/* Current Image Preview */}
-        {value && (
-          <div className="relative inline-block">
-            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
-              <Image
-                src={value}
-                alt="Uploaded logo"
-                fill
-                className="object-cover"
-              />
-            </div>
-            {!disabled && (
-              <Button
-                type="button"
-                variant="destructive"
-                size="sm"
-                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
-                onClick={handleRemove}
-              >
-                <X className="h-3 w-3" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Upload Area */}
-        {!value && (
-          <div
-            className={cn(
-              "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
-              dragOver && !disabled
-                ? "border-primary bg-primary/5"
-                : "border-muted-foreground/25",
-              disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-              "hover:border-primary/50 hover:bg-primary/5"
-            )}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onClick={handleBrowse}
-          >
-            <div className="space-y-3">
-              <div className="flex justify-center">
-                <div className="p-3 bg-muted rounded-full">
-                  {isUploading ? (
-                    <div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent" />
-                  ) : (
-                    <ImageIcon className="h-6 w-6 text-muted-foreground" />
-                  )}
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <p className="text-sm font-medium">
-                  {isUploading
-                    ? "Uploading..."
-                    : "Drop your logo here, or browse"}
-                </p>
-                <div className="flex flex-wrap justify-center gap-1">
-                  {acceptedFormats.map(format => (
-                    <Badge key={format} variant="secondary" className="text-xs">
-                      {format.split("/")[1]?.toUpperCase()}
-                    </Badge>
-                  ))}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Max {maxSizeMB}MB
-                </p>
-              </div>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                disabled={disabled || isUploading}
-                className="pointer-events-none"
-              >
-                <Upload className="h-4 w-4 mr-2" />
-                Browse Files
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* Replace/Change Button for existing image */}
-        {value && !disabled && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={handleBrowse}
-            disabled={isUploading}
-            className="w-full sm:w-auto"
-          >
-            <Upload className="h-4 w-4 mr-2" />
-            {isUploading ? "Uploading..." : "Change Logo"}
-          </Button>
-        )}
-
-        {/* Error Message */}
-        {error && (
-          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
-            <AlertCircle className="h-4 w-4 text-destructive" />
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        )}
-      </div>
-
-      {/* Hidden File Input */}
-      <Input
-        ref={fileInputRef}
-        type="file"
-        accept={acceptedFormats.join(",")}
-        onChange={handleFileSelect}
-        disabled={disabled}
-        className="hidden"
-      />
-    </div>
-  );
-}
diff --git a/src/components/ui/uploadthing-image-upload.tsx b/src/components/ui/uploadthing-image-upload.tsx
new file mode 100644
index 0000000..cf7d817
--- /dev/null
+++ b/src/components/ui/uploadthing-image-upload.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Button } from "~/components/ui/button";
+import { Label } from "~/components/ui/label";
+import { Upload, X, AlertCircle, Loader2 } from "lucide-react";
+import { cn } from "~/lib/utils";
+import { UploadDropzone } from "~/lib/uploadthing";
+import type { OurFileRouter } from "~/server/uploadthing";
+import { toast } from "sonner";
+
+interface UploadThingImageUploadProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  disabled?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+  endpoint: keyof OurFileRouter;
+}
+
+export function UploadThingImageUpload({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  label = "Logo",
+  description = "Upload a logo for your organization",
+  endpoint,
+}: UploadThingImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleRemove = () => {
+    onChange(null);
+    setError(null);
+  };
+
+  // Get endpoint-specific config
+  const getEndpointConfig = () => {
+    switch (endpoint) {
+      case "organizationLogo":
+        return {
+          maxSize: "4MB",
+          types: ["PNG", "JPG", "JPEG", "WEBP", "SVG"],
+        };
+      case "userAvatar":
+        return {
+          maxSize: "2MB",
+          types: ["PNG", "JPG", "JPEG", "WEBP"],
+        };
+      case "documentUpload":
+        return {
+          maxSize: "10MB",
+          types: ["PNG", "JPG", "JPEG", "WEBP", "PDF"],
+        };
+      default:
+        return {
+          maxSize: "4MB",
+          types: ["PNG", "JPG", "JPEG", "WEBP"],
+        };
+    }
+  };
+
+  const config = getEndpointConfig();
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {label && (
+        <div className="space-y-1">
+          <Label className="text-sm font-medium">{label}</Label>
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {/* Current Image Preview */}
+        {value && (
+          <div className="relative inline-block">
+            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
+              <Image
+                src={value}
+                alt="Uploaded image"
+                fill
+                className="object-cover"
+              />
+            </div>
+            {!disabled && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
+                onClick={handleRemove}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Upload Area */}
+        {!value && !disabled && (
+          <div className="space-y-4">
+            <UploadDropzone
+              endpoint={endpoint}
+              onClientUploadComplete={res => {
+                console.log("Upload completed:", res);
+                if (res?.[0]?.ufsUrl) {
+                  onChange(res[0].ufsUrl);
+                  toast.success("File uploaded successfully!");
+                  setError(null);
+                }
+                setIsUploading(false);
+              }}
+              onUploadError={(error: Error) => {
+                console.error("Upload error:", error);
+                const errorMessage = error.message || "Upload failed";
+                setError(errorMessage);
+                toast.error(errorMessage);
+                setIsUploading(false);
+              }}
+              onUploadBegin={() => {
+                setIsUploading(true);
+                setError(null);
+              }}
+              config={{
+                mode: "auto",
+              }}
+              appearance={{
+                container: cn(
+                  "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+                  "border-muted-foreground/25 hover:border-primary/50",
+                  "ut-ready:bg-primary/5 ut-uploading:bg-primary/10",
+                  disabled && "opacity-50 cursor-not-allowed"
+                ),
+                uploadIcon: "text-primary",
+                label: "text-sm font-medium text-foreground",
+                allowedContent: "text-xs text-muted-foreground",
+                button: cn(
+                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "h-9 px-4 py-2 text-sm font-medium",
+                  "rounded-md transition-colors",
+                  "ut-ready:bg-primary ut-uploading:bg-primary/80"
+                ),
+              }}
+              content={{
+                label: isUploading
+                  ? "Uploading..."
+                  : `Drop your ${label.toLowerCase()} here, or browse`,
+                allowedContent: `Max ${config.maxSize} • ${config.types.join(", ")}`,
+                button: isUploading ? (
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Uploading...
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Upload className="h-4 w-4" />
+                    Browse Files
+                  </div>
+                ),
+              }}
+            />
+          </div>
+        )}
+
+        {/* Replace/Change Button for existing image */}
+        {value && !disabled && (
+          <div className="space-y-3">
+            <UploadDropzone
+              endpoint={endpoint}
+              onClientUploadComplete={res => {
+                console.log("Upload completed:", res);
+                if (res?.[0]?.ufsUrl) {
+                  onChange(res[0].ufsUrl);
+                  toast.success("File updated successfully!");
+                  setError(null);
+                }
+                setIsUploading(false);
+              }}
+              onUploadError={(error: Error) => {
+                console.error("Upload error:", error);
+                const errorMessage = error.message || "Upload failed";
+                setError(errorMessage);
+                toast.error(errorMessage);
+                setIsUploading(false);
+              }}
+              onUploadBegin={() => {
+                setIsUploading(true);
+                setError(null);
+              }}
+              config={{
+                mode: "auto",
+              }}
+              appearance={{
+                container: cn(
+                  "border rounded-lg p-4 text-center transition-colors",
+                  "border-muted-foreground/25 hover:border-primary/50",
+                  "ut-ready:bg-muted/50 ut-uploading:bg-primary/10"
+                ),
+                uploadIcon: "h-8 w-8 text-primary",
+                label: "text-sm font-medium text-foreground",
+                allowedContent: "text-xs text-muted-foreground",
+                button: cn(
+                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "h-8 px-3 py-1 text-sm",
+                  "rounded-md transition-colors"
+                ),
+              }}
+              content={{
+                label: isUploading
+                  ? "Uploading..."
+                  : `Change ${label.toLowerCase()}`,
+                allowedContent: `Max ${config.maxSize} • ${config.types.join(", ")}`,
+                button: isUploading ? (
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="h-3 w-3 animate-spin" />
+                    Uploading...
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Upload className="h-3 w-3" />
+                    Change
+                  </div>
+                ),
+              }}
+            />
+          </div>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <AlertCircle className="h-4 w-4 text-destructive" />
+            <p className="text-sm text-destructive">{error}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/env.js b/src/env.js
index 8ffc2c0..d7424e5 100644
--- a/src/env.js
+++ b/src/env.js
@@ -22,6 +22,8 @@ export const env = createEnv({
     TWILIO_ACCOUNT_SID: z.string().optional(),
     TWILIO_AUTH_TOKEN: z.string().optional(),
     TWILIO_PHONE_NUMBER: z.string().optional(),
+    // UploadThing File Service
+    UPLOADTHING_TOKEN: z.string().min(1, "UPLOADTHING_TOKEN is required"),
   },
 
   /**
@@ -48,6 +50,8 @@ export const env = createEnv({
     TWILIO_ACCOUNT_SID: process.env.TWILIO_ACCOUNT_SID,
     TWILIO_AUTH_TOKEN: process.env.TWILIO_AUTH_TOKEN,
     TWILIO_PHONE_NUMBER: process.env.TWILIO_PHONE_NUMBER,
+    // UploadThing File Service
+    UPLOADTHING_TOKEN: process.env.UPLOADTHING_TOKEN,
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   /**
diff --git a/src/hooks/use-file-upload.ts b/src/hooks/use-file-upload.ts
deleted file mode 100644
index 23ac5a8..0000000
--- a/src/hooks/use-file-upload.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useState } from "react";
-import { toast } from "sonner";
-
-interface UploadOptions {
-  type?: "organization-logo" | "user-avatar";
-  organizationId?: string;
-  maxSizeMB?: number;
-  allowedTypes?: string[];
-}
-
-interface UploadResponse {
-  success: boolean;
-  url?: string;
-  filename?: string;
-  size?: number;
-  type?: string;
-  error?: string;
-}
-
-export function useFileUpload() {
-  const [isUploading, setIsUploading] = useState(false);
-
-  const uploadFile = async (
-    file: File,
-    options: UploadOptions = {}
-  ): Promise<UploadResponse | null> => {
-    const {
-      type = "organization-logo",
-      organizationId,
-      maxSizeMB = 5,
-      allowedTypes = [
-        "image/jpeg",
-        "image/jpg",
-        "image/png",
-        "image/webp",
-        "image/svg+xml",
-      ],
-    } = options;
-
-    // Client-side validation
-    if (!allowedTypes.includes(file.type)) {
-      toast.error(
-        `Invalid file type. Please upload ${allowedTypes.map(t => t.split("/")[1]).join(", ")} files.`
-      );
-      return null;
-    }
-
-    if (file.size > maxSizeMB * 1024 * 1024) {
-      toast.error(`File too large. Maximum size is ${maxSizeMB}MB.`);
-      return null;
-    }
-
-    setIsUploading(true);
-
-    try {
-      const formData = new FormData();
-      formData.append("file", file);
-      formData.append("type", type);
-      if (organizationId) {
-        formData.append("organizationId", organizationId);
-      }
-
-      const response = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-      });
-
-      const result = (await response.json()) as UploadResponse;
-
-      if (!response.ok) {
-        throw new Error(result.error ?? "Upload failed");
-      }
-
-      if (result.success && result.url) {
-        toast.success("File uploaded successfully");
-        return result;
-      } else {
-        throw new Error("Upload failed");
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Upload failed";
-      toast.error(errorMessage);
-      return null;
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const deleteFile = async (filePath: string): Promise<boolean> => {
-    try {
-      const response = await fetch(
-        `/api/upload?path=${encodeURIComponent(filePath)}`,
-        {
-          method: "DELETE",
-        }
-      );
-
-      const result = (await response.json()) as {
-        success: boolean;
-        error?: string;
-      };
-
-      if (!response.ok) {
-        throw new Error(result.error ?? "Delete failed");
-      }
-
-      return result.success;
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Delete failed";
-      toast.error(errorMessage);
-      return false;
-    }
-  };
-
-  return {
-    uploadFile,
-    deleteFile,
-    isUploading,
-  };
-}
diff --git a/src/lib/uploadthing.ts b/src/lib/uploadthing.ts
new file mode 100644
index 0000000..0459771
--- /dev/null
+++ b/src/lib/uploadthing.ts
@@ -0,0 +1,39 @@
+import {
+  generateUploadButton,
+  generateUploadDropzone,
+} from "@uploadthing/react";
+import type { OurFileRouter } from "~/server/uploadthing";
+
+/**
+ * Generate UploadThing components with our file router types
+ */
+export const UploadButton = generateUploadButton<OurFileRouter>();
+export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
+
+/**
+ * Helper function to get upload endpoint configuration
+ */
+export const getUploadConfig = (endpoint: keyof OurFileRouter) => {
+  switch (endpoint) {
+    case "organizationLogo":
+      return {
+        maxFileSize: "4MB",
+        acceptedTypes: ["image/*"],
+        endpoint: "organizationLogo" as const,
+      };
+    case "userAvatar":
+      return {
+        maxFileSize: "2MB",
+        acceptedTypes: ["image/*"],
+        endpoint: "userAvatar" as const,
+      };
+    case "documentUpload":
+      return {
+        maxFileSize: "10MB",
+        acceptedTypes: ["image/*", "application/pdf"],
+        endpoint: "documentUpload" as const,
+      };
+    default:
+      throw new Error(`Unknown upload endpoint: ${String(endpoint)}`);
+  }
+};
diff --git a/src/server/uploadthing.ts b/src/server/uploadthing.ts
new file mode 100644
index 0000000..f4945fa
--- /dev/null
+++ b/src/server/uploadthing.ts
@@ -0,0 +1,169 @@
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+import { UploadThingError } from "uploadthing/server";
+import { auth } from "~/lib/auth";
+
+const f = createUploadthing();
+
+/**
+ * UploadThing file router configuration with enhanced security
+ *
+ * Security Features:
+ * - All routes require authentication (no public routes)
+ * - Automatic callback verification (v7.7.4 includes HMAC SHA256 protection)
+ * - User session validation via Better Auth
+ * - Detailed logging for audit trails
+ *
+ * Authentication & Security Best Practices:
+ * - The /api/uploadthing endpoint is public (required for UploadThing webhooks)
+ * - Individual routes are protected via .middleware() functions
+ * - Callback data is automatically verified via HMAC SHA256 (v6.7+)
+ * - All uploads require valid user sessions
+ *
+ * Rate Limiting:
+ * - Consider adding rate limiting for additional protection
+ * - UploadThing provides built-in rate limiting per endpoint
+ *
+ * File Validation:
+ * - Client-side validation via file type and size constraints
+ * - Server-side validation via middleware checks
+ */
+export const uploadRouter = {
+  /**
+   * Organization logo upload endpoint
+   * - Max 4MB
+   * - Only images (jpeg, png, webp, svg)
+   * - Requires authentication
+   */
+  organizationLogo: f({
+    image: {
+      maxFileSize: "4MB",
+      maxFileCount: 1,
+    },
+  })
+    .middleware(async ({ req }) => {
+      // Get user session using Better Auth
+      const session = await auth.api.getSession({ headers: req.headers });
+
+      if (!session?.user?.id) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw new UploadThingError({
+          code: "FORBIDDEN",
+          message: "You must be signed in to upload files",
+        });
+      }
+
+      // Log upload attempt for audit trail
+      console.log(
+        `Upload attempt - User: ${session.user.id}, Email: ${session.user.email}`
+      );
+
+      // Return user data to be available in onUploadComplete
+      return {
+        userId: session.user.id,
+        userEmail: session.user.email,
+      };
+    })
+    .onUploadComplete(async ({ metadata, file }) => {
+      console.log("Organization logo upload complete");
+      console.log("Uploaded by user:", metadata.userId);
+      console.log("File URL:", file.ufsUrl);
+      console.log("File size:", file.size);
+
+      // You can store file info in database here if needed
+      return {
+        url: file.ufsUrl,
+        userId: metadata.userId,
+        uploadedAt: new Date().toISOString(),
+      };
+    }),
+
+  /**
+   * User avatar upload endpoint
+   * - Max 2MB
+   * - Only images
+   * - Requires authentication
+   */
+  userAvatar: f({
+    image: {
+      maxFileSize: "2MB",
+      maxFileCount: 1,
+    },
+  })
+    .middleware(async ({ req }) => {
+      const session = await auth.api.getSession({ headers: req.headers });
+
+      if (!session?.user?.id) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw new UploadThingError({
+          code: "FORBIDDEN",
+          message: "You must be signed in to upload user avatars",
+        });
+      }
+
+      console.log(`Avatar upload attempt - User: ${session.user.id}`);
+
+      return {
+        userId: session.user.id,
+        userEmail: session.user.email,
+      };
+    })
+    .onUploadComplete(async ({ metadata, file }) => {
+      console.log("User avatar upload complete");
+      console.log("Uploaded by user:", metadata.userId);
+      console.log("File URL:", file.ufsUrl);
+
+      return {
+        url: file.ufsUrl,
+        userId: metadata.userId,
+        uploadedAt: new Date().toISOString(),
+      };
+    }),
+
+  /**
+   * Document upload endpoint for invoices/receipts
+   * - Max 10MB
+   * - PDF, images
+   * - Requires authentication
+   */
+  documentUpload: f({
+    image: {
+      maxFileSize: "8MB",
+      maxFileCount: 5,
+    },
+    pdf: {
+      maxFileSize: "8MB",
+      maxFileCount: 5,
+    },
+  })
+    .middleware(async ({ req }) => {
+      const session = await auth.api.getSession({ headers: req.headers });
+
+      if (!session?.user?.id) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw new UploadThingError({
+          code: "FORBIDDEN",
+          message: "You must be signed in to upload documents",
+        });
+      }
+
+      console.log(`Document upload attempt - User: ${session.user.id}`);
+
+      return {
+        userId: session.user.id,
+        userEmail: session.user.email,
+      };
+    })
+    .onUploadComplete(async ({ metadata, file }) => {
+      console.log("Document upload complete");
+      console.log("Uploaded by user:", metadata.userId);
+      console.log("File URL:", file.ufsUrl);
+
+      return {
+        url: file.ufsUrl,
+        userId: metadata.userId,
+        uploadedAt: new Date().toISOString(),
+      };
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof uploadRouter;

From 77cb6a670286626cc3d34e68aa1f798bedab9bb7 Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Fri, 19 Sep 2025 16:12:44 +0700
Subject: [PATCH 7/9] fix(ui): update UploadThing file router endpoint to use
 documentUpload

---
 docs/guides/uploadthing-integration.md        |  22 +-
 src/app/api/uploadthing/route.ts              |  22 +-
 .../organizations/add-organization-dialog.tsx |   2 +-
 .../edit-organization-dialog.tsx              |   2 +-
 .../settings/organization-info-form.tsx       |   2 +-
 .../ui/uploadthing-image-upload.tsx           | 480 +++++++++---------
 src/lib/uploadthing.ts                        |  66 +--
 src/server/uploadthing.ts                     | 247 +++------
 8 files changed, 358 insertions(+), 485 deletions(-)

diff --git a/docs/guides/uploadthing-integration.md b/docs/guides/uploadthing-integration.md
index a18968b..fa35418 100644
--- a/docs/guides/uploadthing-integration.md
+++ b/docs/guides/uploadthing-integration.md
@@ -37,20 +37,6 @@ To get this value:
 
 The UploadThing file router is configured in `src/server/uploadthing.ts` with the following endpoints:
 
-#### Organization Logo (`organizationLogo`)
-
-- **Max Size**: 4MB
-- **File Types**: JPEG, PNG, WebP, SVG
-- **Authentication**: Required
-- **Use Case**: Organization profile logos
-
-#### User Avatar (`userAvatar`)
-
-- **Max Size**: 2MB
-- **File Types**: JPEG, PNG, WebP
-- **Authentication**: Required
-- **Use Case**: User profile pictures
-
 #### Document Upload (`documentUpload`)
 
 - **Max Size**: 8MB per file (up to 5 files)
@@ -73,7 +59,7 @@ import { UploadThingImageUpload } from "~/components/ui/uploadthing-image-upload
   disabled={false}
   label="Organization Logo"
   description="Upload a logo for your organization"
-  endpoint="organizationLogo"
+  endpoint="documentUpload"
 />;
 ```
 
@@ -94,7 +80,7 @@ For custom implementations, you can use the raw UploadDropzone:
 import { UploadDropzone } from "~/lib/uploadthing";
 
 <UploadDropzone
-  endpoint="organizationLogo"
+  endpoint="documentUpload"
   onClientUploadComplete={res => {
     console.log("Files: ", res);
     setImageUrl(res[0]?.url);
@@ -124,8 +110,8 @@ import {
 } from "~/lib/uploadthing";
 
 // Get configuration for an endpoint
-const config = getUploadConfig("organizationLogo");
-// Returns: { maxFileSize: "4MB", acceptedTypes: ["image/*"], endpoint: "organizationLogo" }
+const config = getUploadConfig("documentUpload");
+// Returns: { maxFileSize: "4MB", acceptedTypes: ["image/*"], endpoint: "documentUpload" }
 ```
 
 ## Migration from Local Upload
diff --git a/src/app/api/uploadthing/route.ts b/src/app/api/uploadthing/route.ts
index 5dedf43..467a953 100644
--- a/src/app/api/uploadthing/route.ts
+++ b/src/app/api/uploadthing/route.ts
@@ -1,11 +1,11 @@
-import { createRouteHandler } from "uploadthing/next";
-import { uploadRouter } from "~/server/uploadthing";
-
-// Export routes for Next.js App Router
-export const { GET, POST } = createRouteHandler({
-  router: uploadRouter,
-  config: {
-    // Optional: Add custom error handling
-    // logLevel: "debug",
-  },
-});
+import { createRouteHandler } from "uploadthing/next";
+import { uploadRouter } from "~/server/uploadthing";
+
+// Export routes for Next.js App Router
+export const { GET, POST } = createRouteHandler({
+  router: uploadRouter,
+  config: {
+    // Optional: Add custom error handling
+    // logLevel: "debug",
+  },
+});
diff --git a/src/components/organizations/add-organization-dialog.tsx b/src/components/organizations/add-organization-dialog.tsx
index e730570..1adf644 100644
--- a/src/components/organizations/add-organization-dialog.tsx
+++ b/src/components/organizations/add-organization-dialog.tsx
@@ -126,7 +126,7 @@ export function AddOrganizationDialog({
                         disabled={isLoading}
                         label="Organization Logo"
                         description="Upload a logo to represent your organization (optional)"
-                        endpoint="organizationLogo"
+                        endpoint="documentUpload"
                       />
                     </FormControl>
                     <FormMessage />
diff --git a/src/components/organizations/edit-organization-dialog.tsx b/src/components/organizations/edit-organization-dialog.tsx
index 8b03906..b26afd3 100644
--- a/src/components/organizations/edit-organization-dialog.tsx
+++ b/src/components/organizations/edit-organization-dialog.tsx
@@ -142,7 +142,7 @@ export function EditOrganizationDialog({
                         disabled={isLoading}
                         label="Organization Logo"
                         description="Upload a logo to represent your organization (optional)"
-                        endpoint="organizationLogo"
+                        endpoint="documentUpload"
                       />
                     </FormControl>
                     <FormMessage />
diff --git a/src/components/settings/organization-info-form.tsx b/src/components/settings/organization-info-form.tsx
index 4b67cd3..b41f884 100644
--- a/src/components/settings/organization-info-form.tsx
+++ b/src/components/settings/organization-info-form.tsx
@@ -241,7 +241,7 @@ export function OrganizationInfoForm({
                       disabled={!isEditing || isPending}
                       label="Organization Logo"
                       description="Upload a logo to represent your organization (optional)"
-                      endpoint="organizationLogo"
+                      endpoint="documentUpload"
                     />
                   </FormControl>
                   <FormMessage />
diff --git a/src/components/ui/uploadthing-image-upload.tsx b/src/components/ui/uploadthing-image-upload.tsx
index cf7d817..e249677 100644
--- a/src/components/ui/uploadthing-image-upload.tsx
+++ b/src/components/ui/uploadthing-image-upload.tsx
@@ -1,245 +1,235 @@
-"use client";
-
-import { useState } from "react";
-import Image from "next/image";
-import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
-import { Upload, X, AlertCircle, Loader2 } from "lucide-react";
-import { cn } from "~/lib/utils";
-import { UploadDropzone } from "~/lib/uploadthing";
-import type { OurFileRouter } from "~/server/uploadthing";
-import { toast } from "sonner";
-
-interface UploadThingImageUploadProps {
-  value?: string | null;
-  onChange: (value: string | null) => void;
-  disabled?: boolean;
-  className?: string;
-  label?: string;
-  description?: string;
-  endpoint: keyof OurFileRouter;
-}
-
-export function UploadThingImageUpload({
-  value,
-  onChange,
-  disabled = false,
-  className,
-  label = "Logo",
-  description = "Upload a logo for your organization",
-  endpoint,
-}: UploadThingImageUploadProps) {
-  const [isUploading, setIsUploading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleRemove = () => {
-    onChange(null);
-    setError(null);
-  };
-
-  // Get endpoint-specific config
-  const getEndpointConfig = () => {
-    switch (endpoint) {
-      case "organizationLogo":
-        return {
-          maxSize: "4MB",
-          types: ["PNG", "JPG", "JPEG", "WEBP", "SVG"],
-        };
-      case "userAvatar":
-        return {
-          maxSize: "2MB",
-          types: ["PNG", "JPG", "JPEG", "WEBP"],
-        };
-      case "documentUpload":
-        return {
-          maxSize: "10MB",
-          types: ["PNG", "JPG", "JPEG", "WEBP", "PDF"],
-        };
-      default:
-        return {
-          maxSize: "4MB",
-          types: ["PNG", "JPG", "JPEG", "WEBP"],
-        };
-    }
-  };
-
-  const config = getEndpointConfig();
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      {label && (
-        <div className="space-y-1">
-          <Label className="text-sm font-medium">{label}</Label>
-          {description && (
-            <p className="text-xs text-muted-foreground">{description}</p>
-          )}
-        </div>
-      )}
-
-      <div className="space-y-3">
-        {/* Current Image Preview */}
-        {value && (
-          <div className="relative inline-block">
-            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
-              <Image
-                src={value}
-                alt="Uploaded image"
-                fill
-                className="object-cover"
-              />
-            </div>
-            {!disabled && (
-              <Button
-                type="button"
-                variant="destructive"
-                size="sm"
-                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
-                onClick={handleRemove}
-              >
-                <X className="h-3 w-3" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Upload Area */}
-        {!value && !disabled && (
-          <div className="space-y-4">
-            <UploadDropzone
-              endpoint={endpoint}
-              onClientUploadComplete={res => {
-                console.log("Upload completed:", res);
-                if (res?.[0]?.ufsUrl) {
-                  onChange(res[0].ufsUrl);
-                  toast.success("File uploaded successfully!");
-                  setError(null);
-                }
-                setIsUploading(false);
-              }}
-              onUploadError={(error: Error) => {
-                console.error("Upload error:", error);
-                const errorMessage = error.message || "Upload failed";
-                setError(errorMessage);
-                toast.error(errorMessage);
-                setIsUploading(false);
-              }}
-              onUploadBegin={() => {
-                setIsUploading(true);
-                setError(null);
-              }}
-              config={{
-                mode: "auto",
-              }}
-              appearance={{
-                container: cn(
-                  "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
-                  "border-muted-foreground/25 hover:border-primary/50",
-                  "ut-ready:bg-primary/5 ut-uploading:bg-primary/10",
-                  disabled && "opacity-50 cursor-not-allowed"
-                ),
-                uploadIcon: "text-primary",
-                label: "text-sm font-medium text-foreground",
-                allowedContent: "text-xs text-muted-foreground",
-                button: cn(
-                  "bg-primary text-primary-foreground hover:bg-primary/90",
-                  "h-9 px-4 py-2 text-sm font-medium",
-                  "rounded-md transition-colors",
-                  "ut-ready:bg-primary ut-uploading:bg-primary/80"
-                ),
-              }}
-              content={{
-                label: isUploading
-                  ? "Uploading..."
-                  : `Drop your ${label.toLowerCase()} here, or browse`,
-                allowedContent: `Max ${config.maxSize} • ${config.types.join(", ")}`,
-                button: isUploading ? (
-                  <div className="flex items-center gap-2">
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Uploading...
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    <Upload className="h-4 w-4" />
-                    Browse Files
-                  </div>
-                ),
-              }}
-            />
-          </div>
-        )}
-
-        {/* Replace/Change Button for existing image */}
-        {value && !disabled && (
-          <div className="space-y-3">
-            <UploadDropzone
-              endpoint={endpoint}
-              onClientUploadComplete={res => {
-                console.log("Upload completed:", res);
-                if (res?.[0]?.ufsUrl) {
-                  onChange(res[0].ufsUrl);
-                  toast.success("File updated successfully!");
-                  setError(null);
-                }
-                setIsUploading(false);
-              }}
-              onUploadError={(error: Error) => {
-                console.error("Upload error:", error);
-                const errorMessage = error.message || "Upload failed";
-                setError(errorMessage);
-                toast.error(errorMessage);
-                setIsUploading(false);
-              }}
-              onUploadBegin={() => {
-                setIsUploading(true);
-                setError(null);
-              }}
-              config={{
-                mode: "auto",
-              }}
-              appearance={{
-                container: cn(
-                  "border rounded-lg p-4 text-center transition-colors",
-                  "border-muted-foreground/25 hover:border-primary/50",
-                  "ut-ready:bg-muted/50 ut-uploading:bg-primary/10"
-                ),
-                uploadIcon: "h-8 w-8 text-primary",
-                label: "text-sm font-medium text-foreground",
-                allowedContent: "text-xs text-muted-foreground",
-                button: cn(
-                  "bg-primary text-primary-foreground hover:bg-primary/90",
-                  "h-8 px-3 py-1 text-sm",
-                  "rounded-md transition-colors"
-                ),
-              }}
-              content={{
-                label: isUploading
-                  ? "Uploading..."
-                  : `Change ${label.toLowerCase()}`,
-                allowedContent: `Max ${config.maxSize} • ${config.types.join(", ")}`,
-                button: isUploading ? (
-                  <div className="flex items-center gap-2">
-                    <Loader2 className="h-3 w-3 animate-spin" />
-                    Uploading...
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    <Upload className="h-3 w-3" />
-                    Change
-                  </div>
-                ),
-              }}
-            />
-          </div>
-        )}
-
-        {/* Error Message */}
-        {error && (
-          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
-            <AlertCircle className="h-4 w-4 text-destructive" />
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Button } from "~/components/ui/button";
+import { Label } from "~/components/ui/label";
+import { Upload, X, AlertCircle, Loader2 } from "lucide-react";
+import { cn } from "~/lib/utils";
+import { UploadDropzone } from "~/lib/uploadthing";
+import type { OurFileRouter } from "~/server/uploadthing";
+import { toast } from "sonner";
+
+interface UploadThingImageUploadProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  disabled?: boolean;
+  className?: string;
+  label?: string;
+  description?: string;
+  endpoint: keyof OurFileRouter;
+}
+
+export function UploadThingImageUpload({
+  value,
+  onChange,
+  disabled = false,
+  className,
+  label = "Logo",
+  description = "Upload a logo for your organization",
+  endpoint,
+}: UploadThingImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleRemove = () => {
+    onChange(null);
+    setError(null);
+  };
+
+  // Get endpoint-specific config
+  const getEndpointConfig = () => {
+    switch (endpoint) {
+      case "documentUpload":
+        return {
+          maxSize: "10MB",
+          types: ["PNG", "JPG", "JPEG", "WEBP", "PDF"],
+        };
+      default:
+        return {
+          maxSize: "4MB",
+          types: ["PNG", "JPG", "JPEG", "WEBP"],
+        };
+    }
+  };
+
+  const config = getEndpointConfig();
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {label && (
+        <div className="space-y-1">
+          <Label className="text-sm font-medium">{label}</Label>
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {/* Current Image Preview */}
+        {value && (
+          <div className="relative inline-block">
+            <div className="relative w-20 h-20 rounded-lg overflow-hidden border bg-muted">
+              <Image
+                src={value}
+                alt="Uploaded image"
+                fill
+                className="object-cover"
+              />
+            </div>
+            {!disabled && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0"
+                onClick={handleRemove}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Upload Area */}
+        {!value && !disabled && (
+          <div className="space-y-4">
+            <UploadDropzone
+              endpoint={endpoint}
+              onClientUploadComplete={res => {
+                console.log("Upload completed:", res);
+                if (res?.[0]?.ufsUrl) {
+                  onChange(res[0].ufsUrl);
+                  toast.success("File uploaded successfully!");
+                  setError(null);
+                }
+                setIsUploading(false);
+              }}
+              onUploadError={(error: Error) => {
+                console.error("Upload error:", error);
+                const errorMessage = error.message || "Upload failed";
+                setError(errorMessage);
+                toast.error(errorMessage);
+                setIsUploading(false);
+              }}
+              onUploadBegin={() => {
+                setIsUploading(true);
+                setError(null);
+              }}
+              config={{
+                mode: "auto",
+              }}
+              appearance={{
+                container: cn(
+                  "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+                  "border-muted-foreground/25 hover:border-primary/50",
+                  "ut-ready:bg-primary/5 ut-uploading:bg-primary/10",
+                  disabled && "opacity-50 cursor-not-allowed"
+                ),
+                uploadIcon: "text-primary",
+                label: "text-sm font-medium text-foreground",
+                allowedContent: "text-xs text-muted-foreground",
+                button: cn(
+                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "h-9 px-4 py-2 text-sm font-medium",
+                  "rounded-md transition-colors",
+                  "ut-ready:bg-primary ut-uploading:bg-primary/80"
+                ),
+              }}
+              content={{
+                label: isUploading
+                  ? "Uploading..."
+                  : `Drop your ${label.toLowerCase()} here, or browse`,
+                allowedContent: `Max ${config.maxSize} • ${config.types.join(", ")}`,
+                button: isUploading ? (
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Uploading...
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Upload className="h-4 w-4" />
+                    Browse Files
+                  </div>
+                ),
+              }}
+            />
+          </div>
+        )}
+
+        {/* Replace/Change Button for existing image */}
+        {value && !disabled && (
+          <div className="space-y-3">
+            <UploadDropzone
+              endpoint={endpoint}
+              onClientUploadComplete={res => {
+                console.log("Upload completed:", res);
+                if (res?.[0]?.ufsUrl) {
+                  onChange(res[0].ufsUrl);
+                  toast.success("File updated successfully!");
+                  setError(null);
+                }
+                setIsUploading(false);
+              }}
+              onUploadError={(error: Error) => {
+                console.error("Upload error:", error);
+                const errorMessage = error.message || "Upload failed";
+                setError(errorMessage);
+                toast.error(errorMessage);
+                setIsUploading(false);
+              }}
+              onUploadBegin={() => {
+                setIsUploading(true);
+                setError(null);
+              }}
+              config={{
+                mode: "auto",
+              }}
+              appearance={{
+                container: cn(
+                  "border rounded-lg p-4 text-center transition-colors",
+                  "border-muted-foreground/25 hover:border-primary/50",
+                  "ut-ready:bg-muted/50 ut-uploading:bg-primary/10"
+                ),
+                uploadIcon: "h-8 w-8 text-primary",
+                label: "text-sm font-medium text-foreground",
+                allowedContent: "text-xs text-muted-foreground",
+                button: cn(
+                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "h-8 px-3 py-1 text-sm",
+                  "rounded-md transition-colors"
+                ),
+              }}
+              content={{
+                label: isUploading
+                  ? "Uploading..."
+                  : `Change ${label.toLowerCase()}`,
+                allowedContent: `Max ${config.maxSize} • ${config.types.join(", ")}`,
+                button: isUploading ? (
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="h-3 w-3 animate-spin" />
+                    Uploading...
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <Upload className="h-3 w-3" />
+                    Change
+                  </div>
+                ),
+              }}
+            />
+          </div>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
+            <AlertCircle className="h-4 w-4 text-destructive" />
+            <p className="text-sm text-destructive">{error}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/uploadthing.ts b/src/lib/uploadthing.ts
index 0459771..22dbf6d 100644
--- a/src/lib/uploadthing.ts
+++ b/src/lib/uploadthing.ts
@@ -1,39 +1,27 @@
-import {
-  generateUploadButton,
-  generateUploadDropzone,
-} from "@uploadthing/react";
-import type { OurFileRouter } from "~/server/uploadthing";
-
-/**
- * Generate UploadThing components with our file router types
- */
-export const UploadButton = generateUploadButton<OurFileRouter>();
-export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
-
-/**
- * Helper function to get upload endpoint configuration
- */
-export const getUploadConfig = (endpoint: keyof OurFileRouter) => {
-  switch (endpoint) {
-    case "organizationLogo":
-      return {
-        maxFileSize: "4MB",
-        acceptedTypes: ["image/*"],
-        endpoint: "organizationLogo" as const,
-      };
-    case "userAvatar":
-      return {
-        maxFileSize: "2MB",
-        acceptedTypes: ["image/*"],
-        endpoint: "userAvatar" as const,
-      };
-    case "documentUpload":
-      return {
-        maxFileSize: "10MB",
-        acceptedTypes: ["image/*", "application/pdf"],
-        endpoint: "documentUpload" as const,
-      };
-    default:
-      throw new Error(`Unknown upload endpoint: ${String(endpoint)}`);
-  }
-};
+import {
+  generateUploadButton,
+  generateUploadDropzone,
+} from "@uploadthing/react";
+import type { OurFileRouter } from "~/server/uploadthing";
+
+/**
+ * Generate UploadThing components with our file router types
+ */
+export const UploadButton = generateUploadButton<OurFileRouter>();
+export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
+
+/**
+ * Helper function to get upload endpoint configuration
+ */
+export const getUploadConfig = (endpoint: keyof OurFileRouter) => {
+  switch (endpoint) {
+    case "documentUpload":
+      return {
+        maxFileSize: "10MB",
+        acceptedTypes: ["image/*", "application/pdf"],
+        endpoint: "documentUpload" as const,
+      };
+    default:
+      throw new Error(`Unknown upload endpoint: ${String(endpoint)}`);
+  }
+};
diff --git a/src/server/uploadthing.ts b/src/server/uploadthing.ts
index f4945fa..ec6a7e6 100644
--- a/src/server/uploadthing.ts
+++ b/src/server/uploadthing.ts
@@ -1,169 +1,78 @@
-import { createUploadthing, type FileRouter } from "uploadthing/next";
-import { UploadThingError } from "uploadthing/server";
-import { auth } from "~/lib/auth";
-
-const f = createUploadthing();
-
-/**
- * UploadThing file router configuration with enhanced security
- *
- * Security Features:
- * - All routes require authentication (no public routes)
- * - Automatic callback verification (v7.7.4 includes HMAC SHA256 protection)
- * - User session validation via Better Auth
- * - Detailed logging for audit trails
- *
- * Authentication & Security Best Practices:
- * - The /api/uploadthing endpoint is public (required for UploadThing webhooks)
- * - Individual routes are protected via .middleware() functions
- * - Callback data is automatically verified via HMAC SHA256 (v6.7+)
- * - All uploads require valid user sessions
- *
- * Rate Limiting:
- * - Consider adding rate limiting for additional protection
- * - UploadThing provides built-in rate limiting per endpoint
- *
- * File Validation:
- * - Client-side validation via file type and size constraints
- * - Server-side validation via middleware checks
- */
-export const uploadRouter = {
-  /**
-   * Organization logo upload endpoint
-   * - Max 4MB
-   * - Only images (jpeg, png, webp, svg)
-   * - Requires authentication
-   */
-  organizationLogo: f({
-    image: {
-      maxFileSize: "4MB",
-      maxFileCount: 1,
-    },
-  })
-    .middleware(async ({ req }) => {
-      // Get user session using Better Auth
-      const session = await auth.api.getSession({ headers: req.headers });
-
-      if (!session?.user?.id) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error
-        throw new UploadThingError({
-          code: "FORBIDDEN",
-          message: "You must be signed in to upload files",
-        });
-      }
-
-      // Log upload attempt for audit trail
-      console.log(
-        `Upload attempt - User: ${session.user.id}, Email: ${session.user.email}`
-      );
-
-      // Return user data to be available in onUploadComplete
-      return {
-        userId: session.user.id,
-        userEmail: session.user.email,
-      };
-    })
-    .onUploadComplete(async ({ metadata, file }) => {
-      console.log("Organization logo upload complete");
-      console.log("Uploaded by user:", metadata.userId);
-      console.log("File URL:", file.ufsUrl);
-      console.log("File size:", file.size);
-
-      // You can store file info in database here if needed
-      return {
-        url: file.ufsUrl,
-        userId: metadata.userId,
-        uploadedAt: new Date().toISOString(),
-      };
-    }),
-
-  /**
-   * User avatar upload endpoint
-   * - Max 2MB
-   * - Only images
-   * - Requires authentication
-   */
-  userAvatar: f({
-    image: {
-      maxFileSize: "2MB",
-      maxFileCount: 1,
-    },
-  })
-    .middleware(async ({ req }) => {
-      const session = await auth.api.getSession({ headers: req.headers });
-
-      if (!session?.user?.id) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error
-        throw new UploadThingError({
-          code: "FORBIDDEN",
-          message: "You must be signed in to upload user avatars",
-        });
-      }
-
-      console.log(`Avatar upload attempt - User: ${session.user.id}`);
-
-      return {
-        userId: session.user.id,
-        userEmail: session.user.email,
-      };
-    })
-    .onUploadComplete(async ({ metadata, file }) => {
-      console.log("User avatar upload complete");
-      console.log("Uploaded by user:", metadata.userId);
-      console.log("File URL:", file.ufsUrl);
-
-      return {
-        url: file.ufsUrl,
-        userId: metadata.userId,
-        uploadedAt: new Date().toISOString(),
-      };
-    }),
-
-  /**
-   * Document upload endpoint for invoices/receipts
-   * - Max 10MB
-   * - PDF, images
-   * - Requires authentication
-   */
-  documentUpload: f({
-    image: {
-      maxFileSize: "8MB",
-      maxFileCount: 5,
-    },
-    pdf: {
-      maxFileSize: "8MB",
-      maxFileCount: 5,
-    },
-  })
-    .middleware(async ({ req }) => {
-      const session = await auth.api.getSession({ headers: req.headers });
-
-      if (!session?.user?.id) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error
-        throw new UploadThingError({
-          code: "FORBIDDEN",
-          message: "You must be signed in to upload documents",
-        });
-      }
-
-      console.log(`Document upload attempt - User: ${session.user.id}`);
-
-      return {
-        userId: session.user.id,
-        userEmail: session.user.email,
-      };
-    })
-    .onUploadComplete(async ({ metadata, file }) => {
-      console.log("Document upload complete");
-      console.log("Uploaded by user:", metadata.userId);
-      console.log("File URL:", file.ufsUrl);
-
-      return {
-        url: file.ufsUrl,
-        userId: metadata.userId,
-        uploadedAt: new Date().toISOString(),
-      };
-    }),
-} satisfies FileRouter;
-
-export type OurFileRouter = typeof uploadRouter;
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+import { UploadThingError } from "uploadthing/server";
+import { auth } from "~/lib/auth";
+
+const f = createUploadthing();
+
+/**
+ * UploadThing file router configuration with enhanced security
+ *
+ * Security Features:
+ * - All routes require authentication (no public routes)
+ * - Automatic callback verification (v7.7.4 includes HMAC SHA256 protection)
+ * - User session validation via Better Auth
+ * - Detailed logging for audit trails
+ *
+ * Authentication & Security Best Practices:
+ * - The /api/uploadthing endpoint is public (required for UploadThing webhooks)
+ * - Individual routes are protected via .middleware() functions
+ * - Callback data is automatically verified via HMAC SHA256 (v6.7+)
+ * - All uploads require valid user sessions
+ *
+ * Rate Limiting:
+ * - Consider adding rate limiting for additional protection
+ * - UploadThing provides built-in rate limiting per endpoint
+ *
+ * File Validation:
+ * - Client-side validation via file type and size constraints
+ * - Server-side validation via middleware checks
+ */
+export const uploadRouter = {
+  /**
+   * Document upload endpoint for invoices/receipts
+   * - Max 10MB
+   * - PDF, images
+   * - Requires authentication
+   */
+  documentUpload: f({
+    image: {
+      maxFileSize: "8MB",
+      maxFileCount: 5,
+    },
+    pdf: {
+      maxFileSize: "8MB",
+      maxFileCount: 5,
+    },
+  })
+    .middleware(async ({ req }) => {
+      const session = await auth.api.getSession({ headers: req.headers });
+
+      if (!session?.user?.id) {
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw new UploadThingError({
+          code: "FORBIDDEN",
+          message: "You must be signed in to upload documents",
+        });
+      }
+
+      console.log(`Document upload attempt - User: ${session.user.id}`);
+
+      return {
+        userId: session.user.id,
+        userEmail: session.user.email,
+      };
+    })
+    .onUploadComplete(async ({ metadata, file }) => {
+      console.log("Document upload complete");
+      console.log("Uploaded by user:", metadata.userId);
+      console.log("File URL:", file.ufsUrl);
+
+      return {
+        url: file.ufsUrl,
+        userId: metadata.userId,
+        uploadedAt: new Date().toISOString(),
+      };
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof uploadRouter;

From 1a1a1f2b5e2ace383e0d20848197a061d72e1047 Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Fri, 19 Sep 2025 16:13:49 +0700
Subject: [PATCH 8/9] chore(upload images): remove unused organization logo and
 user avatar directories

---
 public/uploads/organization-logo/.gitkeep | 1 -
 public/uploads/user-avatar/.gitkeep       | 1 -
 2 files changed, 2 deletions(-)
 delete mode 100644 public/uploads/organization-logo/.gitkeep
 delete mode 100644 public/uploads/user-avatar/.gitkeep

diff --git a/public/uploads/organization-logo/.gitkeep b/public/uploads/organization-logo/.gitkeep
deleted file mode 100644
index b3ca6a7..0000000
--- a/public/uploads/organization-logo/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-# Keep this directory in git
diff --git a/public/uploads/user-avatar/.gitkeep b/public/uploads/user-avatar/.gitkeep
deleted file mode 100644
index b3ca6a7..0000000
--- a/public/uploads/user-avatar/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-# Keep this directory in git

From 747d4344231c873fc57090f1056c77e0ce71a997 Mon Sep 17 00:00:00 2001
From: mzcoder-hub <galangypradana@gmail.com>
Date: Fri, 19 Sep 2025 16:55:45 +0700
Subject: [PATCH 9/9] fix: resolve environment variable loading issues

- Add missing Better Auth environment variables to env.js schema
- Configure Better Auth with secret and baseURL from environment
- Implement lazy initialization for EmailService in WorkflowEngine
- Fix Resend API key loading order issue preventing server startup

Fixes startup errors:
- Better Auth default secret warning
- Google OAuth missing credentials warning
- Resend API key initialization failure

The WorkflowEngine now uses lazy initialization to prevent EmailService
from being instantiated before environment variables are loaded.
---
 src/env.js                 | 16 ++++++++++++++++
 src/lib/auth.ts            |  2 ++
 src/lib/workflow-engine.ts | 14 ++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/env.js b/src/env.js
index d7424e5..15d05a4 100644
--- a/src/env.js
+++ b/src/env.js
@@ -11,6 +11,16 @@ export const env = createEnv({
     NODE_ENV: z
       .enum(["development", "test", "production"])
       .default("development"),
+    // Better Auth
+    BETTER_AUTH_SECRET: z.string().min(1, "BETTER_AUTH_SECRET is required"),
+    BETTER_AUTH_URL: z
+      .string()
+      .url()
+      .optional()
+      .default("http://localhost:3000"),
+    // Google OAuth
+    GOOGLE_CLIENT_ID: z.string().min(1, "GOOGLE_CLIENT_ID is required"),
+    GOOGLE_CLIENT_SECRET: z.string().min(1, "GOOGLE_CLIENT_SECRET is required"),
     // Resend Email Service
     RESEND_API_KEY: z.string().min(1, "RESEND_API_KEY is required"),
     RESEND_FROM_EMAIL: z
@@ -42,6 +52,12 @@ export const env = createEnv({
   runtimeEnv: {
     DATABASE_URL: process.env.DATABASE_URL,
     NODE_ENV: process.env.NODE_ENV,
+    // Better Auth
+    BETTER_AUTH_SECRET: process.env.BETTER_AUTH_SECRET,
+    BETTER_AUTH_URL: process.env.BETTER_AUTH_URL,
+    // Google OAuth
+    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
+    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
     // Resend Email Service
     RESEND_API_KEY: process.env.RESEND_API_KEY,
     RESEND_FROM_EMAIL: process.env.RESEND_FROM_EMAIL,
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index a732b54..5a88ea4 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -7,6 +7,8 @@ export const auth = betterAuth({
   database: prismaAdapter(prisma, {
     provider: "postgresql",
   }),
+  secret: process.env.BETTER_AUTH_SECRET!,
+  baseURL: process.env.BETTER_AUTH_URL,
   socialProviders: {
     google: {
       clientId: process.env.GOOGLE_CLIENT_ID!,
diff --git a/src/lib/workflow-engine.ts b/src/lib/workflow-engine.ts
index c879604..64bf3bb 100644
--- a/src/lib/workflow-engine.ts
+++ b/src/lib/workflow-engine.ts
@@ -55,10 +55,20 @@ type LoadedWorkflow = NonNullable<
 >;
 
 export class WorkflowExecutionEngine {
-  private emailService = new EmailService();
+  private emailService?: EmailService;
   private smsService = new SmsService();
   private variableResolver = new VariableResolver();
 
+  /**
+   * Get or initialize email service lazily
+   */
+  private getEmailService(): EmailService {
+    if (!this.emailService) {
+      this.emailService = new EmailService();
+    }
+    return this.emailService;
+  }
+
   /**
    * Main entry point for workflow execution
    */
@@ -645,7 +655,7 @@ export class WorkflowExecutionEngine {
     }
 
     // Send email
-    const result = await this.emailService.sendEmail({
+    const result = await this.getEmailService().sendEmail({
       to: recipientEmail,
       subject: resolvedSubject,
       htmlBody: resolvedHtmlBody,