jettypod 4.4.74 → 4.4.75

package/apps/dashboard/app/api/decisions/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+import { getRecentDecisions } from '@/lib/db';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const decisions = getRecentDecisions(5);
+  return NextResponse.json(decisions);
+}

package/apps/dashboard/app/api/work/[id]/epic/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { updateWorkItemEpic } from '@/lib/db';
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const workItemId = parseInt(id, 10);
+
+  const body = await request.json();
+  const { epic_id } = body;
+
+  const updated = updateWorkItemEpic(workItemId, epic_id);
+
+  if (updated) {
+    return NextResponse.json({ success: true, id: workItemId, epic_id });
+  } else {
+    return NextResponse.json({ success: false, error: 'Work item not found or cannot be assigned to epic' }, { status: 404 });
+  }
+}

package/apps/dashboard/app/api/work/[id]/order/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { updateWorkItemOrder } from '@/lib/db';
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const workItemId = parseInt(id, 10);
+
+  const body = await request.json();
+  const { display_order } = body;
+
+  const updated = updateWorkItemOrder(workItemId, display_order);
+
+  if (updated) {
+    return NextResponse.json({ success: true, id: workItemId, display_order });
+  } else {
+    return NextResponse.json({ success: false, error: 'Work item not found' }, { status: 404 });
+  }
+}

package/apps/dashboard/app/page.tsx

@@ -1,4 +1,4 @@
-import { getKanbanData } from '@/lib/db';
+import { getKanbanData, getProjectName, getRecentDecisions } from '@/lib/db';
 import { RealTimeKanbanWrapper } from '@/components/RealTimeKanbanWrapper';
 
 // Force dynamic rendering - database is only available at runtime
