build ok,
This commit is contained in:
louiscklaw
56
002_source/cms/src/app/dashboard/logistics/fleet/page.tsx
Normal file
56
002_source/cms/src/app/dashboard/logistics/fleet/page.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { dayjs } from '@/lib/dayjs';
|
||||
import { FleetView } from '@/components/dashboard/logistics/fleet-view';
|
||||
import type { Vehicle } from '@/components/dashboard/logistics/types';
|
||||
|
||||
export const metadata = { title: `Fleet | Logistics | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
const vehicles = [
|
||||
{
|
||||
id: 'VEH-004',
|
||||
location: 'Brooklyn, New York, United States',
|
||||
latitude: 40.683717,
|
||||
longitude: -73.938242,
|
||||
temperature: 6,
|
||||
startedAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
|
||||
departedAt: dayjs().subtract(34, 'minute').toDate(),
|
||||
arrivedAt: dayjs().subtract(9, 'minute').toDate(),
|
||||
},
|
||||
{
|
||||
id: 'VEH-003',
|
||||
location: 'Brooklyn, New York, United States',
|
||||
latitude: 40.698211,
|
||||
longitude: -73.92369,
|
||||
temperature: 8,
|
||||
startedAt: dayjs().subtract(10, 'minute').subtract(3, 'hour').toDate(),
|
||||
departedAt: dayjs().subtract(56, 'minute').subtract(2, 'hour').toDate(),
|
||||
arrivedAt: dayjs().subtract(10, 'minute').subtract(1, 'hour').toDate(),
|
||||
},
|
||||
{
|
||||
id: 'VEH-002',
|
||||
location: 'Brooklyn, New York, United States',
|
||||
latitude: 40.657431,
|
||||
longitude: -73.960399,
|
||||
temperature: 6,
|
||||
startedAt: dayjs().subtract(34, 'minute').subtract(4, 'hour').toDate(),
|
||||
departedAt: undefined,
|
||||
arrivedAt: undefined,
|
||||
},
|
||||
{
|
||||
id: 'VEH-001',
|
||||
location: 'Brooklyn, New York, United States',
|
||||
latitude: 40.675966,
|
||||
longitude: -73.876617,
|
||||
temperature: 8,
|
||||
startedAt: dayjs().subtract(9, 'minute').subtract(5, 'hour').toDate(),
|
||||
departedAt: dayjs().subtract(12, 'minute').subtract(2, 'hour').toDate(),
|
||||
arrivedAt: dayjs().subtract(21, 'minute').subtract(1, 'hour').toDate(),
|
||||
},
|
||||
] satisfies Vehicle[];
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
return <FleetView vehicles={vehicles} />;
|
||||
}
|
||||
111
002_source/cms/src/app/dashboard/logistics/page.tsx
Normal file
111
002_source/cms/src/app/dashboard/logistics/page.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import * as React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Grid from '@mui/material/Unstable_Grid2';
|
||||
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
||||
|
||||
import { config } from '@/config';
|
||||
import { DeviatedVehicles } from '@/components/dashboard/logistics/deviated-vehicles';
|
||||
import { LateVehicles } from '@/components/dashboard/logistics/late-vehicles';
|
||||
import { OnRouteVehicles } from '@/components/dashboard/logistics/on-route-vehicles';
|
||||
import { VehiclesCondition } from '@/components/dashboard/logistics/vehicles-condition';
|
||||
import { VehiclesOverview } from '@/components/dashboard/logistics/vehicles-overview';
|
||||
import { VehiclesTable } from '@/components/dashboard/logistics/vehicles-table';
|
||||
import { VehiclesWithErrors } from '@/components/dashboard/logistics/vehicles-with-errors';
|
||||
|
||||
export const metadata = { title: `Metrics | Logistics | Dashboard | ${config.site.name}` } satisfies Metadata;
|
||||
|
||||
export default function Page(): React.JSX.Element {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 'var(--Content-maxWidth)',
|
||||
m: 'var(--Content-margin)',
|
||||
p: 'var(--Content-padding)',
|
||||
width: 'var(--Content-width)',
|
||||
}}
|
||||
>
|
||||
<Stack spacing={4}>
|
||||
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
|
||||
<Box sx={{ flex: '1 1 auto' }}>
|
||||
<Typography variant="h4">Logistics</Typography>
|
||||
</Box>
|
||||
<div>
|
||||
<Button startIcon={<PlusIcon />} variant="contained">
|
||||
Add vehicle
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
<Grid container spacing={4}>
|
||||
<Grid md={3} xs={12}>
|
||||
<OnRouteVehicles amount={38} />
|
||||
</Grid>
|
||||
<Grid md={3} xs={12}>
|
||||
<VehiclesWithErrors amount={2} />
|
||||
</Grid>
|
||||
<Grid md={3} xs={12}>
|
||||
<DeviatedVehicles amount={1} />
|
||||
</Grid>
|
||||
<Grid md={3} xs={12}>
|
||||
<LateVehicles amount={2} />
|
||||
</Grid>
|
||||
<Grid lg={6} xs={12}>
|
||||
<VehiclesOverview
|
||||
data={[
|
||||
{ name: 'Available', value: 38, fill: 'var(--mui-palette-primary-main)' },
|
||||
{ name: 'Out of service', value: 50, fill: 'var(--mui-palette-warning-main)' },
|
||||
{ name: 'On route', value: 12, fill: 'var(--mui-palette-info-main)' },
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid lg={6} xs={12}>
|
||||
<VehiclesCondition bad={12} excellent={181} good={24} />
|
||||
</Grid>
|
||||
<Grid xs={12}>
|
||||
<VehiclesTable
|
||||
rows={[
|
||||
{
|
||||
id: 'VEH-004',
|
||||
endingRoute: 'Dordrecht, Netherlands',
|
||||
startingRoute: 'Liden, Netherlands',
|
||||
status: 'success',
|
||||
temperature: 8,
|
||||
temperatureLabel: 'Very Good',
|
||||
},
|
||||
{
|
||||
id: 'VEH-003',
|
||||
endingRoute: 'Paris, France',
|
||||
startingRoute: 'Lion, France',
|
||||
status: 'warning',
|
||||
temperature: 24,
|
||||
temperatureLabel: 'Bad',
|
||||
warning: 'Temperature not optimal',
|
||||
},
|
||||
{
|
||||
id: 'VEH-002',
|
||||
endingRoute: 'Memphis, Tennessee, United States',
|
||||
startingRoute: 'Dallas, Texas, United States',
|
||||
status: 'error',
|
||||
temperature: 8,
|
||||
temperatureLabel: 'Very Good',
|
||||
warning: 'ECU not responding',
|
||||
},
|
||||
{
|
||||
id: 'VEH-001',
|
||||
endingRoute: 'Cleveland, Ohio, United States',
|
||||
startingRoute: 'Cleveland, Ohio, United States',
|
||||
status: 'success',
|
||||
temperature: 12,
|
||||
temperatureLabel: 'Good',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user