feat: add context menu functionality and delete buttons for plans and carreras; update dependencies

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
@@ -221,6 +222,8 @@
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
+    "@radix-ui/react-context-menu": ["@radix-ui/react-context-menu@2.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww=="],
+
     "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
 
     "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",

src/components/carreras/DeleteCarreras.tsx

@@ -0,0 +1,54 @@
+import { supabase } from "@/auth/supabase";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "@tanstack/react-router";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Trash } from "lucide-react";
+import { carrerasKeys } from "@/routes/_authenticated/carreras";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "../ui/dialog";
+
+export function useDeleteCarreraDialog(carreraId: string, onDeleted?: () => void) {
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const qc = useQueryClient()
+    const router = useRouter()
+
+    async function handleDelete() {
+        setLoading(true)
+        try {
+            const { error } = await supabase.from("carreras").delete().eq("id", carreraId)
+            if (error) throw error
+            setOpen(false)
+            if (onDeleted) onDeleted()
+            await qc.invalidateQueries({ queryKey: carrerasKeys.root })
+            router.invalidate()
+        } catch (e: any) {
+            alert(e?.message || "Error al eliminar la carrera")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const dialog = (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>¿Eliminar carrera?</DialogTitle>
+                    <DialogDescription>
+                        Esta acción no se puede deshacer. ¿Seguro que quieres eliminar esta carrera?
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => setOpen(false)} disabled={loading}>
+                        Cancelar
+                    </Button>
+                    <Button variant="destructive" onClick={handleDelete} disabled={loading}>
+                        {loading ? "Eliminando…" : "Eliminar"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+
+    return { open, setOpen, dialog }
+}

src/components/planes/DeletePlan.tsx

@@ -0,0 +1,41 @@
+import { supabase } from "@/auth/supabase";
+import { useRouter } from "@tanstack/react-router";
+import { useState } from "react";
+import { Button } from "../ui/button";
+
+export function DeletePlanButton({ planId, onDeleted }: { planId: string; onDeleted?: () => void }) {
+  const [confirm, setConfirm] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  async function handleDelete() {
+    setLoading(true)
+    try {
+      const { error, status, statusText} = await supabase.from("plan_estudios").delete().eq("id", planId)
+      console.log({status, statusText});
+      
+
+      if (error) throw error
+      setConfirm(false)
+      if (onDeleted) onDeleted()
+      router.navigate({ to: "/planes", search: { plan: '' } })
+    } catch (e: any) {
+      alert(e?.message || "Error al eliminar el plan")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return confirm ? (
+    <div className="flex gap-2">
+      <Button variant="destructive" onClick={handleDelete} disabled={loading}>
+        {loading ? "Eliminando…" : "Confirmar eliminación"}
+      </Button>
+      <Button variant="outline" onClick={() => setConfirm(false)} disabled={loading}>Cancelar</Button>
+    </div>
+  ) : (
+    <Button variant="outline" onClick={() => setConfirm(true)}>
+      Eliminar plan
+    </Button>
+  )
+}

src/components/ui/context-menu.tsx

@@ -0,0 +1,250 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/routes/_authenticated/carreras.tsx

@@ -14,6 +14,8 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"
 import { Switch } from "@/components/ui/switch"
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu"
+import { useDeleteCarreraDialog } from "@/components/carreras/DeleteCarreras"
 
 /* -------------------- Tipos -------------------- */
 type FacultadLite = { id: string; nombre: string; color?: string | null; icon?: string | null }
@@ -27,7 +29,7 @@ export type CarreraRow = {
 }
 
 /* -------------------- Query Keys & Fetchers -------------------- */
-const carrerasKeys = {
+export const carrerasKeys = {
   root: ["carreras"] as const,
   list: () => [...carrerasKeys.root, "list"] as const,
 }
@@ -115,8 +117,7 @@ const tint = (hex?: string | null, a = 0.18) => {
 }
 const StatusPill = ({ active }: { active: boolean }) => (
   <span
-    className={`text-[10px] px-2 py-0.5 rounded-full border ${
+    className={`text-[10px] px-2 py-0.5 rounded-full border ${active
-      active
       ? "bg-emerald-50 text-emerald-700 border-emerald-200"
       : "bg-neutral-100 text-neutral-700 border-neutral-200"
       }`}
@@ -212,9 +213,14 @@ function RouteComponent() {
               const border = tint(fac?.color, 0.28)
               const chip = tint(fac?.color, 0.1)
               const IconComp = (fac?.icon && (Icons as any)[fac.icon]) || Icons.Building2
+              const { setOpen: setDeleteOpen, dialog: deleteDialog } = useDeleteCarreraDialog(c.id, async () => {
+                await qc.invalidateQueries({ queryKey: carrerasKeys.root })
+                router.invalidate()
+              })
               return (
+                <ContextMenu key={c.id}>
+                  <ContextMenuTrigger onClick={(e) => openContextMenu(e)}>
                     <article
-                  key={c.id}
                       className="group relative overflow-hidden rounded-3xl bg-white shadow-sm ring-1 transition-all hover:shadow-md hover:-translate-y-0.5"
                       style={{ borderColor: border, background: `linear-gradient(180deg, ${chip}, transparent)` }}
                     >
@@ -231,17 +237,23 @@ function RouteComponent() {
 
                         <div className="mt-2 flex items-center justify-between">
                           <StatusPill active={c.activo} />
-                      <div className="flex items-center gap-1.5">
-                        <Button variant="ghost" size="sm" onClick={() => setDetail(c)}>
-                          <Icons.Eye className="w-4 h-4 mr-1" /> Ver
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={() => setEditCarrera(c)}>
-                          <Icons.Pencil className="w-4 h-4 mr-1" /> Editar
-                        </Button>
-                      </div>
                         </div>
                       </div>
                     </article>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    <ContextMenuItem onClick={() => setDetail(c)}>
+                      <Icons.Eye className="w-4 h-4 mr-2" /> Ver
+                    </ContextMenuItem>
+                    <ContextMenuItem onClick={() => setEditCarrera(c)}>
+                      <Icons.Pencil className="w-4 h-4 mr-2" /> Editar
+                    </ContextMenuItem>
+                    <ContextMenuItem onClick={() => setDeleteOpen(true)}>
+                      <Icons.Trash className="w-4 h-4 mr-2" /> Eliminar
+                    </ContextMenuItem>
+                  </ContextMenuContent>
+                  {deleteDialog}
+                </ContextMenu>
               )
             })}
           </div>
@@ -287,6 +299,22 @@ function RouteComponent() {
   )
 }
 
+function openContextMenu(e: React.MouseEvent) {
+  e.preventDefault()
+  e.stopPropagation()
+  // Simulate right click by opening context menu
+  const trigger = e.currentTarget
+  if (!(trigger instanceof HTMLElement)) return
+  const event = new window.MouseEvent("contextmenu", {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    clientX: e.clientX,
+    clientY: e.clientY,
+  })
+  trigger.dispatchEvent(event)
+}
+
 /* -------------------- Form crear/editar -------------------- */
 function CarreraFormDialog({
   open,

src/routes/_authenticated/plan/$planId.tsx

@@ -18,6 +18,7 @@ import confetti from "canvas-confetti"
 import { Textarea } from "@/components/ui/textarea"
 import { AuroraButton } from "@/components/effect/aurora-button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { DeletePlanButton } from "@/components/planes/DeletePlan"
 
 type LoaderData = { planId: string }
 
@@ -94,6 +95,7 @@ function RouteComponent() {
             <div className='flex gap-2'>
               <EditPlanButton plan={plan} />
               <AdjustAIButton plan={plan} />
+              <DeletePlanButton planId={plan.id} />
             </div>
           </div>
         </CardHeader>