Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed the modal in the orders page

Browse Source
This commit is contained in:
dharaneesh-r
2026-08-17 17:27:07 +05:30
parent f037c4e45d
commit 8d154f06d9
1 changed files with 3 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/pages/nearle/orders/orders.js
View File

@@ -37,7 +37,6 @@ import {
MdNotes,
MdMyLocation,
MdOutlineFlag,
MdPerson,
MdFlashOn,
MdCancel,
MdStraighten,
@@ -56,9 +55,6 @@ import { Divider } from '@astryxdesign/core/Divider';
import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
import { Pagination } from '@astryxdesign/core/Pagination';
import { DropdownMenu, DropdownMenuCheckboxItem } from '@astryxdesign/core/DropdownMenu';
import { Dialog, DialogHeader } from '@astryxdesign/core/Dialog';
import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
import { Spinner } from '@astryxdesign/core/Spinner';
import { EmptyState } from '@astryxdesign/core/EmptyState';
import { Table, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } from '@astryxdesign/core/Table';
@@ -72,12 +68,10 @@ import { PageShell, DataCard } from 'components/nearle_components/PageLayout';
import { useQuery, useMutation } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { fetchPercentageData, createAutomationDeliveries, getallriders, buildMilerLookup, notifyRider } from '../../api/api';
import { getBookings, getAdminCustomers, getBookingTrack, batchAssignBookings, getMilers } from 'pages/api/doormileApi';
import { getBookings, getAdminCustomers, batchAssignBookings, getMilers } from 'pages/api/doormileApi';
import { parseDoormileTimestamp } from 'utils/doormileTimestamp';
import { DT, STATUS, tint } from 'themes/dt/tokens';
import { TableScroll, AccentAvatar } from 'themes/dt/primitives';
const BRAND = DT.brand;
import { TableScroll } from 'themes/dt/primitives';
// Top-level pill tabs. GET /admin/bookings has no documented status filter
// param, so bookings are fetched in bulk (up to the API's pagesize cap) and
@@ -164,11 +158,6 @@ const haversineKm = (lat1, lon1, lat2, lon2) => {
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
};
// Shared by the Track Order dialog's header (booking's own createdat) and its
// body (service ETA, assignment timestamps) — one formatter so the two never
// drift into different date styles.
const formatTrackTimestamp = (d) => (d ? dayjs(d).format('DD MMM, hh:mm A') : '—');
// ---------------------------------------------------------------------------
// Row primitives.
//
@@ -328,18 +317,6 @@ const Orders = () => {
// mount guarantees the column-def `size`/`minSize` values below are always
// the ones that actually render, with no other place width can come from.
const [columnSizing, setColumnSizing] = useState({});
const [trackBookingId, setTrackBookingId] = useState(null);
// GET /admin/bookings/:id/track — confirmed live shape (not documented in
// express-console-api.md): { booking: {...full booking incl. parcels[],
// serviceoptions[], payments[]}, assignments: [], riders: [] }. assignments/
// riders field names beyond that haven't been observed non-empty yet, so
// they're rendered defensively (see the Track Order dialog below).
const { data: trackData, isLoading: trackLoading } = useQuery({
queryKey: ['booking-track', trackBookingId],
queryFn: () => getBookingTrack(trackBookingId),
enabled: !!trackBookingId
});
const locationId = 0;
const locoName = 'All Locations';
// No date-filter UI on this page — the toolbar is search-only. These stay
@@ -1146,13 +1123,8 @@ const Orders = () => {
key={row.id}
// A checked row keeps a faint brand wash so the solver
// selection stays visible while you scroll past it; the
// transition keeps hover from snapping. Clicking the row
// opens the Track Order dialog — the select checkbox's
// own cell stops propagation below so ticking it doesn't
// also pop the dialog.
onClick={() => setTrackBookingId(row.original.bookingid)}
// transition keeps hover from snapping.
style={{
cursor: 'pointer',
backgroundColor: row.getIsSelected() ? tint(DT.brand) : undefined,
transition: 'background-color 140ms ease'
}}
@@ -1161,7 +1133,6 @@ const Orders = () => {
<TableCell
key={cell.id}
style={{ textAlign: cell.column.columnDef.meta?.align, maxWidth: cell.column.columnDef.maxSize || cell.column.getSize() }}
onClick={cell.column.id === 'select' ? (e) => e.stopPropagation() : undefined}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
@@ -1201,178 +1172,6 @@ const Orders = () => {
)}
</DataCard>
</PageShell>
<Dialog isOpen={!!trackBookingId} onOpenChange={(next) => !next && setTrackBookingId(null)} width={560} purpose="info">
<Layout
header={
<DialogHeader
title={trackData?.booking ? trackData.booking.bookingno || `#${trackData.booking.bookingid}` : 'Track Order'}
subtitle={trackData?.booking ? `Booked ${formatTrackTimestamp(trackData.booking.createdat)}` : undefined}
onOpenChange={(next) => !next && setTrackBookingId(null)}
startContent={
<AccentAvatar color={BRAND} selected size={36}>
<MdLocalShipping size={18} />
</AccentAvatar>
}
/>
}
content={
<LayoutContent padding={4}>
{trackLoading ? (
<HStack justify="center" padding={4}>
<Spinner size="md" />
</HStack>
) : trackData?.booking ? (
(() => {
const b = trackData.booking;
const assignments = trackData.assignments || [];
const riders = trackData.riders || [];
return (
<VStack gap={3} padding={0}>
{/* Status now lives on its own row instead of doubling
up with the order number/booked date, which moved
into DialogHeader's title/subtitle above. */}
<HStack justify="between" vAlign="center">
<SectionLabel>Status</SectionLabel>
<StatusBadge status={b.status} />
</HStack>
<Divider />
{/* Same PlaceCell the Orders table uses for its own
Pickup/Drop columns — a tinted icon tile + primary/
secondary text — so the dialog and the row it was
opened from read as the same design language. */}
<VStack gap={2.5} padding={0}>
<VStack gap={1} padding={0}>
<SectionLabel>Pickup</SectionLabel>
<PlaceCell
icon={<MdMyLocation size={12} />}
primary={b.pickupaddress || '—'}
secondary={b.pickuppincode ? `Pincode ${b.pickuppincode}` : ''}
/>
</VStack>
<VStack gap={1} padding={0}>
<SectionLabel>Delivery</SectionLabel>
<PlaceCell
icon={<MdOutlineFlag size={12} />}
primary={b.deliveryaddress || '—'}
secondary={[b.deliverycity, b.deliverypincode].filter(Boolean).join(' · ')}
/>
</VStack>
{b.notes && (
<VStack gap={1} padding={0}>
<SectionLabel>Notes</SectionLabel>
<HStack gap={1.5} vAlign="start">
<MdNotes size={14} color={DT.textMuted} style={{ marginTop: 2, flexShrink: 0 }} />
<Text>{b.notes}</Text>
</HStack>
</VStack>
)}
</VStack>
{b.parcels?.length > 0 && (
<>
<Divider />
<VStack gap={1.5} padding={0}>
<SectionLabel>Parcels</SectionLabel>
<HStack gap={1} wrap="wrap">
{b.parcels.map((p) => (
<Badge
key={p.bookingparcelid}
variant="neutral"
icon={<MdInventory2 size={13} />}
label={`${p.itemcategory || 'Item'} · ₹${Number(p.declaredvalue || 0).toFixed(2)}`}
/>
))}
</HStack>
</VStack>
</>
)}
{b.serviceoptions?.length > 0 && (
<>
<Divider />
<VStack gap={1.5} padding={0}>
<SectionLabel>Service</SectionLabel>
{b.serviceoptions.map((s, i) => (
<HStack key={i} justify="between" vAlign="center">
<Text weight="semibold">{s.servicetype || '—'}</Text>
<HStack gap={2} vAlign="center">
<Text type="supporting" color="secondary">
ETA {formatTrackTimestamp(s.estimateddeliveryat)}
</Text>
<Text weight="bold" style={{ color: BRAND }}>
₹{Number(s.estimatedprice || 0).toFixed(2)}
</Text>
</HStack>
</HStack>
))}
</VStack>
</>
)}
<Divider />
<VStack gap={1.5} padding={0}>
<SectionLabel>Rider</SectionLabel>
{riders.length === 0 && assignments.length === 0 ? (
<Text color="secondary">Not assigned to a rider yet.</Text>
) : (
<VStack gap={2} padding={0}>
{riders.map((r, i) => (
<HStack key={i} gap={1.5} vAlign="center">
<AccentAvatar color={BRAND} size={28}>
<MdPerson size={14} />
</AccentAvatar>
<VStack gap={0} padding={0}>
<Text weight="semibold">{r.displayname || r.name || 'Rider'}</Text>
{r.phone && (
<Text type="supporting" color="secondary">
{r.phone}
</Text>
)}
</VStack>
</HStack>
))}
{/* Each assignment update as a small status chip +
timestamp row, instead of the bare "Assigned"
text repeating with no visual differentiation
between entries. */}
{assignments.length > 0 && (
<VStack gap={1} padding={0}>
{assignments.map((a, i) => (
<HStack key={i} justify="between" vAlign="center">
<StatusBadge status={a.status || a.assignmentstatus || 'unknown'} />
<Text type="supporting" color="secondary" hasTabularNumbers>
{formatTrackTimestamp(a.createdat || a.assignedat)}
</Text>
</HStack>
))}
</VStack>
)}
</VStack>
)}
</VStack>
</VStack>
);
})()
) : (
<Text color="secondary" style={{ textAlign: 'center', padding: '24px 0' }}>
No tracking data available for this order yet.
</Text>
)}
</LayoutContent>
}
footer={
<LayoutFooter hasDivider>
<HStack justify="end">
<Button label="Close" variant="secondary" onClick={() => setTrackBookingId(null)} />
</HStack>
</LayoutFooter>
}
/>
</Dialog>
</Fragment>
);
};