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

chore(repo): checkpoint current capakraken implementation state

Browse Source
This commit is contained in:
Hartmut Nörenberg
2026-03-29 12:47:12 +02:00
parent beae1a5d6e
commit 47e4d701ff
94 changed files with 4283 additions and 1710 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/dashboard/DashboardClient.tsx
+155 -34
View File
@@ -2,7 +2,7 @@
import type { DashboardWidgetConfig, DashboardWidgetType } from "@capakraken/shared/types";
import dynamic from "next/dynamic";
import { Suspense, useState, useRef, useEffect } from "react";
import { Suspense, useState, useRef, useEffect, useMemo } from "react";
import { useDashboardLayout } from "~/hooks/useDashboardLayout.js";
import { WidgetContainer } from "./WidgetContainer.js";
import { AddWidgetModal } from "./AddWidgetModal.js";
@@ -44,6 +44,94 @@ function renderWidget(
);
}
function DeferredWidgetFallback() {
return (
<div className="flex h-full min-h-32 flex-col gap-3 p-1">
<div className="h-3 w-32 shimmer-skeleton rounded" />
<div className="h-20 w-full shimmer-skeleton rounded-2xl" />
<div className="h-3 w-4/5 shimmer-skeleton rounded" />
<div className="h-3 w-3/5 shimmer-skeleton rounded" />
</div>
);
}
function DeferredWidgetBody({
type,
config,
activationRank,
isPriority,
onConfigChange,
}: {
type: DashboardWidgetType;
config: DashboardWidgetConfig;
activationRank: number;
isPriority: boolean;
onConfigChange: (u: Record<string, unknown>) => void;
}) {
const containerRef = useRef<HTMLDivElement>(null);
const [isActive, setIsActive] = useState(isPriority);
useEffect(() => {
if (isPriority) {
setIsActive(true);
}
}, [isPriority]);
useEffect(() => {
if (isActive) return;
const element = containerRef.current;
if (!element) return;
const observer = new IntersectionObserver(
([entry]) => {
if (!entry?.isIntersecting) return;
setIsActive(true);
observer.disconnect();
},
{ rootMargin: "320px 0px", threshold: 0.05 },
);
observer.observe(element);
return () => observer.disconnect();
}, [isActive]);
useEffect(() => {
if (isActive || isPriority || typeof window === "undefined") return;
const activationDelayMs = 900 + Math.min(activationRank, 6) * 180;
let timeoutId: number | null = null;
let idleId: number | null = null;
const browserWindow = window as Window &
typeof globalThis & {
requestIdleCallback?: (
callback: IdleRequestCallback,
options?: IdleRequestOptions,
) => number;
cancelIdleCallback?: (handle: number) => void;
};
const activate = () => setIsActive(true);
if (typeof browserWindow.requestIdleCallback === "function") {
idleId = browserWindow.requestIdleCallback(activate, { timeout: activationDelayMs });
} else {
timeoutId = browserWindow.setTimeout(activate, activationDelayMs);
}
return () => {
if (idleId !== null && typeof browserWindow.cancelIdleCallback === "function") {
browserWindow.cancelIdleCallback(idleId);
}
if (timeoutId !== null) {
browserWindow.clearTimeout(timeoutId);
}
};
}, [activationRank, isActive, isPriority]);
return <div ref={containerRef} className="h-full">{isActive ? renderWidget(type, config, onConfigChange) : <DeferredWidgetFallback />}</div>;
}
export function DashboardClient() {
const [addModalOpen, setAddModalOpen] = useState(false);
const { config, addWidget, removeWidget, updateWidgetConfig, onLayoutChange, resetLayout } =
@@ -52,29 +140,80 @@ export function DashboardClient() {
// Measure grid container width so Responsive knows the column size.
// We can't use WidthProvider (uses findDOMNode, deprecated in React 18).
const containerRef = useRef<HTMLDivElement>(null);
const resizeFrameRef = useRef<number | null>(null);
const lastMeasuredWidthRef = useRef(0);
const [gridWidth, setGridWidth] = useState(1200);
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const updateWidth = (width: number) => {
const roundedWidth = Math.max(0, Math.round(width));
if (roundedWidth === lastMeasuredWidthRef.current) return;
lastMeasuredWidthRef.current = roundedWidth;
setGridWidth((currentWidth) => (currentWidth === roundedWidth ? currentWidth : roundedWidth));
};
const ro = new ResizeObserver(([entry]) => {
if (entry) setGridWidth(entry.contentRect.width);
if (!entry) return;
if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current);
resizeFrameRef.current = requestAnimationFrame(() => {
resizeFrameRef.current = null;
updateWidth(entry.contentRect.width);
});
});
ro.observe(el);
setGridWidth(el.getBoundingClientRect().width);
return () => ro.disconnect();
updateWidth(el.getBoundingClientRect().width);
return () => {
ro.disconnect();
if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current);
};
}, []);
const layouts = {
lg: config.widgets.map((w) => ({
i: w.id,
x: w.x,
y: w.y,
w: w.w,
h: w.h,
minW: w.minW ?? 2,
minH: w.minH ?? 2,
})),
};
const layouts = useMemo(
() => ({
lg: config.widgets.map((w) => ({
i: w.id,
x: w.x,
y: w.y,
w: w.w,
h: w.h,
minW: w.minW ?? 2,
minH: w.minH ?? 2,
})),
}),
[config.widgets],
);
const renderedWidgets = useMemo(
() =>
config.widgets.map((widget) => {
const widgetDefinition = getWidget(widget.type);
const isPriorityWidget = widget.y < 3;
return (
<div key={widget.id}>
<WidgetContainer
title={widget.title ?? widgetDefinition.label}
description={widgetDefinition.description}
showDetails={widget.config.showDetails === true}
onToggleDetails={() =>
updateWidgetConfig(widget.id, {
showDetails: widget.config.showDetails !== true,
})
}
onRemove={() => removeWidget(widget.id)}
>
<DeferredWidgetBody
type={widget.type}
config={widget.config}
activationRank={widget.y * 12 + widget.x}
isPriority={isPriorityWidget}
onConfigChange={(update) => updateWidgetConfig(widget.id, update)}
/>
</WidgetContainer>
</div>
);
}),
[config.widgets, removeWidget, updateWidgetConfig],
);
return (
<div className="app-page space-y-6">
@@ -153,25 +292,7 @@ export function DashboardClient() {
draggableHandle=".widget-drag-handle"
margin={[12, 12]}
>
{config.widgets.map((widget) => (
<div key={widget.id}>
<WidgetContainer
title={widget.title ?? getWidget(widget.type).label}
description={getWidget(widget.type).description}
showDetails={widget.config.showDetails === true}
onToggleDetails={() =>
updateWidgetConfig(widget.id, {
showDetails: widget.config.showDetails !== true,
})
}
onRemove={() => removeWidget(widget.id)}
>
{renderWidget(widget.type, widget.config, (update) =>
updateWidgetConfig(widget.id, update),
)}
</WidgetContainer>
</div>
))}
{renderedWidgets}
</AnyGridLayout>
);
})()}
apps/web/src/components/dashboard/widgets/BudgetForecastWidget.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ function SummaryCard({
export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
const showDetails = config.showDetails === true;
const { clients } = useWidgetFilterOptions();
const { clients } = useWidgetFilterOptions({ clients: true });
const filters = useMemo<WidgetFilter[]>(
() => [
apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
+3 -15
View File
@@ -7,6 +7,7 @@ import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";
import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
import { useReferenceData } from "~/hooks/useReferenceData.js";
function UtilizationBar({ percent }: { percent: number }) {
const barColor =
@@ -24,11 +25,6 @@ function UtilizationBar({ percent }: { percent: number }) {
type TopSortKey = "name" | "actual" | "expected";
type WatchSortKey = "name" | "actual" | "target";
type CountryOption = {
id: string;
name: string;
};
type ChargeabilityRow = {
id: string;
displayName: string;
@@ -164,7 +160,8 @@ export function ChargeabilityWidget({ config: _config, onConfigChange }: WidgetP
includeProposed?: boolean;
showDetails?: boolean;
};
const { chapters } = useWidgetFilterOptions();
const { chapters } = useWidgetFilterOptions({ chapters: true });
const { countries } = useReferenceData({ countries: true });
const widgetFilters = useMemo<WidgetFilter[]>(
() => [
@@ -187,15 +184,6 @@ export function ChargeabilityWidget({ config: _config, onConfigChange }: WidgetP
const [topVisibleCount, setTopVisibleCount] = useState(batchSize);
const [watchVisibleCount, setWatchVisibleCount] = useState(batchSize);
const { data: countriesData } = trpc.country.list.useQuery(undefined, { staleTime: 60_000 });
const countries = useMemo(
() =>
((countriesData ?? []) as Array<{ id: string; name: string }>).map((country) => ({
id: country.id,
name: country.name,
})),
[countriesData],
) as CountryOption[];
const selectedCountryLabel = useMemo(() => {
if (selectedCountryIds.length === 0) return "Countries: All";
if (selectedCountryIds.length === 1) {
apps/web/src/components/dashboard/widgets/ProjectHealthWidget.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ function formatLocation(location: {
export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
const showDetails = config.showDetails === true;
const { clients } = useWidgetFilterOptions();
const { clients } = useWidgetFilterOptions({ clients: true });
const filters = useMemo<WidgetFilter[]>(
() => [
apps/web/src/components/dashboard/widgets/ResourceTableWidget.tsx
+32 -28
View File
@@ -1,9 +1,10 @@
"use client";
import { useState } from "react";
import { useMemo, useState } from "react";
import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
interface ResourceRow {
id: string;
@@ -29,8 +30,7 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
{ staleTime: 60_000 },
);
const { data: chapterData } = trpc.resource.chapters.useQuery(undefined, { staleTime: 120_000 });
const chapters = chapterData ?? [];
const { chapters } = useWidgetFilterOptions({ chapters: true });
type SortKey = "eid" | "name" | "chapter" | "bookings" | "utilization" | "target";
const [sortKey, setSortKey] = useState<SortKey>("name");
@@ -44,6 +44,32 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
}
}
const list = useMemo(() => (resources ?? []) as unknown as ResourceRow[], [resources]);
const sorted = useMemo(() => {
const next = [...list];
next.sort((a, b) => {
const mult = sortDir === "asc" ? 1 : -1;
switch (sortKey) {
case "eid":
return mult * a.eid.localeCompare(b.eid);
case "name":
return mult * a.displayName.localeCompare(b.displayName);
case "chapter":
return mult * (a.chapter ?? "").localeCompare(b.chapter ?? "");
case "bookings":
return mult * (a.bookingCount - b.bookingCount);
case "utilization":
return mult * (a.utilizationPercent - b.utilizationPercent);
case "target":
return mult * (a.chargeabilityTarget - b.chargeabilityTarget);
default:
return 0;
}
});
return next;
}, [list, sortDir, sortKey]);
if (isLoading) {
return (
<div className="flex flex-col gap-2 pt-1">
@@ -74,28 +100,6 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
);
}
const list = (resources ?? []) as unknown as ResourceRow[];
const sorted = [...list].sort((a, b) => {
const mult = sortDir === "asc" ? 1 : -1;
switch (sortKey) {
case "eid":
return mult * a.eid.localeCompare(b.eid);
case "name":
return mult * a.displayName.localeCompare(b.displayName);
case "chapter":
return mult * (a.chapter ?? "").localeCompare(b.chapter ?? "");
case "bookings":
return mult * (a.bookingCount - b.bookingCount);
case "utilization":
return mult * (a.utilizationPercent - b.utilizationPercent);
case "target":
return mult * (a.chargeabilityTarget - b.chargeabilityTarget);
default:
return 0;
}
});
return (
<div className="flex flex-col h-full gap-3">
{/* Filter */}
@@ -107,9 +111,9 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
className="app-select w-44 text-xs"
>
<option value="">All Chapters</option>
{chapters.map((c) => (
<option key={c} value={c}>
{c}
{chapters.map((chapterOption) => (
<option key={chapterOption.value} value={chapterOption.value}>
{chapterOption.label}
</option>
))}
</select>
apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ type SortKey = "eid" | "name" | "chapter" | "score" | "lcr";
export function TopValueWidget({ config, onConfigChange }: WidgetProps) {
const limit = (config.limit as number) || 10;
const { chapters } = useWidgetFilterOptions();
const { chapters } = useWidgetFilterOptions({ chapters: true });
const filters = useMemo<WidgetFilter[]>(
() => [