feat: Sprint 1 — Alive Enterprise animation foundation
Animation primitives (6 new components): - AnimatedNumber: count-up with easeOutExpo, de-DE locale formatting - ShimmerSkeleton: diagonal gradient sweep replacing animate-pulse - FadeIn: framer-motion viewport-triggered fade + slide - StaggerList/StaggerItem: staggered children entrance - Sparkline: pure SVG inline trend chart with draw-in animation - ProgressRing: animated circular progress with CSS transitions Sidebar & page transitions: - Sliding nav indicator (framer-motion layoutId animation) - Icon frame hover glow (brand-color shadow) - Smooth section collapse/expand (AnimatePresence height animation) - PageTransition wrapper (fade-up on route change) - AnimatedModal component (scale + fade with custom bezier) - Notification badge bounce on count increase Dashboard animations: - StatCards: AnimatedNumber count-up + staggered FadeIn + budget color tinting - WidgetContainer: fade-slide-up on mount - Chargeability: animated percentages + inline utilization bars - ProjectTable/MyProjects: animated numbers + staggered row entrance Shimmer skeletons & table animations: - Replaced animate-pulse across 20+ loading states with shimmer gradient - Staggered row entrance (fadeSlideIn) on Resources, Projects, Allocations tables - hover-lift utility class for subtle card/row elevation on hover - Content-shaped skeletons (avatars, text bars, badges) Light mode surface depth: - Mesh gradient page background (subtle accent-tinted corners) - Enhanced card shadows (two-layer depth) - Sidebar glassmorphism upgrade (bg-white/60, backdrop-blur-2xl, saturate-150) - Toolbar sticky backdrop blur - Enhanced focus ring with brand-color glow Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -14,11 +14,11 @@ import "react-resizable/css/styles.css";
|
||||
|
||||
function WidgetFallback() {
|
||||
return (
|
||||
<div className="animate-pulse h-full w-full flex flex-col gap-3 p-4">
|
||||
<div className="h-3 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-4/5 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-3/5 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-full w-full flex flex-col gap-3 p-4">
|
||||
<div className="h-3 w-32 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-full shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-4/5 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-3/5 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface WidgetContainerProps {
|
||||
title: string;
|
||||
onRemove: () => void;
|
||||
@@ -9,7 +11,10 @@ interface WidgetContainerProps {
|
||||
|
||||
export function WidgetContainer({ title, onRemove, children, isDragging }: WidgetContainerProps) {
|
||||
return (
|
||||
<div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, ease: "easeOut" }}
|
||||
className={`flex flex-col h-full bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${
|
||||
isDragging ? "shadow-lg border-brand-300" : ""
|
||||
}`}
|
||||
@@ -34,6 +39,6 @@ export function WidgetContainer({ title, onRemove, children, isDragging }: Widge
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-auto p-4">{children}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,20 @@ import { useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } fr
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
|
||||
|
||||
function UtilizationBar({ percent }: { percent: number }) {
|
||||
const barColor =
|
||||
percent >= 80 ? "bg-green-500" : percent >= 50 ? "bg-amber-500" : "bg-red-500";
|
||||
return (
|
||||
<div className="h-1 w-full rounded-full bg-gray-100 dark:bg-gray-800 mt-0.5">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${barColor}`}
|
||||
style={{ width: `${Math.min(percent, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type TopSortKey = "name" | "actual" | "expected";
|
||||
type WatchSortKey = "name" | "actual" | "target";
|
||||
@@ -120,21 +134,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col gap-3 pt-1">
|
||||
<div className="h-2 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="flex flex-col gap-3 pt-1">
|
||||
<div className="h-2 w-32 shimmer-skeleton rounded" />
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="flex gap-3 px-2 py-1">
|
||||
<div className="h-3 w-4 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
<div className="border-t border-gray-100 dark:border-gray-800 mt-1 pt-2">
|
||||
<div className="h-2 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
|
||||
<div className="h-2 w-20 shimmer-skeleton rounded mb-2" />
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="flex gap-3 px-2 py-1">
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
</div>
|
||||
@@ -357,16 +371,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{visibleTop.map((r, i) => (
|
||||
<tr key={r.id} className="hover:bg-gray-50">
|
||||
<tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40">
|
||||
<td className="px-2 py-1 text-gray-400">{i + 1}</td>
|
||||
<td className="px-2 py-1 text-gray-800 truncate max-w-[120px]">
|
||||
<span title={r.displayName}>{r.displayName}</span>
|
||||
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
|
||||
<td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[120px]">
|
||||
<div className="truncate">
|
||||
<span title={r.displayName}>{r.displayName}</span>
|
||||
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
|
||||
</div>
|
||||
<UtilizationBar percent={r.actualChargeability} />
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right font-semibold text-green-700">
|
||||
{r.actualChargeability}%
|
||||
<td className="px-2 py-1 text-right font-semibold text-green-700 dark:text-green-400">
|
||||
<AnimatedNumber value={r.actualChargeability} suffix="%" />
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right text-gray-400">
|
||||
<AnimatedNumber value={r.expectedChargeability} suffix="%" />
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right text-gray-400">{r.expectedChargeability}%</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@@ -436,15 +455,20 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{visibleWatchlist.map((r) => (
|
||||
<tr key={r.id} className="hover:bg-gray-50">
|
||||
<td className="px-2 py-1 text-gray-800 truncate max-w-[140px]">
|
||||
<span title={r.displayName}>{r.displayName}</span>
|
||||
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
|
||||
<tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40">
|
||||
<td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[140px]">
|
||||
<div className="truncate">
|
||||
<span title={r.displayName}>{r.displayName}</span>
|
||||
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
|
||||
</div>
|
||||
<UtilizationBar percent={r.actualChargeability} />
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right font-semibold text-red-600">
|
||||
{r.actualChargeability}%
|
||||
<td className="px-2 py-1 text-right font-semibold text-red-600 dark:text-red-400">
|
||||
<AnimatedNumber value={r.actualChargeability} suffix="%" />
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right text-gray-400">
|
||||
<AnimatedNumber value={r.chargeabilityTarget} suffix="%" />
|
||||
</td>
|
||||
<td className="px-2 py-1 text-right text-gray-400">{r.chargeabilityTarget}%</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@@ -30,17 +30,17 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
|
||||
|
||||
if (isLoading && !data) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col gap-3 pt-1">
|
||||
<div className="flex flex-col gap-3 pt-1">
|
||||
<div className="flex gap-1 border-b border-gray-200 pb-1">
|
||||
<div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-6 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-6 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-6 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-6 w-20 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="flex gap-3 px-3 py-1.5">
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-14 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-14 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-14 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-14 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ import Link from "next/link";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
import type { WidgetProps } from "../widget-registry.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
import { FadeIn } from "~/components/ui/FadeIn.js";
|
||||
|
||||
const STATUS_DOT: Record<string, string> = {
|
||||
ACTIVE: "bg-green-500",
|
||||
@@ -83,8 +84,10 @@ export function MyProjectsWidget({ config }: WidgetProps) {
|
||||
Favorites
|
||||
<InfoTooltip content="Projects you have starred. Click the star icon on any project to add or remove it from your favorites." />
|
||||
</div>
|
||||
{favoriteProjects.map((p) => (
|
||||
<ProjectRow key={p.id} project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
|
||||
{favoriteProjects.map((p, i) => (
|
||||
<FadeIn key={p.id} delay={i * 0.03} direction="up">
|
||||
<ProjectRow project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -95,8 +98,10 @@ export function MyProjectsWidget({ config }: WidgetProps) {
|
||||
Responsible
|
||||
<InfoTooltip content="Projects where you are listed as the responsible person. These are automatically shown based on your user name." />
|
||||
</div>
|
||||
{responsibleProjects.map((p) => (
|
||||
<ProjectRow key={p.id} project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
|
||||
{responsibleProjects.map((p, i) => (
|
||||
<FadeIn key={p.id} delay={i * 0.03} direction="up">
|
||||
<ProjectRow project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -35,16 +35,16 @@ export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col gap-3 h-full pt-2">
|
||||
<div className="flex flex-col gap-3 h-full pt-2">
|
||||
<div className="flex gap-2">
|
||||
<div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" />
|
||||
<div className="h-7 w-28 shimmer-skeleton rounded-lg" />
|
||||
<div className="h-7 w-28 shimmer-skeleton rounded-lg" />
|
||||
</div>
|
||||
<div className="flex items-end gap-1 flex-1 px-2">
|
||||
{[...Array(12)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-t"
|
||||
className="flex-1 shimmer-skeleton rounded-t"
|
||||
style={{ height: `${30 + Math.random() * 50}%` }}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { formatCents, formatMoney } from "~/lib/format.js";
|
||||
import { ProjectStatus } from "@planarchy/shared/types";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
import { PROJECT_STATUS_BADGE as STATUS_COLORS } from "~/lib/status-styles.js";
|
||||
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
|
||||
|
||||
export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
|
||||
const status = (config.status as ProjectStatus) || undefined;
|
||||
@@ -32,13 +33,13 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col gap-2 pt-1">
|
||||
<div className="flex flex-col gap-2 pt-1">
|
||||
{/* header row */}
|
||||
<div className="flex gap-3 px-3 py-2">
|
||||
{[40, 120, 80, 60, 60].map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded"
|
||||
className="h-2.5 shimmer-skeleton rounded"
|
||||
style={{ width: w }}
|
||||
/>
|
||||
))}
|
||||
@@ -49,11 +50,11 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
|
||||
key={i}
|
||||
className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800"
|
||||
>
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-12 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -275,7 +276,7 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
|
||||
{formatCents(p.totalCostCents)} €
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
|
||||
{p.totalPersonDays}d
|
||||
<AnimatedNumber value={p.totalPersonDays} suffix="d" />
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
{p.budgetCents > 0 ? (
|
||||
|
||||
@@ -46,13 +46,13 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col gap-2 pt-1">
|
||||
<div className="flex flex-col gap-2 pt-1">
|
||||
{/* header row */}
|
||||
<div className="flex gap-3 px-3 py-2">
|
||||
{[40, 120, 80, 60, 60].map((w, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded"
|
||||
className="h-2.5 shimmer-skeleton rounded"
|
||||
style={{ width: w }}
|
||||
/>
|
||||
))}
|
||||
@@ -63,11 +63,11 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
|
||||
key={i}
|
||||
className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800"
|
||||
>
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-12 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -4,27 +4,51 @@ import { trpc } from "~/lib/trpc/client.js";
|
||||
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
|
||||
import { formatMoney } from "~/lib/format.js";
|
||||
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
|
||||
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
|
||||
import { FadeIn } from "~/components/ui/FadeIn.js";
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
suffix,
|
||||
sub,
|
||||
info,
|
||||
accentColor,
|
||||
delay = 0,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | number;
|
||||
value: number;
|
||||
suffix?: string;
|
||||
sub?: string;
|
||||
info?: React.ReactNode;
|
||||
accentColor?: "green" | "amber" | "red";
|
||||
delay?: number;
|
||||
}) {
|
||||
const accentBorder = accentColor === "red"
|
||||
? "border-l-red-500"
|
||||
: accentColor === "amber"
|
||||
? "border-l-amber-500"
|
||||
: accentColor === "green"
|
||||
? "border-l-green-500"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70">
|
||||
<span className="flex items-center text-xs font-semibold uppercase tracking-[0.18em] text-gray-500">
|
||||
{label}
|
||||
{info && <InfoTooltip content={info} />}
|
||||
</span>
|
||||
<span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50">{value}</span>
|
||||
{sub && <span className="mt-1 text-xs text-gray-500 dark:text-gray-400">{sub}</span>}
|
||||
</div>
|
||||
<FadeIn delay={delay} direction="up">
|
||||
<div
|
||||
className={`rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70 ${
|
||||
accentColor ? `border-l-[3px] ${accentBorder}` : ""
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center text-xs font-semibold uppercase tracking-[0.18em] text-gray-500">
|
||||
{label}
|
||||
{info && <InfoTooltip content={info} />}
|
||||
</span>
|
||||
<span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
<AnimatedNumber value={value} suffix={suffix} />
|
||||
</span>
|
||||
{sub && <span className="mt-1 text-xs text-gray-500 dark:text-gray-400">{sub}</span>}
|
||||
</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -37,21 +61,25 @@ export function StatCardsWidget(_props: Partial<WidgetProps> = {}) {
|
||||
|
||||
if (isLoading || !data) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3 h-full animate-pulse">
|
||||
<div className="grid grid-cols-2 gap-3 h-full">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-2xl border border-gray-200 bg-gray-100 p-4 dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-20 shimmer-skeleton rounded" />
|
||||
<div className="h-7 w-16 bg-gray-300 dark:bg-gray-600 rounded" />
|
||||
<div className="h-2 w-24 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-2 w-24 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const budgetPct = data.budgetSummary.avgUtilizationPercent;
|
||||
const budgetAccent: "red" | "amber" | "green" =
|
||||
budgetPct > 90 ? "red" : budgetPct >= 70 ? "amber" : "green";
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 h-full content-start">
|
||||
<StatCard
|
||||
@@ -59,24 +87,30 @@ export function StatCardsWidget(_props: Partial<WidgetProps> = {}) {
|
||||
value={data.totalResources}
|
||||
sub={`${data.activeResources} active`}
|
||||
info="All resources in the system. Sub-line shows active resources only."
|
||||
delay={0}
|
||||
/>
|
||||
<StatCard
|
||||
label="Active Projects"
|
||||
value={data.activeProjects}
|
||||
sub={`${data.totalProjects} total`}
|
||||
info="Projects with status ACTIVE. Total includes all statuses (DRAFT, ON_HOLD, COMPLETED, CANCELLED)."
|
||||
delay={0.05}
|
||||
/>
|
||||
<StatCard
|
||||
label="Total Allocations"
|
||||
value={data.totalAllocations}
|
||||
sub={`${data.activeAllocations} not cancelled`}
|
||||
info="All allocation records ever created. 'Not cancelled' excludes allocations with status CANCELLED."
|
||||
delay={0.1}
|
||||
/>
|
||||
<StatCard
|
||||
label="Budget Utilization"
|
||||
value={`${data.budgetSummary.avgUtilizationPercent}%`}
|
||||
value={budgetPct}
|
||||
suffix="%"
|
||||
sub={`${formatMoney(data.budgetSummary.totalCostCents)} of ${formatMoney(data.budgetSummary.totalBudgetCents)}`}
|
||||
info="Sum of costs across non-cancelled allocations divided by total project budgets. Cost = resource LCR × booked hours."
|
||||
accentColor={budgetAccent}
|
||||
delay={0.15}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -40,12 +40,12 @@ export function TaskWidget(_props: Partial<WidgetProps> = {}) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between px-1 pb-3">
|
||||
<div className="h-5 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
|
||||
<div className="h-5 w-32 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-2">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="animate-pulse rounded-xl border border-gray-200 dark:border-gray-700 p-3">
|
||||
<div className="h-4 w-3/4 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div key={i} className="rounded-xl border border-gray-200 dark:border-gray-700 p-3">
|
||||
<div className="h-4 w-3/4 shimmer-skeleton rounded" />
|
||||
<div className="mt-2 h-3 w-1/2 bg-gray-100 dark:bg-gray-800 rounded" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -25,15 +25,15 @@ export function TopValueWidget({ config }: WidgetProps) {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="animate-pulse flex flex-col gap-1 pt-1">
|
||||
<div className="flex flex-col gap-1 pt-1">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-3 py-2">
|
||||
<div className="h-3 w-4 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
|
||||
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-5 w-10 bg-gray-200 dark:bg-gray-700 rounded-full" />
|
||||
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
|
||||
<div className="h-3 w-4 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
|
||||
<div className="h-3 flex-1 shimmer-skeleton rounded" />
|
||||
<div className="h-3 w-16 shimmer-skeleton rounded" />
|
||||
<div className="h-5 w-10 shimmer-skeleton rounded-full" />
|
||||
<div className="h-3 w-12 shimmer-skeleton rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user