diff --git a/src/features/commerce/components/CommerceKpiRow.tsx b/src/features/commerce/components/CommerceKpiRow.tsx index 0e9f847..7fa93b9 100644 --- a/src/features/commerce/components/CommerceKpiRow.tsx +++ b/src/features/commerce/components/CommerceKpiRow.tsx @@ -4,40 +4,45 @@ import {Grid} from '@astryxdesign/core/Grid'; import {MetricCard} from '@/shared/components/patterns/MetricCard'; import {ICONS} from '@/shared/utils/icons'; import {formatCount, formatInrCompact, formatPct} from '@/shared/utils/format'; +import {useWorkspace} from '@/shared/providers/WorkspaceProvider'; +import {getCommerceKpis} from '../services/commerceService'; export function CommerceKpiRow() { + const {storeId, range} = useWorkspace(); + const kpis = getCommerceKpis(storeId, range); + const kpiList = [ { label: 'Total Revenue', - value: 340000, + value: kpis.revenue.rawValue, format: formatInrCompact, icon: ICONS.revenue, deltaPct: 14.2, }, { label: 'Total Orders', - value: 1284, + value: kpis.orders.rawValue, format: formatCount, icon: ICONS.purchases, deltaPct: 8.5, }, { label: 'Avg Order Value', - value: 1420, + value: kpis.aov.rawValue, format: formatInrCompact, icon: ICONS.purchases, deltaPct: 5.1, }, { label: 'Net Sales', - value: 318000, + value: kpis.netSales.rawValue, format: formatInrCompact, icon: ICONS.revenue, deltaPct: 13.9, }, { label: 'Refunds', - value: 22000, + value: kpis.refunds.rawValue, format: formatInrCompact, icon: ICONS.alert, deltaPct: -2.4, @@ -45,7 +50,7 @@ export function CommerceKpiRow() { }, { label: 'Conversion', - value: 23.8, + value: kpis.conversion.rawValue, format: (v: number) => formatPct(v, 1), icon: ICONS.conversion, deltaPct: 1.4, diff --git a/src/features/commerce/components/CommerceRevenueSummary.tsx b/src/features/commerce/components/CommerceRevenueSummary.tsx index 703152d..f67799b 100644 --- a/src/features/commerce/components/CommerceRevenueSummary.tsx +++ b/src/features/commerce/components/CommerceRevenueSummary.tsx @@ -3,8 +3,13 @@ import {Heading, Text} from '@astryxdesign/core/Text'; import {MetricCard} from '@/shared/components/patterns/MetricCard'; import {formatInrCompact} from '@/shared/utils/format'; +import {useWorkspace} from '@/shared/providers/WorkspaceProvider'; +import {getCommerceKpis} from '../services/commerceService'; export function CommerceRevenueSummary() { + const {storeId, range} = useWorkspace(); + const kpis = getCommerceKpis(storeId, range); + return (
@@ -19,26 +24,26 @@ export function CommerceRevenueSummary() {
diff --git a/src/features/commerce/components/analytics/BusinessPulsePanel.tsx b/src/features/commerce/components/analytics/BusinessPulsePanel.tsx deleted file mode 100644 index cedeea4..0000000 --- a/src/features/commerce/components/analytics/BusinessPulsePanel.tsx +++ /dev/null @@ -1,127 +0,0 @@ -'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 {COMMERCE_KPIS, PAYMENT_BREAKDOWN_DATA} from '../../services/commerceService'; - -export function BusinessPulsePanel() { - return ( -
- {/* Pulse Header */} -
-
- - - Business Pulse - - - Live telemetry stream - -
- -
- - {/* Pulse Cards */} -
- {/* Today's Revenue */} -
-
-
Today's Revenue
-
{COMMERCE_KPIS.revenue.value}
-
- - {COMMERCE_KPIS.revenue.change} - -
- - {/* Today's Orders */} -
-
-
Today's Orders
-
{COMMERCE_KPIS.orders.value}
-
- - {COMMERCE_KPIS.orders.change} - -
- - {/* Active Promotions */} -
-
- - - Active Promotions - - -
-
- Weekend Double LYT & Espresso Bundle driving +14% lift -
-
- - {/* Inventory Alerts */} -
-
- - - Inventory Alert - - -
-
- Cold Brew Pack (18 left) & Barista Mug (8 left) -
-
- - {/* Payment Split */} -
-
- Payment Method Split - UPI 58% -
-
- {PAYMENT_BREAKDOWN_DATA.map((p) => ( -
- ))} -
-
- - {/* Top Store */} -
-
Top Performing Store
-
{COMMERCE_KPIS.topStore?.value ?? 'Indiranagar Flagship'}
-
{COMMERCE_KPIS.topStore?.subtitle ?? '₹9.1L Revenue (23.8% Conv)'}
-
- - {/* Recent Transactions */} -
-
Recent Transactions
-
- {[ - {id: 't1', code: '#LYT-9842', name: 'Aarav Sharma', amount: '₹2,450', time: '2m ago'}, - {id: 't2', code: '#LYT-9841', name: 'Priya Patel', amount: '₹1,890', time: '5m ago'}, - {id: 't3', code: '#LYT-9840', name: 'Rohan Mehta', amount: '₹3,120', time: '12m ago'}, - ].map((t) => ( -
-
-
{t.code}
-
{t.name}
-
-
-
{t.amount}
-
{t.time}
-
-
- ))} -
-
-
-
- ); -} diff --git a/src/features/commerce/components/analytics/ForecastChart.tsx b/src/features/commerce/components/analytics/ForecastChart.tsx deleted file mode 100644 index ba634f7..0000000 --- a/src/features/commerce/components/analytics/ForecastChart.tsx +++ /dev/null @@ -1,38 +0,0 @@ -'use client'; - -import {Heading, Text} from '@astryxdesign/core/Text'; -import {LineChartView} from '@/shared/components/charts/LineChartView'; -import {FORECAST_TREND_DATA} from '../../services/commerceService'; - -export function ForecastChart() { - return ( -
-
-
- - Predictive Revenue & Demand Forecast - - - AI-driven 7-day revenue, demand and stock requirement projections - -
- - 96% Confidence Band - -
- -
- -
-
- ); -} diff --git a/src/features/commerce/components/analytics/HeatmapChart.tsx b/src/features/commerce/components/analytics/HeatmapChart.tsx deleted file mode 100644 index 697b3ad..0000000 --- a/src/features/commerce/components/analytics/HeatmapChart.tsx +++ /dev/null @@ -1,72 +0,0 @@ -'use client'; - -import {Heading, Text} from '@astryxdesign/core/Text'; -import {HEATMAP_DAYS, HEATMAP_HOURS} from '../../services/commerceService'; - -function getIntensityBg(day: string, hour: string): string { - if (hour === '18:00') return 'bg-emerald-500 text-black font-bold'; - if (hour === '12:00' || hour === '14:00') return 'bg-emerald-600/80 text-white font-semibold'; - if (day === 'Sat' || day === 'Sun') return 'bg-emerald-700/60 text-white font-medium'; - return 'bg-zinc-800/80 text-zinc-400'; -} - -export function HeatmapChart() { - return ( -
-
-
- - Hourly Sales & Footfall Heatmap - - - Sales volume intensity matrix mapped across days and operating hours - -
-
- Low -
- - - - -
- Peak -
-
- -
- - - - - {HEATMAP_HOURS.map((h) => ( - - ))} - - - - {HEATMAP_DAYS.map((day) => ( - - - {HEATMAP_HOURS.map((hour) => { - const styleClass = getIntensityBg(day, hour); - return ( - - ); - })} - - ))} - -
Day / Hour - {h} -
{day} -
- {hour === '18:00' ? '98%' : hour === '14:00' ? '74%' : '42%'} -
-
-
-
- ); -} diff --git a/src/features/commerce/components/analytics/OrdersChart.tsx b/src/features/commerce/components/analytics/OrdersChart.tsx index e23cac8..70e9677 100644 --- a/src/features/commerce/components/analytics/OrdersChart.tsx +++ b/src/features/commerce/components/analytics/OrdersChart.tsx @@ -2,9 +2,15 @@ import {Heading, Text} from '@astryxdesign/core/Text'; import {BarChartView} from '@/shared/components/charts/BarChartView'; -import {ORDERS_TREND_DATA} from '../../services/commerceService'; +import {useWorkspace} from '@/shared/providers/WorkspaceProvider'; +import {getOrdersTrendData} from '../../services/commerceService'; export function OrdersChart() { + const {storeId, range} = useWorkspace(); + const data = getOrdersTrendData(storeId, range); + + const totalOrders = data.reduce((acc, curr) => acc + curr.Orders, 0); + return (
@@ -17,13 +23,13 @@ export function OrdersChart() {
- 1,284 Orders Today + {totalOrders.toLocaleString()} Orders
(null); const activeItem = selectedMethod - ? PAYMENT_BREAKDOWN_DATA.find((p) => p.method === selectedMethod) + ? paymentData.find((p) => p.method === selectedMethod) : null; return ( @@ -37,7 +40,7 @@ export function PaymentBreakdown() { > All - {PAYMENT_BREAKDOWN_DATA.map((item) => ( + {paymentData.map((item) => (