diff options
| -rw-r--r-- | makima/frontend/src/components/orders/OrderContextMenu.tsx | 184 | ||||
| -rw-r--r-- | makima/frontend/src/components/orders/OrderDetail.tsx | 77 | ||||
| -rw-r--r-- | makima/frontend/src/components/orders/OrderList.tsx | 34 | ||||
| -rw-r--r-- | makima/frontend/src/routes/orders.tsx | 30 |
4 files changed, 284 insertions, 41 deletions
diff --git a/makima/frontend/src/components/orders/OrderContextMenu.tsx b/makima/frontend/src/components/orders/OrderContextMenu.tsx new file mode 100644 index 0000000..f73ca4f --- /dev/null +++ b/makima/frontend/src/components/orders/OrderContextMenu.tsx @@ -0,0 +1,184 @@ +import { useEffect, useRef } from "react"; +import type { Order, OrderStatus } from "../../lib/api"; + +interface OrderContextMenuProps { + x: number; + y: number; + order: Order; + onClose: () => void; + onChangeStatus: (status: OrderStatus) => void; + onDelete: () => void; + onGoToDirective: () => void; +} + +export function OrderContextMenu({ + x, + y, + order, + onClose, + onChangeStatus, + onDelete, + onGoToDirective, +}: OrderContextMenuProps) { + const menuRef = useRef<HTMLDivElement>(null); + + // Close on click outside + useEffect(() => { + const handleClickOutside = (e: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(e.target as Node)) { + onClose(); + } + }; + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") { + onClose(); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + document.addEventListener("keydown", handleKeyDown); + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + document.removeEventListener("keydown", handleKeyDown); + }; + }, [onClose]); + + // Adjust position if menu would overflow viewport + useEffect(() => { + if (menuRef.current) { + const rect = menuRef.current.getBoundingClientRect(); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + if (rect.right > viewportWidth) { + menuRef.current.style.left = `${x - rect.width}px`; + } + if (rect.bottom > viewportHeight) { + menuRef.current.style.top = `${y - rect.height}px`; + } + } + }, [x, y]); + + const menuItemClass = + "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2"; + const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1"; + + const showOpen = order.status !== "open"; + const showInProgress = order.status !== "in_progress"; + const showUnderReview = order.status !== "under_review"; + const showDone = order.status !== "done"; + const showArchive = order.status !== "archived"; + const showGoToDirective = !!order.directiveId; + + return ( + <div + ref={menuRef} + className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]" + style={{ left: x, top: y }} + > + {/* Header showing order title */} + <div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[200px]"> + {order.title} + </div> + + {/* Status actions */} + {showOpen && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("open"); + onClose(); + }} + > + <span className="text-[#75aafc]">○</span> + Mark as Open + </button> + )} + + {showInProgress && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("in_progress"); + onClose(); + }} + > + <span className="text-[#75aafc]">●</span> + Mark as In Progress + </button> + )} + + {showUnderReview && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("under_review"); + onClose(); + }} + > + <span className="text-[#75aafc]">◉</span> + Mark as Under Review + </button> + )} + + {showDone && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("done"); + onClose(); + }} + > + <span className="text-[#75aafc]">✓</span> + Mark as Done + </button> + )} + + {showArchive && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("archived"); + onClose(); + }} + > + <span className="text-[#75aafc]">▣</span> + Archive + </button> + )} + + {/* Directive link */} + {showGoToDirective && ( + <> + <div className={dividerClass} /> + <button + className={menuItemClass} + onClick={() => { + onGoToDirective(); + onClose(); + }} + > + <span className="text-[#75aafc]">▶</span> + Go to Directive + </button> + </> + )} + + <div className={dividerClass} /> + + {/* Delete action */} + <button + className={`${menuItemClass} text-red-400 hover:bg-red-400/10`} + onClick={() => { + onDelete(); + onClose(); + }} + > + <span className="text-red-400">✕</span> + Delete + </button> + </div> + ); +} diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx index 9c3ac97..338cc60 100644 --- a/makima/frontend/src/components/orders/OrderDetail.tsx +++ b/makima/frontend/src/components/orders/OrderDetail.tsx @@ -111,8 +111,8 @@ export function OrderDetail({ return ( <div className="flex flex-col h-full overflow-y-auto"> {/* Header */} - <div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]"> - <div className="flex items-center justify-between mb-2"> + <div className="px-4 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]"> + <div className="flex items-center justify-between mb-1"> {editingTitle ? ( <div className="flex-1 flex items-center gap-2 pr-2"> <input @@ -151,54 +151,51 @@ export function OrderDetail({ {order.title} </h2> )} - <div className="flex items-center gap-2 shrink-0"> - <span - className={`text-[10px] font-mono ${badge.color} border rounded px-2 py-0.5`} - > - {badge.label} - </span> - <button - type="button" - onClick={onRefresh} - className="text-[10px] font-mono text-[#7788aa] hover:text-white" - title="Refresh" - > - [refresh] - </button> - </div> + <button + type="button" + onClick={onRefresh} + className="text-[10px] font-mono text-[#7788aa] hover:text-white shrink-0" + title="Refresh" + > + [refresh] + </button> </div> - {/* Type + Priority inline */} - <div className="flex items-center gap-3 mb-2"> - <span className={`text-[10px] font-mono ${currentType.color}`}> + {/* Metadata badges row */} + <div className="flex flex-wrap items-center gap-1.5"> + <span + className={`text-[10px] font-mono ${badge.color} border rounded px-1.5 py-0.5`} + > + {badge.label} + </span> + <span + className={`text-[10px] font-mono ${currentType.color} border border-current rounded px-1.5 py-0.5`} + > {currentType.label} </span> - <span className="text-[10px] font-mono text-[#2a3a5a]">/</span> - <span className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}> + <span + className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`} + > {currentPriority.label} </span> - </div> - - {/* Linked entities */} - {order.directiveId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1 truncate"> - Directive: <a href={`/directives/${order.directiveId}`} className="text-[#75aafc] hover:text-white underline"> - {order.directiveName || order.directiveId.slice(0, 8) + "..."} + {order.directiveId && ( + <a + href={`/directives/${order.directiveId}`} + className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 hover:text-white hover:border-[rgba(117,170,252,0.5)] truncate max-w-[160px]" + title={order.directiveName || order.directiveId} + > + ↗ {order.directiveName || order.directiveId.slice(0, 8) + "..."} </a> - </div> - )} - {order.directiveStepId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1 truncate"> - Step: <span className="text-[#7788aa]">{order.directiveStepId.slice(0, 8)}...</span> - </div> - )} - - {/* Controls */} - <div className="flex flex-wrap gap-2 mt-2"> + )} + {order.directiveStepId && ( + <span className="text-[10px] font-mono text-[#7788aa] border border-[#2a3a5a] rounded px-1.5 py-0.5"> + step:{order.directiveStepId.slice(0, 8)} + </span> + )} <button type="button" onClick={onDelete} - className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1 ml-auto" + className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-1.5 py-0.5 ml-auto" > Delete </button> diff --git a/makima/frontend/src/components/orders/OrderList.tsx b/makima/frontend/src/components/orders/OrderList.tsx index 0ebd18d..ec3dcf6 100644 --- a/makima/frontend/src/components/orders/OrderList.tsx +++ b/makima/frontend/src/components/orders/OrderList.tsx @@ -1,5 +1,6 @@ import { useState, useMemo } from "react"; import type { Order, OrderStatus, OrderPriority, OrderType } from "../../lib/api"; +import { OrderContextMenu } from "./OrderContextMenu"; const STATUS_BADGE: Record<OrderStatus, { color: string; label: string }> = { open: { color: "text-[#75aafc] border-[rgba(117,170,252,0.4)]", label: "OPEN" }, @@ -34,6 +35,9 @@ interface OrderListProps { onStatusFilter: (s: OrderStatus | undefined) => void; typeFilter: OrderType | undefined; onTypeFilter: (t: OrderType | undefined) => void; + onChangeStatus?: (order: Order, status: OrderStatus) => void; + onDelete?: (order: Order) => void; + onGoToDirective?: (order: Order) => void; } const STATUS_OPTIONS: (OrderStatus | "all")[] = ["all", "open", "in_progress", "under_review", "done", "archived"]; @@ -48,8 +52,24 @@ export function OrderList({ onStatusFilter, typeFilter, onTypeFilter, + onChangeStatus, + onDelete, + onGoToDirective, }: OrderListProps) { const [search, setSearch] = useState(""); + const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null); + const [contextMenuOrder, setContextMenuOrder] = useState<Order | null>(null); + + const handleContextMenu = (e: React.MouseEvent, order: Order) => { + e.preventDefault(); + setContextMenuPosition({ x: e.clientX, y: e.clientY }); + setContextMenuOrder(order); + }; + + const closeContextMenu = () => { + setContextMenuPosition(null); + setContextMenuOrder(null); + }; const filtered = useMemo(() => { if (!search.trim()) return orders; @@ -148,6 +168,7 @@ export function OrderList({ key={o.id} type="button" onClick={() => onSelect(o.id)} + onContextMenu={(e) => handleContextMenu(e, o)} className={`w-full text-left px-3 py-2.5 border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] transition-colors ${ selectedId === o.id ? "bg-[rgba(117,170,252,0.1)]" : "" }`} @@ -190,6 +211,19 @@ export function OrderList({ }) )} </div> + + {/* Context Menu */} + {contextMenuPosition && contextMenuOrder && ( + <OrderContextMenu + x={contextMenuPosition.x} + y={contextMenuPosition.y} + order={contextMenuOrder} + onClose={closeContextMenu} + onChangeStatus={(status) => onChangeStatus?.(contextMenuOrder, status)} + onDelete={() => onDelete?.(contextMenuOrder)} + onGoToDirective={() => onGoToDirective?.(contextMenuOrder)} + /> + )} </div> ); } diff --git a/makima/frontend/src/routes/orders.tsx b/makima/frontend/src/routes/orders.tsx index aa14e68..5744bdd 100644 --- a/makima/frontend/src/routes/orders.tsx +++ b/makima/frontend/src/routes/orders.tsx @@ -6,7 +6,8 @@ import { OrderDetail } from "../components/orders/OrderDetail"; import { useOrders, useOrder } from "../hooks/useOrders"; import { useDirectives } from "../hooks/useDirectives"; import { useAuth } from "../contexts/AuthContext"; -import type { OrderStatus, OrderType, OrderPriority } from "../lib/api"; +import { updateOrder, deleteOrder } from "../lib/api"; +import type { Order, OrderStatus, OrderType, OrderPriority } from "../lib/api"; export default function OrdersPage() { const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth(); @@ -92,6 +93,30 @@ export default function OrdersPage() { await refreshList(); }; + const handleContextChangeStatus = async (order: Order, status: OrderStatus) => { + try { + await updateOrder(order.id, { status }); + await refreshList(); + } catch (e) { + console.error("Failed to change status:", e); + } + }; + + const handleContextDelete = async (order: Order) => { + if (!window.confirm("Delete this order?")) return; + try { + await deleteOrder(order.id); + if (order.id === selectedId) navigate("/orders"); + await refreshList(); + } catch (e) { + console.error("Failed to delete:", e); + } + }; + + const handleContextGoToDirective = (order: Order) => { + if (order.directiveId) navigate("/directives/" + order.directiveId); + }; + const priorityOptions: { value: OrderPriority; label: string }[] = [ { value: "critical", label: "Critical" }, { value: "high", label: "High" }, @@ -123,6 +148,9 @@ export default function OrdersPage() { onStatusFilter={setStatusFilter} typeFilter={typeFilter} onTypeFilter={setTypeFilter} + onChangeStatus={handleContextChangeStatus} + onDelete={handleContextDelete} + onGoToDirective={handleContextGoToDirective} /> </div> |