@hed-hog/contact 0.0.293 → 0.0.295

package/hedhog/frontend/app/accounts/page.tsx.ejs

@@ -21,7 +21,6 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -29,6 +28,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -41,12 +41,12 @@ import {
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { formatDate } from '@/lib/format-date';
 import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   type ColumnDef,
   type SortingState,
   flexRender,
   getCoreRowModel,
-  getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import {
@@ -65,18 +65,23 @@ import {
 import { useTranslations } from 'next-intl';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { CrmNav } from '../_components/crm-nav';
-import { crmMockAccounts, crmOwners } from '../_lib/crm-mocks';
 import { AccountFormSheet } from './_components/account-form-sheet';
 import type {
   Account,
   AccountFormValues,
   AccountStats,
+  PaginatedResult,
+  UserOption,
 } from './_components/account-types';
 
 const ACCOUNT_VIEW_STORAGE_KEY = 'contact-account-view-mode';
+
 type AccountViewMode = 'table' | 'cards';
 
+type RequestError = {
+  message?: string;
+};
+
 function getAccountInitials(name: string) {
   return name
     .split(' ')
@@ -122,11 +127,7 @@ function AccountInfoTile({
       )}
     >
       <div className="mb-2 flex items-center gap-2">
-        <div
-          className={cn(
-            'flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border bg-background text-muted-foreground'
-          )}
-        >
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border bg-background text-muted-foreground">
           {icon}
         </div>
         <span className="truncate text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
@@ -149,6 +150,7 @@ function AccountInfoTile({
 export default function AccountsPage() {
   const t = useTranslations('contact.AccountsPage');
   const crmT = useTranslations('contact.CrmMenu');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
 
   const [sorting, setSorting] = useState<SortingState>([]);
   const [page, setPage] = useState(1);
@@ -162,25 +164,14 @@ export default function AccountsPage() {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [accountToDelete, setAccountToDelete] = useState<Account | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [viewMode, setViewMode] = useState<AccountViewMode>('table');
-  const [accounts, setAccounts] = useState<Account[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Simulated API calls with mock data
-  useEffect(() => {
-    setIsLoading(true);
-    // Simulate API call delay
-    const timeout = setTimeout(() => {
-      setAccounts(crmMockAccounts);
-      setIsLoading(false);
-    }, 300);
-    return () => clearTimeout(timeout);
-  }, []);
 
   useEffect(() => {
     const timeout = setTimeout(() => {
       setDebouncedSearch(searchInput.trim());
     }, 300);
+
     return () => clearTimeout(timeout);
   }, [searchInput]);
 
@@ -193,62 +184,125 @@ export default function AccountsPage() {
         setViewMode(savedViewMode);
       }
     } catch {
-      // Ignore storage read failures
+      // Ignore storage read failures.
     }
   }, []);
 
-  // Filter and paginate data
-  const filteredAccounts = useMemo(() => {
-    let result = accounts;
-
-    if (debouncedSearch) {
-      const search = debouncedSearch.toLowerCase();
-      result = result.filter(
-        (account) =>
-          account.name.toLowerCase().includes(search) ||
-          account.trade_name?.toLowerCase().includes(search) ||
-          account.email?.toLowerCase().includes(search) ||
-          account.city?.toLowerCase().includes(search)
-      );
-    }
+  const currentSort = sorting[0];
+  const sortField = currentSort?.id === 'created_at' ? 'created_at' : 'name';
+  const sortOrder = currentSort?.desc ? 'desc' : 'asc';
 
-    if (statusFilter !== 'all') {
-      result = result.filter((account) => account.status === statusFilter);
-    }
+  const {
+    data: stats = {
+      total: 0,
+      active: 0,
+      customers: 0,
+      prospects: 0,
+    },
+    refetch: refetchStats,
+  } = useQuery<AccountStats>({
+    queryKey: ['contact-accounts-stats', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<AccountStats>({
+        url: '/person/accounts/stats',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        total: 0,
+        active: 0,
+        customers: 0,
+        prospects: 0,
+      },
+  });
 
-    if (lifecycleFilter !== 'all') {
-      result = result.filter(
-        (account) => account.lifecycle_stage === lifecycleFilter
-      );
-    }
+  const { data: owners = [] } = useQuery<UserOption[]>({
+    queryKey: ['contact-account-owner-options', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<UserOption[] | { data?: UserOption[] }>({
+        url: '/person/owner-options',
+        method: 'GET',
+      });
+
+      return Array.isArray(response.data)
+        ? response.data
+        : response.data?.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
 
-    return result;
-  }, [accounts, debouncedSearch, statusFilter, lifecycleFilter]);
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 12,
+      lastPage: 1,
+      prev: null,
+      next: null,
+    },
+    isLoading,
+    refetch: refetchAccounts,
+  } = useQuery<PaginatedResult<Account>>({
+    queryKey: [
+      'contact-accounts',
+      page,
+      pageSize,
+      debouncedSearch,
+      statusFilter,
+      lifecycleFilter,
+      sortField,
+      sortOrder,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      params.set('sortField', sortField);
+      params.set('sortOrder', sortOrder);
+      if (debouncedSearch) {
+        params.set('search', debouncedSearch);
+      }
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+      if (lifecycleFilter !== 'all') {
+        params.set('lifecycle_stage', lifecycleFilter);
+      }
+
+      const response = await request<PaginatedResult<Account>>({
+        url: `/person/accounts?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 12,
+        lastPage: 1,
+        prev: null,
+        next: null,
+      },
+  });
 
-  const pageCount = Math.max(1, Math.ceil(filteredAccounts.length / pageSize));
+  const totalPages = Math.max(
+    1,
+    paginate.lastPage ?? (Math.ceil((paginate.total || 0) / pageSize) || 1)
+  );
 
   useEffect(() => {
-    if (page > pageCount) {
-      setPage(pageCount);
+    if (page > totalPages) {
+      setPage(totalPages);
     }
-  }, [page, pageCount]);
-
-  const paginatedAccounts = useMemo(() => {
-    const startIndex = (page - 1) * pageSize;
-    return filteredAccounts.slice(startIndex, startIndex + pageSize);
-  }, [filteredAccounts, page, pageSize]);
-
-  // Calculate stats
-  const stats: AccountStats = useMemo(() => {
-    return {
-      total: accounts.length,
-      active: accounts.filter((a) => a.status === 'active').length,
-      customers: accounts.filter((a) => a.lifecycle_stage === 'customer')
-        .length,
-      prospects: accounts.filter((a) => a.lifecycle_stage === 'prospect')
-        .length,
-    };
-  }, [accounts]);
+  }, [page, totalPages]);
 
   const openCreateSheet = () => {
     setAccountToEdit(null);
@@ -260,56 +314,79 @@ export default function AccountsPage() {
     setFormSheetOpen(true);
   };
 
-  const handleFormSubmit = (data: AccountFormValues) => {
-    if (accountToEdit) {
-      // Edit mode - update existing account
-      setAccounts((prev) =>
-        prev.map((acc) =>
-          acc.id === accountToEdit.id
-            ? {
-                ...acc,
-                ...data,
-              }
-            : acc
-        )
-      );
-      toast.success(t('editSuccess'));
-    } else {
-      // Create mode - add new account
-      const newAccount: Account = {
-        id: Math.max(...accounts.map((a) => a.id), 0) + 1,
-        ...data,
-        created_at: new Date().toISOString(),
-      };
-      setAccounts((prev) => [newAccount, ...prev]);
-      toast.success(t('createSuccess'));
+  const handleFormSubmit = async (data: AccountFormValues) => {
+    try {
+      setIsSubmitting(true);
+
+      if (accountToEdit) {
+        await request({
+          url: `/person/accounts/${accountToEdit.id}`,
+          method: 'PATCH',
+          data,
+        });
+        toast.success(t('editSuccess'));
+      } else {
+        await request({
+          url: '/person/accounts',
+          method: 'POST',
+          data,
+        });
+        toast.success(t('createSuccess'));
+      }
+
+      setFormSheetOpen(false);
+      setAccountToEdit(null);
+      await Promise.all([refetchAccounts(), refetchStats()]);
+    } catch (error: unknown) {
+      const message =
+        typeof error === 'object' && error && 'message' in error
+          ? (error as RequestError).message
+          : null;
+      toast.error(message || t('saveError'));
+      throw error;
+    } finally {
+      setIsSubmitting(false);
     }
-    setFormSheetOpen(false);
   };
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!accountToDelete) return;
-    setIsDeleting(true);
-    setTimeout(() => {
-      setAccounts((prev) =>
-        prev.filter((acc) => acc.id !== accountToDelete.id)
-      );
+
+    try {
+      setIsDeleting(true);
+      await request({
+        url: '/person/accounts',
+        method: 'DELETE',
+        data: {
+          ids: [accountToDelete.id],
+        },
+      });
+
       toast.success(t('deleteSuccess'));
       setDeleteDialogOpen(false);
       setAccountToDelete(null);
+      await Promise.all([refetchAccounts(), refetchStats()]);
+    } catch (error: unknown) {
+      const message =
+        typeof error === 'object' && error && 'message' in error
+          ? (error as RequestError).message
+          : null;
+      toast.error(message || t('deleteError'));
+    } finally {
       setIsDeleting(false);
-    }, 300);
+    }
   };
 
   const handleViewModeChange = (value: string) => {
     if (value !== 'table' && value !== 'cards') {
       return;
     }
+
     setViewMode(value);
     try {
       window.localStorage.setItem(ACCOUNT_VIEW_STORAGE_KEY, value);
     } catch {
-      // Ignore storage write failures
+      // Ignore storage write failures.
     }
   };
 
@@ -320,7 +397,10 @@ export default function AccountsPage() {
         header: ({ column }) => (
           <Button
             variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === 'asc');
+              setPage(1);
+            }}
             className="-ml-4"
           >
             {t('columnName')}
@@ -332,7 +412,7 @@ export default function AccountsPage() {
           return (
             <div className="flex items-center gap-3">
               <Avatar className="h-9 w-9 rounded-lg">
-                <AvatarFallback className="bg-slate-100 rounded-lg text-xs font-semibold uppercase text-slate-700">
+                <AvatarFallback className="rounded-lg bg-slate-100 text-xs font-semibold uppercase text-slate-700">
                   {getAccountInitials(account.name)}
                 </AvatarFallback>
               </Avatar>
@@ -353,7 +433,7 @@ export default function AccountsPage() {
         header: t('columnIndustry'),
         cell: ({ row }) => (
           <span className="text-sm text-muted-foreground">
-            {row.getValue('industry') || '-'}
+            {(row.getValue('industry') as string | null) || '-'}
           </span>
         ),
       },
@@ -361,7 +441,7 @@ export default function AccountsPage() {
         accessorKey: 'lifecycle_stage',
         header: t('columnStage'),
         cell: ({ row }) => {
-          const stage = row.getValue('lifecycle_stage') as string;
+          const stage = row.getValue('lifecycle_stage') as string | null;
           return (
             <Badge
               variant="outline"
@@ -370,7 +450,7 @@ export default function AccountsPage() {
                 getLifecycleStageColor(stage)
               )}
             >
-              {t(`stage_${stage}` as any) || stage}
+              {stage ? t(`stage_${stage}` as never) : '-'}
             </Badge>
           );
         },
@@ -390,7 +470,7 @@ export default function AccountsPage() {
                   : 'border-red-500/20 bg-red-500/10 text-red-600'
               )}
             >
-              {t(`status_${status}` as any) || status}
+              {t(`status_${status}` as never)}
             </Badge>
           );
         },
@@ -412,7 +492,7 @@ export default function AccountsPage() {
         header: t('columnCity'),
         cell: ({ row }) => (
           <span className="text-sm text-muted-foreground">
-            {row.getValue('city') || '-'}
+            {(row.getValue('city') as string | null) || '-'}
           </span>
         ),
       },
@@ -421,7 +501,10 @@ export default function AccountsPage() {
         header: ({ column }) => (
           <Button
             variant="ghost"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === 'asc');
+              setPage(1);
+            }}
             className="-ml-4"
           >
             {t('columnCreatedAt')}
@@ -430,7 +513,11 @@ export default function AccountsPage() {
         ),
         cell: ({ row }) => (
           <span className="text-sm text-muted-foreground">
-            {formatDate(row.getValue('created_at') as string, () => {}, 'en')}
+            {formatDate(
+              row.getValue('created_at') as string,
+              getSettingValue,
+              currentLocaleCode
+            )}
           </span>
         ),
       },
@@ -467,16 +554,16 @@ export default function AccountsPage() {
         },
       },
     ],
-    [t]
+    [currentLocaleCode, getSettingValue, t]
   );
 
   const table = useReactTable({
-    data: paginatedAccounts,
+    data: paginate.data,
     columns,
     state: { sorting },
+    manualSorting: true,
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
   });
 
   const accountsRows = table.getRowModel().rows;
@@ -519,7 +606,7 @@ export default function AccountsPage() {
   const searchControls: SearchBarControl[] = [
     {
       id: 'lifecycle-filter',
-      type: 'select' as const,
+      type: 'select',
       value: lifecycleFilter,
       onChange: (value: string) => {
         setLifecycleFilter(value);
@@ -580,9 +667,7 @@ export default function AccountsPage() {
               setSearchInput(value);
               setPage(1);
             }}
-            onSearch={() => {
-              setPage(1);
-            }}
+            onSearch={() => setPage(1)}
             placeholder={t('searchPlaceholder')}
             controls={searchControls}
           />
@@ -653,7 +738,7 @@ export default function AccountsPage() {
             ))}
           </div>
         )
-      ) : paginatedAccounts.length === 0 ? (
+      ) : paginate.data.length === 0 ? (
         <EmptyState
           icon={<Building2 className="h-12 w-12" />}
           title={t('emptyStateTitle')}
@@ -705,147 +790,139 @@ export default function AccountsPage() {
             </div>
           ) : (
             <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-              {accountsRows.map((row) => {
-                const account = row.original;
-
-                return (
-                  <Card
-                    key={account.id}
-                    className={cn(
-                      'group h-full overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md'
-                    )}
-                    onDoubleClick={() => openEditSheet(account)}
-                  >
-                    <CardContent className="flex h-full flex-col gap-3 p-4">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="flex min-w-0 items-start gap-2.5">
-                          <Avatar className="h-10 w-10 shrink-0 rounded-lg border border-slate-500/20">
-                            <AvatarFallback className="rounded-lg bg-slate-500/8 text-sm font-semibold uppercase text-slate-700 dark:text-slate-200">
-                              {getAccountInitials(account.name)}
-                            </AvatarFallback>
-                          </Avatar>
-
-                          <div className="min-w-0 space-y-1.5">
-                            <div className="flex flex-wrap gap-1.5">
-                              <Badge
-                                variant="outline"
-                                className={cn(
-                                  'border px-2 py-0.5 text-[11px] font-medium',
-                                  getLifecycleStageColor(
-                                    account.lifecycle_stage
-                                  )
-                                )}
-                              >
-                                {t(`stage_${account.lifecycle_stage}` as any) ||
-                                  account.lifecycle_stage}
-                              </Badge>
-
-                              <Badge
-                                variant="outline"
-                                className={cn(
-                                  'border px-2 py-0.5 text-[11px] font-medium',
-                                  account.status === 'active'
-                                    ? 'border-green-500/20 bg-green-500/10 text-green-600'
-                                    : 'border-red-500/20 bg-red-500/10 text-red-600'
-                                )}
-                              >
-                                {t(`status_${account.status}` as any) ||
-                                  account.status}
-                              </Badge>
-                            </div>
-
-                            <div className="min-w-0">
-                              <h3 className="line-clamp-2 text-sm font-semibold text-foreground">
-                                {account.name}
-                              </h3>
-                              {account.trade_name && (
-                                <p className="truncate text-xs text-muted-foreground">
-                                  {account.trade_name}
-                                </p>
+              {paginate.data.map((account) => (
+                <Card
+                  key={account.id}
+                  className="group h-full overflow-hidden border-border/70 py-0 transition-colors hover:border-border hover:shadow-md"
+                  onDoubleClick={() => openEditSheet(account)}
+                >
+                  <CardContent className="flex h-full flex-col gap-3 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex min-w-0 items-start gap-2.5">
+                        <Avatar className="h-10 w-10 shrink-0 rounded-lg border border-slate-500/20">
+                          <AvatarFallback className="rounded-lg bg-slate-500/8 text-sm font-semibold uppercase text-slate-700 dark:text-slate-200">
+                            {getAccountInitials(account.name)}
+                          </AvatarFallback>
+                        </Avatar>
+
+                        <div className="min-w-0 space-y-1.5">
+                          <div className="flex flex-wrap gap-1.5">
+                            <Badge
+                              variant="outline"
+                              className={cn(
+                                'border px-2 py-0.5 text-[11px] font-medium',
+                                getLifecycleStageColor(account.lifecycle_stage)
                               )}
-                              {account.industry && (
-                                <p className="truncate text-xs text-muted-foreground">
-                                  {account.industry}
-                                </p>
+                            >
+                              {account.lifecycle_stage
+                                ? t(`stage_${account.lifecycle_stage}` as never)
+                                : '-'}
+                            </Badge>
+
+                            <Badge
+                              variant="outline"
+                              className={cn(
+                                'border px-2 py-0.5 text-[11px] font-medium',
+                                account.status === 'active'
+                                  ? 'border-green-500/20 bg-green-500/10 text-green-600'
+                                  : 'border-red-500/20 bg-red-500/10 text-red-600'
                               )}
-                            </div>
+                            >
+                              {t(`status_${account.status}` as never)}
+                            </Badge>
                           </div>
-                        </div>
 
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8 rounded-lg"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => openEditSheet(account)}
-                            >
-                              <Pencil className="mr-2 h-4 w-4" />
-                              {t('edit')}
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-red-600"
-                              onClick={() => {
-                                setAccountToDelete(account);
-                                setDeleteDialogOpen(true);
-                              }}
-                            >
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              {t('delete')}
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
+                          <div className="min-w-0">
+                            <h3 className="line-clamp-2 text-sm font-semibold text-foreground">
+                              {account.name}
+                            </h3>
+                            {account.trade_name && (
+                              <p className="truncate text-xs text-muted-foreground">
+                                {account.trade_name}
+                              </p>
+                            )}
+                            {account.industry && (
+                              <p className="truncate text-xs text-muted-foreground">
+                                {account.industry}
+                              </p>
+                            )}
+                          </div>
+                        </div>
                       </div>
 
-                      <div className="grid gap-3 sm:grid-cols-2">
-                        <AccountInfoTile
-                          icon={<Mail className="h-3 w-3" />}
-                          label={t('tileEmail')}
-                          value={account.email || '-'}
-                        />
-                        <AccountInfoTile
-                          icon={<Phone className="h-3 w-3" />}
-                          label={t('tilePhone')}
-                          value={account.phone || '-'}
-                        />
-                        <AccountInfoTile
-                          icon={<Globe className="h-3 w-3" />}
-                          label={t('tileWebsite')}
-                          value={account.website || '-'}
-                        />
-                        <AccountInfoTile
-                          icon={<Building2 className="h-3 w-3" />}
-                          label={t('tileIndustry')}
-                          value={account.industry || '-'}
-                        />
-                      </div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 rounded-lg"
+                          >
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={() => openEditSheet(account)}
+                          >
+                            <Pencil className="mr-2 h-4 w-4" />
+                            {t('edit')}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-red-600"
+                            onClick={() => {
+                              setAccountToDelete(account);
+                              setDeleteDialogOpen(true);
+                            }}
+                          >
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            {t('delete')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
 
-                      <div className="border-t pt-2 text-xs text-muted-foreground">
-                        <div className="flex items-center justify-between">
-                          <span>
-                            {t('owner')}:{' '}
-                            {account.owner_user?.name || t('unassigned')}
-                          </span>
-                        </div>
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <AccountInfoTile
+                        icon={<Mail className="h-3 w-3" />}
+                        label={t('tileEmail')}
+                        value={account.email || '-'}
+                      />
+                      <AccountInfoTile
+                        icon={<Phone className="h-3 w-3" />}
+                        label={t('tilePhone')}
+                        value={account.phone || '-'}
+                      />
+                      <AccountInfoTile
+                        icon={<Globe className="h-3 w-3" />}
+                        label={t('tileWebsite')}
+                        value={account.website || '-'}
+                      />
+                      <AccountInfoTile
+                        icon={<Building2 className="h-3 w-3" />}
+                        label={t('tileIndustry')}
+                        value={account.industry || '-'}
+                      />
+                    </div>
+
+                    <div className="border-t pt-2 text-xs text-muted-foreground">
+                      <div className="flex items-center justify-between">
+                        <span>
+                          {t('owner')}:{' '}
+                          {account.owner_user?.name || t('unassigned')}
+                        </span>
                       </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
             </div>
           )}
 
           <PaginationFooter
             currentPage={page}
             pageSize={pageSize}
-            totalItems={filteredAccounts.length}
+            totalItems={paginate.total}
             onPageChange={setPage}
             onPageSizeChange={(nextPageSize) => {
               setPageSize(nextPageSize);
@@ -859,8 +936,9 @@ export default function AccountsPage() {
         open={formSheetOpen}
         onOpenChange={setFormSheetOpen}
         account={accountToEdit}
-        owners={crmOwners}
+        owners={owners}
         onSubmit={handleFormSubmit}
+        isLoading={isSubmitting}
       />
 
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>