Allow updating production plan responsibility

src/pages/Cutting.tsx

@@ -169,7 +169,7 @@ const Cutting = () => {
   const [previewItemsPerPage, setPreviewItemsPerPage] = useState(10);
   const [selectedPreviewRowIds, setSelectedPreviewRowIds] = useState<string[]>([]);
   const [lotSelections, setLotSelections] = useState<Record<string, { lotId: string; quantity: string }>>({});
-  const [productionPlanForm, setProductionPlanForm] = useState({ name: '', responsibleUserId: null as number | null, expectedDate: '', notes: '' });
+  const [productionPlanForm, setProductionPlanForm] = useState({ name: '', responsibleUserId: null as number | null, responsibleName: '', expectedDate: '', notes: '' });
   const [operationalUsers, setOperationalUsers] = useState<OperationalUser[]>([]);
   const [isLoadingOperationalUsers, setIsLoadingOperationalUsers] = useState(false);
   const [isResponsiblePickerOpen, setIsResponsiblePickerOpen] = useState(false);
@@ -399,8 +399,8 @@ const Cutting = () => {
     selectedPreviewRows.reduce((total, row) => total + row.suggestedCutQuantity, 0)
   ), [selectedPreviewRows]);
   const selectedResponsibleUser = useMemo(() => (
-    operationalUsers.find((user) => user.id === productionPlanForm.responsibleUserId) || null
-  ), [operationalUsers, productionPlanForm.responsibleUserId]);
+    operationalUsers.find((user) => user.id === productionPlanForm.responsibleUserId && user.name === productionPlanForm.responsibleName) || null
+  ), [operationalUsers, productionPlanForm.responsibleName, productionPlanForm.responsibleUserId]);
 
   const cutPlanReference = useMemo(() => (
     `Plano de corte ${formatDateKey(dateRange.start)} a ${formatDateKey(dateRange.end)} · ${targetCoverageDays} dias`
@@ -676,7 +676,7 @@ const Cutting = () => {
     setPreviewPage(1);
     setSelectedPreviewRowIds(rowsAvailableForOrder.map(row => row.id));
     setLotSelections({});
-    setProductionPlanForm({ name: cutPlanReference, responsibleUserId: null, expectedDate: '', notes: '' });
+    setProductionPlanForm({ name: cutPlanReference, responsibleUserId: null, responsibleName: '', expectedDate: '', notes: '' });
     setIsPlanDetailsOpen(false);
     setIsResponsiblePickerOpen(false);
     setPreviewStep('selection');
@@ -765,6 +765,7 @@ const Cutting = () => {
       })), selectedLotReservations, {
         name: productionPlanForm.name.trim() || cutPlanReference,
         responsibleUserId: productionPlanForm.responsibleUserId,
+        responsibleName: productionPlanForm.responsibleName,
         plannedStartDate: issueDate,
         expectedDate: productionPlanForm.expectedDate || null,
         notes: productionPlanForm.notes.trim(),
@@ -961,13 +962,13 @@ const Cutting = () => {
                     <div className="border-b border-dark-border px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-dark-muted">Usuários ativos do Graphs</div>
                     <div className="max-h-56 overflow-y-auto p-1.5">
                       {isLoadingOperationalUsers ? <p className="px-2 py-3 text-xs font-semibold text-dark-muted">Carregando usuários...</p> : operationalUsers.length ? operationalUsers.map(user => (
-                        <button key={user.id} type="button" onClick={() => { setProductionPlanForm(current => ({ ...current, responsibleUserId: user.id })); setIsResponsiblePickerOpen(false); }} className="flex w-full items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-left text-sm font-semibold text-dark-text transition-colors hover:bg-dark-input cursor-pointer">
+                        <button key={user.id ?? 'super-admin'} type="button" onClick={() => { setProductionPlanForm(current => ({ ...current, responsibleUserId: user.id, responsibleName: user.name })); setIsResponsiblePickerOpen(false); }} className="flex w-full items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-left text-sm font-semibold text-dark-text transition-colors hover:bg-dark-input cursor-pointer">
                           <span className="truncate">{user.name}</span>
-                          {productionPlanForm.responsibleUserId === user.id && <Check className="h-4 w-4 shrink-0 text-brand-primary" />}
+                          {productionPlanForm.responsibleUserId === user.id && productionPlanForm.responsibleName === user.name && <Check className="h-4 w-4 shrink-0 text-brand-primary" />}
                         </button>
                       )) : <p className="px-2 py-3 text-xs font-semibold text-dark-muted">Nenhum usuário ativo encontrado.</p>}
                     </div>
-                    {selectedResponsibleUser && <button type="button" onClick={() => { setProductionPlanForm(current => ({ ...current, responsibleUserId: null })); setIsResponsiblePickerOpen(false); }} className="w-full border-t border-dark-border px-3 py-2 text-left text-xs font-bold text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text cursor-pointer">Remover responsável</button>}
+                    {selectedResponsibleUser && <button type="button" onClick={() => { setProductionPlanForm(current => ({ ...current, responsibleUserId: null, responsibleName: '' })); setIsResponsiblePickerOpen(false); }} className="w-full border-t border-dark-border px-3 py-2 text-left text-xs font-bold text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text cursor-pointer">Remover responsável</button>}
                   </div>}
                 </div>
                 <button type="button" onClick={() => setIsPlanDetailsOpen(current => !current)} className="inline-flex h-10 shrink-0 items-center justify-center rounded-lg border border-dark-border bg-dark-card px-3 text-xs font-bold text-dark-muted transition-colors hover:border-brand-primary hover:text-dark-text cursor-pointer">

src/pages/ProductionPlans.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { ArrowLeft, CheckCircle2, ClipboardList, Factory, Loader2, PlayCircle, type LucideIcon } from 'lucide-react';
-import { fetchProductionPlans, updateProductionPlanStatus } from '../dataService';
-import type { ProductionOrderStatus, ProductionPlan } from '../types';
+import { ArrowLeft, Check, CheckCircle2, ChevronDown, ClipboardList, Factory, Loader2, PlayCircle, UserRound, type LucideIcon } from 'lucide-react';
+import { fetchOperationalUsers, fetchProductionPlans, updateProductionPlan, updateProductionPlanStatus } from '../dataService';
+import type { OperationalUser, ProductionOrderStatus, ProductionPlan } from '../types';
 
 const statusOptions: Array<{ value: ProductionOrderStatus; label: string; className: string }> = [
   { value: 'open', label: 'Em aberto', className: 'border-amber-400/35 bg-amber-400/10 text-amber-300' },
@@ -26,6 +26,8 @@ const ProductionPlans = () => {
   const [plans, setPlans] = useState<ProductionPlan[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [busyPlanId, setBusyPlanId] = useState<number | null>(null);
+  const [operationalUsers, setOperationalUsers] = useState<OperationalUser[]>([]);
+  const [responsiblePickerPlanId, setResponsiblePickerPlanId] = useState<number | null>(null);
   const [message, setMessage] = useState('');
 
   const loadPlans = useCallback(async () => {
@@ -39,10 +41,14 @@ const ProductionPlans = () => {
     }
   }, []);
 
+  const loadOperationalUsers = useCallback(async () => {
+    setOperationalUsers(await fetchOperationalUsers());
+  }, []);
+
   useEffect(() => {
-    const timer = window.setTimeout(() => { void loadPlans(); }, 0);
+    const timer = window.setTimeout(() => { void Promise.all([loadPlans(), loadOperationalUsers()]); }, 0);
     return () => window.clearTimeout(timer);
-  }, [loadPlans]);
+  }, [loadOperationalUsers, loadPlans]);
 
   const activePlans = useMemo(() => plans.filter(plan => !['finished', 'canceled'].includes(plan.status)), [plans]);
   const totalOpenQuantity = useMemo(() => activePlans.reduce((total, plan) => total + plan.totalQuantity, 0), [activePlans]);
@@ -62,6 +68,30 @@ const ProductionPlans = () => {
     }
   };
 
+  const changeResponsible = async (plan: ProductionPlan, user: OperationalUser | null) => {
+    setBusyPlanId(plan.id);
+    setMessage('');
+    try {
+      const updated = await updateProductionPlan(plan.id, {
+        name: plan.name,
+        contractor: plan.contractor,
+        responsibleUserId: user?.id ?? null,
+        responsibleName: user?.name || '',
+        plannedStartDate: plan.plannedStartDate,
+        expectedDate: plan.expectedDate,
+        notes: plan.notes,
+        source: plan.source
+      });
+      setPlans(current => current.map(item => item.id === updated.id ? updated : item));
+      setResponsiblePickerPlanId(null);
+      setMessage(updated.responsibleName ? `${updated.number} atribuído a ${updated.responsibleName}.` : `${updated.number} está sem responsável.`);
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : 'Não foi possível atualizar o responsável.');
+    } finally {
+      setBusyPlanId(null);
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
@@ -92,10 +122,11 @@ const ProductionPlans = () => {
         {isLoading ? <div className="flex min-h-56 items-center justify-center text-brand-primary"><Loader2 className="h-7 w-7 animate-spin" /></div> : plans.length ? (
           <div className="divide-y divide-dark-border">
             {plans.map(plan => (
-              <div key={plan.id} className="grid gap-4 p-5 xl:grid-cols-[minmax(260px,1.4fr)_minmax(150px,.7fr)_minmax(180px,.7fr)_180px] xl:items-center">
+              <div key={plan.id} className="grid gap-4 p-5 xl:grid-cols-[minmax(240px,1.3fr)_minmax(150px,.7fr)_minmax(160px,.7fr)_minmax(190px,.75fr)_180px] xl:items-center">
                 <div className="min-w-0"><div className="flex flex-wrap items-center gap-2"><span className="font-mono text-xs font-bold text-brand-primary">{plan.number}</span><span className={`rounded-full border px-2.5 py-1 text-xs font-bold ${statusStyle(plan.status)}`}>{plan.statusLabel}</span></div><p className="mt-2 truncate font-bold text-dark-text" title={plan.name}>{plan.name}</p><p className="mt-1 text-xs font-semibold text-dark-muted">{plan.responsibleName ? `Responsável: ${plan.responsibleName}` : plan.contractor ? `Responsável: ${plan.contractor}` : 'Sem responsável definido'} · previsão {formatDate(plan.expectedDate)}</p>{plan.notes && <p className="mt-1 truncate text-xs font-semibold text-dark-muted" title={plan.notes}>{plan.notes}</p>}</div>
                 <div className="text-sm"><p className="text-xs font-bold uppercase tracking-wider text-dark-muted">Escopo</p><p className="mt-1 font-bold text-dark-text">{plan.orderCount} {plan.orderCount === 1 ? 'OP' : 'OPs'} · {formatNumber(plan.totalQuantity)} un.</p><p className="mt-1 text-xs font-semibold text-dark-muted">Cortado {formatNumber(plan.actualCutQuantity)} · final {formatNumber(plan.finishedQuantity)}</p></div>
                 <div className="flex flex-wrap gap-1.5">{statusOptions.filter(option => Number(plan.statusCounts[option.value] || 0) > 0).map(option => <span key={option.value} className={`rounded-full border px-2 py-1 text-xs font-bold ${statusStyle(option.value)}`}>{plan.statusCounts[option.value]} {option.label.toLowerCase()}</span>)}</div>
+                <div className="relative text-xs font-bold text-dark-muted"><p>Responsável</p><button type="button" disabled={busyPlanId === plan.id} onClick={() => setResponsiblePickerPlanId(current => current === plan.id ? null : plan.id)} className="mt-1 flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-dark-border bg-dark-input px-3 text-left text-sm font-semibold text-dark-text transition-colors hover:border-brand-primary disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer"><span className="flex min-w-0 items-center gap-2"><UserRound className="h-4 w-4 shrink-0 text-brand-primary" /><span className="truncate">{plan.responsibleName || 'Selecionar responsável'}</span></span><ChevronDown className={`h-4 w-4 shrink-0 text-dark-muted transition-transform ${responsiblePickerPlanId === plan.id ? 'rotate-180' : ''}`} /></button>{responsiblePickerPlanId === plan.id && <div className="absolute right-0 z-20 mt-2 w-full min-w-[270px] overflow-hidden rounded-xl border border-dark-border bg-dark-card shadow-xl"><div className="border-b border-dark-border px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-dark-muted">Usuários ativos do Graphs</div><div className="max-h-56 overflow-y-auto p-1.5">{operationalUsers.map(user => <button key={user.id ?? 'super-admin'} type="button" onClick={() => void changeResponsible(plan, user)} className="flex w-full items-center justify-between gap-3 rounded-lg px-2.5 py-2 text-left text-sm font-semibold text-dark-text transition-colors hover:bg-dark-input cursor-pointer"><span className="truncate">{user.name}</span>{plan.responsibleUserId === user.id && plan.responsibleName === user.name && <Check className="h-4 w-4 shrink-0 text-brand-primary" />}</button>)}{!operationalUsers.length && <p className="px-2 py-3 text-xs font-semibold text-dark-muted">Nenhum usuário ativo encontrado.</p>}</div>{plan.responsibleName && <button type="button" onClick={() => void changeResponsible(plan, null)} className="w-full border-t border-dark-border px-3 py-2 text-left text-xs font-bold text-dark-muted transition-colors hover:bg-dark-input hover:text-dark-text cursor-pointer">Remover responsável</button>}</div>}</div>
                 <label className="text-xs font-bold text-dark-muted">Mover plano<select value={plan.status} disabled={busyPlanId === plan.id} onChange={(event) => void movePlan(plan, event.target.value)} className="mt-1 h-10 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-bold text-dark-text outline-none focus:border-brand-primary disabled:opacity-60 cursor-pointer"><option value={plan.status}>{busyPlanId === plan.id ? 'Atualizando...' : plan.statusLabel}</option>{statusOptions.filter(option => option.value !== plan.status).map(option => <option key={option.value} value={option.value}>{option.label}</option>)}</select></label>
               </div>
             ))}