@hed-hog/lms 0.0.328 → 0.0.330

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

@@ -44,6 +44,7 @@ import {
   SquareArrowOutUpRight,
   Users,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { EnterpriseDetailSheet } from './_components/enterprise-detail-sheet';
 import { EnterpriseSheet } from './_components/enterprise-sheet';
@@ -69,16 +70,10 @@ const STATUS_VARIANT: Record<
   suspended: 'destructive',
 };
 
-const STATUS_LABEL: Record<EnterpriseStatus, string> = {
-  active: 'Active',
-  trial: 'Trial',
-  inactive: 'Inactive',
-  suspended: 'Suspended',
-};
-
 // ── Page ──────────────────────────────────────────────────────────────────────
 
 export default function EnterprisePage() {
+  const t = useTranslations('lms.EnterprisePage');
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [crmFilter, setCrmFilter] = useState('all');
@@ -205,42 +200,48 @@ export default function EnterprisePage() {
     return [
       {
         key: 'total',
-        title: 'Total Accounts',
+        title: t('kpis.total.label'),
         value: total,
-        description: 'All enterprise accounts',
+        description: t('kpis.total.description'),
         icon: Building2,
         accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
         iconContainerClassName: 'bg-slate-100 text-slate-700',
       },
       {
         key: 'active',
-        title: 'Active',
+        title: t('kpis.active.label'),
         value: active,
-        description: 'Currently active accounts',
+        description: t('kpis.active.description'),
         icon: Users,
         accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
         iconContainerClassName: 'bg-green-50 text-green-600',
       },
       {
         key: 'trial',
-        title: 'Trial',
+        title: t.has('kpis.trial.label') ? t('kpis.trial.label') : 'Trial',
         value: trial,
-        description: 'In trial period',
+        description: t.has('kpis.trial.description')
+          ? t('kpis.trial.description')
+          : 'In trial period',
         icon: CalendarDays,
         accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
         iconContainerClassName: 'bg-amber-50 text-amber-600',
       },
       {
         key: 'portal',
-        title: 'Portal Enabled',
+        title: t.has('kpis.portal.label')
+          ? t('kpis.portal.label')
+          : 'Portal Enabled',
         value: withPortal,
-        description: 'Self-service portal access',
+        description: t.has('kpis.portal.description')
+          ? t('kpis.portal.description')
+          : 'Self-service portal access',
         icon: Globe,
         accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
         iconContainerClassName: 'bg-blue-50 text-blue-600',
       },
     ];
-  }, [stats]);
+  }, [stats, t]);
 
   const accounts = enterpriseList?.data ?? [];
   const totalItems = enterpriseList?.total ?? 0;
@@ -271,11 +272,19 @@ export default function EnterprisePage() {
       value: statusFilter,
       onChange: handleStatusFilter,
       options: [
-        { value: 'all', label: 'All statuses' },
-        { value: 'active', label: 'Active' },
-        { value: 'trial', label: 'Trial' },
-        { value: 'inactive', label: 'Inactive' },
-        { value: 'suspended', label: 'Suspended' },
+        { value: 'all', label: t('filters.allStatuses') },
+        { value: 'active', label: t('status.active') },
+        {
+          value: 'trial',
+          label: t.has('status.trial') ? t('status.trial') : 'Trial',
+        },
+        { value: 'inactive', label: t('status.inactive') },
+        {
+          value: 'suspended',
+          label: t.has('status.suspended')
+            ? t('status.suspended')
+            : 'Suspended',
+        },
       ],
     },
     {
@@ -283,7 +292,15 @@ export default function EnterprisePage() {
       type: 'select',
       value: crmFilter,
       onChange: handleCrmFilter,
-      options: [{ value: 'all', label: 'All CRM accounts' }, ...crmOptions],
+      options: [
+        {
+          value: 'all',
+          label: t.has('filters.allCrmAccounts')
+            ? t('filters.allCrmAccounts')
+            : 'All CRM accounts',
+        },
+        ...crmOptions,
+      ],
       // options populated from API
     },
   ];
