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 { useMemo, useState } from 'react';
import { useQuery } from '@tanstack/react-query'; 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 { QUERY_KEYS } from '@/constants/QUERY_KEYS';
import { api } from '@/services/api'; import { api } from '@/services/api';
import { vehiclesService } from '@/services/vehicles.service'; import { vehiclesService } from '@/services/vehicles.service';
@@ -91,7 +91,8 @@ export function FinancialReportsPage() {
); );
return ( return (
<Stack gap="md"> <Container size="xl" py="xl">
<Stack gap="md">
<Card> <Card>
<Card.Section p="md" withBorder> <Card.Section p="md" withBorder>
<Text fw={500}>Fleet Financial Analysis</Text> <Text fw={500}>Fleet Financial Analysis</Text>
@@ -244,6 +245,7 @@ export function FinancialReportsPage() {
</Card.Section> </Card.Section>
</Card> </Card>
)} )}
</Stack> </Stack>
</Container>
); );
} }

View File

@@ -119,7 +119,7 @@ export default function FuelPurchasePage() {
const totalCost = formData.liters * formData.costPerLiter; const totalCost = formData.liters * formData.costPerLiter;
return ( return (
<Container size="lg" py="xl"> <Container size="xl" py="xl">
<Breadcrumbs items={[{ label: "Fleet" }, { label: "Fuel Management" }, { label: "Record Purchase" }]} /> <Breadcrumbs items={[{ label: "Fleet" }, { label: "Fuel Management" }, { label: "Record Purchase" }]} />
<Group justify="space-between" mb="lg"> <Group justify="space-between" mb="lg">

View File

@@ -57,7 +57,7 @@ export default function FuelStatsPage() {
: "—"; : "—";
return ( return (
<Container size="lg" py="xl"> <Container size="xl" py="xl">
<Breadcrumbs items={[{ label: "Fleet" }, { label: "Fuel Management" }, { label: "Statistics" }]} /> <Breadcrumbs items={[{ label: "Fleet" }, { label: "Fuel Management" }, { label: "Statistics" }]} />
<Group justify="space-between" mb="lg"> <Group justify="space-between" mb="lg">

View File

@@ -1,6 +1,6 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; 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 { DateInput } from '@mantine/dates';
import { Plus } from 'lucide-react'; import { Plus } from 'lucide-react';
import { QUERY_KEYS } from '@/constants/QUERY_KEYS'; import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
@@ -87,7 +87,8 @@ export function MaintenancePage() {
}; };
return ( return (
<Stack gap="md"> <Container size="xl" py="xl">
<Stack gap="md">
<Card> <Card>
<Card.Section p="md" withBorder> <Card.Section p="md" withBorder>
<Group justify="space-between"> <Group justify="space-between">
@@ -199,6 +200,7 @@ export function MaintenancePage() {
</Group> </Group>
</Stack> </Stack>
</Modal> </Modal>
</Stack> </Stack>
</Container>
); );
} }