Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/quick-add/quick-add.tsx

@@ -283,7 +283,8 @@ export function QuickAddExpense() {
     caseId: "",
     expense_date: new Date().toISOString().slice(0, 10),
     description: "",
-    amount: "",
+    quantity: "1",
+    unit_price: "",
     billable: true,
   });
   const [receipt, setReceipt] = useState<File | null>(null);
@@ -299,7 +300,8 @@ export function QuickAddExpense() {
       caseId: "",
       expense_date: new Date().toISOString().slice(0, 10),
       description: "",
-      amount: "",
+      quantity: "1",
+      unit_price: "",
       billable: true,
     });
     setReceipt(null);
@@ -311,8 +313,11 @@ export function QuickAddExpense() {
     if (!user?.id) return toast.error("Not signed in");
     if (!form.caseId) return toast.error("Select a case");
     if (!form.description.trim()) return toast.error("Description required");
-    const amount = parseFloat(form.amount);
-    if (Number.isNaN(amount) || amount < 0) return toast.error("Invalid amount");
+    const quantity = parseFloat(form.quantity);
+    const unit_price = parseFloat(form.unit_price);
+    if (Number.isNaN(quantity) || quantity <= 0) return toast.error("Quantity must be greater than 0");
+    if (Number.isNaN(unit_price) || unit_price < 0) return toast.error("Invalid unit price");
+    const amount = +(quantity * unit_price).toFixed(2);
     setSubmitting(true);
     let receipt_storage_path: string | null = null;
     if (receipt) {
@@ -330,6 +335,8 @@ export function QuickAddExpense() {
       expense_date: form.expense_date,
       description: form.description.trim(),
       amount,
+      quantity,
+      unit_price,
       billable: form.billable,
       receipt_storage_path,
     });
@@ -399,7 +406,8 @@ export function QuickAddExpense() {
                   if (fee) {
                     setForm((f) => ({
                       ...f,
-                      amount: String(fee.amount),
+                      unit_price: String(fee.amount),
+                      quantity: f.quantity || "1",
                       billable: fee.billable,
                       description: f.description || fee.name,
                     }));
@@ -416,15 +424,22 @@ export function QuickAddExpense() {
               />
             </div>
           )}
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-3 gap-3">
             <div className="space-y-1.5">
               <Label className="text-xs">Date</Label>
               <Input type="date" value={form.expense_date} onChange={(e) => setForm({ ...form, expense_date: e.target.value })} required />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-xs">Amount ($)</Label>
-              <Input type="number" step="0.01" min="0" value={form.amount} onChange={(e) => setForm({ ...form, amount: e.target.value })} required />
+              <Label className="text-xs">Qty</Label>
+              <Input type="number" step="any" min="0" value={form.quantity} onChange={(e) => setForm({ ...form, quantity: e.target.value })} required />
             </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Unit price ($)</Label>
+              <Input type="number" step="0.01" min="0" value={form.unit_price} onChange={(e) => setForm({ ...form, unit_price: e.target.value })} required />
+            </div>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Total: ${((parseFloat(form.quantity) || 0) * (parseFloat(form.unit_price) || 0)).toFixed(2)}
           </div>
           <div className="space-y-1.5">
             <Label className="text-xs">Description</Label>