@@ -6,6 +6,8 @@ export const dynamic = 'force-dynamic';
 
 export default function Home() {
   const data = getKanbanData();
+  const projectName = getProjectName();
+  const decisions = getRecentDecisions(5);
 
   // Serialize Map data for client component
   const serializedData = {
@@ -15,16 +17,21 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
-      <header className="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
+    <div className="h-screen flex flex-col bg-zinc-50 dark:bg-zinc-950">
+      <header className="sticky top-0 z-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 flex-shrink-0">
         <div className="max-w-6xl mx-auto px-4 py-4">
-          <h1 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">
-            JettyPod Dashboard
-          </h1>
+          <div className="flex items-center gap-3">
+            <h1 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">
+              JettyPod Dashboard
+            </h1>
+            <span className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
+              {projectName}
+            </span>
+          </div>
         </div>
       </header>
-      <main className="max-w-6xl mx-auto px-4 py-8">
-        <RealTimeKanbanWrapper initialData={serializedData} />
+      <main className="flex-1 overflow-hidden max-w-6xl w-full mx-auto px-4 py-4">
+        <RealTimeKanbanWrapper initialData={serializedData} initialDecisions={decisions} />
       </main>
     </div>
   );

package/apps/dashboard/components/DragContext.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useRef, ReactNode } from 'react';
+import type { WorkItem } from '@/lib/db';
+
+type DropHandler = (itemId: number, newStatus: string) => Promise<void>;
+type ReorderHandler = (itemId: number, pointerY: number) => Promise<void>;
+type EpicAssignHandler = (itemId: number, epicId: number | null) => Promise<void>;
+
+interface DropZoneInfo {
+  targetStatus: string;
+  element: HTMLElement;
+  onDrop: DropHandler;
+  onReorder?: ReorderHandler;
+}
+
+interface EpicDropZoneInfo {
+  epicId: number | null;
+  element: HTMLElement;
+  onEpicAssign: EpicAssignHandler;
+  onReorder?: ReorderHandler;
+}
+
+interface DragContextType {
+  isDragging: boolean;
+  draggedItem: WorkItem | null;
+  activeDropZone: string | null;
+  activeEpicZone: string | null;
+  setDraggedItem: (item: WorkItem | null) => void;
+  registerDropZone: (id: string, info: DropZoneInfo) => void;
+  unregisterDropZone: (id: string) => void;
+  registerEpicDropZone: (id: string, info: EpicDropZoneInfo) => void;
+  unregisterEpicDropZone: (id: string) => void;
+  updatePointerPosition: (x: number, y: number) => void;
+  handleDrop: () => Promise<void>;
+}
+
+const DragContext = createContext<DragContextType>({
+  isDragging: false,
+  draggedItem: null,
+  activeDropZone: null,
+  activeEpicZone: null,
+  setDraggedItem: () => {},
+  registerDropZone: () => {},
+  unregisterDropZone: () => {},
+  registerEpicDropZone: () => {},
+  unregisterEpicDropZone: () => {},
+  updatePointerPosition: () => {},
+  handleDrop: async () => {},
+});
+
+export function DragProvider({ children }: { children: ReactNode }) {
+  const [draggedItem, setDraggedItem] = useState<WorkItem | null>(null);
+  const [activeDropZone, setActiveDropZone] = useState<string | null>(null);
+  const [activeEpicZone, setActiveEpicZone] = useState<string | null>(null);
+  const dropZonesRef = useRef<Map<string, DropZoneInfo>>(new Map());
+  const epicDropZonesRef = useRef<Map<string, EpicDropZoneInfo>>(new Map());
+  const pointerPositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const registerDropZone = useCallback((id: string, info: DropZoneInfo) => {
+    dropZonesRef.current.set(id, info);
+  }, []);
+
+  const unregisterDropZone = useCallback((id: string) => {
+    dropZonesRef.current.delete(id);
+  }, []);
+
+  const registerEpicDropZone = useCallback((id: string, info: EpicDropZoneInfo) => {
+    epicDropZonesRef.current.set(id, info);
+  }, []);
+
+  const unregisterEpicDropZone = useCallback((id: string) => {
+    epicDropZonesRef.current.delete(id);
+  }, []);
+
+  const updatePointerPosition = useCallback((x: number, y: number) => {
+    pointerPositionRef.current = { x, y };
+    let foundZone: string | null = null;
+    let foundEpicZone: string | null = null;
+
+    // Check status drop zones
+    dropZonesRef.current.forEach((info, id) => {
+      const rect = info.element.getBoundingClientRect();
+      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+        foundZone = id;
+      }
+    });
+
+    // Check epic drop zones (more specific, so check these to potentially override)
+    epicDropZonesRef.current.forEach((info, id) => {
+      const rect = info.element.getBoundingClientRect();
+      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+        foundEpicZone = id;
+      }
+    });
+
+    setActiveDropZone(foundZone);
+    setActiveEpicZone(foundEpicZone);
+  }, []);
+
+  const handleDrop = useCallback(async () => {
+    if (!draggedItem) return;
+
+    // Check for epic drop zone first (more specific drop target)
+    if (activeEpicZone) {
+      const epicZoneInfo = epicDropZonesRef.current.get(activeEpicZone);
+      if (epicZoneInfo) {
+        const currentEpicId = draggedItem.parent_id || draggedItem.epic_id;
+
+        // Same epic - reorder within epic
+        if (currentEpicId === epicZoneInfo.epicId && epicZoneInfo.onReorder) {
+          await epicZoneInfo.onReorder(draggedItem.id, pointerPositionRef.current.y);
+          return;
+        }
+
+        // Different epic - assign to new epic
+        if (currentEpicId !== epicZoneInfo.epicId) {
+          await epicZoneInfo.onEpicAssign(draggedItem.id, epicZoneInfo.epicId);
+          return;
+        }
+      }
+    }
+
+    // Otherwise handle status drop zone
+    if (!activeDropZone) return;
+
+    const zoneInfo = dropZonesRef.current.get(activeDropZone);
+    if (!zoneInfo) return;
+
+    // Check if this is a status change or a reorder
+    if (draggedItem.status !== zoneInfo.targetStatus) {
+      // Status change
+      await zoneInfo.onDrop(draggedItem.id, zoneInfo.targetStatus);
+    } else if (zoneInfo.onReorder) {
+      // Reorder within same status
+      await zoneInfo.onReorder(draggedItem.id, pointerPositionRef.current.y);
+    }
+  }, [activeDropZone, activeEpicZone, draggedItem]);
+
+  return (
+    <DragContext.Provider
+      value={{
+        isDragging: draggedItem !== null,
+        draggedItem,
+        activeDropZone,
+        activeEpicZone,
+        setDraggedItem,
+        registerDropZone,
+        unregisterDropZone,
+        registerEpicDropZone,
+        unregisterEpicDropZone,
+        updatePointerPosition,
+        handleDrop,
+      }}
+    >
+      {children}
+    </DragContext.Provider>
+  );
+}
+
+export function useDragContext() {
+  return useContext(DragContext);
+}

