@hed-hog/contact 0.0.295 → 0.0.297

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

@@ -1,970 +1,970 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PageHeader,
-  PaginationFooter,
-  SearchBar,
-  type SearchBarControl,
-} from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-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 {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-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,
-  useReactTable,
-} from '@tanstack/react-table';
-import {
-  ArrowUpDown,
-  Building2,
-  Globe,
-  LayoutGrid,
-  List,
-  Mail,
-  MoreHorizontal,
-  Pencil,
-  Phone,
-  Plus,
-  Trash2,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { type ReactNode, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-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(' ')
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((part) => part[0]?.toUpperCase() || '')
-    .join('');
-}
-
-function getLifecycleStageColor(stage?: string | null) {
-  switch (stage) {
-    case 'customer':
-      return 'border-green-500/20 bg-green-500/10 text-green-600';
-    case 'prospect':
-      return 'border-blue-500/20 bg-blue-500/10 text-blue-600';
-    case 'churned':
-      return 'border-red-500/20 bg-red-500/10 text-red-600';
-    case 'inactive':
-      return 'border-gray-500/20 bg-gray-500/10 text-gray-600';
-    default:
-      return 'border-slate-500/20 bg-slate-500/10 text-slate-600';
-  }
-}
-
-function AccountInfoTile({
-  icon,
-  label,
-  value,
-}: {
-  icon: ReactNode;
-  label: string;
-  value: string;
-}) {
-  const hasValue = value.trim() !== '-' && value.trim() !== '';
-
-  return (
-    <div
-      className={cn(
-        'rounded-xl border border-border/70 bg-muted/25 p-2.5 transition-colors',
-        hasValue
-          ? 'text-foreground'
-          : 'border-dashed bg-muted/40 text-muted-foreground'
-      )}
-    >
-      <div className="mb-2 flex items-center gap-2">
-        <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">
-          {label}
-        </span>
-      </div>
-
-      <div
-        className={cn(
-          'line-clamp-2 text-sm font-medium',
-          hasValue ? 'text-foreground' : 'text-muted-foreground'
-        )}
-      >
-        {hasValue ? value : '-'}
-      </div>
-    </div>
-  );
-}
-
-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);
-  const [pageSize, setPageSize] = useState(12);
-  const [searchInput, setSearchInput] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [lifecycleFilter, setLifecycleFilter] = useState('all');
-  const [formSheetOpen, setFormSheetOpen] = useState(false);
-  const [accountToEdit, setAccountToEdit] = useState<Account | null>(null);
-  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');
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedSearch(searchInput.trim());
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [searchInput]);
-
-  useEffect(() => {
-    try {
-      const savedViewMode = window.localStorage.getItem(
-        ACCOUNT_VIEW_STORAGE_KEY
-      );
-      if (savedViewMode === 'table' || savedViewMode === 'cards') {
-        setViewMode(savedViewMode);
-      }
-    } catch {
-      // Ignore storage read failures.
-    }
-  }, []);
-
-  const currentSort = sorting[0];
-  const sortField = currentSort?.id === 'created_at' ? 'created_at' : 'name';
-  const sortOrder = currentSort?.desc ? 'desc' : 'asc';
-
-  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,
-      },
-  });
-
-  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 ?? [],
-  });
-
-  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 totalPages = Math.max(
-    1,
-    paginate.lastPage ?? (Math.ceil((paginate.total || 0) / pageSize) || 1)
-  );
-
-  useEffect(() => {
-    if (page > totalPages) {
-      setPage(totalPages);
-    }
-  }, [page, totalPages]);
-
-  const openCreateSheet = () => {
-    setAccountToEdit(null);
-    setFormSheetOpen(true);
-  };
-
-  const openEditSheet = (account: Account) => {
-    setAccountToEdit(account);
-    setFormSheetOpen(true);
-  };
-
-  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);
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!accountToDelete) return;
-
-    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);
-    }
-  };
-
-  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.
-    }
-  };
-
-  const columns = useMemo<ColumnDef<Account>[]>(
-    () => [
-      {
-        accessorKey: 'name',
-        header: ({ column }) => (
-          <Button
-            variant="ghost"
-            onClick={() => {
-              column.toggleSorting(column.getIsSorted() === 'asc');
-              setPage(1);
-            }}
-            className="-ml-4"
-          >
-            {t('columnName')}
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        ),
-        cell: ({ row }) => {
-          const account = row.original;
-          return (
-            <div className="flex items-center gap-3">
-              <Avatar className="h-9 w-9 rounded-lg">
-                <AvatarFallback className="rounded-lg bg-slate-100 text-xs font-semibold uppercase text-slate-700">
-                  {getAccountInitials(account.name)}
-                </AvatarFallback>
-              </Avatar>
-              <div className="min-w-0">
-                <div className="truncate font-medium">{account.name}</div>
-                {account.trade_name && (
-                  <div className="truncate text-xs text-muted-foreground">
-                    {account.trade_name}
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        },
-      },
-      {
-        accessorKey: 'industry',
-        header: t('columnIndustry'),
-        cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
-            {(row.getValue('industry') as string | null) || '-'}
-          </span>
-        ),
-      },
-      {
-        accessorKey: 'lifecycle_stage',
-        header: t('columnStage'),
-        cell: ({ row }) => {
-          const stage = row.getValue('lifecycle_stage') as string | null;
-          return (
-            <Badge
-              variant="outline"
-              className={cn(
-                'border px-2.5 py-1 text-xs font-medium',
-                getLifecycleStageColor(stage)
-              )}
-            >
-              {stage ? t(`stage_${stage}` as never) : '-'}
-            </Badge>
-          );
-        },
-      },
-      {
-        accessorKey: 'status',
-        header: t('columnStatus'),
-        cell: ({ row }) => {
-          const status = row.getValue('status') as Account['status'];
-          return (
-            <Badge
-              variant="outline"
-              className={cn(
-                'border px-2.5 py-1 text-xs font-medium',
-                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_${status}` as never)}
-            </Badge>
-          );
-        },
-      },
-      {
-        accessorKey: 'owner_user',
-        header: t('columnOwner'),
-        cell: ({ row }) => {
-          const account = row.original;
-          return (
-            <span className="text-sm">
-              {account.owner_user?.name || t('unassigned')}
-            </span>
-          );
-        },
-      },
-      {
-        accessorKey: 'city',
-        header: t('columnCity'),
-        cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
-            {(row.getValue('city') as string | null) || '-'}
-          </span>
-        ),
-      },
-      {
-        accessorKey: 'created_at',
-        header: ({ column }) => (
-          <Button
-            variant="ghost"
-            onClick={() => {
-              column.toggleSorting(column.getIsSorted() === 'asc');
-              setPage(1);
-            }}
-            className="-ml-4"
-          >
-            {t('columnCreatedAt')}
-            <ArrowUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        ),
-        cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground">
-            {formatDate(
-              row.getValue('created_at') as string,
-              getSettingValue,
-              currentLocaleCode
-            )}
-          </span>
-        ),
-      },
-      {
-        id: 'actions',
-        cell: ({ row }) => {
-          const account = row.original;
-          return (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8">
-                  <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>
-          );
-        },
-      },
-    ],
-    [currentLocaleCode, getSettingValue, t]
-  );
-
-  const table = useReactTable({
-    data: paginate.data,
-    columns,
-    state: { sorting },
-    manualSorting: true,
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-  });
-
-  const accountsRows = table.getRowModel().rows;
-
-  const statsCards = [
-    {
-      key: 'total',
-      title: t('statsTotal'),
-      value: stats.total,
-      icon: Building2,
-      accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
-      iconContainerClassName: 'bg-slate-100 text-slate-700',
-    },
-    {
-      key: 'active',
-      title: t('statsActive'),
-      value: stats.active,
-      icon: Building2,
-      accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
-      iconContainerClassName: 'bg-green-50 text-green-600',
-    },
-    {
-      key: 'customers',
-      title: t('statsCustomers'),
-      value: stats.customers,
-      icon: Building2,
-      accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
-      iconContainerClassName: 'bg-blue-50 text-blue-600',
-    },
-    {
-      key: 'prospects',
-      title: t('statsProspects'),
-      value: stats.prospects,
-      icon: Building2,
-      accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
-      iconContainerClassName: 'bg-amber-50 text-amber-600',
-    },
-  ];
-
-  const searchControls: SearchBarControl[] = [
-    {
-      id: 'lifecycle-filter',
-      type: 'select',
-      value: lifecycleFilter,
-      onChange: (value: string) => {
-        setLifecycleFilter(value);
-        setPage(1);
-      },
-      placeholder: t('filterByStage'),
-      options: [
-        { value: 'all', label: t('allStages') },
-        { value: 'prospect', label: t('stage_prospect') },
-        { value: 'customer', label: t('stage_customer') },
-        { value: 'churned', label: t('stage_churned') },
-        { value: 'inactive', label: t('stage_inactive') },
-      ],
-    },
-    {
-      id: 'status-filter',
-      type: 'select',
-      value: statusFilter,
-      onChange: (value: string) => {
-        setStatusFilter(value);
-        setPage(1);
-      },
-      placeholder: t('filterByStatus'),
-      options: [
-        { value: 'all', label: t('allStatuses') },
-        { value: 'active', label: t('status_active') },
-        { value: 'inactive', label: t('status_inactive') },
-      ],
-    },
-  ];
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
-          { label: t('title') },
-        ]}
-        title={t('title')}
-        description={t('description')}
-        actions={[
-          {
-            label: t('newAccount'),
-            onClick: openCreateSheet,
-            icon: <Plus className="h-4 w-4" />,
-          },
-        ]}
-      />
-
-      <KpiCardsGrid items={statsCards} />
-
-      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="flex-1">
-          <SearchBar
-            searchQuery={searchInput}
-            onSearchChange={(value) => {
-              setSearchInput(value);
-              setPage(1);
-            }}
-            onSearch={() => setPage(1)}
-            placeholder={t('searchPlaceholder')}
-            controls={searchControls}
-          />
-        </div>
-
-        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
-          <div className="flex items-center justify-between gap-3 sm:justify-start">
-            <span className="text-xs font-medium text-muted-foreground">
-              {t('viewMode')}
-            </span>
-            <ToggleGroup
-              type="single"
-              value={viewMode}
-              onValueChange={handleViewModeChange}
-              variant="outline"
-              size="sm"
-              aria-label={t('viewMode')}
-            >
-              <ToggleGroupItem
-                value="table"
-                className="gap-1.5 px-2.5"
-                aria-label={t('viewModeTable')}
-              >
-                <List className="h-4 w-4" />
-                <span className="hidden sm:inline">{t('viewModeTable')}</span>
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                value="cards"
-                className="gap-1.5 px-2.5"
-                aria-label={t('viewModeCards')}
-              >
-                <LayoutGrid className="h-4 w-4" />
-                <span className="hidden sm:inline">{t('viewModeCards')}</span>
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </div>
-        </div>
-      </div>
-
-      {isLoading ? (
-        viewMode === 'cards' ? (
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <Card key={index} className="overflow-hidden py-0">
-                <CardContent className="space-y-3 p-4">
-                  <div className="flex items-center gap-2.5">
-                    <Skeleton className="h-10 w-10 rounded-xl" />
-                    <div className="flex-1 space-y-2">
-                      <Skeleton className="h-3 w-20" />
-                      <Skeleton className="h-4 w-2/3" />
-                      <Skeleton className="h-3 w-1/2" />
-                    </div>
-                  </div>
-                  <div className="grid gap-3 sm:grid-cols-2">
-                    {Array.from({ length: 4 }).map((__, detailIndex) => (
-                      <Skeleton key={detailIndex} className="h-20 rounded-xl" />
-                    ))}
-                  </div>
-                  <Skeleton className="h-10 rounded-xl" />
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="space-y-3 p-4">
-            {Array.from({ length: 5 }).map((_, index) => (
-              <Skeleton key={index} className="h-14 w-full" />
-            ))}
-          </div>
-        )
-      ) : paginate.data.length === 0 ? (
-        <EmptyState
-          icon={<Building2 className="h-12 w-12" />}
-          title={t('emptyStateTitle')}
-          description={t('emptyStateDescription')}
-          actionLabel={t('newAccount')}
-          actionIcon={<Plus className="mr-2 h-4 w-4" />}
-          onAction={openCreateSheet}
-        />
-      ) : (
-        <>
-          {viewMode === 'table' ? (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead key={header.id}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {accountsRows.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      className="cursor-pointer"
-                      onDoubleClick={() => openEditSheet(row.original)}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          ) : (
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-              {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.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'
-                              )}
-                            >
-                              {t(`status_${account.status}` as never)}
-                            </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>
-                            )}
-                            {account.industry && (
-                              <p className="truncate text-xs text-muted-foreground">
-                                {account.industry}
-                              </p>
-                            )}
-                          </div>
-                        </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>
-
-                    <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>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-
-          <PaginationFooter
-            currentPage={page}
-            pageSize={pageSize}
-            totalItems={paginate.total}
-            onPageChange={setPage}
-            onPageSizeChange={(nextPageSize) => {
-              setPageSize(nextPageSize);
-              setPage(1);
-            }}
-          />
-        </>
-      )}
-
-      <AccountFormSheet
-        open={formSheetOpen}
-        onOpenChange={setFormSheetOpen}
-        account={accountToEdit}
-        owners={owners}
-        onSubmit={handleFormSubmit}
-        isLoading={isSubmitting}
-      />
-
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('deleteDescription', {
-                name: accountToDelete?.name || '',
-              })}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <div className="flex justify-end gap-3">
-            <AlertDialogCancel disabled={isDeleting}>
-              {t('cancel')}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleDelete}
-              disabled={isDeleting}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              {isDeleting ? t('deleting') : t('delete')}
-            </AlertDialogAction>
-          </div>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Page>
-  );
-}
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+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,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  ArrowUpDown,
+  Building2,
+  Globe,
+  LayoutGrid,
+  List,
+  Mail,
+  MoreHorizontal,
+  Pencil,
+  Phone,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+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(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('');
+}
+
+function getLifecycleStageColor(stage?: string | null) {
+  switch (stage) {
+    case 'customer':
+      return 'border-green-500/20 bg-green-500/10 text-green-600';
+    case 'prospect':
+      return 'border-blue-500/20 bg-blue-500/10 text-blue-600';
+    case 'churned':
+      return 'border-red-500/20 bg-red-500/10 text-red-600';
+    case 'inactive':
+      return 'border-gray-500/20 bg-gray-500/10 text-gray-600';
+    default:
+      return 'border-slate-500/20 bg-slate-500/10 text-slate-600';
+  }
+}
+
+function AccountInfoTile({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  const hasValue = value.trim() !== '-' && value.trim() !== '';
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-border/70 bg-muted/25 p-2.5 transition-colors',
+        hasValue
+          ? 'text-foreground'
+          : 'border-dashed bg-muted/40 text-muted-foreground'
+      )}
+    >
+      <div className="mb-2 flex items-center gap-2">
+        <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">
+          {label}
+        </span>
+      </div>
+
+      <div
+        className={cn(
+          'line-clamp-2 text-sm font-medium',
+          hasValue ? 'text-foreground' : 'text-muted-foreground'
+        )}
+      >
+        {hasValue ? value : '-'}
+      </div>
+    </div>
+  );
+}
+
+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);
+  const [pageSize, setPageSize] = useState(12);
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [lifecycleFilter, setLifecycleFilter] = useState('all');
+  const [formSheetOpen, setFormSheetOpen] = useState(false);
+  const [accountToEdit, setAccountToEdit] = useState<Account | null>(null);
+  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');
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  useEffect(() => {
+    try {
+      const savedViewMode = window.localStorage.getItem(
+        ACCOUNT_VIEW_STORAGE_KEY
+      );
+      if (savedViewMode === 'table' || savedViewMode === 'cards') {
+        setViewMode(savedViewMode);
+      }
+    } catch {
+      // Ignore storage read failures.
+    }
+  }, []);
+
+  const currentSort = sorting[0];
+  const sortField = currentSort?.id === 'created_at' ? 'created_at' : 'name';
+  const sortOrder = currentSort?.desc ? 'desc' : 'asc';
+
+  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,
+      },
+  });
+
+  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 ?? [],
+  });
+
+  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 totalPages = Math.max(
+    1,
+    paginate.lastPage ?? (Math.ceil((paginate.total || 0) / pageSize) || 1)
+  );
+
+  useEffect(() => {
+    if (page > totalPages) {
+      setPage(totalPages);
+    }
+  }, [page, totalPages]);
+
+  const openCreateSheet = () => {
+    setAccountToEdit(null);
+    setFormSheetOpen(true);
+  };
+
+  const openEditSheet = (account: Account) => {
+    setAccountToEdit(account);
+    setFormSheetOpen(true);
+  };
+
+  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);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!accountToDelete) return;
+
+    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);
+    }
+  };
+
+  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.
+    }
+  };
+
+  const columns = useMemo<ColumnDef<Account>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === 'asc');
+              setPage(1);
+            }}
+            className="-ml-4"
+          >
+            {t('columnName')}
+            <ArrowUpDown className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        cell: ({ row }) => {
+          const account = row.original;
+          return (
+            <div className="flex items-center gap-3">
+              <Avatar className="h-9 w-9 rounded-lg">
+                <AvatarFallback className="rounded-lg bg-slate-100 text-xs font-semibold uppercase text-slate-700">
+                  {getAccountInitials(account.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0">
+                <div className="truncate font-medium">{account.name}</div>
+                {account.trade_name && (
+                  <div className="truncate text-xs text-muted-foreground">
+                    {account.trade_name}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'industry',
+        header: t('columnIndustry'),
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {(row.getValue('industry') as string | null) || '-'}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'lifecycle_stage',
+        header: t('columnStage'),
+        cell: ({ row }) => {
+          const stage = row.getValue('lifecycle_stage') as string | null;
+          return (
+            <Badge
+              variant="outline"
+              className={cn(
+                'border px-2.5 py-1 text-xs font-medium',
+                getLifecycleStageColor(stage)
+              )}
+            >
+              {stage ? t(`stage_${stage}` as never) : '-'}
+            </Badge>
+          );
+        },
+      },
+      {
+        accessorKey: 'status',
+        header: t('columnStatus'),
+        cell: ({ row }) => {
+          const status = row.getValue('status') as Account['status'];
+          return (
+            <Badge
+              variant="outline"
+              className={cn(
+                'border px-2.5 py-1 text-xs font-medium',
+                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_${status}` as never)}
+            </Badge>
+          );
+        },
+      },
+      {
+        accessorKey: 'owner_user',
+        header: t('columnOwner'),
+        cell: ({ row }) => {
+          const account = row.original;
+          return (
+            <span className="text-sm">
+              {account.owner_user?.name || t('unassigned')}
+            </span>
+          );
+        },
+      },
+      {
+        accessorKey: 'city',
+        header: t('columnCity'),
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {(row.getValue('city') as string | null) || '-'}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'created_at',
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              column.toggleSorting(column.getIsSorted() === 'asc');
+              setPage(1);
+            }}
+            className="-ml-4"
+          >
+            {t('columnCreatedAt')}
+            <ArrowUpDown className="ml-2 h-4 w-4" />
+          </Button>
+        ),
+        cell: ({ row }) => (
+          <span className="text-sm text-muted-foreground">
+            {formatDate(
+              row.getValue('created_at') as string,
+              getSettingValue,
+              currentLocaleCode
+            )}
+          </span>
+        ),
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => {
+          const account = row.original;
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <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>
+          );
+        },
+      },
+    ],
+    [currentLocaleCode, getSettingValue, t]
+  );
+
+  const table = useReactTable({
+    data: paginate.data,
+    columns,
+    state: { sorting },
+    manualSorting: true,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const accountsRows = table.getRowModel().rows;
+
+  const statsCards = [
+    {
+      key: 'total',
+      title: t('statsTotal'),
+      value: stats.total,
+      icon: Building2,
+      accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+      iconContainerClassName: 'bg-slate-100 text-slate-700',
+    },
+    {
+      key: 'active',
+      title: t('statsActive'),
+      value: stats.active,
+      icon: Building2,
+      accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+      iconContainerClassName: 'bg-green-50 text-green-600',
+    },
+    {
+      key: 'customers',
+      title: t('statsCustomers'),
+      value: stats.customers,
+      icon: Building2,
+      accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+      iconContainerClassName: 'bg-blue-50 text-blue-600',
+    },
+    {
+      key: 'prospects',
+      title: t('statsProspects'),
+      value: stats.prospects,
+      icon: Building2,
+      accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+      iconContainerClassName: 'bg-amber-50 text-amber-600',
+    },
+  ];
+
+  const searchControls: SearchBarControl[] = [
+    {
+      id: 'lifecycle-filter',
+      type: 'select',
+      value: lifecycleFilter,
+      onChange: (value: string) => {
+        setLifecycleFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filterByStage'),
+      options: [
+        { value: 'all', label: t('allStages') },
+        { value: 'prospect', label: t('stage_prospect') },
+        { value: 'customer', label: t('stage_customer') },
+        { value: 'churned', label: t('stage_churned') },
+        { value: 'inactive', label: t('stage_inactive') },
+      ],
+    },
+    {
+      id: 'status-filter',
+      type: 'select',
+      value: statusFilter,
+      onChange: (value: string) => {
+        setStatusFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filterByStatus'),
+      options: [
+        { value: 'all', label: t('allStatuses') },
+        { value: 'active', label: t('status_active') },
+        { value: 'inactive', label: t('status_inactive') },
+      ],
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: t('newAccount'),
+            onClick: openCreateSheet,
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={statsCards} />
+
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={(value) => {
+              setSearchInput(value);
+              setPage(1);
+            }}
+            onSearch={() => setPage(1)}
+            placeholder={t('searchPlaceholder')}
+            controls={searchControls}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+          <div className="flex items-center justify-between gap-3 sm:justify-start">
+            <span className="text-xs font-medium text-muted-foreground">
+              {t('viewMode')}
+            </span>
+            <ToggleGroup
+              type="single"
+              value={viewMode}
+              onValueChange={handleViewModeChange}
+              variant="outline"
+              size="sm"
+              aria-label={t('viewMode')}
+            >
+              <ToggleGroupItem
+                value="table"
+                className="gap-1.5 px-2.5"
+                aria-label={t('viewModeTable')}
+              >
+                <List className="h-4 w-4" />
+                <span className="hidden sm:inline">{t('viewModeTable')}</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="cards"
+                className="gap-1.5 px-2.5"
+                aria-label={t('viewModeCards')}
+              >
+                <LayoutGrid className="h-4 w-4" />
+                <span className="hidden sm:inline">{t('viewModeCards')}</span>
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+        </div>
+      </div>
+
+      {isLoading ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Card key={index} className="overflow-hidden py-0">
+                <CardContent className="space-y-3 p-4">
+                  <div className="flex items-center gap-2.5">
+                    <Skeleton className="h-10 w-10 rounded-xl" />
+                    <div className="flex-1 space-y-2">
+                      <Skeleton className="h-3 w-20" />
+                      <Skeleton className="h-4 w-2/3" />
+                      <Skeleton className="h-3 w-1/2" />
+                    </div>
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {Array.from({ length: 4 }).map((__, detailIndex) => (
+                      <Skeleton key={detailIndex} className="h-20 rounded-xl" />
+                    ))}
+                  </div>
+                  <Skeleton className="h-10 rounded-xl" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-3 p-4">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Skeleton key={index} className="h-14 w-full" />
+            ))}
+          </div>
+        )
+      ) : paginate.data.length === 0 ? (
+        <EmptyState
+          icon={<Building2 className="h-12 w-12" />}
+          title={t('emptyStateTitle')}
+          description={t('emptyStateDescription')}
+          actionLabel={t('newAccount')}
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          onAction={openCreateSheet}
+        />
+      ) : (
+        <>
+          {viewMode === 'table' ? (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {accountsRows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      className="cursor-pointer"
+                      onDoubleClick={() => openEditSheet(row.original)}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+              {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.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'
+                              )}
+                            >
+                              {t(`status_${account.status}` as never)}
+                            </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>
+                            )}
+                            {account.industry && (
+                              <p className="truncate text-xs text-muted-foreground">
+                                {account.industry}
+                              </p>
+                            )}
+                          </div>
+                        </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>
+
+                    <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>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+
+          <PaginationFooter
+            currentPage={page}
+            pageSize={pageSize}
+            totalItems={paginate.total}
+            onPageChange={setPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setPage(1);
+            }}
+          />
+        </>
+      )}
+
+      <AccountFormSheet
+        open={formSheetOpen}
+        onOpenChange={setFormSheetOpen}
+        account={accountToEdit}
+        owners={owners}
+        onSubmit={handleFormSubmit}
+        isLoading={isSubmitting}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDescription', {
+                name: accountToDelete?.name || '',
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-3">
+            <AlertDialogCancel disabled={isDeleting}>
+              {t('cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeleting ? t('deleting') : t('delete')}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}