@hed-hog/contact 0.0.279 → 0.0.286

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

@@ -1,15 +1,892 @@
-'use client';
-
-import { CrmComingSoon } from '../_components/crm-coming-soon';
-import { Building2 } from 'lucide-react';
-
-export default function CrmAccountsPage() {
-  return (
-    <CrmComingSoon
-      currentHref="/contact/accounts"
-      titleKey="accounts"
-      descriptionKey="accounts"
-      icon={Building2}
-    />
-  );
-}
+'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 { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+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 {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  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 { CrmNav } from '../_components/crm-nav';
+import { crmMockAccounts, crmOwners } from '../_lib/crm-mocks';
+import { AccountFormSheet } from './_components/account-form-sheet';
+import type {
+  Account,
+  AccountFormValues,
+  AccountStats,
+} from './_components/account-types';
+
+const ACCOUNT_VIEW_STORAGE_KEY = 'contact-account-view-mode';
+type AccountViewMode = 'table' | 'cards';
+
+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={cn(
+            '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 [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 [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]);
+
+  useEffect(() => {
+    try {
+      const savedViewMode = window.localStorage.getItem(
+        ACCOUNT_VIEW_STORAGE_KEY
+      );
+      if (savedViewMode === 'table' || savedViewMode === 'cards') {
+        setViewMode(savedViewMode);
+      }
+    } catch {
+      // 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)
+      );
+    }
+
+    if (statusFilter !== 'all') {
+      result = result.filter((account) => account.status === statusFilter);
+    }
+
+    if (lifecycleFilter !== 'all') {
+      result = result.filter(
+        (account) => account.lifecycle_stage === lifecycleFilter
+      );
+    }
+
+    return result;
+  }, [accounts, debouncedSearch, statusFilter, lifecycleFilter]);
+
+  const pageCount = Math.max(1, Math.ceil(filteredAccounts.length / pageSize));
+
+  useEffect(() => {
+    if (page > pageCount) {
+      setPage(pageCount);
+    }
+  }, [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]);
+
+  const openCreateSheet = () => {
+    setAccountToEdit(null);
+    setFormSheetOpen(true);
+  };
+
+  const openEditSheet = (account: Account) => {
+    setAccountToEdit(account);
+    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'));
+    }
+    setFormSheetOpen(false);
+  };
+
+  const handleDelete = () => {
+    if (!accountToDelete) return;
+    setIsDeleting(true);
+    setTimeout(() => {
+      setAccounts((prev) =>
+        prev.filter((acc) => acc.id !== accountToDelete.id)
+      );
+      toast.success(t('deleteSuccess'));
+      setDeleteDialogOpen(false);
+      setAccountToDelete(null);
+      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
+    }
+  };
+
+  const columns = useMemo<ColumnDef<Account>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            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="bg-slate-100 rounded-lg 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') || '-'}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'lifecycle_stage',
+        header: t('columnStage'),
+        cell: ({ row }) => {
+          const stage = row.getValue('lifecycle_stage') as string;
+          return (
+            <Badge
+              variant="outline"
+              className={cn(
+                'border px-2.5 py-1 text-xs font-medium',
+                getLifecycleStageColor(stage)
+              )}
+            >
+              {t(`stage_${stage}` as any) || stage}
+            </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 any) || status}
+            </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') || '-'}
+          </span>
+        ),
+      },
+      {
+        accessorKey: 'created_at',
+        header: ({ column }) => (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            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, () => {}, 'en')}
+          </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>
+          );
+        },
+      },
+    ],
+    [t]
+  );
+
+  const table = useReactTable({
+    data: paginatedAccounts,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  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' as const,
+      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>
+        )
+      ) : paginatedAccounts.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">
+              {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>
+                              )}
+                              {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={filteredAccounts.length}
+            onPageChange={setPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setPage(1);
+            }}
+          />
+        </>
+      )}
+
+      <AccountFormSheet
+        open={formSheetOpen}
+        onOpenChange={setFormSheetOpen}
+        account={accountToEdit}
+        owners={crmOwners}
+        onSubmit={handleFormSubmit}
+      />
+
+      <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>
+  );
+}