From 69d1d3073f0724003b9f08045db747b0e551d795 Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Tue, 30 Jun 2026 13:59:20 +0000
Subject: [PATCH] style: standardize dashboard padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All fleet pages now use consistent layout:
- Container size: xl
- Vertical padding: xl

Pages updated:
- FleetDashboard: size="xl" py="xl" (unchanged)
- FuelPurchasePage: lg → xl
- FuelStatsPage: lg → xl
- MaintenancePage: Added Container wrapper (xl, xl)
- FinancialReportsPage: Added Container wrapper (xl, xl)

Uniform spacing across all fleet management dashboards.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../backoffice/src/pages/fleet/FinancialReportsPage.tsx   | 8 +++++---
 .../backoffice/src/pages/fleet/FuelPurchasePage.tsx       | 2 +-
 .../backoffice/src/pages/fleet/FuelStatsPage.tsx          | 2 +-
 .../backoffice/src/pages/fleet/MaintenancePage.tsx        | 8 +++++---
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
index f61583f8f..312d38676 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FinancialReportsPage.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Card, Button, Stack, Group, Grid, Select, Text, ThemeIcon, RingProgress } from '@mantine/core';
+import { Card, Button, Stack, Group, Grid, Select, Text, ThemeIcon, RingProgress, Container } from '@mantine/core';
 import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
 import { api } from '@/services/api';
 import { vehiclesService } from '@/services/vehicles.service';
@@ -91,7 +91,8 @@ export function FinancialReportsPage() {
   );
 
   return (
-    <Stack gap="md">
+    <Container size="xl" py="xl">
+      <Stack gap="md">
       <Card>
         <Card.Section p="md" withBorder>
           <Text fw={500}>Fleet Financial Analysis</Text>
@@ -244,6 +245,7 @@ export function FinancialReportsPage() {
           </Card.Section>
         </Card>
       )}
-    </Stack>
+      </Stack>
+    </Container>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
index 574b9d1c6..21974fc37 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
@@ -119,7 +119,7 @@ export default function FuelPurchasePage() {
   const totalCost = formData.liters * formData.costPerLiter;
 
   return (
-    <Container size="lg" py="xl">
+    <Container size="xl" py="xl">
       <Breadcrumbs items={[{ label: "Fleet" }, { label: "Fuel Management" }, { label: "Record Purchase" }]} />
 
       <Group justify="space-between" mb="lg">
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelStatsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelStatsPage.tsx
index 78ed36498..f5efe8cdd 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelStatsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelStatsPage.tsx
@@ -57,7 +57,7 @@ export default function FuelStatsPage() {
     : "—";
 
   return (
-    <Container size="lg" py="xl">
+    <Container size="xl" py="xl">
       <Breadcrumbs items={[{ label: "Fleet" }, { label: "Fuel Management" }, { label: "Statistics" }]} />
 
       <Group justify="space-between" mb="lg">
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
index 61c1215ba..455290647 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/MaintenancePage.tsx
@@ -1,6 +1,6 @@
 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 { Card, Button, Modal, Stack, Group, Grid, Select, TextInput, NumberInput, Table, Badge, Text, Container } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import { Plus } from 'lucide-react';
 import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
@@ -87,7 +87,8 @@ export function MaintenancePage() {
   };
 
   return (
-    <Stack gap="md">
+    <Container size="xl" py="xl">
+      <Stack gap="md">
       <Card>
         <Card.Section p="md" withBorder>
           <Group justify="space-between">
@@ -199,6 +200,7 @@ export function MaintenancePage() {
           </Group>
         </Stack>
       </Modal>
-    </Stack>
+      </Stack>
+    </Container>
   );
 }