Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: project colors, timeline filters, sidebar fix, GitLooper agent, and misc improvements

Browse Source 
- Fix sidebar double-highlight on /vacations/my (Gitea #6): add isNavItemActive() helper
- Add project color picker (schema + API + modal + timeline rendering)
- Add ProjectCombobox/ResourceCombobox to timeline toolbar
- Show PENDING vacations on timeline with dashed/dimmed style
- Add "show demand projects" preference with localStorage persistence
- Add ProjectAssignmentsTable with total hours/cost columns
- Extend vacation API to accept status arrays
- Add GitLooper formal YAML agent configuration
- Extend user admin with permission overrides UI
- Add delete-assignment use case tests
- Add status-styles.ts shared badge constants
- Centralize formatMoney/formatCents in format.ts

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Hartmut Nörenberg
2026-03-17 10:22:52 +01:00
parent b0e55786c3
commit eb283147d1
34 changed files with 1545 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/timeline/TimelineContext.tsx
+7 -2
View File
@@ -43,6 +43,7 @@ export type TimelineProject = {
clientId?: string | null;
budgetCents?: number;
winProbability?: number;
color?: string | null;
staffingReqs?: unknown;
responsiblePerson?: string | null;
};
@@ -92,6 +93,7 @@ export type ProjectGroup = {
startDate: Date;
endDate: Date;
status: string;
color?: string | null;
resourceRows: { resource: ResourceBrief; allocs: TimelineAssignmentEntry[] }[];
};
@@ -206,9 +208,11 @@ export function TimelineProvider({
// Support URL params: ?eids=EMP-001,EMP-002&projectIds=id1,id2&chapters=ch1
const [filters, setFilters] = useState<TimelineFilters>(() => {
const savedPrefs = readAppPreferences();
const base: TimelineFilters = {
...DEFAULT_FILTERS,
hideCompletedProjects: readAppPreferences().hideCompletedProjects,
hideCompletedProjects: savedPrefs.hideCompletedProjects,
showPlaceholders: savedPrefs.showDemandProjects,
};
const eids = searchParams.get("eids");
if (eids) base.eids = eids.split(",").filter(Boolean);
@@ -304,7 +308,7 @@ export function TimelineProvider({
const demands = entriesView?.demands ?? [];
const { data: vacationEntries = [] } = trpc.vacation.list.useQuery(
{ startDate: viewStart, endDate: viewEnd, status: VacationStatus.APPROVED, limit: 500 },
{ startDate: viewStart, endDate: viewEnd, status: [VacationStatus.APPROVED, VacationStatus.PENDING], limit: 500 },
{ placeholderData: (prev) => prev },
);
@@ -477,6 +481,7 @@ export function TimelineProvider({
startDate: new Date(entry.project.startDate as unknown as string),
endDate: new Date(entry.project.endDate as unknown as string),
status: entry.project.status,
color: (entry.project as { color?: string | null }).color ?? null,
resourceRows: [],
};
projectGroupMap.set(entry.projectId, group);
apps/web/src/components/timeline/TimelineProjectPanel.tsx
+4 -2
View File
@@ -598,6 +598,7 @@ export function TimelineProjectPanel({
{row.type === "header" ? (
(() => {
const { project } = row;
const customColor = project.color;
const colors = ORDER_TYPE_COLORS[project.orderType] ?? {
bg: "bg-gray-400",
text: "text-white",
@@ -652,14 +653,15 @@ export function TimelineProjectPanel({
isThisProjectShifting
? "opacity-90 shadow-lg ring-2 ring-white ring-offset-1 cursor-grabbing z-20 scale-[1.01]"
: "cursor-grab hover:opacity-90 hover:ring-2 hover:ring-white hover:ring-offset-1",
colors.bg,
colors.text,
!customColor && colors.bg,
customColor ? "text-white" : colors.text,
)}
style={{
left: projLeft + 2,
width: projWidth - 4,
top: 8,
height: 24,
...(customColor ? { backgroundColor: customColor } : {}),
}}
onClick={() => {
if (!dragState.isDragging) onOpenPanel(project.id);
apps/web/src/components/timeline/TimelineResourcePanel.tsx
+15 -6
View File
@@ -684,20 +684,22 @@ function renderVacationBlocksForRow(blocks: VacationBlockInfo[], rowHeight: numb
const colorClass = TYPE_COLORS[v.type] ?? "bg-orange-400/40";
const borderClass = TYPE_BORDER[v.type] ?? "border-orange-500";
const label = TYPE_LABELS_SHORT[v.type] ?? v.type;
const isPending = v.status === "PENDING";
return (
<div
key={`vac-${v.id}`}
className={clsx(
"absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden border-t-2 pointer-events-none",
"absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden pointer-events-none",
colorClass,
borderClass,
isPending ? "border-t-2 border-dashed opacity-60" : "border-t-2",
isPending ? "" : borderClass,
)}
style={{ left: left + 1, width: width - 2, top: 0, height: rowHeight }}
>
{width > 40 && (
<span className="text-[9px] font-bold truncate opacity-70 text-gray-700 dark:text-gray-200 pointer-events-none">
🏖 {label}
{isPending ? "\u23F3" : "\uD83C\uDFD6"} {label}
</span>
)}
</div>
@@ -776,6 +778,7 @@ function renderAllocBlocksFromData(
const blockTop = 8 + lane * SUB_LANE_HEIGHT;
const blockHeight = SUB_LANE_HEIGHT - 8;
const customColor = (alloc.project as { color?: string | null }).color;
const colors = ORDER_TYPE_COLORS[alloc.project.orderType] ?? {
bg: "bg-gray-400",
text: "text-white",
@@ -800,8 +803,8 @@ function renderAllocBlocksFromData(
key={alloc.id}
className={clsx(
"absolute rounded-md flex items-stretch overflow-hidden transition-all duration-75 group/block",
colors.bg,
colors.text,
!customColor && colors.bg,
customColor ? "text-white" : colors.text,
hasRecurrence && "opacity-80 border-2 border-dashed border-white/60",
isBeingDragged
? "opacity-90 shadow-2xl ring-2 ring-white ring-offset-1 z-20 scale-[1.01]"
@@ -809,7 +812,13 @@ function renderAllocBlocksFromData(
? "opacity-30 z-[10]"
: "hover:ring-2 hover:ring-white hover:ring-offset-1 z-[10]",
)}
style={{ left: left + 2, width: width - 4, top: blockTop, height: blockHeight }}
style={{
left: left + 2,
width: width - 4,
top: blockTop,
height: blockHeight,
...(customColor ? { backgroundColor: customColor } : {}),
}}
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
apps/web/src/components/timeline/TimelineToolbar.tsx
+48 -5
View File
@@ -1,7 +1,10 @@
"use client";
import { clsx } from "clsx";
import { useRef } from "react";
import { useRef, useState } from "react";
import { trpc } from "~/lib/trpc/client.js";
import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
import { ResourceCombobox } from "~/components/ui/ResourceCombobox.js";
import { TimelineFilter, type TimelineFilters } from "./TimelineFilter.js";
import { TimelineQuickFilters } from "./TimelineQuickFilters.js";
@@ -50,6 +53,32 @@ export function TimelineToolbar({
filters.countryCodes.length;
const filterAnchorRef = useRef<HTMLDivElement | null>(null);
// Track selected resource ID for the combobox (separate from the EID-based filter)
const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);
// Look up resource to get EID when selected
const { data: resourceLookup } = trpc.resource.list.useQuery(
{ limit: 500 },
{ staleTime: 60_000 },
);
function handleProjectChange(id: string | null) {
onFiltersChange({ ...filters, projectIds: id ? [id] : [] });
}
function handleResourceChange(id: string | null) {
setSelectedResourceId(id);
if (!id) {
onFiltersChange({ ...filters, eids: [] });
return;
}
const resources = (resourceLookup?.resources ?? []) as Array<{ id: string; eid: string }>;
const resource = resources.find((r) => r.id === id);
if (resource?.eid) {
onFiltersChange({ ...filters, eids: [resource.eid] });
}
}
function clearQuickFilters() {
onFiltersChange({
...filters,
@@ -62,10 +91,24 @@ export function TimelineToolbar({
return (
<div className="app-toolbar flex flex-wrap items-center justify-between gap-3">
<div className="text-sm text-gray-500 dark:text-gray-400">
{viewMode === "resource"
? `${resourceCount} resources · ${totalAllocCount} allocations`
: `${projectCount} projects`}
<div className="flex items-center gap-3">
<ProjectCombobox
value={filters.projectIds[0] ?? null}
onChange={handleProjectChange}
placeholder="Filter by project..."
className="min-w-[220px]"
/>
<ResourceCombobox
value={selectedResourceId}
onChange={handleResourceChange}
placeholder="Filter by resource..."
className="min-w-[180px]"
/>
<div className="text-sm text-gray-500 dark:text-gray-400">
{viewMode === "resource"
? `${resourceCount} resources \u00B7 ${totalAllocCount} allocations`
: `${projectCount} projects`}
</div>
</div>
<div className="flex flex-wrap items-center justify-end gap-2">