update sales page

src/features/commerce/components/analytics/BusinessAlerts.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+import {ICONS} from '@/shared/utils/icons';
+import {BUSINESS_ALERTS} from '../../services/commerceService';
+
+export function BusinessAlerts() {
+  return (
+    <div className="space-y-3">
+      <Heading level={4} className="text-base font-bold text-white">
+        Real-Time Business & Operational Alerts
+      </Heading>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {BUSINESS_ALERTS.map((alert) => {
+          const isCritical = alert.severity === 'critical';
+          const isWarning = alert.severity === 'warning';
+          const isSuccess = alert.severity === 'success';
+
+          const borderClass = isCritical
+            ? 'border-rose-500/30 bg-rose-500/[0.03]'
+            : isWarning
+            ? 'border-amber-500/30 bg-amber-500/[0.03]'
+            : isSuccess
+            ? 'border-emerald-500/30 bg-emerald-500/[0.03]'
+            : 'border-blue-500/30 bg-blue-500/[0.03]';
+
+          return (
+            <div
+              key={alert.id}
+              className={`rounded-xl border p-4 shadow-sm flex flex-col justify-between gap-3 ${borderClass}`}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-start gap-2.5">
+                  <Icon
+                    icon={isCritical || isWarning ? ICONS.alert : isSuccess ? ICONS.up : ICONS.info}
+                    size="sm"
+                    className={
+                      isCritical
+                        ? 'text-rose-400'
+                        : isWarning
+                        ? 'text-amber-400'
+                        : isSuccess
+                        ? 'text-emerald-400'
+                        : 'text-blue-400'
+                    }
+                  />
+                  <div>
+                    <span className="text-sm font-bold text-white block">{alert.title}</span>
+                    <Text size="sm" color="secondary" className="mt-0.5">
+                      {alert.description}
+                    </Text>
+                  </div>
+                </div>
+                <Badge
+                  variant={isCritical ? 'error' : isWarning ? 'warning' : isSuccess ? 'success' : 'info'}
+                  label={alert.type.replace('_', ' ').toUpperCase()}
+                />
+              </div>
+
+              <div className="pt-2 border-t border-white/5 flex justify-end">
+                <button
+                  type="button"
+                  className="text-xs font-bold text-white hover:text-amber-300 transition-colors flex items-center gap-1"
+                >
+                  {alert.actionText} →
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}