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

src/components/DeleteClientModal.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { type Client } from "../types/client";
+import { deleteClient } from "../api/clients";
+import { useTranslation } from "../hooks/useTranslation";
+import { Button } from "./ui/button";
+import { Modal } from "./Modal";
+
+interface DeleteClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  client: Client | null;
+}
+
+export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }: DeleteClientModalProps) {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDelete = async () => {
+    if (!client) return;
+    setIsLoading(true);
+    try {
+      await deleteClient(client.id);
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error(t.clients.errors.deleteFailed, error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const footer = (
+    <>
+      <Button variant="outline" onClick={onClose} disabled={isLoading}>
+        {t.clients.cancel}
+      </Button>
+      <Button 
+        variant="destructive"
+        onClick={handleDelete} 
+        disabled={isLoading}
+      >
+        {isLoading ? "..." : t.clients.delete}
+      </Button>
+    </>
+  );
+
+  return (
+    <Modal 
+      isOpen={isOpen} 
+      onClose={onClose} 
+      title={t.clients.deleteConfirmTitle} 
+      footer={footer}
+      maxWidth="max-w-sm"
+    >
+      <p className="text-slate-500 dark:text-slate-400">
+        {client ? t.clients.deleteConfirmMessage(client.name) : ""}
+      </p>
+    </Modal>
+  );
+}