From bbf7dfad2e8108a32df2b709671939db2767e233 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 13 Mar 2026 05:09:55 +0800
Subject: [PATCH] feat(client): add client's page + CRUD operations modals

---
 src/App.tsx                          |   2 +
 src/api/clients.ts                   |  63 +++++++++
 src/components/CreateClientModal.tsx |  75 +++++++++++
 src/components/DeleteClientModal.tsx |  61 +++++++++
 src/components/EditClientModal.tsx   |  81 +++++++++++
 src/components/FilterBar.tsx         |   9 +-
 src/components/Modal.tsx             |  16 ++-
 src/components/ui/TextAreaInput.tsx  |  18 +++
 src/locales/en.ts                    |  33 ++++-
 src/locales/fa.ts                    |  33 ++++-
 src/pages/Clients.tsx                | 194 +++++++++++++++++++++++++++
 src/pages/Workspaces.tsx             |   1 +
 src/types/client.ts                  |  16 +++
 13 files changed, 588 insertions(+), 14 deletions(-)
 create mode 100644 src/api/clients.ts
 create mode 100644 src/components/CreateClientModal.tsx
 create mode 100644 src/components/DeleteClientModal.tsx
 create mode 100644 src/components/EditClientModal.tsx
 create mode 100644 src/components/ui/TextAreaInput.tsx
 create mode 100644 src/pages/Clients.tsx
 create mode 100644 src/types/client.ts

diff --git a/src/App.tsx b/src/App.tsx
index 7fdb635..948d9fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import Workspaces from "./pages/Workspaces"
 import CreateWorkspace from "./pages/WorkspaceCreate"
 import WorkspaceDetail from "./pages/WorkspaceDetail"
 import EditWorkspace from "./pages/WorkspaceEdit"
