324 lines
21 KiB
TypeScript
324 lines
21 KiB
TypeScript
/**
|
||
* @license
|
||
* SPDX-License-Identifier: Apache-2.0
|
||
*/
|
||
|
||
/**
|
||
* Deliveries page — replicated from the operations console (nearle_console/
|
||
* deliveries), rebuilt against the shared console UI kit (`./consoleUi`) so it
|
||
* matches the source design (gradient header, KPI cards, batch + status pill
|
||
* tabs, STATUS_META colours, metric-pill table). The board loads the day's
|
||
* deliveries once and filters client-side by delivery wave, lifecycle status, and
|
||
* keyword. Rider write-actions (reassign/cancel/notify) need the dispatch + FCM
|
||
* backends this tenant doesn't expose, so they surface an "awaiting backend" note.
|
||
*/
|
||
|
||
import React, { useMemo, useState } from 'react';
|
||
import {
|
||
Truck, Clock, CheckCircle2, XCircle, Calendar, Sun, Sunset, Moon, Layers, UserCheck, MapPin, Phone, Package, Loader2, X, Bike,
|
||
} from 'lucide-react';
|
||
import { useFiestaDeliverySummary, useFiestaDeliveries, useFiestaRiders, useFiestaOrderDetails } from '../services/fiestaQueries';
|
||
import { FIESTA_TENANT_ID, num as fnum, str as fstr, ymd, type Row } from '../services/fiestaApi';
|
||
import { shortTime } from '../services/fiestaMappers';
|
||
import AwaitingApi from './AwaitingApi';
|
||
import {
|
||
GradientHeader, LiveStatus, KpiStrip, Pill, StatusChip, MetricPill, SearchPill, FilterBar, TH_STYLE,
|
||
DELIVERY_STATUS, statusColor, BRAND, BRAND_LIGHT, TEXT, TEXT_2, TEXT_3, BORDER, DIVIDER, SURFACE_ALT, tint, soft, edge,
|
||
} from './consoleUi';
|
||
|
||
interface DeliveriesViewProps { searchQuery?: string; locationid?: number; }
|
||
|
||
type DeliveryStatus = 'pending' | 'accepted' | 'arrived' | 'picked' | 'active' | 'skipped' | 'delivered' | 'cancelled';
|
||
const STATUS_TABS: Array<{ key: DeliveryStatus; label: string }> = [
|
||
{ key: 'pending', label: 'Pending' }, { key: 'accepted', label: 'Accepted' }, { key: 'arrived', label: 'Arrived' },
|
||
{ key: 'picked', label: 'Picked' }, { key: 'active', label: 'Active' }, { key: 'skipped', label: 'Skipped' },
|
||
{ key: 'delivered', label: 'Delivered' }, { key: 'cancelled', label: 'Cancelled' },
|
||
];
|
||
|
||
// Batch waves — canonical half-open hour ranges (match Dispatch).
|
||
type BatchId = 'all' | 'morning' | 'afternoon' | 'evening';
|
||
const BATCHES: Array<{ id: BatchId; label: string; range: string; color: string; icon: typeof Sun }> = [
|
||
{ id: 'all', label: 'All', range: 'Full day', color: '#7c3aed', icon: Layers },
|
||
{ id: 'morning', label: 'Morning', range: '12 AM – 8 AM', color: '#0ea5e9', icon: Sun },
|
||
{ id: 'afternoon', label: 'Afternoon', range: '9 AM – 12:30 PM', color: '#f59e0b', icon: Sunset },
|
||
{ id: 'evening', label: 'Evening', range: '4 PM – 7 PM', color: '#6366f1', icon: Moon },
|
||
];
|
||
function rowHourFrac(r: Row): number | null {
|
||
const m = (fstr(r.assigntime) || fstr(r.deliverytime) || fstr(r.deliverydate)).match(/[ T](\d{1,2}):(\d{2})/);
|
||
return m ? Number(m[1]) + Number(m[2]) / 60 : null;
|
||
}
|
||
function inBatch(r: Row, b: BatchId): boolean {
|
||
if (b === 'all') return true;
|
||
const h = rowHourFrac(r);
|
||
if (h == null) return false;
|
||
if (b === 'morning') return h >= 0 && h < 8;
|
||
if (b === 'afternoon') return h >= 9 && h < 12.5;
|
||
return h >= 16 && h < 19;
|
||
}
|
||
function initialBatch(): BatchId {
|
||
const h = new Date().getHours();
|
||
if (h >= 0 && h < 8) return 'morning';
|
||
if (h >= 9 && h < 12.5) return 'afternoon';
|
||
if (h >= 16 && h < 19) return 'evening';
|
||
return 'all';
|
||
}
|
||
|
||
export default function DeliveriesView({ searchQuery = '', locationid }: DeliveriesViewProps) {
|
||
const today = new Date();
|
||
const [fromdate, setFromdate] = useState<string>(ymd(today));
|
||
const [todate, setTodate] = useState<string>(ymd(today));
|
||
const dayOffset = (n: number) => { const d = new Date(); d.setDate(d.getDate() - n); return ymd(d); };
|
||
const presets = [
|
||
{ key: 'today', label: 'Today', from: ymd(today), to: ymd(today) },
|
||
{ key: 'yesterday', label: 'Yesterday', from: dayOffset(1), to: dayOffset(1) },
|
||
{ key: '7d', label: 'Last 7 Days', from: dayOffset(6), to: ymd(today) },
|
||
];
|
||
const activePreset = presets.find((p) => p.from === fromdate && p.to === todate)?.key ?? 'custom';
|
||
|
||
const [batch, setBatch] = useState<BatchId>(initialBatch());
|
||
const [status, setStatus] = useState<DeliveryStatus>('pending');
|
||
const [localSearch, setLocalSearch] = useState('');
|
||
const [detailRow, setDetailRow] = useState<Row | null>(null);
|
||
|
||
const summaryQ = useFiestaDeliverySummary({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
|
||
const deliveriesQ = useFiestaDeliveries({ tenantid: FIESTA_TENANT_ID, fromdate, todate });
|
||
const ridersQ = useFiestaRiders({ tenantid: FIESTA_TENANT_ID });
|
||
|
||
const allRows = deliveriesQ.data ?? [];
|
||
const summary = summaryQ.data;
|
||
|
||
const batchRows = useMemo(() => allRows.filter((r) => (!locationid || fnum(r.locationid) === locationid) && inBatch(r, batch)), [allRows, batch, locationid]);
|
||
const statusCounts = useMemo(() => {
|
||
const acc: Record<string, number> = {};
|
||
for (const r of batchRows) { const s = fstr(r.orderstatus).toLowerCase(); acc[s] = (acc[s] ?? 0) + 1; }
|
||
return acc;
|
||
}, [batchRows]);
|
||
const rows = useMemo(() => {
|
||
const term = (localSearch || searchQuery).toLowerCase();
|
||
return batchRows.filter((r) => {
|
||
if (fstr(r.orderstatus).toLowerCase() !== status) return false;
|
||
if (!term) return true;
|
||
return [r.orderid, r.deliverycustomer, r.deliveryaddress, r.deliverysuburb, r.pickupcustomer, r.ridername, r.username].some((f) => fstr(f).toLowerCase().includes(term));
|
||
});
|
||
}, [batchRows, status, localSearch, searchQuery]);
|
||
|
||
const activeFleet = (ridersQ.data ?? []).filter((r) => fstr(r.starttime)).length;
|
||
const total = summary?.total ?? 0;
|
||
const pct = (n: number) => (total > 0 ? `${Math.round((n / total) * 100)}% of total` : 'In range');
|
||
const kpis = [
|
||
{ label: 'Total Deliveries', value: total.toLocaleString('en-IN'), color: '#6366f1', icon: <Truck size={20} />, badge: undefined },
|
||
{ label: 'Pending', value: (summary?.pending ?? 0).toLocaleString('en-IN'), color: '#f59e0b', icon: <Clock size={20} />, badge: pct(summary?.pending ?? 0) },
|
||
{ label: 'Delivered', value: (summary?.delivered ?? 0).toLocaleString('en-IN'), color: '#10b981', icon: <CheckCircle2 size={20} />, badge: pct(summary?.delivered ?? 0) },
|
||
{ label: 'Cancelled', value: (summary?.cancelled ?? 0).toLocaleString('en-IN'), color: '#ef4444', icon: <XCircle size={20} />, badge: pct(summary?.cancelled ?? 0) },
|
||
];
|
||
|
||
return (
|
||
<div className="animate-in fade-in duration-300">
|
||
<GradientHeader
|
||
title="Deliveries"
|
||
subtitle="Dispatch board for in-transit orders — tracked across the rider lifecycle and grouped into delivery waves."
|
||
status={
|
||
deliveriesQ.isLoading ? <LiveStatus state="loading" label="Loading live deliveries…" />
|
||
: deliveriesQ.isError ? <LiveStatus state="error" label="Live data unavailable" />
|
||
: <LiveStatus state="live" label={`Live · ${batchRows.length} in this wave · ${activeFleet} riders on duty`} />
|
||
}
|
||
right={
|
||
<span className="inline-flex items-center gap-1.5 rounded-full font-extrabold" style={{ padding: '6px 12px', fontSize: 12, background: tint(BRAND), border: `1.5px solid ${edge(BRAND)}`, color: BRAND }}>
|
||
<MapPin size={13} /> Coimbatore
|
||
</span>
|
||
}
|
||
/>
|
||
|
||
<div className="mb-4"><KpiStrip items={kpis} loading={summaryQ.isLoading} /></div>
|
||
|
||
{/* Date + waves */}
|
||
<FilterBar className="mb-4">
|
||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="inline-flex items-center gap-1.5 text-[10px] font-extrabold uppercase tracking-widest pr-1" style={{ color: TEXT_2 }}><Calendar size={13} style={{ color: BRAND }} /> View</span>
|
||
{presets.map((p) => (
|
||
<React.Fragment key={p.key}><Pill active={activePreset === p.key} color={BRAND} onClick={() => { setFromdate(p.from); setTodate(p.to); }}>{p.label}</Pill></React.Fragment>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center gap-2 text-xs">
|
||
<input type="date" value={fromdate} max={todate} onChange={(e) => setFromdate(e.target.value)} className="rounded-full outline-none font-semibold" style={{ padding: '6px 12px', border: `1.5px solid ${edge('#f59e0b')}`, background: tint('#f59e0b'), color: '#b45309' }} />
|
||
<span style={{ color: TEXT_3 }}>→</span>
|
||
<input type="date" value={todate} min={fromdate} max={ymd(today)} onChange={(e) => setTodate(e.target.value)} className="rounded-full outline-none font-semibold" style={{ padding: '6px 12px', border: `1.5px solid ${edge('#f59e0b')}`, background: tint('#f59e0b'), color: '#b45309' }} />
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 flex-wrap pt-3 mt-3 border-t" style={{ borderColor: DIVIDER }}>
|
||
<span className="text-[10px] font-extrabold uppercase tracking-widest pr-1" style={{ color: TEXT_2 }}>Wave</span>
|
||
{BATCHES.map((b) => {
|
||
const Icon = b.icon;
|
||
const count = allRows.filter((r) => (!locationid || fnum(r.locationid) === locationid) && inBatch(r, b.id)).length;
|
||
return (
|
||
<React.Fragment key={b.id}>
|
||
<Pill active={batch === b.id} color={b.color} onClick={() => setBatch(b.id)} title={b.range} count={count}><Icon size={13} /> {b.label}</Pill>
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</div>
|
||
</FilterBar>
|
||
|
||
{/* Status tabs + search */}
|
||
<FilterBar className="mb-4">
|
||
<div className="flex flex-col lg:flex-row lg:items-center gap-3">
|
||
<div className="flex items-center gap-2 overflow-x-auto py-0.5 flex-1 min-w-0">
|
||
{STATUS_TABS.map((t) => {
|
||
const color = statusColor(DELIVERY_STATUS, t.key);
|
||
return (
|
||
<React.Fragment key={t.key}>
|
||
<Pill active={status === t.key} color={color} onClick={() => setStatus(t.key)} count={statusCounts[t.key] ?? 0}>{t.label}</Pill>
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="w-full lg:w-72 lg:shrink-0"><SearchPill value={localSearch} onChange={setLocalSearch} placeholder="Search by order, rider…" color="#6366f1" /></div>
|
||
</div>
|
||
</FilterBar>
|
||
|
||
{/* Table */}
|
||
<div className="bg-white border rounded-2xl overflow-hidden" style={{ borderColor: BORDER }}>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full" style={{ minWidth: 1040 }}>
|
||
<thead>
|
||
<tr>{['#', 'Status', 'Order', 'Drop', 'Rider', 'ETA', 'KMs', 'Amount', ''].map((h, i) => (<th key={i} className="px-3 py-2.5 text-left" style={TH_STYLE}>{h}</th>))}</tr>
|
||
</thead>
|
||
<tbody>
|
||
{deliveriesQ.isLoading ? (
|
||
<tr><td colSpan={9} className="px-3 py-12 text-center" style={{ color: TEXT_3 }}><span className="inline-flex items-center gap-2 text-xs font-semibold"><Loader2 size={15} className="animate-spin" style={{ color: BRAND }} /> Loading deliveries…</span></td></tr>
|
||
) : rows.length === 0 ? (
|
||
<tr><td colSpan={9} className="px-3 py-12 text-center text-xs" style={{ color: TEXT_3 }}>No {status} deliveries in this wave. Try another status, wave, or date.</td></tr>
|
||
) : (
|
||
rows.map((r, i) => {
|
||
const st = fstr(r.orderstatus).toLowerCase();
|
||
const rider = fstr(r.ridername) || fstr(r.username);
|
||
const kms = fnum(r.kms); const actualKms = fnum(r.cumulativekms);
|
||
const charge = fnum(r.deliverycharges); const amt = fnum(r.deliveryamt);
|
||
return (
|
||
<tr key={fstr(r.deliveryid) || fstr(r.orderid) || i} className="transition-colors align-top" style={{ borderBottom: `1px solid ${DIVIDER}` }}
|
||
onMouseEnter={(e) => (e.currentTarget.style.background = SURFACE_ALT)} onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
|
||
<td className="px-3 py-2.5 font-mono" style={{ color: TEXT_3 }}>{i + 1}</td>
|
||
<td className="px-3 py-2.5"><StatusChip label={st || '—'} color={statusColor(DELIVERY_STATUS, st)} /></td>
|
||
<td className="px-3 py-2.5">
|
||
<p className="font-extrabold font-mono text-[13px]" style={{ color: TEXT }}>{fstr(r.orderid) || `DLV-${fstr(r.deliveryid)}`}</p>
|
||
<p className="text-[10px]" style={{ color: TEXT_2 }}>{shortTime(r.assigntime || r.deliverydate)}</p>
|
||
</td>
|
||
<td className="px-3 py-2.5">
|
||
<p className="font-bold text-[12px] truncate max-w-[160px]" style={{ color: TEXT }}>{fstr(r.deliverycustomer) || '—'}</p>
|
||
<p className="text-[10px] truncate max-w-[160px]" style={{ color: TEXT_2 }}>{fstr(r.deliverysuburb) || fstr(r.deliveryaddress)}</p>
|
||
</td>
|
||
<td className="px-3 py-2.5">
|
||
{rider ? (
|
||
<span className="inline-flex items-center gap-2">
|
||
<span className="rounded-full flex items-center justify-center shrink-0" style={{ width: 26, height: 26, background: soft('#8b5cf6'), color: '#8b5cf6' }}><Bike size={13} /></span>
|
||
<span className="font-bold text-[12px] truncate max-w-[100px]" style={{ color: TEXT }}>{rider}</span>
|
||
</span>
|
||
) : <span className="text-[11px] italic" style={{ color: TEXT_3 }}>Unassigned</span>}
|
||
</td>
|
||
<td className="px-3 py-2.5"><MetricPill color="#06b6d4">{shortTime(r.expecteddeliverytime) || '—'}</MetricPill></td>
|
||
<td className="px-3 py-2.5">
|
||
<div className="flex flex-col items-start gap-1">
|
||
<MetricPill color="#ef4444" minWidth={64}>{kms ? kms.toFixed(1) : '—'}</MetricPill>
|
||
{actualKms > 0 && <MetricPill color="#10b981" minWidth={64}>{actualKms.toFixed(1)}</MetricPill>}
|
||
</div>
|
||
</td>
|
||
<td className="px-3 py-2.5">
|
||
<div className="flex flex-col items-start gap-1">
|
||
{charge > 0 && <MetricPill color="#ef4444" minWidth={72}>₹{charge.toLocaleString('en-IN')}</MetricPill>}
|
||
{amt > 0 && <MetricPill color="#10b981" minWidth={72}>₹{amt.toLocaleString('en-IN')}</MetricPill>}
|
||
{charge === 0 && amt === 0 && <span style={{ color: TEXT_3 }}>—</span>}
|
||
</div>
|
||
</td>
|
||
<td className="px-3 py-2.5 text-right">
|
||
<button onClick={() => setDetailRow(r)} className="rounded-full font-extrabold cursor-pointer" style={{ padding: '4px 12px', fontSize: 11, color: BRAND, background: tint(BRAND), border: `1px solid ${edge(BRAND)}` }}>View</button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="px-4 py-2.5 border-t text-[10px] font-bold uppercase tracking-wider" style={{ borderColor: BORDER, background: SURFACE_ALT, color: TEXT_2 }}>
|
||
{rows.length} {status} · {BATCHES.find((b) => b.id === batch)?.label} wave
|
||
</div>
|
||
</div>
|
||
|
||
{detailRow && <DeliveryDetailModal row={detailRow} onClose={() => setDetailRow(null)} />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Delivery details modal ──────────────────────────────────────────────────────
|
||
function DeliveryDetailModal({ row, onClose }: { row: Row; onClose: () => void }) {
|
||
const orderheaderid = row.orderheaderid ?? row.orderid;
|
||
const detailsQ = useFiestaOrderDetails(orderheaderid as number | string);
|
||
const lines = (detailsQ.data ?? []).map((d) => {
|
||
const quantity = fnum(d.quantity) || fnum(d.qty) || fnum(d.orderqty);
|
||
const price = fnum(d.price) || fnum(d.unitprice) || fnum(d.retailprice);
|
||
return { name: fstr(d.productname) || fstr(d.itemname) || 'Item', quantity, price, lineTotal: fnum(d.amount) || fnum(d.productsumprice) || price * quantity };
|
||
});
|
||
const st = fstr(row.orderstatus).toLowerCase();
|
||
const rider = fstr(row.ridername) || fstr(row.username);
|
||
const steps = [
|
||
{ label: 'Assigned', field: 'assigntime' }, { label: 'Accepted', field: 'acceptedtime' }, { label: 'Arrived', field: 'arrivaltime' },
|
||
{ label: 'Picked', field: 'pickuptime' }, { label: 'Delivered', field: 'deliverytime' },
|
||
];
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4" style={{ background: 'rgba(15,23,42,0.4)', backdropFilter: 'blur(4px)' }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
|
||
<div className="bg-white w-full max-w-lg max-h-[90vh] flex flex-col overflow-hidden rounded-2xl animate-in zoom-in-95 duration-200" style={{ border: `1px solid ${BORDER}`, boxShadow: '0 18px 50px rgba(15,23,42,0.18)' }}>
|
||
<div style={{ height: 4, background: `linear-gradient(90deg, #6366f1 0%, ${soft('#6366f1')} 100%)` }} />
|
||
<div className="p-4 border-b flex justify-between items-center shrink-0" style={{ borderColor: BORDER, background: SURFACE_ALT }}>
|
||
<h4 className="font-extrabold flex items-center gap-2" style={{ color: TEXT }}><Truck size={16} style={{ color: '#6366f1' }} /> {fstr(row.orderid) || `Delivery ${fstr(row.deliveryid)}`}</h4>
|
||
<button onClick={onClose} className="p-1 rounded-full cursor-pointer" style={{ color: TEXT_3 }}><X size={16} /></button>
|
||
</div>
|
||
<div className="p-4 space-y-4 overflow-y-auto flex-1">
|
||
<div className="flex items-center justify-between">
|
||
<StatusChip label={st || '—'} color={statusColor(DELIVERY_STATUS, st)} />
|
||
<span className="inline-flex items-center gap-1.5 text-[11px] font-medium" style={{ color: TEXT_2 }}><UserCheck size={12} /> {rider || 'Unassigned'}</span>
|
||
</div>
|
||
<div className="p-3 rounded-xl space-y-1.5" style={{ background: SURFACE_ALT, border: `1px solid ${BORDER}` }}>
|
||
<div className="font-bold" style={{ color: TEXT }}>{fstr(row.deliverycustomer) || 'Customer'}</div>
|
||
{fstr(row.deliverycontactno) && <div className="flex items-center gap-2 font-mono text-xs" style={{ color: TEXT_2 }}><Phone size={12} /> {fstr(row.deliverycontactno)}</div>}
|
||
<div className="flex items-start gap-2 text-xs" style={{ color: TEXT_2 }}><MapPin size={12} className="mt-0.5 shrink-0" /> <span className="leading-relaxed">{fstr(row.deliveryaddress) || fstr(row.deliverysuburb) || 'Address unavailable'}</span></div>
|
||
</div>
|
||
<div>
|
||
<span className="text-[10px] font-extrabold uppercase tracking-wide block mb-2" style={{ color: TEXT_2 }}>Delivery Timeline</span>
|
||
<div className="space-y-2.5 pl-1">
|
||
{steps.map((s) => {
|
||
const ts = fstr(row[s.field]); const done = Boolean(ts);
|
||
return (
|
||
<div key={s.field} className="flex items-center gap-2.5">
|
||
<CheckCircle2 size={13} style={{ color: done ? '#10b981' : '#cbd5e1' }} />
|
||
<span className="font-semibold text-xs" style={{ color: done ? TEXT : TEXT_3 }}>{s.label}</span>
|
||
<span className="ml-auto text-[10px] font-mono" style={{ color: TEXT_3 }}>{done ? shortTime(ts) : '—'}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span className="text-[10px] font-extrabold uppercase tracking-wide mb-2 flex items-center gap-1.5" style={{ color: TEXT_2 }}><Package size={12} /> Items</span>
|
||
<div className="rounded-xl p-3" style={{ background: 'rgba(248,250,252,0.6)', border: `1px solid ${BORDER}` }}>
|
||
{detailsQ.isLoading && <div className="py-2 flex items-center gap-1.5 text-[11px] font-medium" style={{ color: TEXT_3 }}><Loader2 size={12} className="animate-spin" /> Loading items…</div>}
|
||
{!detailsQ.isLoading && lines.length === 0 && <div className="py-2 text-[11px] font-medium" style={{ color: TEXT_3 }}>No line items returned.</div>}
|
||
{lines.map((item, idx) => (
|
||
<div key={idx} className="py-2 flex justify-between items-center" style={{ borderTop: idx ? `1px solid ${DIVIDER}` : undefined }}>
|
||
<div><p className="font-bold text-xs" style={{ color: TEXT }}>{item.name}</p><p className="text-[10px]" style={{ color: TEXT_2 }}>Qty: {item.quantity} × ₹{item.price}</p></div>
|
||
<span className="font-extrabold font-mono text-xs" style={{ color: TEXT }}>₹{item.lineTotal.toLocaleString('en-IN')}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<AwaitingApi label="Reassign · Cancel · Notify rider" api="dispatch backend" compact />
|
||
</div>
|
||
<div className="p-3 border-t flex justify-end shrink-0" style={{ borderColor: BORDER, background: SURFACE_ALT }}>
|
||
<button onClick={onClose} className="rounded-full font-bold cursor-pointer text-white" style={{ padding: '8px 16px', background: `linear-gradient(135deg, ${BRAND}, ${BRAND_LIGHT})` }}>Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|