feat: AI assistant (HartBOT), demand filling, budget-per-role, project favorites, and UX improvements
AI Assistant (HartBOT): - Chat panel with inline layout, session persistence, message history (up-arrow recall) - OpenAI function calling with 20+ tools (search, navigate, create/cancel allocations, update status) - RBAC-aware tool filtering, fuzzy search with word-level matching - Navigation actions (router.push) and data invalidation after mutations - Country/metro city/org unit/role filtering on resource search Demand Filling Enhancements: - Two-phase fill modal: plan multiple resources, then confirm & assign all at once - Availability preview per resource (available/partial/conflict days, existing bookings) - Coverage bar showing demand hours distribution across assigned resources - Fill demand from project detail page (new Assign button per demand) - Fixed: filled demands no longer shown on timeline, demand bars no longer overlap Budget per Role: - DemandRequirement.budgetCents field (schema + API + UI) - Project wizard step 3: budget input per role with allocation summary bar - Project detail: allocated vs booked budget per demand - Fill demand modal: role budget display with cost estimates - AllocationModal: budget field for demand editing Project Favorites: - User.favoriteProjectIds (JSONB) with toggle API - Star button on projects list and detail page (optimistic updates) - "My Projects" dashboard widget (favorites + responsible person projects) Project Management: - Edit project from detail page (ProjectModal integration) - Edit demands from detail page (AllocationModal integration) - Admin-only project deletion (cascades assignments + demands) - Create user accounts from admin panel Timeline Fixes: - Country multi-select filter with backend support - URL param sync for same-page navigation (AI assistant integration) - Demand lane stacking (no more overlapping bars) - Single-day booking resize handles (always visible, min 6px) - Single-day resize allowed (start === end) - "All Clients" toggle (select all / deselect all) Other Fixes: - crypto.randomUUID fallback for non-secure contexts - Chat message limit raised (200 max, client sends last 40) - Status dropdown portal (no longer clipped by table overflow) - Cents display restored in budget views (2 decimal places) - Allocations grouped view with project sub-groups (collapsed by default) - Server-side resource search for project wizard (no 500 limit) Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { formatDate } from "~/lib/format.js";
|
||||
import type { Project, ColumnDef } from "@planarchy/shared";
|
||||
import { ProjectStatus, PROJECT_COLUMNS, BlueprintTarget } from "@planarchy/shared";
|
||||
@@ -80,7 +81,9 @@ function BudgetBar({ utilizationPercent, budgetCents }: { utilizationPercent: nu
|
||||
|
||||
function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: ProjectRow; isOpen: boolean; onOpen: () => void; onClose: () => void }) {
|
||||
const utils = trpc.useUtils();
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const [pos, setPos] = useState({ top: 0, left: 0 });
|
||||
|
||||
const updateStatus = trpc.project.updateStatus.useMutation({
|
||||
onSuccess: async () => {
|
||||
@@ -89,18 +92,29 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
|
||||
},
|
||||
});
|
||||
|
||||
// Position the portal dropdown below the trigger button
|
||||
useEffect(() => {
|
||||
if (!isOpen || !triggerRef.current) return;
|
||||
const rect = triggerRef.current.getBoundingClientRect();
|
||||
setPos({ top: rect.bottom + 4, left: rect.left });
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
function handleOutsideClick(e: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) onClose();
|
||||
const target = e.target as Node;
|
||||
if (triggerRef.current?.contains(target)) return;
|
||||
if (panelRef.current?.contains(target)) return;
|
||||
onClose();
|
||||
}
|
||||
document.addEventListener("mousedown", handleOutsideClick);
|
||||
return () => document.removeEventListener("mousedown", handleOutsideClick);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<>
|
||||
<button
|
||||
ref={triggerRef}
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); isOpen ? onClose() : onOpen(); }}
|
||||
className={clsx(
|
||||
@@ -114,8 +128,12 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="absolute left-0 top-full z-20 mt-2 min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900">
|
||||
{isOpen && createPortal(
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="fixed z-[9999] min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900"
|
||||
style={{ top: pos.top, left: pos.left }}
|
||||
>
|
||||
{ALL_STATUSES.map((s) => (
|
||||
<button
|
||||
key={s.value}
|
||||
@@ -134,9 +152,10 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -182,6 +201,34 @@ export function ProjectsClient() {
|
||||
},
|
||||
});
|
||||
|
||||
// ─── Favorites ──────────────────────────────────────────────────────────
|
||||
const { data: favoriteIds } = trpc.user.getFavoriteProjectIds.useQuery(undefined, { staleTime: 30_000 });
|
||||
const favSet = useMemo(() => new Set(favoriteIds ?? []), [favoriteIds]);
|
||||
const toggleFavMutation = trpc.user.toggleFavoriteProject.useMutation({
|
||||
onMutate: async ({ projectId }) => {
|
||||
// Cancel any outgoing refetches so they don't overwrite optimistic update
|
||||
await utils.user.getFavoriteProjectIds.cancel();
|
||||
// Snapshot previous value
|
||||
const previous = utils.user.getFavoriteProjectIds.getData();
|
||||
// Optimistically update the cache
|
||||
const current = previous ?? [];
|
||||
const next = current.includes(projectId)
|
||||
? current.filter((id: string) => id !== projectId)
|
||||
: [...current, projectId];
|
||||
utils.user.getFavoriteProjectIds.setData(undefined, next);
|
||||
return { previous };
|
||||
},
|
||||
onError: (_err, _vars, context) => {
|
||||
// Rollback on error
|
||||
if (context?.previous !== undefined) {
|
||||
utils.user.getFavoriteProjectIds.setData(undefined, context.previous);
|
||||
}
|
||||
},
|
||||
onSettled: () => {
|
||||
void utils.user.getFavoriteProjectIds.invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
// ─── Custom field columns from global blueprints ──────────────────────────
|
||||
const { data: globalFieldDefs } = trpc.blueprint.getGlobalFieldDefs.useQuery(
|
||||
{ target: BlueprintTarget.PROJECT },
|
||||
@@ -490,6 +537,7 @@ export function ProjectsClient() {
|
||||
<tr>
|
||||
{/* Drag handle column */}
|
||||
<th className="w-8 px-2" />
|
||||
<th className="w-8 px-2" />
|
||||
<th className="px-4 py-3 w-10">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -518,6 +566,16 @@ export function ProjectsClient() {
|
||||
onDrop={(draggedId) => reorder(draggedId, project.id)}
|
||||
className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
||||
>
|
||||
<td className="px-2 py-3 w-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); e.preventDefault(); toggleFavMutation.mutate({ projectId: project.id }); }}
|
||||
className={`text-sm transition-colors ${favSet.has(project.id) ? "text-amber-500 hover:text-amber-600" : "text-gray-300 hover:text-amber-400 dark:text-gray-600 dark:hover:text-amber-500"}`}
|
||||
title={favSet.has(project.id) ? "Remove from favorites" : "Add to favorites"}
|
||||
>
|
||||
{favSet.has(project.id) ? "★" : "☆"}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
|
||||
Reference in New Issue
Block a user