console update

This commit is contained in:
2026-08-03 15:36:34 +05:30
parent 8deaf8513b
commit 13db63e219
10 changed files with 395 additions and 254 deletions

View File

@@ -8,8 +8,8 @@ import { Route, ShoppingBag, Truck, MapPin, Calendar, ChevronLeft, ChevronRight,
import DispatchView from './DispatchView';
import OrdersView from './OrdersView';
import DeliveriesView from './DeliveriesView';
import { useFiestaDeliveries } from '../services/fiestaQueries';
import { FIESTA_TENANT_ID, ymd, num as fnum } from '../services/fiestaApi';
import { useFiestaDeliveries, useFiestaTenantLocations } from '../services/fiestaQueries';
import { FIESTA_TENANT_ID, ymd, num as fnum, str as fstr } from '../services/fiestaApi';
import type { Row } from '../services/fiestaApi';
import './DispatchView.css'; // For #hdr and date-chip styles
@@ -34,6 +34,26 @@ export default function DispatchHubView({ locationid, tenantId = FIESTA_TENANT_I
const rows = useMemo(() => allRows.filter(inScope), [allRows, locationid]);
const totalOrders = rows.length;
// Operating area for the header pill. This was the hardcoded string
// "Coimbatore", shown to every tenant on the platform regardless of where they
// actually trade. The locations query is already cached by DispatchView (same
// key), so reading it here costs no extra request.
const locationsQ = useFiestaTenantLocations(tenantId);
const scopeLabel = useMemo(() => {
const locs = locationsQ.data ?? [];
if (locs.length === 0) return '';
if (locationid) {
// Store user — name the outlet's own city.
const mine = locs.find((l) => fnum(l.locationid) === locationid);
return fstr(mine?.city).trim() || fstr(mine?.state).trim();
}
// Admin — one city if the whole tenant sits in one, otherwise a count.
const cities = [...new Set(locs.map((l) => fstr(l.city).trim()).filter(Boolean))];
if (cities.length === 1) return cities[0];
if (cities.length > 1) return `${cities.length} cities`;
return '';
}, [locationsQ.data, locationid]);
const isToday = date === ymd(today);
const dateObj = new Date(`${date}T00:00:00`);
const prettyDate = `${WEEKDAYS[dateObj.getDay()]}, ${dateObj.getDate()} ${MONTHS[dateObj.getMonth()]}`;
@@ -53,12 +73,14 @@ export default function DispatchHubView({ locationid, tenantId = FIESTA_TENANT_I
<div className="flex items-center gap-2 sm:gap-3">
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center font-extrabold text-xs sm:text-sm text-white shadow-sm">C</div>
<div className="text-base sm:text-lg font-extrabold text-slate-800 tracking-tight">Console</div>
<div className="relative inline-block ml-1">
<span className="flex items-center gap-1 px-2 sm:px-2.5 py-0.5 sm:py-1 bg-purple-50 text-purple-700 border border-purple-200/60 rounded-full text-[10px] sm:text-[11px] font-bold cursor-default shadow-sm">
<MapPin size={12} className="text-purple-500" />
<span className="max-w-[120px] sm:max-w-[180px] truncate">Coimbatore</span>
</span>
</div>
{scopeLabel && (
<div className="relative inline-block ml-1">
<span className="flex items-center gap-1 px-2 sm:px-2.5 py-0.5 sm:py-1 bg-purple-50 text-purple-700 border border-purple-200/60 rounded-full text-[10px] sm:text-[11px] font-bold cursor-default shadow-sm">
<MapPin size={12} className="text-purple-500" />
<span className="max-w-[120px] sm:max-w-[180px] truncate">{scopeLabel}</span>
</span>
</div>
)}
</div>
</div>
@@ -77,7 +99,7 @@ export default function DispatchHubView({ locationid, tenantId = FIESTA_TENANT_I
</span>
) : (
<span className="flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs font-semibold text-emerald-600 bg-emerald-50 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full border border-emerald-100">
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" /> Live · {totalOrders} orders
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" /> Live · {totalOrders} {totalOrders === 1 ? 'delivery' : 'deliveries'}
</span>
)}
@@ -140,7 +162,9 @@ export default function DispatchHubView({ locationid, tenantId = FIESTA_TENANT_I
</button>
</div>
{/* Sub-tabs for Map View */}
{/* Sub-tabs for Map View — only meaningful on the Map tab; they used to
stay visible (and inert) on Orders and Deliveries. */}
{activeTab === 'map' && (
<div className="flex items-center p-1 ml-3 sm:ml-4 bg-slate-100/80 rounded-lg border border-slate-200/80 shadow-inner shrink-0">
<button
onClick={() => setMapViewMode('stores')}
@@ -160,6 +184,7 @@ export default function DispatchHubView({ locationid, tenantId = FIESTA_TENANT_I
<Users size={13} className={mapViewMode === 'customers' ? 'text-blue-500' : 'text-slate-400'} /> By Customer
</button>
</div>
)}
</div>
</div>