924 lines
35 KiB
TypeScript
924 lines
35 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { useState } from "react";
|
|
import { api } from "~/trpc/react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Label } from "~/components/ui/label";
|
|
import { DatePicker } from "~/components/ui/date-picker";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import { Textarea } from "~/components/ui/textarea";
|
|
import { NumberInput } from "~/components/ui/number-input";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "~/components/ui/select";
|
|
import { toast } from "sonner";
|
|
import { FileText, DollarSign, Clock, Save, Check } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { FloatingActionBar } from "~/components/layout/floating-action-bar";
|
|
import { InvoiceLineItems } from "~/components/forms/invoice-line-items";
|
|
import { PageHeader } from "~/components/layout/page-header";
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ value: "draft", label: "Draft" },
|
|
{ value: "sent", label: "Sent" },
|
|
{ value: "paid", label: "Paid" },
|
|
{ value: "overdue", label: "Overdue" },
|
|
] as const;
|
|
|
|
interface InvoiceFormProps {
|
|
invoiceId?: string;
|
|
}
|
|
|
|
// Custom skeleton for invoice form
|
|
function InvoiceFormSkeleton() {
|
|
return (
|
|
<div className="space-y-6 pb-24">
|
|
<div className="mb-8">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="bg-muted/30 h-8 w-48 animate-pulse rounded sm:h-9 sm:w-64"></div>
|
|
</div>
|
|
<div className="bg-muted/30 mt-2 h-4 w-36 animate-pulse rounded sm:w-48"></div>
|
|
</div>
|
|
|
|
{/* Form Content */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{/* Left Column - Content with Tabs */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{/* Tabs - Match actual TabsList structure */}
|
|
<div className="bg-muted text-muted-foreground inline-flex h-9 w-full items-center justify-center rounded-lg p-[3px]">
|
|
<div className="bg-background h-[calc(100%-1px)] flex-1 rounded-md shadow-sm"></div>
|
|
<div className="bg-muted/30 h-[calc(100%-1px)] flex-1 rounded-md"></div>
|
|
</div>
|
|
|
|
{/* Invoice Details Card */}
|
|
<Card className="card-primary">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-muted/30 h-5 w-5 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-6 w-32 animate-pulse rounded"></div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* First row - stacked on mobile */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Second row */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-18 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Third row */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-24 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status field */}
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded sm:w-48"></div>
|
|
</div>
|
|
|
|
{/* Notes field */}
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-20 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Invoice Items Card */}
|
|
<Card className="card-primary">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-muted/30 h-5 w-5 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-6 w-28 animate-pulse rounded"></div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* Line item skeleton */}
|
|
<div className="space-y-4 rounded-lg border p-3 sm:p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="bg-muted/30 h-5 w-20 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-8 w-8 animate-pulse rounded"></div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-16 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
|
|
{/* Date, Hours, Rate - stacked on mobile */}
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-10 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-12 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-8 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Amount display */}
|
|
<div className="bg-muted/30 rounded-lg p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="bg-muted/50 h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/50 h-6 w-20 animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Add item button */}
|
|
<div className="bg-muted/30 h-10 w-full animate-pulse rounded"></div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Right Column - Summary */}
|
|
<div className="space-y-6">
|
|
<Card className="card-primary sticky top-6">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-muted/30 h-5 w-5 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-6 w-16 animate-pulse rounded"></div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* Totals */}
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<div className="bg-muted/30 h-4 w-12 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-4 w-16 animate-pulse rounded"></div>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between">
|
|
<div className="bg-muted/30 h-5 w-12 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-5 w-24 animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Stats */}
|
|
<div className="space-y-2">
|
|
<div className="bg-muted/30 h-4 w-20 animate-pulse rounded"></div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-1">
|
|
<div className="bg-muted/30 h-3 w-12 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-4 w-8 animate-pulse rounded"></div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="bg-muted/30 h-3 w-16 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-4 w-12 animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Action Bar Skeleton - Mobile only */}
|
|
<div className="fixed right-4 bottom-6 left-4 lg:hidden">
|
|
<div className="bg-background rounded-lg border p-4 shadow-lg">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="bg-muted/30 h-9 flex-1 animate-pulse rounded"></div>
|
|
<div className="bg-muted/30 h-9 w-20 animate-pulse rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InvoiceForm({ invoiceId }: InvoiceFormProps) {
|
|
const router = useRouter();
|
|
const utils = api.useUtils();
|
|
|
|
const [formData, setFormData] = useState({
|
|
invoiceNumber: `INV-${new Date().toISOString().slice(0, 10).replace(/-/g, "")}-${Date.now().toString().slice(-6)}`,
|
|
businessId: "",
|
|
clientId: "",
|
|
issueDate: new Date(),
|
|
dueDate: new Date(),
|
|
status: "draft" as "draft" | "sent" | "paid" | "overdue",
|
|
notes: "",
|
|
taxRate: 0,
|
|
defaultHourlyRate: 100,
|
|
items: [
|
|
{
|
|
id: crypto.randomUUID(),
|
|
date: new Date(),
|
|
description: "",
|
|
hours: 1,
|
|
rate: 100,
|
|
amount: 100,
|
|
},
|
|
],
|
|
});
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// Fetch clients and businesses for dropdowns
|
|
const { data: clients, isLoading: loadingClients } =
|
|
api.clients.getAll.useQuery();
|
|
const { data: businesses, isLoading: loadingBusinesses } =
|
|
api.businesses.getAll.useQuery();
|
|
|
|
// Fetch existing invoice data if editing
|
|
const { data: existingInvoice, isLoading: loadingInvoice } =
|
|
api.invoices.getById.useQuery({ id: invoiceId! }, { enabled: !!invoiceId });
|
|
|
|
// Populate form with existing data when editing
|
|
React.useEffect(() => {
|
|
if (existingInvoice && invoiceId) {
|
|
setFormData({
|
|
invoiceNumber: existingInvoice.invoiceNumber,
|
|
businessId: existingInvoice.businessId ?? "",
|
|
clientId: existingInvoice.clientId,
|
|
issueDate: new Date(existingInvoice.issueDate),
|
|
dueDate: new Date(existingInvoice.dueDate),
|
|
status: existingInvoice.status as "draft" | "sent" | "paid" | "overdue",
|
|
notes: existingInvoice.notes ?? "",
|
|
taxRate: existingInvoice.taxRate,
|
|
defaultHourlyRate: 100,
|
|
|
|
items: existingInvoice.items?.map((item) => ({
|
|
id: crypto.randomUUID(),
|
|
date: new Date(item.date),
|
|
description: item.description,
|
|
hours: item.hours,
|
|
rate: item.rate,
|
|
amount: item.amount,
|
|
})) || [
|
|
{
|
|
id: crypto.randomUUID(),
|
|
date: new Date(),
|
|
description: "",
|
|
hours: 1,
|
|
rate: 100,
|
|
amount: 100,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}, [existingInvoice, invoiceId]);
|
|
|
|
// Auto-fill default business for new invoices
|
|
React.useEffect(() => {
|
|
if (!invoiceId && businesses && !formData.businessId) {
|
|
const defaultBusiness = businesses.find((b) => b.isDefault);
|
|
if (defaultBusiness) {
|
|
setFormData((prev) => ({ ...prev, businessId: defaultBusiness.id }));
|
|
}
|
|
}
|
|
}, [businesses, formData.businessId, invoiceId]);
|
|
|
|
// Update default hourly rate when client changes
|
|
React.useEffect(() => {
|
|
if (formData.clientId && clients) {
|
|
const selectedClient = clients.find((c) => c.id === formData.clientId);
|
|
if (selectedClient?.defaultHourlyRate) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
defaultHourlyRate: selectedClient.defaultHourlyRate,
|
|
}));
|
|
}
|
|
}
|
|
}, [formData.clientId, clients]);
|
|
|
|
// Calculate totals
|
|
const totals = React.useMemo(() => {
|
|
const subtotal = formData.items.reduce(
|
|
(sum, item) => sum + item.hours * item.rate,
|
|
0,
|
|
);
|
|
const taxAmount = (subtotal * formData.taxRate) / 100;
|
|
const total = subtotal + taxAmount;
|
|
return { subtotal, taxAmount, total };
|
|
}, [formData.items, formData.taxRate]);
|
|
|
|
// Add new item
|
|
const addItem = () => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
items: [
|
|
...prev.items,
|
|
{
|
|
id: crypto.randomUUID(),
|
|
date: new Date(),
|
|
description: "",
|
|
hours: 1,
|
|
rate: formData.defaultHourlyRate,
|
|
amount: formData.defaultHourlyRate,
|
|
},
|
|
],
|
|
}));
|
|
};
|
|
|
|
// Remove item
|
|
const removeItem = (idx: number) => {
|
|
if (formData.items.length > 1) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
items: prev.items.filter((_, i) => i !== idx),
|
|
}));
|
|
}
|
|
};
|
|
|
|
// Update item
|
|
const updateItem = (
|
|
idx: number,
|
|
field: string,
|
|
value: string | number | Date,
|
|
) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
items: prev.items.map((item, i) =>
|
|
i === idx ? { ...item, [field]: value } : item,
|
|
),
|
|
}));
|
|
};
|
|
|
|
// Move item up
|
|
const moveItemUp = (idx: number) => {
|
|
if (idx === 0) return; // Already at top
|
|
setFormData((prev) => {
|
|
const newItems = [...prev.items];
|
|
if (idx > 0 && idx < newItems.length) {
|
|
const temp = newItems[idx - 1]!;
|
|
newItems[idx - 1] = newItems[idx]!;
|
|
newItems[idx] = temp;
|
|
}
|
|
return { ...prev, items: newItems };
|
|
});
|
|
};
|
|
|
|
// Move item down
|
|
const moveItemDown = (idx: number) => {
|
|
if (idx === formData.items.length - 1) return; // Already at bottom
|
|
setFormData((prev) => {
|
|
const newItems = [...prev.items];
|
|
if (idx >= 0 && idx < newItems.length - 1) {
|
|
const temp = newItems[idx]!;
|
|
newItems[idx] = newItems[idx + 1]!;
|
|
newItems[idx + 1] = temp;
|
|
}
|
|
return { ...prev, items: newItems };
|
|
});
|
|
};
|
|
|
|
// Reorder items
|
|
const reorderItems = (newItems: typeof formData.items) => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
items: newItems,
|
|
}));
|
|
};
|
|
|
|
// tRPC mutations
|
|
const createInvoice = api.invoices.create.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Invoice created successfully");
|
|
// Invalidate related queries to refresh cache
|
|
void utils.invoices.getAll.invalidate();
|
|
router.push("/dashboard/invoices");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message || "Failed to create invoice");
|
|
},
|
|
});
|
|
|
|
const updateInvoice = api.invoices.update.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Invoice updated successfully");
|
|
// Invalidate related queries to refresh cache
|
|
void utils.invoices.getAll.invalidate();
|
|
if (invoiceId) {
|
|
void utils.invoices.getById.invalidate({ id: invoiceId });
|
|
}
|
|
router.push("/dashboard/invoices");
|
|
},
|
|
onError: (error) => {
|
|
console.error("Update invoice error:", error);
|
|
toast.error(error.message || "Failed to update invoice");
|
|
},
|
|
});
|
|
|
|
const updateStatus = api.invoices.updateStatus.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Status updated successfully");
|
|
// Invalidate related queries to refresh cache
|
|
void utils.invoices.getAll.invalidate();
|
|
if (invoiceId) {
|
|
void utils.invoices.getById.invalidate({ id: invoiceId });
|
|
}
|
|
router.push("/dashboard/invoices");
|
|
},
|
|
onError: (error) => {
|
|
console.error("Update status error:", error);
|
|
toast.error(error.message || "Failed to update status");
|
|
},
|
|
});
|
|
|
|
// Check if only status has changed compared to existing invoice
|
|
const hasOnlyStatusChanged = React.useMemo(() => {
|
|
if (!existingInvoice || !invoiceId) return false;
|
|
|
|
return (
|
|
formData.invoiceNumber === existingInvoice.invoiceNumber &&
|
|
formData.businessId === (existingInvoice.businessId ?? "") &&
|
|
formData.clientId === existingInvoice.clientId &&
|
|
formData.issueDate.getTime() ===
|
|
new Date(existingInvoice.issueDate).getTime() &&
|
|
formData.dueDate.getTime() ===
|
|
new Date(existingInvoice.dueDate).getTime() &&
|
|
formData.status !== existingInvoice.status &&
|
|
formData.notes === (existingInvoice.notes ?? "") &&
|
|
formData.taxRate === existingInvoice.taxRate &&
|
|
JSON.stringify(
|
|
formData.items.map((item) => ({
|
|
date: item.date.getTime(),
|
|
description: item.description,
|
|
hours: item.hours,
|
|
rate: item.rate,
|
|
})),
|
|
) ===
|
|
JSON.stringify(
|
|
(existingInvoice.items ?? []).map((item) => ({
|
|
date: new Date(item.date).getTime(),
|
|
description: item.description,
|
|
hours: item.hours,
|
|
rate: item.rate,
|
|
})),
|
|
)
|
|
);
|
|
}, [formData, existingInvoice, invoiceId]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
if (invoiceId && hasOnlyStatusChanged) {
|
|
// Use dedicated status update mutation for status-only changes
|
|
console.log("Using status-only update:", {
|
|
id: invoiceId,
|
|
status: formData.status,
|
|
});
|
|
await updateStatus.mutateAsync({
|
|
id: invoiceId,
|
|
status: formData.status,
|
|
});
|
|
} else {
|
|
// Use full update mutation for all other changes
|
|
const invoiceData = {
|
|
invoiceNumber: formData.invoiceNumber,
|
|
businessId: formData.businessId || undefined,
|
|
clientId: formData.clientId,
|
|
issueDate: formData.issueDate,
|
|
dueDate: formData.dueDate,
|
|
status: formData.status,
|
|
notes: formData.notes,
|
|
taxRate: formData.taxRate,
|
|
|
|
items: formData.items.map((item) => ({
|
|
date: item.date,
|
|
description: item.description,
|
|
hours: item.hours,
|
|
rate: item.rate,
|
|
amount: item.hours * item.rate,
|
|
})),
|
|
};
|
|
|
|
console.log("Submitting invoice data:", invoiceData);
|
|
|
|
if (invoiceId) {
|
|
await updateInvoice.mutateAsync({ id: invoiceId, ...invoiceData });
|
|
} else {
|
|
await createInvoice.mutateAsync(invoiceData);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Error saving invoice:", error);
|
|
toast.error("Failed to save invoice. Check console for details.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Show loading state
|
|
if (loadingClients || loadingBusinesses || (invoiceId && loadingInvoice)) {
|
|
return <InvoiceFormSkeleton />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-6 pb-32">
|
|
<PageHeader
|
|
title={invoiceId ? "Edit Invoice" : "Create Invoice"}
|
|
description={
|
|
invoiceId ? "Update invoice details" : "Create a new invoice"
|
|
}
|
|
variant="gradient"
|
|
>
|
|
<Button
|
|
type="submit"
|
|
form="invoice-form"
|
|
disabled={loading}
|
|
className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Clock className="h-4 w-4 animate-spin sm:mr-2" />
|
|
<span className="hidden sm:inline">Saving...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="h-4 w-4 sm:mr-2" />
|
|
<span className="hidden sm:inline">Save Invoice</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
</PageHeader>
|
|
|
|
{/* Form Content */}
|
|
<form id="invoice-form" onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{/* Left Column - Content with Tabs */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
<Tabs defaultValue="invoice-details" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="invoice-details">
|
|
Invoice Details
|
|
</TabsTrigger>
|
|
<TabsTrigger value="invoice-items">Invoice Items</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="invoice-details">
|
|
{/* Invoice Details */}
|
|
<Card className="card-primary">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<FileText className="h-5 w-5" />
|
|
Invoice Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="invoiceNumber">Invoice Number</Label>
|
|
<Input
|
|
id="invoiceNumber"
|
|
value={formData.invoiceNumber}
|
|
placeholder="INV-2024-001"
|
|
disabled
|
|
className="bg-muted/50"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="status">Status</Label>
|
|
<Select
|
|
key={`status-${formData.status}`}
|
|
value={formData.status}
|
|
onValueChange={(
|
|
value: "draft" | "sent" | "paid" | "overdue",
|
|
) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
status: value,
|
|
}))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{STATUS_OPTIONS.map((option) => (
|
|
<SelectItem
|
|
key={option.value}
|
|
value={option.value}
|
|
>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{invoiceId && hasOnlyStatusChanged && (
|
|
<div className="mt-1 text-xs text-blue-600 dark:text-blue-400">
|
|
Only status will be updated
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label>Issue Date</Label>
|
|
<DatePicker
|
|
date={formData.issueDate}
|
|
onDateChange={(date) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
issueDate: date ?? new Date(),
|
|
}))
|
|
}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Due Date</Label>
|
|
<DatePicker
|
|
date={formData.dueDate}
|
|
onDateChange={(date) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
dueDate: date ?? new Date(),
|
|
}))
|
|
}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="business">From (Business)</Label>
|
|
<Select
|
|
key={`business-${formData.businessId}-${businesses?.length}`}
|
|
value={formData.businessId}
|
|
onValueChange={(value) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
businessId: value,
|
|
}))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select your business" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{businesses?.map((business) => (
|
|
<SelectItem
|
|
key={business.id}
|
|
value={business.id}
|
|
>
|
|
{business.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="client">Bill To (Client)</Label>
|
|
<Select
|
|
key={`client-${formData.clientId}-${clients?.length}`}
|
|
value={formData.clientId}
|
|
onValueChange={(value) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
clientId: value,
|
|
}))
|
|
}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a client" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{clients?.map((client) => (
|
|
<SelectItem key={client.id} value={client.id}>
|
|
{client.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="taxRate">Tax Rate (%)</Label>
|
|
<NumberInput
|
|
value={formData.taxRate}
|
|
onChange={(value) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
taxRate: value,
|
|
}))
|
|
}
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
suffix="%"
|
|
width="full"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="defaultHourlyRate">
|
|
Default Hourly Rate
|
|
</Label>
|
|
<NumberInput
|
|
value={formData.defaultHourlyRate}
|
|
onChange={(value) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
defaultHourlyRate: value,
|
|
}))
|
|
}
|
|
min={0}
|
|
step={1}
|
|
prefix="$"
|
|
width="full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="notes">Notes (Optional)</Label>
|
|
<Textarea
|
|
id="notes"
|
|
value={formData.notes}
|
|
onChange={(e) =>
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
notes: e.target.value,
|
|
}))
|
|
}
|
|
placeholder="Additional notes for the client..."
|
|
className="min-h-[80px] resize-none"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
<TabsContent value="invoice-items">
|
|
<Card className="card-primary">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<DollarSign className="h-5 w-5" />
|
|
Invoice Items
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="px-3 py-0">
|
|
<InvoiceLineItems
|
|
items={formData.items}
|
|
onAddItem={addItem}
|
|
onRemoveItem={removeItem}
|
|
onUpdateItem={updateItem}
|
|
onMoveUp={moveItemUp}
|
|
onMoveDown={moveItemDown}
|
|
onReorderItems={reorderItems}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* Right Column - Summary (Always Visible) */}
|
|
<div className="space-y-6">
|
|
<Card className="card-primary sticky top-6">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Check className="h-5 w-5" />
|
|
Summary
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Subtotal:</span>
|
|
<span className="font-medium">
|
|
${totals.subtotal.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">
|
|
Tax ({formData.taxRate}%):
|
|
</span>
|
|
<span className="font-medium">
|
|
${totals.taxAmount.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between text-lg font-bold">
|
|
<span>Total:</span>
|
|
<span className="text-primary">
|
|
${totals.total.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Items:</span>
|
|
<span className="font-medium">
|
|
{formData.items.length}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Client:</span>
|
|
<span className="font-medium">
|
|
{clients?.find((c) => c.id === formData.clientId)
|
|
?.name ?? "Not selected"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">Business:</span>
|
|
<span className="font-medium">
|
|
{businesses?.find((b) => b.id === formData.businessId)
|
|
?.name ?? "Not selected"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Floating Action Bar */}
|
|
<FloatingActionBar
|
|
leftContent={
|
|
<div className="flex items-center space-x-3">
|
|
<div className="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
|
|
<FileText className="h-5 w-5 text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-900 dark:text-gray-100">
|
|
{invoiceId ? "Edit Invoice" : "Create Invoice"}
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-300">
|
|
Update invoice details
|
|
</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<Button
|
|
type="submit"
|
|
form="invoice-form"
|
|
disabled={loading}
|
|
className="bg-gradient-to-r from-emerald-600 to-teal-600 shadow-md transition-all duration-200 hover:from-emerald-700 hover:to-teal-700 hover:shadow-lg"
|
|
size="sm"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Clock className="h-4 w-4 animate-spin sm:mr-2" />
|
|
<span className="hidden sm:inline">Saving...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="h-4 w-4 sm:mr-2" />
|
|
<span className="hidden sm:inline">Save Invoice</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
</FloatingActionBar>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { InvoiceForm };
|