guilherme
/
agprotocolopainelweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability

main
guilherme 2025-11-25 12:14:35 -03:00
parent 1eff007617
commit 994d9580f5
4 changed files with 5358 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>agfrotapainelweb</title> <title>agprotocolopainelweb</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

5338
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

36
src/App.tsx
View File

@ -12,7 +12,6 @@ import {
ChartLegendContent, ChartLegendContent,
ChartTooltip, ChartTooltip,
ChartTooltipContent, ChartTooltipContent,
type ChartConfig,
} from '@/views/components/ui/chart'; } from '@/views/components/ui/chart';
import { Progress } from '@/views/components/ui/progress'; import { Progress } from '@/views/components/ui/progress';
import { TrendingUp } from 'lucide-react'; import { TrendingUp } from 'lucide-react';
@ -26,8 +25,10 @@ import {
PieChart, PieChart,
XAxis, XAxis,
} from 'recharts'; } from 'recharts';
import { Header } from './views/components/header'; import { Header } from './views/components/header';
import type { ChartConfig } from './views/components/ui/chart';
export const description = 'A stacked bar chart with a legend'; export const description = 'A stacked bar chart with a legend';
export function App() { export function App() {
@ -55,7 +56,7 @@ export function App() {
const evolutionConfig = { const evolutionConfig = {
price: { price: {
label: 'Preço', label: 'Preço',
color: '#0e233d', color: '#007cb8',
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@ -68,7 +69,7 @@ export function App() {
const bestPricesConfig = { const bestPricesConfig = {
price: { price: {
label: 'Preço', label: 'Preço',
color: '#0e233d', color: '#007cb8',
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@ -82,37 +83,37 @@ export function App() {
const vehicleStatusConfig = { const vehicleStatusConfig = {
active: { active: {
label: 'Ativos', label: 'Ativos',
color: '#0e233d', color: '#007cb8',
}, },
maintenance: { maintenance: {
label: 'Manutenção', label: 'Manutenção',
color: '#173b63', color: '#0ca9eb',
}, },
inactive: { inactive: {
label: 'Inativos', label: 'Inativos',
color: '#154677', color: '#36c1fa',
}, },
reserved: { reserved: {
label: 'Reservados', label: 'Reservados',
color: '#145190', color: '#7cd5fd',
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
const vehicleStatusData = [ const vehicleStatusData = [
{ status: 'active', count: 45, fill: '#0e233d' }, { status: 'active', count: 45, fill: '#007cb8' },
{ status: 'maintenance', count: 12, fill: '#173b63' }, { status: 'maintenance', count: 12, fill: '#0ca9eb' },
{ status: 'inactive', count: 8, fill: '#154677' }, { status: 'inactive', count: 8, fill: '#36c1fa' },
{ status: 'reserved', count: 15, fill: '#145190' }, { status: 'reserved', count: 15, fill: '#7cd5fd' },
]; ];
const mileageConfig = { const mileageConfig = {
company: { company: {
label: 'Frota Empresa', label: 'Frota Empresa',
color: '#0e233d', color: '#007cb8',
}, },
rented: { rented: {
label: 'Frota Terceirizada', label: 'Frota Terceirizada',
color: '#173b63', color: '#0ca9eb',
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
@ -133,8 +134,7 @@ export function App() {
{stats.map((stat) => ( {stats.map((stat) => (
<Card <Card
key={stat.title} key={stat.title}
className="hover:shadow-md transition-shadow duration-300" className="hover:shadow-md transition-shadow duration-300">
>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground"> <CardTitle className="text-sm font-medium text-muted-foreground">
{stat.title} {stat.title}
@ -167,8 +167,7 @@ export function App() {
margin={{ margin={{
left: 12, left: 12,
right: 12, right: 12,
}} }}>
>
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<XAxis <XAxis
dataKey="month" dataKey="month"
@ -270,8 +269,7 @@ export function App() {
<CardContent className="flex-1 pb-0"> <CardContent className="flex-1 pb-0">
<ChartContainer <ChartContainer
config={vehicleStatusConfig} config={vehicleStatusConfig}
className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[320px] pb-0" className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[320px] pb-0">
>
<PieChart> <PieChart>
<ChartTooltip content={<ChartTooltipContent hideLabel />} /> <ChartTooltip content={<ChartTooltipContent hideLabel />} />
<Pie <Pie

4
src/styles/index.css
View File

@ -90,7 +90,7 @@
--bigstone-700: #145190; --bigstone-700: #145190;
--bigstone-800: #154677; --bigstone-800: #154677;
--bigstone-900: #173b63; --bigstone-900: #173b63;
--bigstone-950: #0e233d; --bigstone-950: #007cb8;
/* Cores usadas pelos gráficos */ /* Cores usadas pelos gráficos */
--color-desktop: var(--bigstone-500); --color-desktop: var(--bigstone-500);
@ -115,7 +115,7 @@
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.145 0 0);
--primary: #0e233d; --primary: #007cb8;
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.205 0 0);