mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 07:22:53 +00:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user