refactor(frontend): share list empty state card

src/pages/Clients.tsx

@@ -16,6 +16,7 @@ import { getClients } from "../api/clients"
 import CreateClientModal from "../components/CreateClientModal"
 import EditClientModal from "../components/EditClientModal"
 import DeleteClientModal from "../components/DeleteClientModal"
+import EmptyStateCard from "../components/EmptyStateCard"
 import FilterBar from "../components/FilterBar"
 import { ListPageSkeleton } from "../components/ListPageSkeleton"
 import { Button } from "../components/ui/button"
@@ -169,13 +170,11 @@ export default function Clients() {
       ) : (
         <div className="flex flex-1 flex-col gap-6">
           {clients.length === 0 ? (
-            <div className="flex flex-col flex-1 rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
-              <Building2 className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-700" />
-              <h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
-              <p className="mt-1 text-slate-500 dark:text-slate-400">
-                {searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
-              </p>
-            </div>
+            <EmptyStateCard
+              icon={Building2}
+              title={t.clients.noClients}
+              description={searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
+            />
           ) : (
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-3">
               {clients.map((client) => {