updates on the ui changes
This commit is contained in:
@@ -1,12 +1,11 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import { Ban, Bell, Bike, FileSpreadsheet, PackageSearch, Truck } from 'lucide-react';
|
||||
import { Ban, Bell, Bike, Clock, FileSpreadsheet, PackageSearch, Truck } from 'lucide-react';
|
||||
import {
|
||||
Alert, Button, DataTable, DatePicker, Drawer, EmptyState, Field, IconButton,
|
||||
PageHeader, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Modal,
|
||||
PageHeader, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Modal,
|
||||
Stack, StatusBadge, Surface, Tabs, Textarea, ZoneSelector,
|
||||
} from '@/components/ds';
|
||||
import { ListToolbar } from '@/components/doormile/ListToolbar';
|
||||
import {
|
||||
useBooking, useCancelDelivery, useChangeDeliveryRider, useDeliveries,
|
||||
useDeliveryCounts, useNotifyMiler, useRiderOptions, useTenants,
|
||||
@@ -390,30 +389,24 @@ export default function Deliveries() {
|
||||
|
||||
return (
|
||||
<Stack space="lg">
|
||||
<PageHeader
|
||||
actions={
|
||||
<DatePicker
|
||||
value={selectedDate}
|
||||
onChange={(d) => {
|
||||
if (d) {
|
||||
const s = dayjs(d).format('YYYY-MM-DD');
|
||||
setDateParams({ from: s, to: s });
|
||||
setSelectedDate(s);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack space="sm">
|
||||
<Tabs tabs={tabs} value={tab} onChange={setTab} />
|
||||
{/* Row 1: Tabs on left, DatePicker & Export on right */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 w-full">
|
||||
<div className="no-scrollbar -mx-1 max-w-full min-w-0 overflow-x-auto px-1 py-0.5">
|
||||
<Tabs tabs={tabs} value={tab} onChange={setTab} className="shrink-0" />
|
||||
</div>
|
||||
|
||||
<ListToolbar
|
||||
search={search}
|
||||
onSearchChange={setSearch}
|
||||
placeholder="Search by order, client, miler, customer or address"
|
||||
count={{ shown: rows.length, total: batchRows.length, noun: 'deliveries' }}
|
||||
actions={
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<DatePicker
|
||||
value={selectedDate}
|
||||
onChange={(d) => {
|
||||
if (d) {
|
||||
const s = dayjs(d).format('YYYY-MM-DD');
|
||||
setDateParams({ from: s, to: s });
|
||||
setSelectedDate(s);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => exportRows(rows, exportColumns, `deliveries-${tab}-${dateParams.from || 'all'}`)}
|
||||
@@ -421,50 +414,97 @@ export default function Deliveries() {
|
||||
>
|
||||
<FileSpreadsheet className="mr-1.5 h-4 w-4" /> Export
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<ZoneSelector className="w-full sm:w-auto" />
|
||||
<Select value={batch} onValueChange={setBatch}>
|
||||
<SelectTrigger className="w-full sm:w-52">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BATCH_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.id} value={option.id}>
|
||||
{option.label} · {option.range}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Select value={tenantId} onValueChange={setTenantId}>
|
||||
<SelectTrigger className="w-full sm:w-48">
|
||||
<SelectValue placeholder="All clients" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ALL}>All clients</SelectItem>
|
||||
{(tenants || []).map((tenant) => (
|
||||
<SelectItem key={tenant.tenantid} value={String(tenant.tenantid)}>
|
||||
{tenant.tenantname || `Tenant #${tenant.tenantid}`}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/* Row 2: Search, Zone, Batch, Clients, Milers, and Count */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 w-full">
|
||||
<div className="flex flex-1 flex-wrap items-center gap-2.5 min-w-0">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onChange={setSearch}
|
||||
placeholder="Search by order, client, miler, customer..."
|
||||
className="w-full sm:w-64 lg:w-72"
|
||||
/>
|
||||
<ZoneSelector className="w-full sm:w-auto shrink-0" />
|
||||
|
||||
<Select value={riderId} onValueChange={setRiderId}>
|
||||
<SelectTrigger className="w-full sm:w-48">
|
||||
<SelectValue placeholder="All milers" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ALL}>All milers</SelectItem>
|
||||
{(riders || []).map((rider) => (
|
||||
<SelectItem key={rider.userid} value={String(rider.userid)}>
|
||||
{rider.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</ListToolbar>
|
||||
<Select value={batch} onValueChange={setBatch}>
|
||||
<SelectTrigger className="w-full sm:w-auto min-w-[210px] h-10">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Clock className="h-3.5 w-3.5 text-ink-3 shrink-0" />
|
||||
<SelectValue />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="w-[300px] p-1.5 shadow-lg rounded-xl">
|
||||
{BATCH_OPTIONS.map((option) => (
|
||||
<SelectItem
|
||||
key={option.id}
|
||||
value={option.id}
|
||||
textValue={option.id === 'all' ? 'All batches' : `${option.label} · ${option.range}`}
|
||||
className="py-2 pl-2.5 pr-8 rounded-lg cursor-pointer my-0.5"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3 w-full">
|
||||
<span className="font-medium text-ink-1 text-sm">{option.label}</span>
|
||||
<span className="text-[11px] font-medium px-2 py-0.5 rounded-md bg-surface-sunken text-ink-3 border border-border/50 shrink-0">
|
||||
{option.range}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={tenantId} onValueChange={setTenantId}>
|
||||
<SelectTrigger className="w-full sm:w-44">
|
||||
<SelectValue placeholder="All clients" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ALL}>All clients</SelectItem>
|
||||
{(tenants || []).map((tenant) => (
|
||||
<SelectItem key={tenant.tenantid} value={String(tenant.tenantid)}>
|
||||
{tenant.tenantname || `Tenant #${tenant.tenantid}`}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={riderId} onValueChange={setRiderId}>
|
||||
<SelectTrigger className="w-full sm:w-44">
|
||||
<SelectValue placeholder="All milers" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={ALL}>All milers</SelectItem>
|
||||
{(riders || []).map((rider) => (
|
||||
<SelectItem key={rider.userid} value={String(rider.userid)}>
|
||||
{rider.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{isFiltered && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSearch('');
|
||||
setBatch('all');
|
||||
setTenantId(ALL);
|
||||
setRiderId(ALL);
|
||||
}}
|
||||
className="text-xs h-9 text-brand hover:text-brand-hover hover:bg-brand-soft"
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-caption text-ink-3 shrink-0">
|
||||
{rows.length === batchRows.length
|
||||
? `${batchRows.length} ${batchRows.length === 1 ? 'delivery' : 'deliveries'}`
|
||||
: `${rows.length} of ${batchRows.length} deliveries`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
|
||||
Reference in New Issue
Block a user