style: standardize dashboard padding

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>
This commit is contained in:
natib21
2026-06-30 13:59:20 +00:00
parent 5af7f0606b
commit 69d1d3073f
4 changed files with 12 additions and 8 deletions

View File

@@ -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>
);
}

View File

@@ -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">

View File

@@ -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">

View File

@@ -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>
);
}