chore: subir version inicial del Tablero CDC
This commit is contained in:
@@ -0,0 +1,375 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
DialogDescription,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Lock, Trash2, DollarSign, Calendar } from "lucide-react";
|
||||
import { ColorPicker } from "./ColorPicker";
|
||||
import { LinkList } from "./LinkList";
|
||||
import { CLIENTES, BUS, BU_CM, MARCAS, STATUS, COLORS, MESES, type Status } from "@/data/lists";
|
||||
import { useProjects, type Project } from "@/lib/store";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { colorHex } from "@/lib/colors";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (v: boolean) => void;
|
||||
project?: Project | null; // editar; vacío = crear
|
||||
}
|
||||
|
||||
const empty = (): Omit<Project, "id" | "createdAt"> => {
|
||||
const now = new Date();
|
||||
return {
|
||||
nombre: "",
|
||||
color: "blue",
|
||||
cliente: "",
|
||||
bu: "",
|
||||
cm: "",
|
||||
marca: "",
|
||||
solicitante: "",
|
||||
comentarios: "",
|
||||
briefLink: "",
|
||||
propuestaLinks: [],
|
||||
afLinks: [],
|
||||
status: "",
|
||||
monto: null,
|
||||
mes: MESES[now.getMonth()],
|
||||
anio: now.getFullYear(),
|
||||
};
|
||||
};
|
||||
|
||||
export function ProjectDialog({ open, onOpenChange, project }: Props) {
|
||||
const { add, update, remove } = useProjects();
|
||||
const { isGerardo } = useAuth();
|
||||
const isEdit = !!project;
|
||||
|
||||
const [form, setForm] = useState<Omit<Project, "id" | "createdAt">>(empty());
|
||||
|
||||
useEffect(() => {
|
||||
if (project) {
|
||||
const { id: _i, createdAt: _c, ...rest } = project;
|
||||
setForm(rest);
|
||||
} else if (open) {
|
||||
setForm(empty());
|
||||
}
|
||||
}, [project, open]);
|
||||
|
||||
const set = <K extends keyof typeof form>(k: K, v: (typeof form)[K]) =>
|
||||
setForm((f) => ({ ...f, [k]: v }));
|
||||
|
||||
// BU → CM automático
|
||||
const onBU = (bu: string) => setForm((f) => ({ ...f, bu, cm: BU_CM[bu] ?? "" }));
|
||||
|
||||
const requiredOk =
|
||||
form.nombre.trim() && form.cliente && form.bu && form.marca && form.solicitante.trim();
|
||||
|
||||
const submit = () => {
|
||||
if (!requiredOk) return;
|
||||
if (isEdit && project) {
|
||||
update(project.id, form);
|
||||
} else {
|
||||
add({ ...form, id: crypto.randomUUID(), createdAt: Date.now() });
|
||||
}
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
if (project && confirm("¿Eliminar este proyecto?")) {
|
||||
remove(project.id);
|
||||
onOpenChange(false);
|
||||
}
|
||||
};
|
||||
|
||||
const closed = !!form.status;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl max-h-[92vh] overflow-y-auto p-0 gap-0">
|
||||
{/* Pestaña de color superior */}
|
||||
<div
|
||||
className="h-2.5 w-full rounded-t-lg"
|
||||
style={{ backgroundColor: colorHex(form.color) }}
|
||||
/>
|
||||
|
||||
<div className="px-7 pt-6 pb-7">
|
||||
<DialogHeader className="space-y-3">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<DialogTitle className="text-2xl tracking-tight">
|
||||
{isEdit ? form.nombre || "Sin título" : "Nuevo proyecto"}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="mt-1 flex items-center gap-2 text-xs">
|
||||
<Calendar className="w-3.5 h-3.5" />
|
||||
{form.mes} · {form.anio}
|
||||
{closed && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
Cerrado
|
||||
</Badge>
|
||||
)}
|
||||
</DialogDescription>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 mt-6">
|
||||
{/* Nombre */}
|
||||
<div className="md:col-span-2 space-y-1.5">
|
||||
<Label>
|
||||
Nombre del proyecto <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={form.nombre}
|
||||
onChange={(e) => set("nombre", e.target.value)}
|
||||
placeholder="Ej: Promoción Día de las Madres"
|
||||
className="h-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label>Etiqueta de color</Label>
|
||||
<ColorPicker value={form.color} onChange={(c) => set("color", c)} />
|
||||
</div>
|
||||
|
||||
<Separator className="md:col-span-2 my-1" />
|
||||
|
||||
{/* Cliente */}
|
||||
<div className="space-y-1.5">
|
||||
<Label>
|
||||
Cliente <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={form.cliente} onValueChange={(v) => set("cliente", v)}>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="Seleccionar…" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{CLIENTES.map((c) => (
|
||||
<SelectItem key={c} value={c}>
|
||||
{c}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Marca */}
|
||||
<div className="space-y-1.5">
|
||||
<Label>
|
||||
Marca <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={form.marca} onValueChange={(v) => set("marca", v)}>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="Seleccionar…" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{MARCAS.map((m) => (
|
||||
<SelectItem key={m} value={m}>
|
||||
{m}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* BU */}
|
||||
<div className="space-y-1.5">
|
||||
<Label>
|
||||
BU Solicita (País) <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select value={form.bu} onValueChange={onBU}>
|
||||
<SelectTrigger className="h-10">
|
||||
<SelectValue placeholder="Seleccionar…" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{BUS.map((b) => (
|
||||
<SelectItem key={b} value={b}>
|
||||
{b}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* CM autocompletado */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="flex items-center gap-1.5">
|
||||
Country Manager <span className="text-xs text-muted-foreground">(automático)</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={form.cm}
|
||||
readOnly
|
||||
disabled
|
||||
className="h-10 bg-muted/50"
|
||||
placeholder="—"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Solicitante */}
|
||||
<div className="space-y-1.5">
|
||||
<Label>
|
||||
Solicitado por <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={form.solicitante}
|
||||
onChange={(e) => set("solicitante", e.target.value)}
|
||||
placeholder="Nombre de quien solicita"
|
||||
className="h-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Comentarios */}
|
||||
<div className="md:col-span-2 space-y-1.5">
|
||||
<Label>Comentarios</Label>
|
||||
<Textarea
|
||||
value={form.comentarios}
|
||||
onChange={(e) => set("comentarios", e.target.value)}
|
||||
placeholder="Notas adicionales del proyecto…"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="md:col-span-2 my-1" />
|
||||
|
||||
{/* Brief link único */}
|
||||
<div className="md:col-span-2 space-y-1.5">
|
||||
<Label>
|
||||
Link del Brief{" "}
|
||||
<span className="text-xs text-muted-foreground font-normal">
|
||||
(carpeta de Fulgencio)
|
||||
</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={form.briefLink}
|
||||
onChange={(e) => set("briefLink", e.target.value)}
|
||||
placeholder="https://drive.google.com/…"
|
||||
className="h-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Propuestas */}
|
||||
<div className="md:col-span-2">
|
||||
<LinkList
|
||||
label="Links de Propuestas"
|
||||
links={form.propuestaLinks}
|
||||
onChange={(v) => set("propuestaLinks", v)}
|
||||
emptyText="Aún no hay propuestas. Pegá tantos links como necesites."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Artes Finales */}
|
||||
<div className="md:col-span-2">
|
||||
<LinkList
|
||||
label="Links de Artes Finales"
|
||||
prefix="AF"
|
||||
links={form.afLinks}
|
||||
onChange={(v) => set("afLinks", v)}
|
||||
emptyText="Aún no hay artes finales."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="md:col-span-2 my-1" />
|
||||
|
||||
{/* Status (solo Marrero edita) */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="flex items-center gap-1.5">
|
||||
Estatus
|
||||
{!isGerardo && <Lock className="w-3 h-3 text-muted-foreground" />}
|
||||
</Label>
|
||||
<Select
|
||||
value={form.status || "_none"}
|
||||
onValueChange={(v) => set("status", (v === "_none" ? "" : v) as Status | "")}
|
||||
disabled={!isGerardo}
|
||||
>
|
||||
<SelectTrigger className={cn("h-10", !isGerardo && "opacity-70")}>
|
||||
<SelectValue placeholder="Sin estatus" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_none">Sin estatus</SelectItem>
|
||||
{STATUS.map((s) => (
|
||||
<SelectItem key={s} value={s}>
|
||||
{s}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{!isGerardo && (
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Solo Marrero puede cambiar el estatus.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Monto: SOLO visible para Marrero */}
|
||||
{isGerardo ? (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="flex items-center gap-1.5">
|
||||
<DollarSign className="w-3.5 h-3.5" /> Interno Cargado
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.monto ?? ""}
|
||||
onChange={(e) =>
|
||||
set("monto", e.target.value === "" ? null : Number(e.target.value))
|
||||
}
|
||||
placeholder="0.00"
|
||||
className="h-10"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground">Privado · solo lo ves vos.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-muted-foreground flex items-center gap-1.5">
|
||||
<Lock className="w-3.5 h-3.5" /> Interno Cargado
|
||||
</Label>
|
||||
<div className="h-10 px-3 flex items-center rounded-md border border-dashed border-border bg-muted/30 text-xs text-muted-foreground italic">
|
||||
Solo visible para Marrero
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="px-7 py-4 border-t bg-muted/30 rounded-b-lg flex-row justify-between sm:justify-between">
|
||||
<div>
|
||||
{isEdit && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onDelete}
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-1.5" /> Eliminar
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={!requiredOk}>
|
||||
{isEdit ? "Guardar cambios" : "Crear proyecto"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user