Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-27 08:32:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'freight/hot_fix' of github.com:Tria-plc/edr-platform into freight/hot_fix

Browse Source
This commit is contained in:
yaschalew
2026-06-30 16:53:37 +03:00
parent 13a175a1ef 5af7f0606b
commit ca827c54a0
4 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
View File

@@ -4,6 +4,7 @@ import { Card, Button, Stack, Group, Grid, Select, Text, ThemeIcon, RingProgress
import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
import { api } from '@/services/api';
import { vehiclesService } from '@/services/vehicles.service';
import { freightBrand } from '@/theme/freight-brand';
interface FuelStats {
vehicleId: string;
@@ -162,7 +163,7 @@ export function FinancialReportsPage() {
<Text fw={500}>{report.fuelPercentage}%</Text>
</Stack>
<RingProgress
sections={[{ value: report.fuelPercentage, color: 'blue' }]}
sections={[{ value: report.fuelPercentage, color: 'edr-accent' }]}
label={
<Text size="xs" align="center">
{report.fuelPercentage}%
@@ -180,7 +181,7 @@ export function FinancialReportsPage() {
<Text fw={500}>{report.maintenancePercentage}%</Text>
</Stack>
<RingProgress
sections={[{ value: report.maintenancePercentage, color: 'orange' }]}
sections={[{ value: report.maintenancePercentage, color: 'edr-red' }]}
label={
<Text size="xs" align="center">
{report.maintenancePercentage}%

45
apps/edr-freight-web/backoffice/src/pages/fleet/FleetDashboard.tsx
View File

@@ -1,11 +1,12 @@
import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Card, Stack, Group, Grid, Text, ThemeIcon, Progress, Badge, Table, RingProgress, Container, Title, Box, Tabs } from '@mantine/core';
import { Truck, Fuel, Wrench, TrendingUp, AlertCircle, Users, User, MapPin, Calendar } from 'lucide-react';
import { Card, Stack, Group, Grid, Text, ThemeIcon, Progress, Badge, Table, RingProgress, Container, Title, Box, Tabs, Button } from '@mantine/core';
import { Truck, Fuel, Wrench, TrendingUp, AlertCircle, Users, User, MapPin, Calendar, BarChart3 } from 'lucide-react';
import Breadcrumbs from '@/components/ui/Breadcrumbs';
import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
import { api } from '@/auth/http';
import { vehiclesService } from '@/services/vehicles.service';
import { freightBrand } from '@/theme/freight-brand';
interface Vehicle {
id: string;
@@ -38,10 +39,10 @@ interface FleetMetrics {
assignedDrivers: number;
}
const StatCard = ({ icon: Icon, label, value, color = 'blue', change }: any) => (
<Card withBorder p="lg" radius="md">
const StatCard = ({ icon: Icon, label, value, color = 'edr-green', change }: any) => (
<Card withBorder p="lg" style={{ borderTop: `3px solid ${freightBrand.primary}` }}>
<Group justify="space-between" mb="sm">
<ThemeIcon size="xl" radius="md" variant="gradient" gradient={{ from: color, to: color, deg: 135 }}>
<ThemeIcon size="xl" radius="md" color={color} variant="light">
<Icon size={28} />
</ThemeIcon>
</Group>
@@ -50,10 +51,10 @@ const StatCard = ({ icon: Icon, label, value, color = 'blue', change }: any) =>
{label}
</Text>
<Group justify="space-between">
<Text fw={700} size="xl">
<Text fw={700} size="xl" c="edr-ink">
{value}
</Text>
{change && <Badge color={change > 0 ? 'green' : 'red'} size="lg">{change > 0 ? '+' : ''}{change}%</Badge>}
{change && <Badge color={change > 0 ? 'edr-green' : 'edr-red'} size="lg">{change > 0 ? '+' : ''}{change}%</Badge>}
</Group>
</Stack>
</Card>
@@ -145,16 +146,16 @@ export function FleetDashboard() {
{/* Primary Metrics */}
<Grid mb="xl">
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<StatCard icon={Truck} label="Total Vehicles" value={metrics.totalVehicles} color="blue" />
<StatCard icon={Truck} label="Total Vehicles" value={metrics.totalVehicles} color="edr-green" />
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<StatCard icon={Users} label="Total Drivers" value={metrics.totalDrivers} color="cyan" />
<StatCard icon={Users} label="Total Drivers" value={metrics.totalDrivers} color="edr-blue" />
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<StatCard icon={Fuel} label="Fuel Spend" value={`$${metrics.totalFuelSpend.toFixed(0)}`} color="orange" />
<StatCard icon={Fuel} label="Fuel Spend" value={`$${metrics.totalFuelSpend.toFixed(0)}`} color="edr-accent" />
</Grid.Col>
<Grid.Col span={{ base: 12, sm: 6, md: 3 }}>
<StatCard icon={Wrench} label="Maintenance" value={`$${metrics.totalMaintenanceSpend.toFixed(0)}`} color="red" />
<StatCard icon={Wrench} label="Maintenance" value={`$${metrics.totalMaintenanceSpend.toFixed(0)}`} color="edr-red" />
</Grid.Col>
</Grid>
@@ -172,15 +173,15 @@ export function FleetDashboard() {
<Text size="sm">Active Vehicles</Text>
<Text fw={700}>{metrics.activeVehicles} / {metrics.totalVehicles}</Text>
</Group>
<Progress value={(metrics.activeVehicles / metrics.totalVehicles) * 100} color="green" />
<Progress value={(metrics.activeVehicles / metrics.totalVehicles) * 100} color="edr-green" />
</div>
<div>
<Group justify="space-between" mb="xs">
<Text size="sm">Maintenance Overdue</Text>
<Badge color="red">{metrics.maintenanceOverdue}</Badge>
<Badge color="edr-red">{metrics.maintenanceOverdue}</Badge>
</Group>
<Progress value={0} color="red" />
<Progress value={0} color="edr-red" />
</div>
<div>
@@ -188,7 +189,7 @@ export function FleetDashboard() {
<Text size="sm">Idle / Under Maintenance</Text>
<Text fw={700}>{metrics.totalVehicles - metrics.activeVehicles}</Text>
</Group>
<Progress value={((metrics.totalVehicles - metrics.activeVehicles) / metrics.totalVehicles) * 100} color="yellow" />
<Progress value={((metrics.totalVehicles - metrics.activeVehicles) / metrics.totalVehicles) * 100} color="edr-amber-soft" />
</div>
</Stack>
</Card.Section>
@@ -205,8 +206,8 @@ export function FleetDashboard() {
<Group justify="center">
<RingProgress
sections={[
{ value: fuelPercent, color: 'orange' },
{ value: 100 - fuelPercent, color: 'red' },
{ value: fuelPercent, color: 'edr-accent' },
{ value: 100 - fuelPercent, color: 'edr-red' },
]}
label={
<div style={{ textAlign: 'center' }}>
@@ -226,7 +227,7 @@ export function FleetDashboard() {
<div>
<Group justify="space-between">
<Group gap="xs">
<ThemeIcon size="sm" color="orange" variant="light">
<ThemeIcon size="sm" color="edr-accent" variant="light">
<Fuel size={14} />
</ThemeIcon>
<Text size="sm">Fuel</Text>
@@ -238,7 +239,7 @@ export function FleetDashboard() {
<div>
<Group justify="space-between">
<Group gap="xs">
<ThemeIcon size="sm" color="red" variant="light">
<ThemeIcon size="sm" color="edr-red" variant="light">
<Wrench size={14} />
</ThemeIcon>
<Text size="sm">Maintenance</Text>
@@ -284,7 +285,7 @@ export function FleetDashboard() {
{v.manufacturer} {v.model}
</Table.Td>
<Table.Td>
<Badge color={v.status === 'ACTIVE' ? 'green' : v.status === 'MAINTENANCE' ? 'yellow' : 'gray'}>
<Badge color={v.status === 'ACTIVE' ? 'edr-green' : v.status === 'MAINTENANCE' ? 'edr-amber-soft' : 'gray'}>
{v.status || 'UNKNOWN'}
</Badge>
</Table.Td>
@@ -337,9 +338,9 @@ export function FleetDashboard() {
</Table.Td>
<Table.Td>
{d.assignedVehicle ? (
<Badge color="green">Assigned</Badge>
<Badge color="edr-green">Assigned</Badge>
) : (
<Badge color="gray">Unassigned</Badge>
<Badge color="edr-slate">Unassigned</Badge>
)}
</Table.Td>
</Table.Tr>

3
apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
View File

@@ -23,6 +23,7 @@ import { useToast } from "@/hooks/use-toast";
import { api } from "@/auth/http";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
import { vehiclesService, type Vehicle as VehicleType } from "@/services/vehicles.service";
import { freightBrand } from "@/theme/freight-brand";
interface FuelPurchase {
id: string;
@@ -123,7 +124,7 @@ export default function FuelPurchasePage() {
<Group justify="space-between" mb="lg">
<Title order={1}>Fuel Purchases</Title>
<Button leftSection={<Plus size={16} />} onClick={() => setModalOpen(true)}>
<Button leftSection={<Plus size={16} />} onClick={() => setModalOpen(true)} color="edr-green">
Record Purchase
</Button>
</Group>

16
apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
View File

@@ -2,9 +2,11 @@ import { useState, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Card, Button, Modal, Stack, Group, Grid, Select, TextInput, NumberInput, Table, Badge, Text } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { Plus } from 'lucide-react';
import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
import { api } from '@/services/api';
import { vehiclesService } from '@/services/vehicles.service';
import { freightBrand } from '@/theme/freight-brand';
interface MaintenanceSchedule {
id: string;
@@ -76,12 +78,12 @@ export function MaintenancePage() {
const statusColor = (status: string) => {
const colors: Record<string, string> = {
SCHEDULED: 'blue',
IN_PROGRESS: 'yellow',
COMPLETED: 'green',
OVERDUE: 'red',
SCHEDULED: 'edr-blue',
IN_PROGRESS: 'edr-amber-soft',
COMPLETED: 'edr-green',
OVERDUE: 'edr-red',
};
return colors[status] || 'gray';
return colors[status] || 'edr-slate';
};
return (
@@ -90,7 +92,9 @@ export function MaintenancePage() {
<Card.Section p="md" withBorder>
<Group justify="space-between">
<Text fw={500}>Schedule Maintenance</Text>
<Button onClick={() => setOpenScheduleModal(true)}>New Schedule</Button>
<Button onClick={() => setOpenScheduleModal(true)} color="edr-green" leftSection={<Plus size={16} />}>
New Schedule
</Button>
</Group>
</Card.Section>
<Card.Section p="md">