+import Clients from "./pages/Clients"
 
 const MainLayout = () => {
   return (
@@ -45,6 +46,7 @@ function App() {
                 <Route path="/workspaces/create" element={<CreateWorkspace />} />
                 <Route path="/workspaces/:id" element={<WorkspaceDetail />} />
                 <Route path="/workspaces/:id/edit" element={<EditWorkspace />} />
+                <Route path="/clients" element={<Clients />} />
               </Route>
             </Routes>
           </WorkspaceProvider>
diff --git a/src/api/clients.ts b/src/api/clients.ts
new file mode 100644
index 0000000..fff6d68
--- /dev/null
+++ b/src/api/clients.ts
@@ -0,0 +1,63 @@
+import { authFetch } from "./client";
+import { type PaginatedClientList } from "../types/client";
+
+
+export const getClients = async (workspaceId: string, search: string = "", ordering: string = "") => {
+  const queryParams = new URLSearchParams({ workspace: workspaceId });
+
+  if (search) queryParams.append("search", search);
+  if (ordering) queryParams.append("ordering", ordering);
+
+  const response = await authFetch(`/api/clients/?${queryParams.toString()}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch clients");
+  }
+  return response.json();
+};
+
+export const createClient = async (workspaceId: string, data: { name: string; notes: string }) => {
+  const response = await authFetch("/api/clients/", {
+    method: "POST",
+    body: JSON.stringify({
+      workspace_id: workspaceId,
+      ...data,
+    }),
+  });
+  
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || "Failed to create client");
+  }
+  return response.json();
+};
+
+export const updateClient = async (id: string, data: { name?: string; notes?: string }) => {
+  const response = await authFetch(`/api/clients/${id}/`, {
+    method: "PATCH",
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || "Failed to update client");
+  }
+  return response.json();
+};
+
+export const deleteClient = async (id: string) => {
+  const response = await authFetch(`/api/clients/${id}/`, {
+    method: "DELETE",
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || "Failed to delete client");
+  }
+  
+  // DELETE requests often return 204 No Content, which throws an error on .json()
+  if (response.status === 204) {
+    return { success: true };
+  }
+  
+  return response.json().catch(() => ({ success: true }));
+};
diff --git a/src/components/CreateClientModal.tsx b/src/components/CreateClientModal.tsx
new file mode 100644
index 0000000..6b44ad1
--- /dev/null
+++ b/src/components/CreateClientModal.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { createClient } 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 CreateClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  workspaceId: string;
+}
+
+export default function CreateClientModal({ isOpen, onClose, onSuccess, workspaceId }: CreateClientModalProps) {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [notes, setNotes] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!name.trim()) return;
+    setIsLoading(true);
+    try {
+      await createClient(workspaceId, { name, notes });
+      onSuccess();
+      setName("");
+      setNotes("");
+      onClose();
+    } catch (error) {
+      console.error(t.clients.errors.createFailed, 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.create}
+      </Button>
+    </>
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} 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>
+  );
+}
\ No newline at end of file
diff --git a/src/components/DeleteClientModal.tsx b/src/components/DeleteClientModal.tsx
new file mode 100644
index 0000000..d32f3bd
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/EditClientModal.tsx b/src/components/EditClientModal.tsx
new file mode 100644
index 0000000..cb4ec4b
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index bbe972b..4fc49d7 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -1,6 +1,4 @@
-// src/components/FilterBar.tsx
 import { Search, ArrowUpDown } from 'lucide-react';
-import { useTranslation } from '../hooks/useTranslation';
 
 interface FilterBarProps {
   searchQuery: string;
@@ -8,11 +6,10 @@ interface FilterBarProps {
   ordering: string;
   setOrdering: (val: string) => void;
   orderingOptions: { value: string; label: string }[];
+  searchPlaceholder: string;
 }
 
-export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions }: FilterBarProps) {
-  const { t } = useTranslation();
-  
+export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions, searchPlaceholder }: FilterBarProps) {
   return (
     <div className="flex flex-col sm:flex-row gap-4 mb-6">
       <div className="relative flex-1">
@@ -21,7 +18,7 @@ export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOr
           type="text"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={t.workspace?.searchPlaceholder || 'Search...'}
+          placeholder={searchPlaceholder || "Search..."}
           className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
         />
       </div>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 6dc5a0f..5ee6936 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect } from "react";
 import { X } from "lucide-react";
+import { Card } from "./ui/card";
+import { Button } from "./ui/button";
 
 interface ModalProps {
   isOpen: boolean;
@@ -37,21 +39,23 @@ export const Modal: React.FC<ModalProps> = ({
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
       onClick={onClose}
     >
-      <div 
-        className={`bg-white dark:bg-slate-900 rounded-2xl shadow-xl w-full ${maxWidth} overflow-hidden`}
+      <Card 
+        className={`w-full ${maxWidth} bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-0 shadow-xl overflow-hidden rounded-2xl`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800 shrink-0">
           <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100">
             {title}
           </h2>
-          <button
+          <Button
             type="button"
+            variant="ghost"
+            size="icon"
             onClick={onClose}
-            className="p-1.5 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+            className="h-8 w-8 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
           >
             <X className="w-5 h-5" />
-          </button>
+          </Button>
         </div>
 
         <div className="flex-1 overflow-y-auto p-5">{children}</div>
@@ -61,7 +65,7 @@ export const Modal: React.FC<ModalProps> = ({
             {footer}
           </div>
         )}
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/src/components/ui/TextAreaInput.tsx b/src/components/ui/TextAreaInput.tsx
new file mode 100644
index 0000000..bae52b5
--- /dev/null
+++ b/src/components/ui/TextAreaInput.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const TextAreaInput = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={`flex min-h-50 w-full rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ""}`}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+TextAreaInput.displayName = "TextAreaInput"
+
+export { TextAreaInput }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 5c5fe0d..9280cfa 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -151,6 +151,7 @@ export const en = {
     noUsersFound: "No user found",
     selectRole: "Select Role",
     add: "Add",
+    searchPlaceholder: "Seach Workspaces...",
     orderByUpdatedDesc: "Recently Updated",
     orderByCreatedDesc: "Newest First",
     orderByCreatedAsc: "Oldest First",
@@ -179,5 +180,35 @@ export const en = {
       errorLoad: "Failed to load workspace data.",
       cannotAddSelf: "You are automatically the owner.",
     },
-  }
+  },
+
+  clients: {
+    title: "Clients",
+    description: (workspaceName: string) => `Manage clients for ${workspaceName}`,
+    addClient: "Add Client",
+    searchPlaceholder: "Search clients...",
+    noClients: "No clients found",
+    noClientsSearch: "Try adjusting your search query.",
+    noClientsAdd: "Add your first client to get started.",
+    addedOn: "Added",
+    selectWorkspace: "Please select a workspace first.",
+    modalTitle: "Create New Client",
+    clientName: "Client Name",
+    clientNamePlaceholder: "e.g. Acme Corp",
+    notes: "Notes",
+    notesPlaceholder: "Optional details...",
+    create: "Create",
+    cancel: "Cancel",
+    editClient: "Edit Client",
+    deleteConfirmTitle: "Delete Client",
+    deleteConfirmMessage: (name: string) => `Are you sure you want to delete ${name}?`,
+    delete: "Delete",
+    saveChanges: "Save Changes",
+    errors: {
+      createFailed: "Failed to create client",
+      fetchFailed: "Failed to fetch clients",
+      updateFailed: "Failed to update client",
+      deleteFailed: "Failed to delete client"
+    }
+  },
 }
diff --git a/src/locales/fa.ts b/src/locales/fa.ts
index b6fb77c..3ca7850 100644
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -122,7 +122,7 @@ export const fa = {
     selectedMembers: "اعضای انتخاب شده",
     creating: "در حال ایجاد...",
     submit: "ایجاد",
-    cancel: "انصراف",
+    cancel: "لغو",
     loading: "در حال بارگذاری...",
     confirmDelete: "آیا از حذف این فضای کاری اطمینان دارید؟",
     deleteError: "خطا در حذف فضای کاری",
@@ -152,6 +152,7 @@ export const fa = {
     noUsersFound: "کاربری یافت نشد",
     selectRole: "انتخاب نقش",
     add: "افزودن",
+    searchPlaceholder: "جستوجوی فضاهای کاری...",
     orderByUpdatedDesc: "آخرین ویرایش",
     orderByCreatedDesc: "جدیدترین",
     orderByCreatedAsc: "قدیمی‌ترین",
@@ -181,4 +182,34 @@ export const fa = {
     errorCreate: "ایجاد فضای کاری ناموفق بود.",
     successCreate: "فضای کاری با موفقیت ایجاد شد.",
   },
+
+  clients: {
+    title: "مشتریان",
+    description: (workspaceName: string) => `مدیریت مشتریان برای ${workspaceName}`,
+    addClient: "افزودن مشتری",
+    searchPlaceholder: "جستجوی مشتریان...",
+    noClients: "مشتری یافت نشد",
+    noClientsSearch: "لطفاً عبارت جستجو را تغییر دهید.",
+    noClientsAdd: "برای شروع اولین مشتری خود را اضافه کنید.",
+    addedOn: "تاریخ افزودن",
+    selectWorkspace: "لطفاً ابتدا یک فضای کاری انتخاب کنید.",
+    modalTitle: "ایجاد مشتری جدید",
+    clientName: "نام مشتری",
+    clientNamePlaceholder: "مثال: شرکت الف",
+    notes: "یادداشت‌ها",
+    notesPlaceholder: "توضیحات اختیاری...",
+    create: "ایجاد",
+    cancel: "انصراف",
+    editClient: "ویرایش مشتری",
+    deleteConfirmTitle: "حذف مشتری",
+    deleteConfirmMessage: (name: string) => `آیا از حذف ${name} اطمینان دارید؟`,
+    delete: "حذف",
+    saveChanges: "ذخیره تغییرات",
+    errors: {
+      createFailed: "خطا در ایجاد مشتری",
+      fetchFailed: "خطا در دریافت لیست مشتریان",
+      updateFailed: "خطا در ویرایش مشتری",
+      deleteFailed: "خطا در حذف مشتری"
+    }
+  },
 }
diff --git a/src/pages/Clients.tsx b/src/pages/Clients.tsx
new file mode 100644
index 0000000..bfd171b
--- /dev/null
+++ b/src/pages/Clients.tsx
@@ -0,0 +1,194 @@
+import { useEffect, useState } from "react"
+import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
+import { useWorkspace } from "../context/WorkspaceContext" 
+import { useTranslation } from "../hooks/useTranslation" 
+import { type Client } from "../types/client"
+import { getClients } from "../api/clients"
+import CreateClientModal from "../components/CreateClientModal"
+import EditClientModal from "../components/EditClientModal"
+import DeleteClientModal from "../components/DeleteClientModal"
+import FilterBar from "../components/FilterBar"
+import { Button } from "../components/ui/button"
+import { Card } from "../components/ui/card"
+
+export default function Clients() {
+  const { activeWorkspace } = useWorkspace()
+  const [clients, setClients] = useState<Client[]>([]) 
+  const [isLoading, setIsLoading] = useState(true)
+  
+  // Filter States
+  const [searchQuery, setSearchQuery] = useState("")
+  const [debouncedSearch, setDebouncedSearch] = useState("")
+  const [ordering, setOrdering] = useState("-created_at")
+  
+  // Modal States
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
+  const [editClient, setEditClient] = useState<Client | null>(null)
+  const [deleteClient, setDeleteClient] = useState<Client | null>(null)
+  
+  const { t, lang } = useTranslation()
+  const isFa = lang === "fa"
+
+  const orderingOptions = [
+    { value: "-created_at", label: isFa ? "جدیدترین" : "Newest First" },
+    { value: "created_at", label: isFa ? "قدیمی‌ترین" : "Oldest First" },
+    { value: "name", label: isFa ? "نام (الف-ی)" : "Name (A-Z)" },
+    { value: "-name", label: isFa ? "نام (ی-الف)" : "Name (Z-A)" },
+    { value: "-updated_at", label: isFa ? "اخیراً بروزرسانی شده" : "Recently Updated" },
+  ]
+
+  // Debounce search input to avoid spamming the API
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(searchQuery)
+    }, 500)
+    return () => clearTimeout(handler)
+  }, [searchQuery])
+
+  const fetchClientsList = async () => {
+    if (!activeWorkspace?.id) {
+      setIsLoading(false) 
+      return
+    }
+    
+    setIsLoading(true)
+    try {
+      const data: any = await getClients(activeWorkspace.id, debouncedSearch, ordering)
+      setClients(data?.results || (Array.isArray(data) ? data : []))
+    } catch (error) {
+      console.error(t.clients.errors.fetchFailed, error)
+      setClients([]) 
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const formatDate = (dateStr: string | undefined) => {
+    if (!dateStr) return "-"
+    try {
+      const date = new Date(dateStr)
+      return new Intl.DateTimeFormat(isFa ? "fa-IR" : "en-US", {
+        dateStyle: "long",
+        timeZone: "Asia/Tehran"
+      }).format(date)
+    } catch (e) {
+      return dateStr
+    }
+  }
+
+  // Refetch when workspace, debounced search, or ordering changes
+  useEffect(() => {
+    fetchClientsList()
+  }, [activeWorkspace?.id, debouncedSearch, ordering]) 
+
+  if (!activeWorkspace) {
+    return (
+      <div className="p-6 text-center text-slate-500">
+        {t.clients.selectWorkspace}
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
+          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
+            {t.clients.description(activeWorkspace.name)}
+          </p>
+        </div>
+        
+        <Button onClick={() => setIsCreateModalOpen(true)} className="flex items-center gap-2">
+          <Plus className="w-4 h-4" />
+          {t.clients.addClient}
+        </Button>
+      </div>
+
+      <FilterBar
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        ordering={ordering}
+        setOrdering={setOrdering}
+        orderingOptions={orderingOptions}
+        searchPlaceholder={t.clients.searchPlaceholder}
+      />
+
+      <Card className="overflow-hidden dark:bg-slate-900 dark:border-slate-800">
+        <div className="p-0">
+          {isLoading ? (
+            <div className="flex justify-center items-center p-12 text-slate-500">
+              <Loader2 className="w-8 h-8 animate-spin" />
+            </div>
+          ) : clients.length === 0 ? (
+            <div className="text-center p-12">
+              <Building2 className="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3" />
+              <h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
+              <p className="text-slate-500 dark:text-slate-400 mt-1">
+                {searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
+              </p>
+            </div>
+          ) : (
+            <ul className="divide-y divide-slate-200 dark:divide-slate-800">
+              {clients.map((client) => (
+                <li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <h4 className="font-medium text-slate-900 dark:text-white truncate">{client.name}</h4>
+                    {client.notes && (
+                      <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                        {client.notes}
+                      </p>
+                    )}
+                    <div className="text-[11px] text-slate-400 mt-3 font-medium">
+                      {t.clients.addedOn}: {formatDate(client.created_at)}
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center gap-1 shrink-0">
+                    <Button 
+                      variant="ghost" 
+                      size="icon"
+                      onClick={() => setEditClient(client)}
+                      className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                    <Button 
+                      variant="ghost" 
+                      size="icon"
+                      onClick={() => setDeleteClient(client)}
+                      className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </Card>
+
+      <CreateClientModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSuccess={fetchClientsList}
+        workspaceId={activeWorkspace.id}
+      />
+
+      <EditClientModal
+        isOpen={!!editClient}
+        onClose={() => setEditClient(null)}
+        onSuccess={fetchClientsList}
+        client={editClient}
+      />
+
+      <DeleteClientModal
+        isOpen={!!deleteClient}
+        onClose={() => setDeleteClient(null)}
+        onSuccess={fetchClientsList}
+        client={deleteClient}
+      />
+    </div>
+  )
+}
diff --git a/src/pages/Workspaces.tsx b/src/pages/Workspaces.tsx
index 4c8c16a..bdb65d6 100644
--- a/src/pages/Workspaces.tsx
+++ b/src/pages/Workspaces.tsx
@@ -106,6 +106,7 @@ export default function Workspaces() {
         ordering={ordering}
         setOrdering={setOrdering}
         orderingOptions={orderingOptions}
+        searchPlaceholder={t.workspace?.searchPlaceholder}
       />
 
       {isLoading ? (
diff --git a/src/types/client.ts b/src/types/client.ts
new file mode 100644
index 0000000..35d1375
--- /dev/null
+++ b/src/types/client.ts
@@ -0,0 +1,16 @@
+export interface Client {
+  id: string;
+  name: string;
+  notes: string | null;
+  workspace: string;
+  can_delete: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PaginatedClientList {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: Client[];
+}