Improve the frontend 2

frontend/src/pages/app/DashboardPage.tsx

@@ -177,21 +177,13 @@ const DashboardPage: React.FC = () => {
     navigate('/app/operations/procurement');
   };
 
-  // Build stats from real API data
+  // Build stats from real API data (Sales analytics removed - Professional/Enterprise tier only)
   const criticalStats = React.useMemo(() => {
     if (!dashboardStats) {
       // Return loading/empty state
       return [];
     }
 
-    // Format currency values
-    const formatCurrency = (value: number): string => {
-      return `${dashboardStats.salesCurrency}${value.toLocaleString('en-US', {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      })}`;
-    };
-
     // Determine trend direction
     const getTrendDirection = (value: number): 'up' | 'down' | 'neutral' => {
       if (value > 0) return 'up';
@@ -199,33 +191,7 @@ const DashboardPage: React.FC = () => {
       return 'neutral';
     };
 
-    // Build subtitle for sales
-    const salesChange = dashboardStats.salesToday * (dashboardStats.salesTrend / 100);
-    const salesSubtitle = salesChange > 0
-      ? `+${formatCurrency(salesChange)} ${t('dashboard:messages.more_than_yesterday', 'more than yesterday')}`
-      : salesChange < 0
-      ? `${formatCurrency(Math.abs(salesChange))} ${t('dashboard:messages.less_than_yesterday', 'less than yesterday')}`
-      : t('dashboard:messages.same_as_yesterday', 'Same as yesterday');
-
-    // Build subtitle for products
-    const productsChange = Math.round(dashboardStats.productsSoldToday * (dashboardStats.productsSoldTrend / 100));
-    const productsSubtitle = productsChange !== 0
-      ? `${productsChange > 0 ? '+' : ''}${productsChange} ${t('dashboard:messages.more_units', 'units')}`
-      : t('dashboard:messages.same_as_yesterday', 'Same as yesterday');
-
     return [
-      {
-        title: t('dashboard:stats.sales_today', 'Sales Today'),
-        value: formatCurrency(dashboardStats.salesToday),
-        icon: Euro,
-        variant: 'success' as const,
-        trend: {
-          value: Math.abs(dashboardStats.salesTrend),
-          direction: getTrendDirection(dashboardStats.salesTrend),
-          label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
-        },
-        subtitle: salesSubtitle
-      },
       {
         title: t('dashboard:stats.pending_orders', 'Pending Orders'),
         value: dashboardStats.pendingOrders.toString(),
@@ -240,18 +206,6 @@ const DashboardPage: React.FC = () => {
           ? t('dashboard:messages.require_attention', 'Require attention')
           : t('dashboard:messages.all_caught_up', 'All caught up!')
       },
-      {
-        title: t('dashboard:stats.products_sold', 'Products Sold'),
-        value: dashboardStats.productsSoldToday.toString(),
-        icon: Package,
-        variant: 'info' as const,
-        trend: dashboardStats.productsSoldTrend !== 0 ? {
-          value: Math.abs(dashboardStats.productsSoldTrend),
-          direction: getTrendDirection(dashboardStats.productsSoldTrend),
-          label: t('dashboard:trends.vs_yesterday', '% vs yesterday')
-        } : undefined,
-        subtitle: productsSubtitle
-      },
       {
         title: t('dashboard:stats.stock_alerts', 'Critical Stock'),
         value: dashboardStats.criticalStock.toString(),
@@ -406,8 +360,8 @@ const DashboardPage: React.FC = () => {
       {/* Critical Metrics using StatsGrid */}
       <div data-tour="dashboard-stats">
         {isLoadingStats ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
-            {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            {[1, 2, 3, 4].map((i) => (
               <div
                 key={i}
                 className="h-32 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg animate-pulse"
@@ -423,7 +377,7 @@ const DashboardPage: React.FC = () => {
         ) : (
           <StatsGrid
             stats={criticalStats}
-            columns={6}
+            columns={4}
             gap="lg"
             className="mb-6"
           />