Improve customer orders: own list, payment/order status, and transaction details.

Also widen order item modals, link FA product names, and polish related dashboard UI.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/BrandsPage.module.css

@@ -51,6 +51,13 @@
   box-shadow: 0 12px 28px rgba(var(--primary-rgb) / 0.45);
 }
 
+.addFab:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
 @media (max-width: 768px) {
   .fabDock {
     inset-inline-end: 20px;

apps/business/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type CSSProperties } from 'react'
 import { CalendarDays } from 'lucide-react'
 import {
   ShoppingBag,
@@ -135,6 +135,14 @@ async function loadSectionCounts(signal: AbortSignal): Promise<SectionCounts> {
   return counts
 }
 
+const REVEAL_STEP_MS = 75
+const REVEAL_HEADER_MS = 40
+const REVEAL_TILE_BASE_MS = 120
+
+function revealStyle(delayMs: number): CSSProperties {
+  return { ['--reveal-delay' as string]: `${delayMs}ms` }
+}
+
 export function HomePage() {
   const { user } = useAuth()
   const { locale } = useLocale()
@@ -170,9 +178,15 @@ export function HomePage() {
     weekday: 'long',
   }).format(new Date())
 
+  const chartRevealBase =
+    REVEAL_TILE_BASE_MS + visibleSections.length * REVEAL_STEP_MS
+
   return (
     <main className={styles.content}>
-      <div className={styles.pageHeader}>
+      <div
+        className={`${styles.pageHeader} ${styles.revealItem}`}
+        style={revealStyle(REVEAL_HEADER_MS)}
+      >
         <div>
           <h2 className={styles.welcomeTitle}>{t('home.welcome', { name: firstName })}</h2>
           <p className={styles.welcomeSubtitle}>{t('home.subtitle')}</p>
@@ -185,25 +199,39 @@ export function HomePage() {
       </div>
 
       <div className={styles.gridHome}>
-        {visibleSections.map((section) => (
-          <SectionCard
+        {visibleSections.map((section, index) => (
+          <div
             key={section.href}
-            icon={section.icon}
-            title={t(section.titleKey)}
-            description={t(section.descKey)}
-            linkText={t(section.linkKey)}
-            href={section.href}
-            className={section.wide ? styles.span4 : undefined}
-            count={section.countKey ? counts[section.countKey] : undefined}
-            countLabel={section.countLabelKey ? t(section.countLabelKey) : undefined}
-          />
+            className={[
+              styles.revealItem,
+              styles.revealItemFill,
+              section.wide ? styles.span4 : undefined,
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            style={revealStyle(REVEAL_TILE_BASE_MS + index * REVEAL_STEP_MS)}
+          >
+            <SectionCard
+              icon={section.icon}
+              title={t(section.titleKey)}
+              description={t(section.descKey)}
+              linkText={t(section.linkKey)}
+              href={section.href}
+              count={section.countKey ? counts[section.countKey] : undefined}
+              countLabel={section.countLabelKey ? t(section.countLabelKey) : undefined}
+            />
+          </div>
         ))}
       </div>
 
       {visibleCharts.length > 0 ? (
         <div className={styles.grid12}>
           {visibleCharts.map((chartId, index) => (
-            <div key={`${chartId}-${index}`} className={styles.col6}>
+            <div
+              key={`${chartId}-${index}`}
+              className={`${styles.col6} ${styles.revealItem} ${styles.revealItemFill}`}
+              style={revealStyle(chartRevealBase + index * REVEAL_STEP_MS)}
+            >
               <HomeChartSlot chartId={chartId} />
             </div>
           ))}