diff --git a/src/components/reusable/AnalyticsChart.tsx b/src/components/reusable/AnalyticsChart.tsx index ef5ab64..d7e43ac 100644 --- a/src/components/reusable/AnalyticsChart.tsx +++ b/src/components/reusable/AnalyticsChart.tsx @@ -31,16 +31,23 @@ export interface ChartConfig { export interface AnalyticsChartProps { data?: unknown[]; + gridCols?: number; } -export function AnalyticsChart({ data }: AnalyticsChartProps) { +export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) { if (!data || !Array.isArray(data) || data.length === 0) return null; const charts = data as ChartConfig[]; const colors = ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#14B8A6']; + const gridClass = gridCols === 1 + ? "grid grid-cols-1 gap-6 w-full" + : gridCols === 2 + ? "grid grid-cols-1 lg:grid-cols-2 gap-6 w-full" + : "grid grid-cols-1 lg:grid-cols-3 gap-6 w-full"; + return ( -
+
{charts.map((chart, idx) => { const title = (chart.key || `Chart ${idx + 1}`) .replace(/_/g, ' ') diff --git a/src/components/rv/DailyLogsView.tsx b/src/components/rv/DailyLogsView.tsx index c8aa516..d63d4b0 100644 --- a/src/components/rv/DailyLogsView.tsx +++ b/src/components/rv/DailyLogsView.tsx @@ -4,7 +4,7 @@ import { RecordView } from './RecordView'; import type { WiredRecordViewProps } from './OrdersView'; /** Daily Logs record view (Daily Reports workflow). */ -export function DailyLogsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey, presetAlias }: WiredRecordViewProps) { +export function DailyLogsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey, presetAlias, mapComponent }: WiredRecordViewProps) { return ( ); } diff --git a/src/components/rv/OrdersView.tsx b/src/components/rv/OrdersView.tsx index a276d57..5ae687e 100644 --- a/src/components/rv/OrdersView.tsx +++ b/src/components/rv/OrdersView.tsx @@ -10,6 +10,7 @@ export interface WiredRecordViewProps { refreshKey?: number; initialFilters?: Record; presetAlias?: string; + mapComponent?: React.ReactNode; } /** Orders record view (Order Booking workflow). */ diff --git a/src/components/rv/RecordView.tsx b/src/components/rv/RecordView.tsx index e3f50a3..1f1ec56 100644 --- a/src/components/rv/RecordView.tsx +++ b/src/components/rv/RecordView.tsx @@ -43,6 +43,8 @@ export interface RecordViewProps { initialFilters?: Record; /** Custom preset alias to send with the request (e.g. preset_alias: my_orders) */ presetAlias?: string; + /** Component to render next to charts (e.g., a map) */ + mapComponent?: React.ReactNode; } /** @@ -66,6 +68,7 @@ export function RecordView({ omitColumns, initialFilters = {}, presetAlias, + mapComponent, }: RecordViewProps) { const [internalPageSize, setInternalPageSize] = useState(pageSize); const [page, setPage] = useState(1); @@ -150,12 +153,26 @@ export function RecordView({ const tileValues = resp?.tile_values; const chartData = resp?.chart_data; + const hasChart = chartData && Array.isArray(chartData) && chartData.length > 0; return (
- + {(hasChart || mapComponent) ? ( +
+ {hasChart && ( +
+ +
+ )} + {mapComponent && ( +
+ {mapComponent} +
+ )} +
+ ) : null} ); } diff --git a/src/screens/DailyLogsPage.tsx b/src/screens/DailyLogsPage.tsx index dd32a8e..b27e8f9 100644 --- a/src/screens/DailyLogsPage.tsx +++ b/src/screens/DailyLogsPage.tsx @@ -4,7 +4,7 @@ import { DailyLogsView } from '../components/rv'; import { DailyLogDetail } from '../components/dv'; import { useState } from 'react'; import { Button } from '../components/buttons/Button'; -import { Plus } from 'lucide-react'; +import { Plus, MapPin } from 'lucide-react'; import { DynamicForm } from '../components/forms/DynamicForm'; import { DAILY_REPORTS } from '../api/config'; import { dailyReportsClient } from '../api/clients'; @@ -19,10 +19,31 @@ export function DailyLogsPage() { const [punchOutTitle, setPunchOutTitle] = useState('Punch Out'); const [refreshKey, setRefreshKey] = useState(0); + const mapComponent = ( +
+
+ +

Activity Locations

+
+
+ +
+
+ ); + return ( <> {instanceId == null && ( { diff --git a/src/screens/StoresPage.tsx b/src/screens/StoresPage.tsx index e16d6ca..ca04b05 100644 --- a/src/screens/StoresPage.tsx +++ b/src/screens/StoresPage.tsx @@ -1,9 +1,9 @@ -import { useState } from 'react'; +import { useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { StoresView } from '../components/rv'; import { StoreDetail } from '../components/dv'; import { Button } from '../components/buttons/Button'; -import { Plus } from 'lucide-react'; +import { Plus, MapPin } from 'lucide-react'; import { DynamicForm } from '../components/forms/DynamicForm'; import { STORE } from '../api/config'; import { storeClient } from '../api/clients'; @@ -55,9 +55,30 @@ export function StoresPage() { ); } + const mapComponent = ( +
+
+ +

Location Spread

+
+
+ +
+
+ ); + return ( <> { const id = row.instance_id as number | string | undefined;