feat: agregar eliminacion y Walmart Connect multipais

2026-06-05 15:59:54 -04:00
parent c546f59009
commit 8c3d18814d
10 changed files with 720 additions and 404 deletions
@@ -5,15 +5,30 @@ import { colorHex } from "@/lib/colors";
 import type { Project } from "@/lib/store";
 import { useAuth } from "@/context/AuthContext";

-export function ProjectCard({ project, onClick }: { project: Project; onClick: () => void }) {
+interface ProjectCardProps {
+  project: Project;
+  onClick: () => void;
+}
+
+export function ProjectCard({ project, onClick }: ProjectCardProps) {
  const closed = !!project.status;
  const { isGerardo } = useAuth();

+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
  return (
-    <button
+    <div
+      role="button"
+      tabIndex={0}
      onClick={onClick}
+      onKeyDown={handleKeyDown}
      className={cn(
-        "group block text-left w-full rounded-2xl bg-card overflow-hidden p-0 ring-1 ring-border",
+        "group block text-left w-full rounded-2xl bg-card overflow-hidden p-0 ring-1 ring-border cursor-pointer",
        "transition-all duration-200 hover:-translate-y-0.5",
        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        closed && "opacity-65 hover:opacity-90",
@@ -86,7 +101,7 @@ export function ProjectCard({ project, onClick }: { project: Project; onClick: (
          </div>
        </div>
      </div>
-    </button>
+    </div>
  );
 }

@@ -11,6 +11,7 @@ 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 { Checkbox } from "@/components/ui/checkbox";
 import {
  Select,
  SelectContent,
@@ -20,7 +21,7 @@ import {
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { AlertCircle, Loader2, Lock, DollarSign, Calendar } from "lucide-react";
+import { AlertCircle, Loader2, Lock, DollarSign, Calendar, Trash2 } from "lucide-react";
 import { ColorPicker } from "./ColorPicker";
 import { LinkList } from "./LinkList";
 import { MESES, type Status } from "@/data/lists";
@@ -41,6 +42,14 @@ interface Props {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  project?: Project | null; // editar; vacío = crear
+  onDelete?: (project: Project) => void;
+  deleting?: boolean;
+}
+
+const WALMART_CONNECT_CLIENT = "Walmart Connect WMC";
+
+function isWalmartConnectClient(client: string | null | undefined) {
+  return normalizeOptionKey(client) === normalizeOptionKey(WALMART_CONNECT_CLIENT);
 }

 const empty = (): Omit<Project, "id" | "createdAt"> => {
@@ -64,13 +73,14 @@ const empty = (): Omit<Project, "id" | "createdAt"> => {
  };
 };

-export function ProjectDialog({ open, onOpenChange, project }: Props) {
+export function ProjectDialog({ open, onOpenChange, project, onDelete, deleting = false }: Props) {
  const { add, update } = useProjects();
  const { lists, loading: listsLoading, error: listsError, refresh: refreshLists } = useAppLists();
-  const { isGerardo } = useAuth();
+  const { isGerardo, canDeleteProjects } = useAuth();
  const isEdit = !!project;

  const [form, setForm] = useState<Omit<Project, "id" | "createdAt">>(empty());
+  const [selectedWmcCountries, setSelectedWmcCountries] = useState<string[]>([]);
  const [saving, setSaving] = useState(false);
  const [savingStep, setSavingStep] = useState<string | null>(null);
  const [formError, setFormError] = useState<string | null>(null);
@@ -86,12 +96,15 @@ export function ProjectDialog({ open, onOpenChange, project }: Props) {

    if (project) {
      const { id: _i, createdAt: _c, ...rest } = project;
+      const cleanBu = canonicalOptionLabel(rest.bu);
      setForm({
        ...rest,
-        bu: canonicalOptionLabel(rest.bu),
+        bu: cleanBu,
      });
+      setSelectedWmcCountries(cleanBu ? [cleanBu] : []);
    } else if (open) {
      setForm(empty());
+      setSelectedWmcCountries([]);
    }
  }, [project, open]);

@@ -114,8 +127,51 @@ export function ProjectDialog({ open, onOpenChange, project }: Props) {
    setForm((f) => ({ ...f, bu: cleanBu, cm: getCountryManager(cleanBu) }));
  };

+  const onCliente = (cliente: string) => {
+    const cleanCliente = canonicalOptionLabel(cliente);
+
+    setForm((f) => ({
+      ...f,
+      cliente: cleanCliente,
+      ...(isWalmartConnectClient(cleanCliente) && !isEdit
+        ? { bu: "", cm: "" }
+        : f.cliente && isWalmartConnectClient(f.cliente)
+          ? { bu: "", cm: "" }
+          : {}),
+    }));
+
+    if (!isWalmartConnectClient(cleanCliente)) {
+      setSelectedWmcCountries([]);
+    }
+  };
+
+  const isWalmartConnectCreate = !isEdit && isWalmartConnectClient(form.cliente);
+
+  const toggleWmcCountry = (country: string, checked: boolean) => {
+    const cleanCountry = canonicalOptionLabel(country);
+
+    setSelectedWmcCountries((current) => {
+      if (checked) {
+        return dedupeOptions([...current, cleanCountry]);
+      }
+
+      return current.filter(
+        (item) => normalizeOptionKey(item) !== normalizeOptionKey(cleanCountry),
+      );
+    });
+  };
+
+  const selectedWmcCountryManagers = selectedWmcCountries.map((country) => ({
+    country,
+    manager: getCountryManager(country),
+  }));
+
  const requiredOk =
-    form.nombre.trim() && form.cliente && form.bu && form.marca && form.solicitante.trim();
+    form.nombre.trim() &&
+    form.cliente &&
+    form.marca &&
+    form.solicitante.trim() &&
+    (isWalmartConnectCreate ? selectedWmcCountries.length > 0 : form.bu);

  const showSaveToast = (result: Awaited<ReturnType<typeof add>>) => {
    if (result.sheetSyncStatus === "synced") {
@@ -153,12 +209,46 @@ export function ProjectDialog({ open, onOpenChange, project }: Props) {
      setFormError(null);
      setSavingStep("Guardando y sincronizando con Google Sheet…");

-      const result =
-        isEdit && project
-          ? await update(project.id, safeForm)
-          : await add({ ...safeForm, id: crypto.randomUUID(), createdAt: Date.now() });
+      if (isWalmartConnectCreate) {
+        const countries = selectedWmcCountries;
+        const results = [];
+
+        for (const [index, country] of countries.entries()) {
+          setSavingStep(
+            `Guardando Walmart Connect WMC ${index + 1} de ${countries.length}: ${country}…`,
+          );
+
+          const countryProject = {
+            ...safeForm,
+            bu: country,
+            cm: getCountryManager(country),
+            id: crypto.randomUUID(),
+            createdAt: Date.now() + index,
+          };
+
+          results.push(await add(countryProject));
+        }
+
+        const failedSyncs = results.filter((result) => result.sheetSyncStatus !== "synced");
+
+        if (failedSyncs.length === 0) {
+          toast.success("Proyectos Walmart Connect creados", {
+            description: `Se crearon ${countries.length} proyectos y ${countries.length} filas en Google Sheet.`,
+          });
+        } else {
+          toast.warning("Proyectos Walmart Connect creados con aviso", {
+            description: `${failedSyncs.length} de ${countries.length} sincronizaciones con Google Sheet requieren revisión.`,
+          });
+        }
+      } else {
+        const result =
+          isEdit && project
+            ? await update(project.id, safeForm)
+            : await add({ ...safeForm, id: crypto.randomUUID(), createdAt: Date.now() });
+
+        showSaveToast(result);
+      }

-      showSaveToast(result);
      onOpenChange(false);
    } catch (error) {
      console.error("Error guardando proyecto:", error);
@@ -270,7 +360,7 @@ export function ProjectDialog({ open, onOpenChange, project }: Props) {
              <Label>
                Cliente <span className="text-destructive">*</span>
              </Label>
-              <Select value={form.cliente} onValueChange={(v) => set("cliente", v)}>
+              <Select value={form.cliente} onValueChange={onCliente}>
                <SelectTrigger className="h-10">
                  <SelectValue placeholder="Seleccionar…" />
                </SelectTrigger>
@@ -304,36 +394,101 @@ export function ProjectDialog({ open, onOpenChange, project }: Props) {
            </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>
-                  {buOptions.map((b) => (
-                    <SelectItem key={b} value={b}>
-                      {b}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+            {isWalmartConnectCreate ? (
+              <div className="md:col-span-2 space-y-2 rounded-xl border border-primary/20 bg-primary/5 p-3">
+                <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+                  <Label>
+                    BU Solicita (Países) <span className="text-destructive">*</span>
+                  </Label>
+                  <span className="text-xs font-medium text-primary">
+                    {selectedWmcCountries.length} seleccionado(s)
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Para Walmart Connect WMC puedes seleccionar varios países. La app creará un
+                  proyecto y una fila del Sheet por cada país.
+                </p>
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                  {buOptions.map((b) => {
+                    const checked = selectedWmcCountries.some(
+                      (country) => normalizeOptionKey(country) === normalizeOptionKey(b),
+                    );
+                    const manager = getCountryManager(b);
+
+                    return (
+                      <label
+                        key={b}
+                        className={cn(
+                          "flex cursor-pointer items-start gap-2 rounded-lg border bg-card px-3 py-2 text-sm transition-colors",
+                          checked
+                            ? "border-primary/50 bg-primary/10"
+                            : "border-border hover:bg-muted/40",
+                        )}
+                      >
+                        <Checkbox
+                          checked={checked}
+                          onCheckedChange={(value) => toggleWmcCountry(b, value === true)}
+                          className="mt-0.5"
+                        />
+                        <span className="leading-tight">
+                          <span className="block font-medium">{b}</span>
+                          <span className="text-xs text-muted-foreground">
+                            CM: {manager || "—"}
+                          </span>
+                        </span>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : (
+              <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>
+                    {buOptions.map((b) => (
+                      <SelectItem key={b} value={b}>
+                        {b}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}

            {/* CM autocompletado */}
-            <div className="space-y-1.5">
+            <div className={cn("space-y-1.5", isWalmartConnectCreate && "md:col-span-2")}>
              <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="—"
-              />
+              {isWalmartConnectCreate ? (
+                <div className="min-h-10 rounded-md border border-border bg-muted/30 px-3 py-2 text-sm">
+                  {selectedWmcCountryManagers.length === 0 ? (
+                    <span className="text-muted-foreground">Selecciona uno o más países.</span>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {selectedWmcCountryManagers.map(({ country, manager }) => (
+                        <Badge key={country} variant="secondary" className="font-normal">
+                          {country}: {manager || "—"}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <Input
+                  value={form.cm}
+                  readOnly
+                  disabled
+                  className="h-10 bg-muted/50"
+                  placeholder="—"
+                />
+              )}
            </div>

            {/* Solicitante */}
@@ -477,15 +632,42 @@ export function ProjectDialog({ open, onOpenChange, project }: Props) {
          )}
        </div>

-        <DialogFooter className="px-7 py-4 border-t bg-muted/30 rounded-b-lg flex-row justify-end sm:justify-end">
-          <div className="flex gap-2">
-            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={saving}>
-              Cancelar
-            </Button>
-            <Button onClick={submit} disabled={!requiredOk || saving}>
-              {saving && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
-              {saving ? "Guardando…" : isEdit ? "Guardar cambios" : "Crear proyecto"}
-            </Button>
+        <DialogFooter className="px-7 py-4 border-t bg-muted/30 rounded-b-lg sm:justify-between">
+          <div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              {isEdit && project && canDeleteProjects && onDelete && (
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => onDelete(project)}
+                  disabled={saving || deleting}
+                  className="gap-1.5 rounded-full"
+                >
+                  {deleting ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Trash2 className="h-4 w-4" />
+                  )}
+                  {deleting ? "Eliminando…" : "Eliminar proyecto"}
+                </Button>
+              )}
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={saving || deleting}>
+                Cancelar
+              </Button>
+              <Button onClick={submit} disabled={!requiredOk || saving || deleting}>
+                {saving && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
+                {saving
+                  ? "Guardando…"
+                  : isEdit
+                    ? "Guardar cambios"
+                    : isWalmartConnectCreate
+                      ? "Crear proyectos"
+                      : "Crear proyecto"}
+              </Button>
+            </div>
          </div>
        </DialogFooter>
      </DialogContent>
@@ -12,6 +12,7 @@ import { supabase } from "@/lib/supabase";

 const ALLOWED_DOMAIN = "gomezleemarketing.com";
 const GERARDO_EMAIL = "gmarrero@gomezleemarketing.com";
+const DELETE_ALLOWED_EMAILS = [GERARDO_EMAIL, "areyes@gomezleemarketing.com"];

 function isAllowedEmail(email: string | null | undefined): boolean {
  if (!email) return false;
@@ -59,6 +60,7 @@ interface AuthContextValue {
  loading: boolean;
  error: string | null;
  isGerardo: boolean;
+  canDeleteProjects: boolean;
  loginWithGoogle: () => Promise<void>;
  logout: () => Promise<void>;
 }
@@ -158,10 +160,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
    setError(null);
  }, []);

-  const isGerardo = useMemo(() => !!user && user.email?.toLowerCase() === GERARDO_EMAIL, [user]);
+  const normalizedEmail = user?.email?.toLowerCase() || "";
+  const isGerardo = useMemo(() => normalizedEmail === GERARDO_EMAIL, [normalizedEmail]);
+  const canDeleteProjects = useMemo(
+    () => DELETE_ALLOWED_EMAILS.includes(normalizedEmail),
+    [normalizedEmail],
+  );

  return (
-    <AuthContext.Provider value={{ user, loading, error, isGerardo, loginWithGoogle, logout }}>
+    <AuthContext.Provider
+      value={{ user, loading, error, isGerardo, canDeleteProjects, loginWithGoogle, logout }}
+    >
      {children}
    </AuthContext.Provider>
  );
@@ -57,6 +57,7 @@ type DbProject = {
 const DEFAULT_COLOR: ColorId = "blue";
 const OPEN_STATUS = "Activo";
 const GERARDO_EMAIL = "gmarrero@gomezleemarketing.com";
+const DELETE_ALLOWED_EMAILS = [GERARDO_EMAIL, "areyes@gomezleemarketing.com"];

 let listeners: Array<() => void> = [];
 let cache: Project[] = [];
@@ -146,6 +147,11 @@ async function currentUserIsGerardo(): Promise<boolean> {
  return user.email?.toLowerCase() === GERARDO_EMAIL;
 }

+async function currentUserCanDeleteProjects(): Promise<boolean> {
+  const user = await getCurrentUser();
+  return DELETE_ALLOWED_EMAILS.includes(user.email?.toLowerCase() || "");
+}
+
 function toProjectRow(project: Omit<Project, "id" | "createdAt"> | Partial<Project>) {
  return {
    title: project.nombre,
@@ -207,7 +213,7 @@ function getSyncWebhookUrl() {

 async function syncProjectToSheet(
  projectId: string,
-  action: "create" | "update",
+  action: "create" | "update" | "delete",
 ): Promise<Omit<SaveProjectResult, "projectId">> {
  const webhookUrl = getSyncWebhookUrl();

@@ -215,7 +221,10 @@ async function syncProjectToSheet(
    console.info("No se configuró VITE_WEBHOOK_URL; se omite sincronización con Google Sheet.");
    return {
      sheetSyncStatus: "skipped",
-      sheetSyncMessage: "Proyecto guardado. No hay webhook configurado para sincronizar el Sheet.",
+      sheetSyncMessage:
+        action === "delete"
+          ? "No hay webhook configurado para eliminar el proyecto del Google Sheet."
+          : "Proyecto guardado. No hay webhook configurado para sincronizar el Sheet.",
    };
  }

@@ -249,13 +258,19 @@ async function syncProjectToSheet(

      return {
        sheetSyncStatus: "failed",
-        sheetSyncMessage: `Proyecto guardado, pero el Sheet no se pudo sincronizar: ${message}`,
+        sheetSyncMessage:
+          action === "delete"
+            ? `No se pudo eliminar el proyecto del Google Sheet: ${message}`
+            : `Proyecto guardado, pero el Sheet no se pudo sincronizar: ${message}`,
      };
    }

    return {
      sheetSyncStatus: "synced",
-      sheetSyncMessage: "Proyecto guardado y sincronizado con el Google Sheet.",
+      sheetSyncMessage:
+        action === "delete"
+          ? "Proyecto eliminado del Google Sheet."
+          : "Proyecto guardado y sincronizado con el Google Sheet.",
    };
  } catch (error) {
    const isTimeout = error instanceof DOMException && error.name === "AbortError";
@@ -265,8 +280,12 @@ async function syncProjectToSheet(
    return {
      sheetSyncStatus: isTimeout ? "timeout" : "failed",
      sheetSyncMessage: isTimeout
-        ? "Proyecto guardado, pero n8n tardó demasiado en responder. Revisa el workflow si el Sheet no se actualizó."
-        : "Proyecto guardado, pero no se pudo sincronizar con Google Sheet.",
+        ? action === "delete"
+          ? "n8n tardó demasiado en responder. No se eliminó el proyecto para evitar inconsistencias."
+          : "Proyecto guardado, pero n8n tardó demasiado en responder. Revisa el workflow si el Sheet no se actualizó."
+        : action === "delete"
+          ? "No se pudo eliminar el proyecto del Google Sheet. No se eliminó el proyecto para evitar inconsistencias."
+          : "Proyecto guardado, pero no se pudo sincronizar con Google Sheet.",
    };
  } finally {
    window.clearTimeout(timeout);
@@ -465,6 +484,50 @@ async function updateProject(id: string, patch: Partial<Project>) {
 }


+async function deleteProject(id: string) {
+  setError(null);
+
+  const canDelete = await currentUserCanDeleteProjects();
+
+  if (!canDelete) {
+    const message = "No tienes permiso para eliminar proyectos.";
+    setError(message);
+    throw new Error(message);
+  }
+
+  const sheetSync = await syncProjectToSheet(id, "delete");
+
+  if (sheetSync.sheetSyncStatus !== "synced") {
+    const message = sheetSync.sheetSyncMessage || "No se pudo eliminar el proyecto del Google Sheet.";
+    setError(message);
+    throw new Error(message);
+  }
+
+  const { error: linksError } = await supabase
+    .from("tablero_cdc_project_links")
+    .delete()
+    .eq("project_id", id);
+
+  if (linksError) {
+    setError(linksError.message);
+    throw linksError;
+  }
+
+  const { error: projectError } = await supabase
+    .from("tablero_cdc_projects")
+    .delete()
+    .eq("id", id);
+
+  if (projectError) {
+    setError(projectError.message);
+    throw projectError;
+  }
+
+  setCache(cache.filter((project) => project.id !== id));
+  await loadProjects();
+}
+
+
 export function useProjects() {
  const [, force] = useState(0);

@@ -496,6 +559,7 @@ export function useProjects() {
    refresh: loadProjects,
    add: addProject,
    update: updateProject,
+    remove: deleteProject,
  };
 }

@@ -39,7 +39,7 @@ function initials(name: string | null | undefined, email: string | null | undefi
 }

 export default function BoardPage() {
-  const { projects, loading, error, refresh } = useProjects();
+  const { projects, loading, error, refresh, remove } = useProjects();
  const { user, isGerardo, logout } = useAuth();

  const projectsTopRef = useRef<HTMLDivElement | null>(null);
@@ -53,6 +53,7 @@ export default function BoardPage() {
    abiertos: 1,
    cerrados: 1,
  });
+  const [deletingProjectId, setDeletingProjectId] = useState<string | null>(null);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
@@ -105,6 +106,34 @@ export default function BoardPage() {
    setOpen(true);
  };

+  const deleteProject = async (project: Project) => {
+    const confirmed = window.confirm(
+      `¿Seguro que deseas eliminar el proyecto "${project.nombre || "Sin título"}"?\n\nEsta acción eliminará el proyecto del tablero y del Google Sheet.`,
+    );
+
+    if (!confirmed) return;
+
+    setDeletingProjectId(project.id);
+
+    try {
+      await remove(project.id);
+
+      if (editing?.id === project.id) {
+        setOpen(false);
+        setEditing(null);
+      }
+    } catch (err) {
+      console.error("Error eliminando proyecto:", err);
+      const message =
+        err instanceof Error
+          ? err.message
+          : "No se pudo eliminar el proyecto. Revisa n8n, Supabase o permisos.";
+      window.alert(message);
+    } finally {
+      setDeletingProjectId(null);
+    }
+  };
+
  const displayName = user?.displayName ?? user?.email ?? "Usuario";
  const userRole = isGerardo ? "Jefe CDC" : "Usuario CDC";
  const userInitials = initials(user?.displayName, user?.email);
@@ -256,7 +285,11 @@ export default function BoardPage() {
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {paginatedProjects.map((p) => (
-              <ProjectCard key={p.id} project={p} onClick={() => openEdit(p)} />
+              <ProjectCard
+                key={p.id}
+                project={p}
+                onClick={() => openEdit(p)}
+              />
            ))}
          </div>
        )}
@@ -273,7 +306,13 @@ export default function BoardPage() {
        )}
      </main>

-      <ProjectDialog open={open} onOpenChange={setOpen} project={editing} />
+      <ProjectDialog
+        open={open}
+        onOpenChange={setOpen}
+        project={editing}
+        onDelete={deleteProject}
+        deleting={!!editing && deletingProjectId === editing.id}
+      />
    </div>
  );
 }