package/apps/dashboard/components/DraggableCard.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef } from 'react';
+import { motion, PanInfo } from 'framer-motion';
+import type { WorkItem } from '@/lib/db';
+import { useDragContext } from './DragContext';
+
+interface DraggableCardProps {
+  item: WorkItem;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+export function DraggableCard({ item, children, disabled = false }: DraggableCardProps) {
+  const { setDraggedItem, updatePointerPosition, handleDrop } = useDragContext();
+  const wasDraggingRef = useRef(false);
+
+  if (disabled) {
+    return <>{children}</>;
+  }
+
+  const handleDragStart = () => {
+    wasDraggingRef.current = true;
+    setDraggedItem(item);
+  };
+
+  const handleDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    updatePointerPosition(info.point.x, info.point.y);
+  };
+
+  const handleDragEnd = async () => {
+    await handleDrop();
+    setDraggedItem(null);
+  };
+
+  // Prevent click from firing after drag release
+  const handleClickCapture = (e: React.MouseEvent) => {
+    if (wasDraggingRef.current) {
+      e.stopPropagation();
+      e.preventDefault();
+      wasDraggingRef.current = false;
+    }
+  };
+
+  return (
+    <motion.div
+      drag
+      dragSnapToOrigin
+      dragElastic={0.1}
+      whileDrag={{
+        scale: 1.02,
+        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
+        zIndex: 50,
+        cursor: 'grabbing',
+      }}
+      onDragStart={handleDragStart}
+      onDrag={handleDrag}
+      onDragEnd={handleDragEnd}
+      onClickCapture={handleClickCapture}
+      className="cursor-grab active:cursor-grabbing"
+      style={{ touchAction: 'none' }}
+      data-draggable="true"
+      data-item-id={item.id}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/apps/dashboard/components/DropZone.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useRef, useEffect, useId } from 'react';
+import { useDragContext } from './DragContext';
+
+interface DropZoneProps {
+  targetStatus: 'in_progress' | 'backlog' | 'done';
+  onDrop: (itemId: number, newStatus: string) => Promise<void>;
+  onReorder?: (itemId: number, pointerY: number) => Promise<void>;
+  allowReorder?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  highlightClassName?: string;
+  reorderHighlightClassName?: string;
+  'data-testid'?: string;
+}
+
+export function DropZone({
+  targetStatus,
+  onDrop,
+  onReorder,
+  allowReorder = false,
+  children,
+  className = '',
+  highlightClassName = 'ring-2 ring-blue-400 bg-blue-50/50 dark:bg-blue-900/20',
+  reorderHighlightClassName = 'ring-2 ring-amber-400 bg-amber-50/50 dark:bg-amber-900/20',
+  'data-testid': testId,
+}: DropZoneProps) {
+  const { isDragging, draggedItem, activeDropZone, activeEpicZone, registerDropZone, unregisterDropZone } = useDragContext();
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+  const zoneId = useId();
+
+  // Register this drop zone on mount
+  useEffect(() => {
+    if (dropZoneRef.current) {
+      registerDropZone(zoneId, {
+        targetStatus,
+        element: dropZoneRef.current,
+        onDrop,
+        onReorder: allowReorder ? onReorder : undefined,
+      });
+    }
+
+    return () => {
+      unregisterDropZone(zoneId);
+    };
+  }, [zoneId, targetStatus, onDrop, onReorder, allowReorder, registerDropZone, unregisterDropZone]);
+
+  // Check if this is a valid drop target
+  const isStatusChange = isDragging && draggedItem && draggedItem.status !== targetStatus;
+  const isReorder = isDragging && draggedItem && draggedItem.status === targetStatus && allowReorder;
+  const isValidTarget = isStatusChange || isReorder;
+  // Suppress highlight when a more specific target (epic zone) is active
+  const isActive = activeDropZone === zoneId && !activeEpicZone;
+
+  // Use different highlight for reorder vs status change
+  const activeHighlight = isReorder ? reorderHighlightClassName : highlightClassName;
+
+  return (
+    <div
+      ref={dropZoneRef}
+      className={`${className} ${isValidTarget && isActive ? activeHighlight : ''} transition-all duration-200`}
+      data-testid={testId}
+      data-drop-zone={targetStatus}
+      data-is-active={isActive}
+      data-is-reorder={isReorder}
+    >
+      {children}
+    </div>
+  );
+}