112 lines
4.1 KiB
TypeScript
112 lines
4.1 KiB
TypeScript
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>
|
|
);
|
|
}
|