ui/ux on catalogue

src/features/console/sections/ShopSummary.tsx

@@ -6,7 +6,7 @@ import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
 import { Boxes, PackageSearch, Store } from 'lucide-react';
 import type { TenantInfo } from '@/api/types';
-import { count, money } from '@/features/store-admin/format';
+import { money, plural } from '@/features/store-admin/format';
 import type { BranchRow } from '../consoleModel';
 
 /**
@@ -78,8 +78,8 @@ export function ShopSummary({ row, shop, base }: ShopSummaryProps) {
         </HStack>
 
         <div className="shop-figures">
-          <Figure label="Online" value={money(row.onlineRevenue)} note={`${count(row.onlineOrders)} orders`} />
-          <Figure label="Counter" value={money(row.counterRevenue)} note={`${count(row.counterBills)} bills`} />
+          <Figure label="Online" value={money(row.onlineRevenue)} note={`${plural(row.onlineOrders, 'order')}`} />
+          <Figure label="Counter" value={money(row.counterRevenue)} note={`${plural(row.counterBills, 'bill')}`} />
           <Figure label="Total" value={money(total)} note="this period" isStrong />
         </div>
 

src/features/console/sections/StoreHealth.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { Boxes, ClipboardList, Monitor, Store } from 'lucide-react';
-import { count } from '@/features/store-admin/format';
+import { count, plural } from '@/features/store-admin/format';
 import type { BranchRow, ConsoleTotals, HealthTone } from '../consoleModel';
 
 /**
@@ -96,7 +96,7 @@ export function StoreHealth({
           detail={
             productCount === 0
               ? 'No products yet, so shoppers find the shop empty'
-              : `${count(productCount)} products`
+              : `${plural(productCount, 'product')}`
           }
           tone={productCount === 0 ? 'attention' : withoutTill > 0 ? 'attention' : 'healthy'}
           action="Manage"