feat(client): add client's page + CRUD operations modals

src/components/EditClientModal.tsx

@@ -0,0 +1,81 @@
+import { useState, useEffect } from "react";
+import { type Client } from "../types/client";
+import { updateClient } from "../api/clients";
+import { useTranslation } from "../hooks/useTranslation";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Modal } from "./Modal";
+import { TextAreaInput } from "./ui/TextAreaInput";
+
+interface EditClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  client: Client | null;
+}
+
+export default function EditClientModal({ isOpen, onClose, onSuccess, client }: EditClientModalProps) {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [notes, setNotes] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (client) {
+      setName(client.name);
+      setNotes(client.notes || "");
+    }
+  }, [client]);
+
+  const handleSubmit = async () => {
+    if (!client || !name.trim()) return;
+    setIsLoading(true);
+    try {
+      await updateClient(client.id, { name, notes });
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error(t.clients.errors.updateFailed, error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const footer = (
+    <>
+      <Button variant="outline" onClick={onClose} disabled={isLoading}>
+        {t.clients.cancel}
+      </Button>
+      <Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
+        {isLoading ? "..." : t.clients.saveChanges}
+      </Button>
+    </>
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.editClient} footer={footer}>
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
+            {t.clients.clientName}
+          </label>
+          <Input 
+            value={name} 
+            onChange={(e) => setName(e.target.value)} 
+            placeholder={t.clients.clientNamePlaceholder}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
+            {t.clients.notes}
+          </label>
+          <TextAreaInput
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder={t.clients.notesPlaceholder}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+}