From 52cd231f6756bd69509cedd6c91dc58210a7fb71 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 00:52:29 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/settings.fees.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/routes/settings.fees.tsx b/src/routes/settings.fees.tsx
index 9d922e3..7b20e80 100644
--- a/src/routes/settings.fees.tsx
+++ b/src/routes/settings.fees.tsx
@@ -32,7 +32,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Clock, Loader2, Pencil, Plus, Receipt, Trash2 } from "lucide-react";
+import { Clock, Loader2, Pencil, Plus, Receipt, Trash2, ClipboardPaste } from "lucide-react";
 import { toast } from "sonner";
 import { formatCurrency } from "@/lib/format";
 
@@ -52,9 +52,11 @@ interface FeeItem {
 }
 
 function FeeSchedulePage() {
+  const { user } = useAuth();
   const [items, setItems] = useState<FeeItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [editing, setEditing] = useState<Partial<FeeItem> | null>(null);
+  const [importing, setImporting] = useState<"time" | "expense" | null>(null);
 
   const load = async () => {
     setLoading(true);
@@ -109,6 +111,7 @@ function FeeSchedulePage() {
         loading={loading}
         onEdit={setEditing}
         onDelete={remove}
+        onImport={() => setImporting("time")}
       />
 
       <FeeSection
@@ -119,6 +122,7 @@ function FeeSchedulePage() {
         loading={loading}
         onEdit={setEditing}
         onDelete={remove}
+        onImport={() => setImporting("expense")}
       />
 
       <FeeEditDialog
@@ -126,6 +130,13 @@ function FeeSchedulePage() {
         onClose={() => setEditing(null)}
         onSaved={load}
       />
+
+      <FeeImportDialog
+        category={importing}
+        userId={user?.id}
+        onClose={() => setImporting(null)}
+        onSaved={load}
+      />
     </div>
   );
 }
@@ -138,6 +149,7 @@ function FeeSection({
   loading,
   onEdit,
   onDelete,
+  onImport,
 }: {
   title: string;
   icon: React.ReactNode;
@@ -146,13 +158,19 @@ function FeeSection({
   loading: boolean;
   onEdit: (i: FeeItem) => void;
   onDelete: (id: string) => void;
+  onImport: () => void;
 }) {
   return (
     <div>
-      <h3 className="font-serif text-lg flex items-center gap-2 mb-2">
-        {icon}
-        {title}
-      </h3>
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="font-serif text-lg flex items-center gap-2">
+          {icon}
+          {title}
+        </h3>
+        <Button variant="outline" size="sm" onClick={onImport}>
+          <ClipboardPaste className="h-3.5 w-3.5 mr-2" /> Paste import
+        </Button>
+      </div>
       <Card className="border-border/60">
         <CardContent className="p-0">
           {loading ? (