@@ -291,14 +308,16 @@ export default function EnterprisePage() {
   return (
     <Page>
       <PageHeader
+        title={t('title')}
+        description={t('description')}
         breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: 'LMS', href: '/lms' },
-          { label: 'Enterprise' },
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.enterprise') },
         ]}
         actions={[
           {
-            label: 'New Account',
+            label: t('actions.new'),
             onClick: handleOpenCreate,
             icon: <Plus className="h-4 w-4" />,
             variant: 'default',
@@ -314,13 +333,13 @@ export default function EnterprisePage() {
             searchQuery={search}
             onSearchChange={handleSearch}
             onSearch={() => {}}
-            placeholder="Search by name or CRM account..."
+            placeholder={t('filters.searchPlaceholder')}
             controls={controls}
           />
         </div>
         <div className="flex items-center gap-3">
           <span className="text-xs font-medium text-muted-foreground">
-            View
+            {t.has('view.label') ? t('view.label') : 'View'}
           </span>
           <ToggleGroup
             type="single"
@@ -328,15 +347,23 @@ export default function EnterprisePage() {
             onValueChange={handleViewModeChange}
             variant="outline"
             size="sm"
-            aria-label="View mode"
+            aria-label={
+              t.has('view.modeAriaLabel')
+                ? t('view.modeAriaLabel')
+                : 'View mode'
+            }
           >
             <ToggleGroupItem value="table" className="gap-1.5 px-2.5">
               <List className="h-4 w-4" />
-              <span className="hidden sm:inline">Table</span>
+              <span className="hidden sm:inline">
+                {t.has('view.table') ? t('view.table') : 'Table'}
+              </span>
             </ToggleGroupItem>
             <ToggleGroupItem value="cards" className="gap-1.5 px-2.5">
               <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">Cards</span>
+              <span className="hidden sm:inline">
+                {t.has('view.cards') ? t('view.cards') : 'Cards'}
+              </span>
             </ToggleGroupItem>
           </ToggleGroup>
         </div>
@@ -345,9 +372,9 @@ export default function EnterprisePage() {
       {accounts.length === 0 && !isLoading ? (
         <EmptyState
           icon={<Building2 className="h-10 w-10" />}
-          title="No enterprise accounts found"
-          description="Adjust your filters or create a new enterprise account."
-          actionLabel="New Account"
+          title={t('empty.title')}
+          description={t('empty.description')}
+          actionLabel={t('actions.new')}
           onAction={handleOpenCreate}
           actionIcon={<Plus className="h-4 w-4" />}
         />
@@ -356,13 +383,25 @@ export default function EnterprisePage() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>CRM Account</TableHead>
-                <TableHead className="text-center">Classes</TableHead>
-                <TableHead className="text-center">Courses</TableHead>
-                <TableHead className="text-center">Users</TableHead>
-                <TableHead>Updated</TableHead>
+                <TableHead>{t('table.name')}</TableHead>
+                <TableHead>{t('table.status')}</TableHead>
+                <TableHead>
+                  {t.has('table.crmAccount')
+                    ? t('table.crmAccount')
+                    : 'CRM Account'}
+                </TableHead>
+                <TableHead className="text-center">
+                  {t.has('table.classes') ? t('table.classes') : 'Classes'}
+                </TableHead>
+                <TableHead className="text-center">
+                  {t('table.activeCourses')}
+                </TableHead>
+                <TableHead className="text-center">
+                  {t.has('table.users') ? t('table.users') : 'Users'}
+                </TableHead>
+                <TableHead>
+                  {t.has('table.updated') ? t('table.updated') : 'Updated'}
+                </TableHead>
                 <TableHead className="w-10" />
               </TableRow>
             </TableHeader>
@@ -381,14 +420,20 @@ export default function EnterprisePage() {
                         <>
                           <span className="opacity-30">·</span>
                           <Globe className="h-3 w-3 text-primary/60" />
-                          <span className="text-primary/70">Portal</span>
+                          <span className="text-primary/70">
+                            {t.has('labels.portal')
+                              ? t('labels.portal')
+                              : 'Portal'}
+                          </span>
                         </>
                       )}
                     </p>
                   </TableCell>
                   <TableCell>
                     <Badge variant={STATUS_VARIANT[account.status]}>
-                      {STATUS_LABEL[account.status]}
+                      {t.has(`status.${account.status}`)
+                        ? t(`status.${account.status}`)
+                        : account.status}
                     </Badge>
                   </TableCell>
                   <TableCell className="text-sm text-muted-foreground">
@@ -422,14 +467,14 @@ export default function EnterprisePage() {
                           onClick={() => handleViewDetails(account)}
                         >
                           <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
-                          View details
+                          {t('actions.view')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
                           onClick={() => handleOpenEdit(account)}
                         >
                           <Pencil className="mr-2 h-4 w-4" />
-                          Edit
+                          {t('actions.edit')}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -453,7 +498,9 @@ export default function EnterprisePage() {
                   <div className="min-w-0 flex-1">
                     <div className="mb-1 flex flex-wrap items-center gap-1.5">
                       <Badge variant={STATUS_VARIANT[account.status]}>
-                        {STATUS_LABEL[account.status]}
+                        {t.has(`status.${account.status}`)
+                          ? t(`status.${account.status}`)
+                          : account.status}
                       </Badge>
                       {account.portalEnabled && (
                         <Badge
@@ -461,7 +508,9 @@ export default function EnterprisePage() {
                           className="border-blue-500/20 bg-blue-500/10 px-1.5 text-blue-600"
                         >
                           <Globe className="mr-1 h-3 w-3" />
-                          Portal
+                          {t.has('labels.portal')
+                            ? t('labels.portal')
+                            : 'Portal'}
                         </Badge>
                       )}
                     </div>
@@ -491,14 +540,14 @@ export default function EnterprisePage() {
                           onClick={() => handleViewDetails(account)}
                         >
                           <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
-                          View details
+                          {t('actions.view')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
                           onClick={() => handleOpenEdit(account)}
                         >
                           <Pencil className="mr-2 h-4 w-4" />
-                          Edit
+                          {t('actions.edit')}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -508,7 +557,9 @@ export default function EnterprisePage() {
                 {/* CRM */}
                 {account.crmAccountName && (
                   <p className="truncate text-xs text-muted-foreground">
-                    <span className="font-medium">CRM:</span>{' '}
+                    <span className="font-medium">
+                      {t.has('labels.crm') ? t('labels.crm') : 'CRM'}:
+                    </span>{' '}
                     {account.crmAccountName}
                   </p>
                 )}
@@ -521,7 +572,7 @@ export default function EnterprisePage() {
                       {account.classesCount}
                     </span>
                     <span className="text-[10px] text-muted-foreground">
-                      Classes
+                      {t.has('table.classes') ? t('table.classes') : 'Classes'}
                     </span>
                   </div>
                   <div className="flex flex-col py-2">
@@ -530,7 +581,7 @@ export default function EnterprisePage() {
                       {account.coursesCount}
                     </span>
                     <span className="text-[10px] text-muted-foreground">
-                      Courses
+                      {t('table.activeCourses')}
                     </span>
                   </div>
                   <div className="flex flex-col py-2">
@@ -539,14 +590,15 @@ export default function EnterprisePage() {
                       {account.usersCount}
                     </span>
                     <span className="text-[10px] text-muted-foreground">
-                      Users
+                      {t.has('table.users') ? t('table.users') : 'Users'}
                     </span>
                   </div>
                 </div>
 
                 {/* Footer */}
                 <p className="text-right text-[10px] text-muted-foreground/60">
-                  Updated{' '}
+                  {(t.has('labels.updated') ? t('labels.updated') : 'Updated') +
+                    ' '}
                   {formatDate(
                     account.updatedAt,
                     getSettingValue,