blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix production plans dashboard typing

Browse Source
This commit is contained in:
Cauê Faleiros
2026-08-25 11:53:31 -03:00
parent 85afba4e5b
commit 7eedbded2d
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/ProductionPlans.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ArrowLeft, CheckCircle2, ClipboardList, Factory, Loader2, PlayCircle } from 'lucide-react'; import { ArrowLeft, CheckCircle2, ClipboardList, Factory, Loader2, PlayCircle, type LucideIcon } from 'lucide-react';
import { fetchProductionPlans, updateProductionPlanStatus } from '../dataService'; import { fetchProductionPlans, updateProductionPlanStatus } from '../dataService';
import type { ProductionOrderStatus, ProductionPlan } from '../types'; import type { ProductionOrderStatus, ProductionPlan } from '../types';
@@ -16,6 +16,11 @@ const statusOptions: Array<{ value: ProductionOrderStatus; label: string; classN
const statusStyle = (status: string) => statusOptions.find(option => option.value === status)?.className || 'border-dark-border bg-dark-input text-dark-muted'; const statusStyle = (status: string) => statusOptions.find(option => option.value === status)?.className || 'border-dark-border bg-dark-input text-dark-muted';
const formatNumber = (value: number) => new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 2 }).format(value); const formatNumber = (value: number) => new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 2 }).format(value);
const formatDate = (value: string | null) => value ? new Intl.DateTimeFormat('pt-BR').format(new Date(`${value.slice(0, 10)}T00:00:00`)) : '-'; const formatDate = (value: string | null) => value ? new Intl.DateTimeFormat('pt-BR').format(new Date(`${value.slice(0, 10)}T00:00:00`)) : '-';
const planMetrics: Array<{ label: string; value: string | number; icon: LucideIcon; tone: string }> = [
{ label: 'Planos ativos', value: 0, icon: ClipboardList, tone: 'text-brand-primary' },
{ label: 'OPs planejadas', value: 0, icon: Factory, tone: 'text-sky-300' },
{ label: 'Unidades em fluxo', value: 0, icon: PlayCircle, tone: 'text-amber-300' }
];
const ProductionPlans = () => { const ProductionPlans = () => {
const [plans, setPlans] = useState<ProductionPlan[]>([]); const [plans, setPlans] = useState<ProductionPlan[]>([]);
@@ -69,13 +74,14 @@ const ProductionPlans = () => {
</div> </div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-3"> <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
{[ {planMetrics.map(metric => {
['Planos ativos', activePlans.length, ClipboardList, 'text-brand-primary'], const value = metric.label === 'Planos ativos'
['OPs planejadas', activePlans.reduce((total, plan) => total + plan.orderCount, 0), Factory, 'text-sky-300'], ? activePlans.length
['Unidades em fluxo', formatNumber(totalOpenQuantity), PlayCircle, 'text-amber-300'] : metric.label === 'OPs planejadas'
].map(([label, value, Icon, tone]) => { ? activePlans.reduce((total, plan) => total + plan.orderCount, 0)
const MetricIcon = Icon as typeof ClipboardList; : formatNumber(totalOpenQuantity);
return <div key={String(label)} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><div className="flex items-center justify-between"><p className="text-sm font-bold text-dark-muted">{label}</p><MetricIcon className={`h-5 w-5 ${tone}`} /></div><p className="mt-3 text-3xl font-bold text-dark-text">{value}</p></div>; const MetricIcon = metric.icon;
return <div key={metric.label} className="rounded-2xl border border-dark-border bg-dark-card p-5 shadow-sm"><div className="flex items-center justify-between"><p className="text-sm font-bold text-dark-muted">{metric.label}</p><MetricIcon className={`h-5 w-5 ${metric.tone}`} /></div><p className="mt-3 text-3xl font-bold text-dark-text">{value}</p></div>;
})} })}
</div> </div>