Changes

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

src/components/cases/expenses-tab.tsx

@@ -6,10 +6,11 @@ import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/lib/auth";
-import { Plus, Trash2, Loader2, Receipt as ReceiptIcon, CheckCircle2, Undo2 } from "lucide-react";
+import { Plus, Trash2, Loader2, Receipt as ReceiptIcon, CheckCircle2, Undo2, Download } from "lucide-react";
 import { formatCurrency, formatDate } from "@/lib/format";
 import { ensureMarkedInvoicedPlaceholder } from "@/lib/invoice-generation";
 import { toast } from "sonner";
+import { ImportUnbilledDialog } from "@/components/cases/import-unbilled-dialog";
 import {
   Select,
   SelectContent,
@@ -44,6 +45,7 @@ export function CaseExpensesTab({ caseId }: { caseId: string }) {
 
   const [fees, setFees] = useState<FeeItem[]>([]);
   const [selectedFeeId, setSelectedFeeId] = useState<string>("");
+  const [showImport, setShowImport] = useState(false);
 
   const load = async () => {
     const { data } = await supabase
@@ -163,9 +165,14 @@ export function CaseExpensesTab({ caseId }: { caseId: string }) {
           <Stat label="Billable" value={formatCurrency(totals.billable)} />
           <Stat label="Unbilled" value={formatCurrency(totals.unbilled)} />
         </div>
-        <Button onClick={() => setShowForm((s) => !s)}>
-          <Plus className="h-4 w-4 mr-2" /> {showForm ? "Cancel" : "Add expense"}
-        </Button>
+        <div className="flex flex-wrap gap-2">
+          <Button variant="outline" onClick={() => setShowImport(true)}>
+            <Download className="h-4 w-4 mr-2" /> Import open expenses
+          </Button>
+          <Button onClick={() => setShowForm((s) => !s)}>
+            <Plus className="h-4 w-4 mr-2" /> {showForm ? "Cancel" : "Add expense"}
+          </Button>
+        </div>
       </div>
 
       {showForm && (
@@ -288,6 +295,15 @@ export function CaseExpensesTab({ caseId }: { caseId: string }) {
           </table>
         </CardContent>
       </Card>
+
+      <ImportUnbilledDialog
+        open={showImport}
+        onOpenChange={setShowImport}
+        kind="expenses"
+        caseId={caseId}
+        clientId={clientId}
+        onImported={load}
+      />
     </div>
   );
 }