organify-ui 0.3.38 → 0.3.39

package/dist/index.d.ts

@@ -975,6 +975,16 @@ declare namespace TaskDetailDialog {
     var displayName: string;
 }
 
+/** Backend ColumnStatus enum values */
+type ColumnStatus = 'TODO' | 'IN_PROGRESS' | 'UNDER_REVIEW' | 'DONE' | 'BLOCKED' | 'WAITING_FOR_CLIENT' | 'TESTING';
+interface ColumnEditData {
+    id: string;
+    name: string;
+    status: ColumnStatus;
+    color?: string;
+    wipLimit?: number;
+}
+
 interface KanbanTask {
     id: string;
     title: string;
@@ -1013,6 +1023,8 @@ interface KanbanColumnData {
     id: string;
     title: string;
     color?: string;
+    /** The ColumnStatus mapped to this column (e.g. TODO, IN_PROGRESS, DONE) */
+    status?: ColumnStatus;
     tasks: KanbanTask[];
     /** WIP limit — column header turns red when exceeded */
     wipLimit?: number;
@@ -1029,6 +1041,10 @@ interface KanbanBoardProps {
     onAddColumn?: (title?: string) => void;
     /** Called with (columnId, newTitle) when column is renamed inline */
     onRenameColumn?: (columnId: string, newTitle: string) => void;
+    /** Called when user opens column edit dialog and saves changes */
+    onEditColumn?: (columnId: string, data: Partial<Omit<ColumnEditData, 'id'>>) => Promise<void> | void;
+    /** Called when user deletes a column from the edit dialog */
+    onDeleteColumn?: (columnId: string) => Promise<void> | void;
     className?: string;
     /**
      * External drag-and-drop library integration
@@ -1075,6 +1091,8 @@ interface ColumnComponentProps {
     onTaskClick: (task: KanbanTask, columnId: string) => void;
     onAddTask?: (columnId: string, title?: string) => void;
     onRenameColumn?: (columnId: string, newTitle: string) => void;
+    onEditColumn?: (columnId: string, data: Partial<Omit<ColumnEditData, 'id'>>) => Promise<void> | void;
+    onDeleteColumn?: (columnId: string) => Promise<void> | void;
     externalDnD?: boolean;
     draggedTask?: {
         task: KanbanTask;
@@ -1087,11 +1105,11 @@ interface ColumnComponentProps {
     isDropTarget?: boolean;
     onTouchDragStart?: (task: KanbanTask, columnId: string) => void;
 }
-declare function Column({ column, onTaskClick, onAddTask, onRenameColumn, externalDnD, draggedTask, onDragStart, onDragEnd, onDragOver, onDrop, isDropTarget, onTouchDragStart, }: ColumnComponentProps): react_jsx_runtime.JSX.Element;
+declare function Column({ column, onTaskClick, onAddTask, onRenameColumn, onEditColumn, onDeleteColumn, externalDnD, draggedTask, onDragStart, onDragEnd, onDragOver, onDrop, isDropTarget, onTouchDragStart, }: ColumnComponentProps): react_jsx_runtime.JSX.Element;
 declare namespace Column {
     var displayName: string;
 }
-declare function KanbanBoard({ columns, onColumnChange, onTaskMove, onAddTask, onAddColumn, onRenameColumn, className, externalDnD, onTaskUpdate, onToggleLabel, onCreateLabel, availableLabels, onAddLabel, onRemoveLabel, onToggleAssignee, availableUsers, availableGroups, onToggleAssigneeGroup, onAddAssignee, onRemoveAssignee, onAddSubtask, onToggleSubtask, onDeleteSubtask, onDeleteTask, onUpdateSubtask, onTaskClick, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
+declare function KanbanBoard({ columns, onColumnChange, onTaskMove, onAddTask, onAddColumn, onRenameColumn, onEditColumn, onDeleteColumn, className, externalDnD, onTaskUpdate, onToggleLabel, onCreateLabel, availableLabels, onAddLabel, onRemoveLabel, onToggleAssignee, availableUsers, availableGroups, onToggleAssigneeGroup, onAddAssignee, onRemoveAssignee, onAddSubtask, onToggleSubtask, onDeleteSubtask, onDeleteTask, onUpdateSubtask, onTaskClick, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
 declare namespace KanbanBoard {
     var displayName: string;
 }

package/dist/index.js

@@ -3,7 +3,7 @@ export { NotificationBell, NotificationItem, NotificationList, OrganifyNotificat
 export { createAiClient, useAiChat, useAiCommand, useAiSuggest, useAiUsage } from './chunk-NV4RWAQ2.js';
 export { I18nProvider, createTranslator, useI18n } from './chunk-FQA33MF4.js';
 export { ThemeProvider, useTheme } from './chunk-RFOKENE3.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, UserAvatar, ResponsiveDialog, Separator, Label, Input, Textarea, Button, UserDisplayName, Tabs, TabsList, TabsTrigger, TabsContent, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-V3UZIPZA.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, UserAvatar, ResponsiveDialog, Separator, Label, Input, Textarea, Button, UserDisplayName, Tabs, TabsList, TabsTrigger, TabsContent, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogFooter, DialogClose } from './chunk-V3UZIPZA.js';
 export { AiChatSidebar, Alert, Button, ChatMessages, ChatSidebar, CommandBar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, InlineAiButton, Input, Label, MOCK_PROJECTS, MOCK_USERS, OrgLoader, OrgLoaderInline, OrganifyChat, ResponsiveDialog, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TypingIndicatorMock, UserAvatar, UserDisplayName, alertVariants, buttonVariants, generateAutoReplies, getMockMentionOptions, getRoomPermissions, inputVariants, invalidateUserCache, orgLoaderVariants, resolveUser, seedUserCache, typingIndicator, useAiInline, useChat, useResolvedUser } from './chunk-V3UZIPZA.js';
 import { cn, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, Skeleton, useOrganify, useOrganifyGql, Avatar, AvatarFallback, useOrganifyUser, useOrganifyApi, Badge, ScrollArea, useOrganifyWorkspace, useOrganifyNavigation, useOrganifyProject, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, AvatarImage } from './chunk-UUBQQVDM.js';
 export { Avatar, AvatarFallback, AvatarImage, Badge, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, OrganifyContext, OrganifyProvider, ScrollArea, ScrollBar, Skeleton, SkeletonCard, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, avatarVariants, badgeVariants, cn, useOrganify, useOrganifyApi, useOrganifyGql, useOrganifyNavigation, useOrganifyProject, useOrganifyRest, useOrganifyUser, useOrganifyWorkspace } from './chunk-UUBQQVDM.js';
@@ -13,7 +13,7 @@ import * as React11 from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { X, XIcon, GripVertical, Check, ChevronRight, Circle, Search, MoreHorizontal, AlertCircle, AlertTriangle, CheckCircle2, Info, Sparkles, Plus, Zap, Trash2, Calendar, Link2, Ban, ArrowRight } from 'lucide-react';
+import { X, XIcon, GripVertical, Settings2, Check, ChevronRight, Circle, Search, MoreHorizontal, AlertCircle, AlertTriangle, CheckCircle2, Info, Sparkles, Plus, Zap, Trash2, Calendar, Link2, Ban, ArrowRight } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { createPortal } from 'react-dom';
@@ -6844,6 +6844,224 @@ function TaskDetailDialog({
   );
 }
 TaskDetailDialog.displayName = "TaskDetailDialog";
+var COLUMN_STATUS_OPTIONS = [
+  { value: "TODO", label: "A Fazer", description: "Tarefas por iniciar", color: "#94a3b8" },
+  { value: "IN_PROGRESS", label: "Em Progresso", description: "Trabalho ativo", color: "#3b82f6" },
+  { value: "UNDER_REVIEW", label: "Em Revis\xE3o", description: "Aguardando revis\xE3o", color: "#a855f7" },
+  { value: "TESTING", label: "Testes", description: "Em fase de testes", color: "#f59e0b" },
+  { value: "BLOCKED", label: "Bloqueado", description: "Impedido de avan\xE7ar", color: "#ef4444" },
+  { value: "WAITING_FOR_CLIENT", label: "Aguardando Cliente", description: "\xC0 espera de resposta do cliente", color: "#f97316" },
+  { value: "DONE", label: "Conclu\xEDdo", description: "Trabalho finalizado", color: "#10b981" }
+];
+var COLUMN_COLORS = [
+  null,
+  // no color
+  "#ef4444",
+  // red
+  "#f97316",
+  // orange
+  "#f59e0b",
+  // amber
+  "#84cc16",
+  // lime
+  "#10b981",
+  // emerald
+  "#06b6d4",
+  // cyan
+  "#3b82f6",
+  // blue
+  "#8b5cf6",
+  // violet
+  "#d946ef",
+  // fuchsia
+  "#ec4899",
+  // pink
+  "#94a3b8"
+  // slate
+];
+function EditColumnDialog({
+  column,
+  open,
+  onOpenChange,
+  onSave,
+  onDelete
+}) {
+  const [name, setName] = React11.useState("");
+  const [status, setStatus] = React11.useState("TODO");
+  const [color, setColor] = React11.useState(null);
+  const [wipLimit, setWipLimit] = React11.useState("");
+  const [saving, setSaving] = React11.useState(false);
+  const [confirmDelete, setConfirmDelete] = React11.useState(false);
+  React11.useEffect(() => {
+    if (open && column) {
+      setName(column.name);
+      setStatus(column.status);
+      setColor(column.color ?? null);
+      setWipLimit(column.wipLimit != null ? String(column.wipLimit) : "");
+      setConfirmDelete(false);
+    }
+  }, [open, column]);
+  const handleSave = async () => {
+    if (!column || !name.trim()) return;
+    setSaving(true);
+    try {
+      const data = {};
+      if (name.trim() !== column.name) data.name = name.trim();
+      if (status !== column.status) data.status = status;
+      if (color !== (column.color ?? null)) data.color = color ?? void 0;
+      const wip = wipLimit.trim() ? parseInt(wipLimit, 10) : void 0;
+      if (wip !== column.wipLimit) data.wipLimit = wip;
+      if (Object.keys(data).length > 0) {
+        await onSave(column.id, data);
+      }
+      onOpenChange(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleDelete = async () => {
+    if (!column || !onDelete) return;
+    setSaving(true);
+    try {
+      await onDelete(column.id);
+      onOpenChange(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const statusOption = COLUMN_STATUS_OPTIONS.find((o) => o.value === status);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[440px] bg-elevated border-theme-subtle text-theme", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-theme", children: "Editar Coluna" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-5 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "col-name", className: "text-xs font-medium text-theme-muted uppercase tracking-wide", children: "Nome da Coluna" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "col-name",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "Ex: Em Progresso",
+            className: "bg-void border-theme-subtle text-theme",
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleSave();
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium text-theme-muted uppercase tracking-wide", children: "Tipo de Coluna (Estado)" }),
+        /* @__PURE__ */ jsxs(Select, { value: status, onValueChange: (v) => setStatus(v), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "bg-void border-theme-subtle text-theme", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { className: "bg-elevated border-theme-subtle", children: COLUMN_STATUS_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-2.5 h-2.5 rounded-full shrink-0",
+                style: { backgroundColor: opt.color }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-theme", children: opt.label }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-theme-muted ml-2", children: opt.description })
+            ] })
+          ] }) }, opt.value)) })
+        ] }),
+        statusOption && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-theme-muted leading-snug", children: [
+          "Tarefas nesta coluna ser\xE3o tratadas como ",
+          /* @__PURE__ */ jsx("strong", { className: "text-theme", children: statusOption.label }),
+          ". Ao mover uma tarefa para c\xE1, o estado ser\xE1 atualizado automaticamente."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium text-theme-muted uppercase tracking-wide", children: "Cor do Indicador" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: COLUMN_COLORS.map((c, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setColor(c),
+            className: cn(
+              "w-7 h-7 rounded-lg border-2 transition-all flex items-center justify-center",
+              color === c ? "border-primary scale-110 shadow-lg shadow-primary/20" : "border-theme-subtle hover:border-theme hover:scale-105",
+              !c && "bg-void"
+            ),
+            style: c ? { backgroundColor: c } : void 0,
+            children: !c && color === null && /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", className: "text-theme-muted", children: /* @__PURE__ */ jsx("path", { d: "M1 1l8 8M9 1l-8 8" }) })
+          },
+          i
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "col-wip", className: "text-xs font-medium text-theme-muted uppercase tracking-wide", children: "Limite WIP (Work in Progress)" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "col-wip",
+            type: "number",
+            min: 0,
+            value: wipLimit,
+            onChange: (e) => setWipLimit(e.target.value),
+            placeholder: "Sem limite",
+            className: "bg-void border-theme-subtle text-theme w-32"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-theme-muted", children: "Destaca a coluna quando h\xE1 mais tarefas que o limite definido." })
+      ] }),
+      onDelete && /* @__PURE__ */ jsx("div", { className: "pt-3 border-t border-theme-subtle", children: !confirmDelete ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setConfirmDelete(true),
+          className: "text-red-400 hover:text-red-300 hover:bg-red-500/10",
+          children: [
+            /* @__PURE__ */ jsx(OrgTrash, { className: "w-3.5 h-3.5 mr-2" }),
+            "Eliminar coluna"
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-red-400", children: "Tem certeza? As tarefas nesta coluna ser\xE3o movidas para o backlog." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              size: "sm",
+              onClick: handleDelete,
+              disabled: saving,
+              className: "text-xs",
+              children: saving ? "A eliminar\u2026" : "Sim, eliminar"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setConfirmDelete(false),
+              className: "text-xs",
+              children: "Cancelar"
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
+      /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: "text-theme-muted", children: "Cancelar" }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "default",
+          size: "sm",
+          onClick: handleSave,
+          disabled: saving || !name.trim(),
+          children: saving ? "A guardar\u2026" : "Guardar"
+        }
+      )
+    ] })
+  ] }) });
+}
+EditColumnDialog.displayName = "EditColumnDialog";
 var priorityColors2 = {
   LOW: "bg-slate-500/15 text-slate-400 border-slate-500/30",
   MEDIUM: "bg-blue-500/15 text-blue-400 border-blue-500/30",
@@ -7001,6 +7219,8 @@ function Column({
   onTaskClick,
   onAddTask,
   onRenameColumn,
+  onEditColumn,
+  onDeleteColumn,
   externalDnD,
   draggedTask,
   onDragStart,
@@ -7016,6 +7236,14 @@ function Column({
   const [isAddingTask, setIsAddingTask] = React11.useState(false);
   const [newTaskTitle, setNewTaskTitle] = React11.useState("");
   const taskInputRef = React11.useRef(null);
+  const [editDialogOpen, setEditDialogOpen] = React11.useState(false);
+  const columnEditData = React11.useMemo(() => ({
+    id: column.id,
+    name: column.title,
+    status: column.status ?? "TODO",
+    color: column.color,
+    wipLimit: column.wipLimit
+  }), [column.id, column.title, column.status, column.color, column.wipLimit]);
   React11.useEffect(() => {
     if (isRenaming) renameInputRef.current?.focus();
   }, [isRenaming]);
@@ -7070,7 +7298,7 @@ function Column({
         isDropTarget && "border-primary-light/50 bg-primary/5"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 border-b border-theme-subtle", children: [
+        /* @__PURE__ */ jsxs("div", { className: "group/col-header flex items-center gap-2 px-3 py-3 border-b border-theme-subtle", children: [
           column.color && /* @__PURE__ */ jsx(
             "div",
             {
@@ -7102,23 +7330,34 @@ function Column({
               children: column.title
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsxs(
-            Badge,
-            {
-              variant: column.wipLimit && column.tasks.length > column.wipLimit ? "error" : "default",
-              className: cn(
-                "text-xs",
-                column.wipLimit && column.tasks.length > column.wipLimit ? "bg-red-500/20 text-red-400 border-red-500/40 animate-pulse" : "bg-theme-highlight text-theme-muted border-theme-subtle"
-              ),
-              children: [
-                column.tasks.length,
-                column.wipLimit != null && /* @__PURE__ */ jsxs("span", { className: "text-theme-muted", children: [
-                  "/",
-                  column.wipLimit
-                ] })
-              ]
-            }
-          ) })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+            onEditColumn && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setEditDialogOpen(true),
+                className: "p-1 rounded-md text-theme-muted opacity-0 group-hover/col-header:opacity-100 hover:text-theme hover:bg-theme-highlight transition-all",
+                title: "Editar coluna",
+                children: /* @__PURE__ */ jsx(Settings2, { className: "w-3.5 h-3.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Badge,
+              {
+                variant: column.wipLimit && column.tasks.length > column.wipLimit ? "error" : "default",
+                className: cn(
+                  "text-xs",
+                  column.wipLimit && column.tasks.length > column.wipLimit ? "bg-red-500/20 text-red-400 border-red-500/40 animate-pulse" : "bg-theme-highlight text-theme-muted border-theme-subtle"
+                ),
+                children: [
+                  column.tasks.length,
+                  column.wipLimit != null && /* @__PURE__ */ jsxs("span", { className: "text-theme-muted", children: [
+                    "/",
+                    column.wipLimit
+                  ] })
+                ]
+              }
+            )
+          ] })
         ] }),
         column.wipLimit != null && column.tasks.length > column.wipLimit && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 bg-red-500/10 border-b border-red-500/20 text-[10px] font-medium text-red-400 text-center", children: [
           "\u26A0 WIP limit exceeded (",
@@ -7200,7 +7439,17 @@ function Column({
               "Adicionar tarefa"
             ]
           }
-        ) })
+        ) }),
+        onEditColumn && /* @__PURE__ */ jsx(
+          EditColumnDialog,
+          {
+            column: columnEditData,
+            open: editDialogOpen,
+            onOpenChange: setEditDialogOpen,
+            onSave: onEditColumn,
+            onDelete: onDeleteColumn
+          }
+        )
       ]
     }
   );
@@ -7213,6 +7462,8 @@ function KanbanBoard({
   onAddTask,
   onAddColumn,
   onRenameColumn,
+  onEditColumn,
+  onDeleteColumn,
   className,
   externalDnD = false,
   onTaskUpdate,
@@ -7343,6 +7594,8 @@ function KanbanBoard({
               onTaskClick: handleTaskClick,
               onAddTask,
               onRenameColumn,
+              onEditColumn,
+              onDeleteColumn,
               externalDnD,
               draggedTask: effectiveDraggedTask,
               onDragStart: handleDragStart,