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

feat: Sprint 1 — Alive Enterprise animation foundation

Browse Source 
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:
Hartmut Nörenberg
2026-03-19 00:48:55 +01:00
parent 407266bc28
commit ae92923c28
48 changed files with 1301 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/package.json
+1
View File
@@ -25,6 +25,7 @@
"@trpc/react-query": "^11.0.0", "@trpc/react-query": "^11.0.0",
"@trpc/server": "^11.0.0", "@trpc/server": "^11.0.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"framer-motion": "^12.38.0",
"next": "^15.1.7", "next": "^15.1.7",
"next-auth": "^5.0.0-beta.25", "next-auth": "^5.0.0-beta.25",
"react": "^19.0.0", "react": "^19.0.0",
apps/web/src/app/(app)/admin/system-roles/page.tsx
+3 -3
View File
@@ -4,11 +4,11 @@ const SystemRolesClient = dynamic(
() => import("~/components/admin/SystemRolesClient.js").then((m) => m.SystemRolesClient), () => import("~/components/admin/SystemRolesClient.js").then((m) => m.SystemRolesClient),
{ {
loading: () => ( loading: () => (
<div className="animate-pulse p-6 space-y-4 max-w-4xl mx-auto"> <div className="p-6 space-y-4 max-w-4xl mx-auto">
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-8 w-48 shimmer-skeleton rounded" />
<div className="space-y-3"> <div className="space-y-3">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div key={i} className="h-24 w-full bg-gray-200 dark:bg-gray-700 rounded-xl" /> <div key={i} className="h-24 w-full shimmer-skeleton rounded-xl animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
))} ))}
</div> </div>
</div> </div>
apps/web/src/app/(app)/allocations/loading.tsx
+23 -23
View File
@@ -1,43 +1,43 @@
export default function AllocationsLoading() { export default function AllocationsLoading() {
return ( return (
<div className="flex flex-col h-full gap-4 animate-pulse"> <div className="flex flex-col h-full gap-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="h-7 w-36 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-7 w-36 shimmer-skeleton rounded" />
<div className="h-9 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg" /> <div className="h-9 w-32 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Filter bar */} {/* Filter bar */}
<div className="flex gap-2"> <div className="flex gap-2">
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Table */} {/* Table */}
<div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"> <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
{/* Header */} {/* Header */}
<div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-4 shimmer-skeleton rounded" />
<div className="h-3 w-28 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-28 shimmer-skeleton rounded" />
<div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 flex-1 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
</div> </div>
{/* Rows */} {/* Rows */}
{[...Array(10)].map((_, i) => ( {[...Array(10)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800"> <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
<div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" /> <div className="h-4 w-4 shimmer-skeleton rounded" />
<div className="h-3 w-28 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-28 shimmer-skeleton rounded" />
<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-20 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-10 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-20 shimmer-skeleton rounded-full" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/app/(app)/allocations/page.tsx
+4 -4
View File
@@ -4,12 +4,12 @@ const AllocationsClient = dynamic(
() => import("~/components/allocations/AllocationsClient.js").then((m) => m.AllocationsClient), () => import("~/components/allocations/AllocationsClient.js").then((m) => m.AllocationsClient),
{ {
loading: () => ( loading: () => (
<div className="animate-pulse p-6 space-y-4"> <div className="p-6 space-y-4">
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-8 w-48 shimmer-skeleton rounded" />
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-10 w-full shimmer-skeleton rounded" />
<div className="space-y-2"> <div className="space-y-2">
{[...Array(8)].map((_, i) => ( {[...Array(8)].map((_, i) => (
<div key={i} className="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded" /> <div key={i} className="h-12 w-full shimmer-skeleton rounded animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
))} ))}
</div> </div>
</div> </div>
apps/web/src/app/(app)/loading.tsx
+6 -6
View File
@@ -1,15 +1,15 @@
export default function AppLoading() { export default function AppLoading() {
return ( return (
<div className="p-6 space-y-4 animate-pulse"> <div className="p-6 space-y-4">
<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-48" /> <div className="h-8 shimmer-skeleton rounded w-48" />
<div className="h-4 bg-gray-100 dark:bg-gray-800 rounded w-72" /> <div className="h-4 shimmer-skeleton rounded w-72" />
<div className="grid grid-cols-4 gap-4 mt-4"> <div className="grid grid-cols-4 gap-4 mt-4">
{[0, 1, 2, 3].map((i) => ( {[0, 1, 2, 3].map((i) => (
<div key={i} className="h-20 bg-gray-100 dark:bg-gray-800 rounded-xl" /> <div key={i} className="h-20 shimmer-skeleton rounded-xl" style={{ animationDelay: `${i * 50}ms` }} />
))} ))}
</div> </div>
<div className="h-64 bg-gray-100 dark:bg-gray-800 rounded-xl" /> <div className="h-64 shimmer-skeleton rounded-xl" />
<div className="h-48 bg-gray-100 dark:bg-gray-800 rounded-xl" /> <div className="h-48 shimmer-skeleton rounded-xl" />
</div> </div>
); );
} }
apps/web/src/app/(app)/projects/ProjectsClient.tsx
+4 -3
View File
@@ -530,7 +530,7 @@ export function ProjectsClient() {
<div className="app-data-table"> <div className="app-data-table">
{isLoading ? ( {isLoading ? (
<div className="py-16 text-center text-sm text-gray-500 animate-pulse">Loading projects…</div> <div className="py-16 text-center text-sm text-gray-500 shimmer-skeleton">Loading projects…</div>
) : ( ) : (
<> <>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
@@ -558,7 +558,7 @@ export function ProjectsClient() {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-800"> <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
{projects.map((project) => { {projects.map((project, index) => {
const isSelected = selection.selectedIds.has(project.id); const isSelected = selection.selectedIds.has(project.id);
return ( return (
<DraggableTableRow <DraggableTableRow
@@ -566,7 +566,8 @@ export function ProjectsClient() {
id={project.id} id={project.id}
dragRef={rowDragRef} dragRef={rowDragRef}
onDrop={(draggedId) => reorder(draggedId, project.id)} 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" : ""}`} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
> >
<td className="px-2 py-3 w-8"> <td className="px-2 py-3 w-8">
<button <button
apps/web/src/app/(app)/projects/loading.tsx
+26 -26
View File
@@ -1,48 +1,48 @@
export default function ProjectsLoading() { export default function ProjectsLoading() {
return ( return (
<div className="flex flex-col h-full gap-4 animate-pulse"> <div className="flex flex-col h-full gap-4">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="h-7 w-28 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-7 w-28 shimmer-skeleton rounded" />
<div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" /> <div className="h-9 w-28 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Filter bar */} {/* Filter bar */}
<div className="flex gap-2"> <div className="flex gap-2">
<div className="h-9 flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 flex-1 shimmer-skeleton rounded-lg" />
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
<div className="h-9 w-32 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-32 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Table */} {/* Table */}
<div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"> <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
{/* Header */} {/* Header */}
<div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-4 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 flex-1 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 w-24 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-24 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-12 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-12 shimmer-skeleton rounded" />
</div> </div>
{/* Rows */} {/* Rows */}
{[...Array(10)].map((_, i) => ( {[...Array(10)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800"> <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
<div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" /> <div className="h-4 w-4 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded font-mono" /> <div className="h-3 w-16 shimmer-skeleton rounded font-mono" />
<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-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-20 shimmer-skeleton rounded-full" />
<div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-16 shimmer-skeleton rounded-full" />
<div className="flex flex-col gap-1 w-24"> <div className="flex flex-col gap-1 w-24">
<div className="h-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full" /> <div className="h-2 w-full shimmer-skeleton rounded-full" />
<div className="h-2 w-10 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-2 w-10 shimmer-skeleton rounded" />
</div> </div>
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-8 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-8 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/app/(app)/resources/ResourcesClient.tsx
+4 -3
View File
@@ -937,7 +937,7 @@ export function ResourcesClient() {
{/* Table */} {/* Table */}
<div className="app-data-table"> <div className="app-data-table">
{isLoading && resources.length === 0 ? ( {isLoading && resources.length === 0 ? (
<div className="p-12 text-center text-sm text-gray-500 animate-pulse"> <div className="p-12 text-center text-sm text-gray-500 shimmer-skeleton">
Loading resources… Loading resources…
</div> </div>
) : ( ) : (
@@ -1097,7 +1097,7 @@ export function ResourcesClient() {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-800"> <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
{displayedResources.map((resource) => { {displayedResources.map((resource, index) => {
const skills = resource.skills as unknown as SkillEntry[]; const skills = resource.skills as unknown as SkillEntry[];
const isSelected = selection.selectedIds.has(resource.id); const isSelected = selection.selectedIds.has(resource.id);
const isDeactivating = const isDeactivating =
@@ -1114,7 +1114,8 @@ export function ResourcesClient() {
id={resource.id} id={resource.id}
dragRef={rowDragRef} dragRef={rowDragRef}
onDrop={(draggedId) => reorder(draggedId, resource.id)} onDrop={(draggedId) => reorder(draggedId, resource.id)}
className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
style={{ animationDelay: `${Math.min(index * 15, 300)}ms` }}
> >
<td className="px-4 py-3"> <td className="px-4 py-3">
<input <input
apps/web/src/app/(app)/resources/loading.tsx
+27 -27
View File
@@ -1,49 +1,49 @@
export default function ResourcesLoading() { export default function ResourcesLoading() {
return ( return (
<div className="flex flex-col h-full gap-4 animate-pulse"> <div className="flex flex-col h-full gap-4">
{/* Page header */} {/* Page header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="h-7 w-32 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-7 w-32 shimmer-skeleton rounded" />
<div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 rounded-lg" /> <div className="h-9 w-28 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Filter bar */} {/* Filter bar */}
<div className="flex gap-2"> <div className="flex gap-2">
<div className="h-9 flex-1 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 flex-1 shimmer-skeleton rounded-lg" />
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
<div className="h-9 w-36 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-36 shimmer-skeleton rounded-lg" />
<div className="h-9 w-28 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-9 w-28 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Table */} {/* Table */}
<div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"> <div className="flex-1 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
{/* Header */} {/* Header */}
<div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <div className="flex gap-3 px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div className="h-3 w-4 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-4 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-10 shimmer-skeleton rounded" />
<div className="h-3 w-28 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-28 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 w-24 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-24 shimmer-skeleton rounded" />
<div className="h-3 w-14 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-14 shimmer-skeleton rounded" />
<div className="h-3 flex-1 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 flex-1 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-300 dark:bg-gray-600 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
</div> </div>
{/* Rows */} {/* Rows */}
{[...Array(10)].map((_, i) => ( {[...Array(10)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800"> <div key={i} className="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
<div className="h-4 w-4 bg-gray-100 dark:bg-gray-700 rounded" /> <div className="h-4 w-4 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" /> <div className="h-8 w-8 shimmer-skeleton rounded-full" />
<div className="h-3 w-32 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-4 w-32 shimmer-skeleton rounded" />
<div className="h-3 w-20 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
<div className="h-3 w-14 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-14 shimmer-skeleton rounded" />
<div className="h-5 w-20 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-20 shimmer-skeleton rounded-full" />
<div className="h-5 w-12 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-12 shimmer-skeleton rounded-full" />
<div className="flex gap-1 flex-1"> <div className="flex gap-1 flex-1">
<div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-16 shimmer-skeleton rounded-full" />
<div className="h-5 w-16 bg-gray-100 dark:bg-gray-800 rounded-full" /> <div className="h-5 w-16 shimmer-skeleton rounded-full" />
</div> </div>
<div className="h-3 w-16 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/app/(app)/resources/page.tsx
+12 -4
View File
@@ -4,12 +4,20 @@ const ResourcesClient = dynamic(
() => import("./ResourcesClient.js").then((m) => m.ResourcesClient), () => import("./ResourcesClient.js").then((m) => m.ResourcesClient),
{ {
loading: () => ( loading: () => (
<div className="animate-pulse p-6 space-y-4"> <div className="p-6 space-y-4">
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-8 w-48 shimmer-skeleton rounded" />
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-10 w-full shimmer-skeleton rounded" />
<div className="space-y-2"> <div className="space-y-2">
{[...Array(10)].map((_, i) => ( {[...Array(10)].map((_, i) => (
<div key={i} className="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded" /> <div
key={i}
className="flex items-center gap-3 px-4 py-3 animate-row-enter"
style={{ animationDelay: `${i * 50}ms` }}
>
<div className="h-8 w-8 rounded-full shimmer-skeleton flex-shrink-0" />
<div className="h-4 w-32 shimmer-skeleton rounded" />
<div className="h-3 w-48 shimmer-skeleton rounded" />
</div>
))} ))}
</div> </div>
</div> </div>
apps/web/src/app/(app)/timeline/loading.tsx
+15 -15
View File
@@ -1,49 +1,49 @@
export default function TimelineLoading() { export default function TimelineLoading() {
return ( return (
<div className="flex flex-col h-full gap-0 animate-pulse"> <div className="flex flex-col h-full gap-0">
{/* Toolbar */} {/* Toolbar */}
<div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700"> <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700">
<div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" /> <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
<div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded-lg" /> <div className="h-8 w-24 shimmer-skeleton rounded-lg" />
<div className="flex-1" /> <div className="flex-1" />
<div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
<div className="h-8 w-8 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-8 w-8 shimmer-skeleton rounded-lg" />
<div className="h-8 w-20 bg-gray-100 dark:bg-gray-800 rounded-lg" /> <div className="h-8 w-20 shimmer-skeleton rounded-lg" />
</div> </div>
{/* Date header */} {/* Date header */}
<div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"> <div className="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
<div className="w-48 flex-shrink-0 px-4 py-2"> <div className="w-48 flex-shrink-0 px-4 py-2">
<div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-20 shimmer-skeleton rounded" />
</div> </div>
<div className="flex-1 flex gap-px py-2 px-2"> <div className="flex-1 flex gap-px py-2 px-2">
{[...Array(20)].map((_, i) => ( {[...Array(20)].map((_, i) => (
<div key={i} className="flex-1 h-3 bg-gray-200 dark:bg-gray-700 rounded" /> <div key={i} className="flex-1 h-3 shimmer-skeleton rounded" />
))} ))}
</div> </div>
</div> </div>
{/* Resource rows */} {/* Resource rows */}
{[...Array(8)].map((_, i) => ( {[...Array(8)].map((_, i) => (
<div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3"> <div key={i} className="flex border-b border-gray-100 dark:border-gray-800 py-3 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
{/* Resource name cell */} {/* Resource name cell */}
<div className="w-48 flex-shrink-0 px-4 flex flex-col gap-1.5"> <div className="w-48 flex-shrink-0 px-4 flex flex-col gap-1.5">
<div className="h-3 w-24 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-24 shimmer-skeleton rounded" />
<div className="h-2 w-12 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-2 w-12 shimmer-skeleton rounded" />
</div> </div>
{/* Allocation bars */} {/* Allocation bars */}
<div className="flex-1 relative px-2 flex items-center gap-1"> <div className="flex-1 relative px-2 flex items-center gap-1">
{i % 3 === 0 && ( {i % 3 === 0 && (
<div className="h-7 rounded-lg bg-brand-100 dark:bg-brand-900/30" style={{ width: "35%", marginLeft: "10%" }} /> <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "35%", marginLeft: "10%" }} />
)} )}
{i % 3 === 1 && ( {i % 3 === 1 && (
<> <>
<div className="h-7 rounded-lg bg-purple-100 dark:bg-purple-900/30" style={{ width: "20%", marginLeft: "5%" }} /> <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "20%", marginLeft: "5%" }} />
<div className="h-7 rounded-lg bg-blue-100 dark:bg-blue-900/30" style={{ width: "30%", marginLeft: "2%" }} /> <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "30%", marginLeft: "2%" }} />
</> </>
)} )}
{i % 3 === 2 && ( {i % 3 === 2 && (
<div className="h-7 rounded-lg bg-green-100 dark:bg-green-900/30" style={{ width: "45%", marginLeft: "20%" }} /> <div className="h-7 rounded-lg shimmer-skeleton" style={{ width: "45%", marginLeft: "20%" }} />
)} )}
</div> </div>
</div> </div>
apps/web/src/app/(app)/timeline/page.tsx
+4 -4
View File
@@ -4,10 +4,10 @@ const TimelineView = dynamic(
() => import("~/components/timeline/TimelineView.js").then((m) => m.TimelineView), () => import("~/components/timeline/TimelineView.js").then((m) => m.TimelineView),
{ {
loading: () => ( loading: () => (
<div className="animate-pulse flex flex-col gap-4 h-full p-6"> <div className="flex flex-col gap-4 h-full p-6">
<div className="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-8 w-48 shimmer-skeleton rounded" />
<div className="h-10 w-full bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-10 w-full shimmer-skeleton rounded" />
<div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="flex-1 shimmer-skeleton rounded" />
</div> </div>
), ),
}, },
apps/web/src/app/globals.css
+77 -10
View File
@@ -90,7 +90,7 @@
/* ─── Light Theme Surface Variables ─────────────────────────────────────── */ /* ─── Light Theme Surface Variables ─────────────────────────────────────── */
:root { :root {
--surface-page: 244 246 250; --surface-page: 246 247 251;
--surface-card: 255 255 255; --surface-card: 255 255 255;
--surface-elevated: 249 250 252; --surface-elevated: 249 250 252;
--surface-input: 255 255 255; --surface-input: 255 255 255;
@@ -132,6 +132,8 @@
background-color 0.15s ease, background-color 0.15s ease,
color 0.15s ease; color 0.15s ease;
background-image: background-image:
radial-gradient(ellipse at 0% 0%, rgb(var(--accent-50) / 0.15), transparent 50%),
radial-gradient(ellipse at 100% 100%, rgb(var(--accent-100) / 0.08), transparent 50%),
radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem), radial-gradient(circle at top left, rgb(var(--accent-100) / 0.32), transparent 24rem),
linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem); linear-gradient(180deg, rgb(255 255 255 / 0.72), transparent 24rem);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@@ -168,13 +170,20 @@
font: inherit; font: inherit;
} }
input:focus-visible, :focus-visible {
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid rgb(var(--accent-500)); outline: 2px solid rgb(var(--accent-500));
outline-offset: 2px; outline-offset: 2px;
border-radius: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid rgb(var(--accent-500));
outline-offset: 2px;
box-shadow: 0 0 0 3px rgb(var(--accent-500) / 0.12);
} }
/* Scrollbar styling for dark mode */ /* Scrollbar styling for dark mode */
@@ -345,16 +354,28 @@
@layer components { @layer components {
.app-surface { .app-surface {
@apply rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900/90; @apply rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900/90;
--tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:is(.dark) .app-surface {
--tw-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
} }
.app-surface-strong { .app-surface-strong {
@apply rounded-3xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900; @apply rounded-3xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
--tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:is(.dark) .app-surface-strong {
--tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
} }
.app-toolbar { .app-toolbar {
@apply rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur; @apply sticky top-0 z-10 rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm backdrop-blur-sm;
@apply dark:border-gray-700 dark:bg-gray-900/90 dark:shadow-black/20; @apply dark:border-gray-700 dark:bg-gray-900/80 dark:shadow-black/20;
} }
.app-input { .app-input {
@@ -443,3 +464,49 @@
.animate-overbooking-blink { .animate-overbooking-blink {
animation: overbooking-blink 2s ease-in-out infinite; animation: overbooking-blink 2s ease-in-out infinite;
} }
/* ─── Shimmer skeleton animation ─────────────────────────────────────────── */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.shimmer-skeleton {
background: linear-gradient(
90deg,
var(--surface-card) 25%,
color-mix(in srgb, var(--text-very-muted) 8%, var(--surface-card)) 50%,
var(--surface-card) 75%
);
background-size: 200% 100%;
animation: shimmer 1.8s ease-in-out infinite;
}
/* ─── Table row stagger entrance ─────────────────────────────────────────── */
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-row-enter {
animation: fadeSlideIn 0.25s ease-out both;
}
/* ─── Subtle hover lift for cards and table rows ─────────────────────────── */
.hover-lift {
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.hover-lift:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
:is(.dark) .hover-lift:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
apps/web/src/components/admin/SystemRolesClient.tsx
+1 -1
View File
@@ -173,7 +173,7 @@ export function SystemRolesClient() {
{isLoading && ( {isLoading && (
<div className="space-y-3"> <div className="space-y-3">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div key={i} className="h-24 bg-gray-200 dark:bg-gray-700 rounded-xl animate-pulse" /> <div key={i} className="h-24 shimmer-skeleton rounded-xl animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
))} ))}
</div> </div>
)} )}
apps/web/src/components/admin/SystemSettingsClient.tsx
+2 -2
View File
@@ -303,8 +303,8 @@ export function SystemSettingsClient() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="app-page animate-pulse"> <div className="app-page">
<div className="h-8 w-48 rounded bg-gray-200 dark:bg-gray-700" /> <div className="h-8 w-48 shimmer-skeleton rounded" />
</div> </div>
); );
} }
apps/web/src/components/allocations/AllocationsClient.tsx
+5 -5
View File
@@ -361,10 +361,10 @@ export function AllocationsClient() {
// colSpan for empty/loading states: checkbox + visible columns + actions // colSpan for empty/loading states: checkbox + visible columns + actions
const totalColSpan = 1 + visibleColumns.length + 1; const totalColSpan = 1 + visibleColumns.length + 1;
function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false) { function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false, rowIndex = 0) {
const isSelected = selection.selectedIds.has(alloc.id); const isSelected = selection.selectedIds.has(alloc.id);
return ( return (
<tr key={alloc.id} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}> <tr key={alloc.id} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`} style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}>
<td className="px-4 py-3"> <td className="px-4 py-3">
<input <input
type="checkbox" type="checkbox"
@@ -626,7 +626,7 @@ export function AllocationsClient() {
)} )}
{!isLoading && viewMode === "flat" && {!isLoading && viewMode === "flat" &&
sorted.map((alloc) => renderAllocRow(alloc))} sorted.map((alloc, index) => renderAllocRow(alloc, false, index))}
{!isLoading && viewMode === "grouped" && {!isLoading && viewMode === "grouped" &&
groups.map((group) => { groups.map((group) => {
@@ -685,7 +685,7 @@ export function AllocationsClient() {
// Single allocation for this project — render directly, no sub-group header // Single allocation for this project — render directly, no sub-group header
if (subGroup.allocations.length === 1) { if (subGroup.allocations.length === 1) {
return <GroupRows key={subKey}>{renderAllocRow(subGroup.allocations[0]!, true)}</GroupRows>; return <GroupRows key={subKey}>{renderAllocRow(subGroup.allocations[0]!, true, 0)}</GroupRows>;
} }
// Multiple allocations — show collapsible project sub-group // Multiple allocations — show collapsible project sub-group
@@ -732,7 +732,7 @@ export function AllocationsClient() {
</div> </div>
</td> </td>
</tr> </tr>
{isSubExpanded && subGroup.allocations.map((alloc) => renderAllocRow(alloc, true))} {isSubExpanded && subGroup.allocations.map((alloc, idx) => renderAllocRow(alloc, true, idx))}
</GroupRows> </GroupRows>
); );
})} })}
apps/web/src/components/analytics/SkillsAnalytics.tsx
+3 -3
View File
@@ -117,9 +117,9 @@ export function SkillsAnalytics() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="p-6 animate-pulse space-y-4"> <div className="p-6 space-y-4">
<div className="h-8 bg-gray-200 rounded w-64" /> <div className="h-8 shimmer-skeleton rounded w-64" />
<div className="h-64 bg-gray-100 rounded-xl" /> <div className="h-64 shimmer-skeleton rounded-xl" />
</div> </div>
); );
} }
apps/web/src/components/blueprints/BlueprintsClient.tsx
+1 -1
View File
@@ -319,7 +319,7 @@ export function BlueprintsClient() {
{isLoading && ( {isLoading && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<div key={i} className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse h-36" /> <div key={i} className="bg-white rounded-xl border border-gray-200 p-5 shimmer-skeleton h-36" />
))} ))}
</div> </div>
)} )}
apps/web/src/components/dashboard/DashboardClient.tsx
+5 -5
View File
@@ -14,11 +14,11 @@ import "react-resizable/css/styles.css";
function WidgetFallback() { function WidgetFallback() {
return ( return (
<div className="animate-pulse h-full w-full flex flex-col gap-3 p-4"> <div className="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-32 shimmer-skeleton rounded" />
<div className="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-full shimmer-skeleton rounded" />
<div className="h-3 w-4/5 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-4/5 shimmer-skeleton rounded" />
<div className="h-3 w-3/5 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="h-3 w-3/5 shimmer-skeleton rounded" />
</div> </div>
); );
} }
apps/web/src/components/dashboard/WidgetContainer.tsx
+7 -2
View File
@@ -1,5 +1,7 @@
"use client"; "use client";
import { motion } from "framer-motion";
interface WidgetContainerProps { interface WidgetContainerProps {
title: string; title: string;
onRemove: () => void; onRemove: () => void;
@@ -9,7 +11,10 @@ interface WidgetContainerProps {
export function WidgetContainer({ title, onRemove, children, isDragging }: WidgetContainerProps) { export function WidgetContainer({ title, onRemove, children, isDragging }: WidgetContainerProps) {
return ( 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 ${ className={`flex flex-col h-full bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${
isDragging ? "shadow-lg border-brand-300" : "" isDragging ? "shadow-lg border-brand-300" : ""
}`} }`}
@@ -34,6 +39,6 @@ export function WidgetContainer({ title, onRemove, children, isDragging }: Widge
{/* Body */} {/* Body */}
<div className="flex-1 overflow-auto p-4">{children}</div> <div className="flex-1 overflow-auto p-4">{children}</div>
</div> </motion.div>
); );
} }
apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx
+46 -22
View File
@@ -4,6 +4,20 @@ import { useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } fr
import { trpc } from "~/lib/trpc/client.js"; import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js"; import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.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 TopSortKey = "name" | "actual" | "expected";
type WatchSortKey = "name" | "actual" | "target"; type WatchSortKey = "name" | "actual" | "target";
@@ -120,21 +134,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
if (isLoading) { if (isLoading) {
return ( return (
<div className="animate-pulse flex flex-col gap-3 pt-1"> <div className="flex flex-col gap-3 pt-1">
<div className="h-2 w-32 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-2 w-32 shimmer-skeleton rounded" />
{[...Array(4)].map((_, i) => ( {[...Array(4)].map((_, i) => (
<div key={i} className="flex gap-3 px-2 py-1"> <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 w-4 shimmer-skeleton rounded" />
<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-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-10 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-10 shimmer-skeleton rounded" />
</div> </div>
))} ))}
<div className="border-t border-gray-100 dark:border-gray-800 mt-1 pt-2"> <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) => ( {[...Array(3)].map((_, i) => (
<div key={i} className="flex gap-3 px-2 py-1"> <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 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> </div>
@@ -357,16 +371,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
</thead> </thead>
<tbody className="divide-y divide-gray-50"> <tbody className="divide-y divide-gray-50">
{visibleTop.map((r, i) => ( {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-400">{i + 1}</td>
<td className="px-2 py-1 text-gray-800 truncate max-w-[120px]"> <td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[120px]">
<span title={r.displayName}>{r.displayName}</span> <div className="truncate">
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>} <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>
<td className="px-2 py-1 text-right font-semibold text-green-700"> <td className="px-2 py-1 text-right font-semibold text-green-700 dark:text-green-400">
{r.actualChargeability}% <AnimatedNumber value={r.actualChargeability} suffix="%" />
</td>
<td className="px-2 py-1 text-right text-gray-400">
<AnimatedNumber value={r.expectedChargeability} suffix="%" />
</td> </td>
<td className="px-2 py-1 text-right text-gray-400">{r.expectedChargeability}%</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -436,15 +455,20 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
</thead> </thead>
<tbody className="divide-y divide-gray-50"> <tbody className="divide-y divide-gray-50">
{visibleWatchlist.map((r) => ( {visibleWatchlist.map((r) => (
<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-800 truncate max-w-[140px]"> <td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[140px]">
<span title={r.displayName}>{r.displayName}</span> <div className="truncate">
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>} <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>
<td className="px-2 py-1 text-right font-semibold text-red-600"> <td className="px-2 py-1 text-right font-semibold text-red-600 dark:text-red-400">
{r.actualChargeability}% <AnimatedNumber value={r.actualChargeability} suffix="%" />
</td>
<td className="px-2 py-1 text-right text-gray-400">
<AnimatedNumber value={r.chargeabilityTarget} suffix="%" />
</td> </td>
<td className="px-2 py-1 text-right text-gray-400">{r.chargeabilityTarget}%</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
apps/web/src/components/dashboard/widgets/DemandWidget.tsx
+7 -7
View File
@@ -30,17 +30,17 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
if (isLoading && !data) { if (isLoading && !data) {
return ( 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="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 shimmer-skeleton 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 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-6 w-20 shimmer-skeleton rounded" />
</div> </div>
{[...Array(6)].map((_, i) => ( {[...Array(6)].map((_, i) => (
<div key={i} className="flex gap-3 px-3 py-1.5"> <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 flex-1 shimmer-skeleton rounded" />
<div className="h-3 w-14 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-14 shimmer-skeleton rounded" />
<div className="h-3 w-14 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-14 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/components/dashboard/widgets/MyProjectsWidget.tsx
+9 -4
View File
@@ -5,6 +5,7 @@ import Link from "next/link";
import { trpc } from "~/lib/trpc/client.js"; import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "../widget-registry.js"; import type { WidgetProps } from "../widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js"; import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { FadeIn } from "~/components/ui/FadeIn.js";
const STATUS_DOT: Record<string, string> = { const STATUS_DOT: Record<string, string> = {
ACTIVE: "bg-green-500", ACTIVE: "bg-green-500",
@@ -83,8 +84,10 @@ export function MyProjectsWidget({ config }: WidgetProps) {
Favorites Favorites
<InfoTooltip content="Projects you have starred. Click the star icon on any project to add or remove it from your favorites." /> <InfoTooltip content="Projects you have starred. Click the star icon on any project to add or remove it from your favorites." />
</div> </div>
{favoriteProjects.map((p) => ( {favoriteProjects.map((p, i) => (
<ProjectRow key={p.id} project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} /> <FadeIn key={p.id} delay={i * 0.03} direction="up">
<ProjectRow project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
</FadeIn>
))} ))}
</div> </div>
)} )}
@@ -95,8 +98,10 @@ export function MyProjectsWidget({ config }: WidgetProps) {
Responsible Responsible
<InfoTooltip content="Projects where you are listed as the responsible person. These are automatically shown based on your user name." /> <InfoTooltip content="Projects where you are listed as the responsible person. These are automatically shown based on your user name." />
</div> </div>
{responsibleProjects.map((p) => ( {responsibleProjects.map((p, i) => (
<ProjectRow key={p.id} project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} /> <FadeIn key={p.id} delay={i * 0.03} direction="up">
<ProjectRow project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
</FadeIn>
))} ))}
</div> </div>
)} )}
apps/web/src/components/dashboard/widgets/PeakTimesWidget.tsx
+4 -4
View File
@@ -35,16 +35,16 @@ export function PeakTimesWidget({ config, onConfigChange }: WidgetProps) {
if (isLoading) { if (isLoading) {
return ( 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="flex gap-2">
<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 bg-gray-200 dark:bg-gray-700 rounded-lg" /> <div className="h-7 w-28 shimmer-skeleton rounded-lg" />
</div> </div>
<div className="flex items-end gap-1 flex-1 px-2"> <div className="flex items-end gap-1 flex-1 px-2">
{[...Array(12)].map((_, i) => ( {[...Array(12)].map((_, i) => (
<div <div
key={i} 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}%` }} style={{ height: `${30 + Math.random() * 50}%` }}
/> />
))} ))}
apps/web/src/components/dashboard/widgets/ProjectTableWidget.tsx
+9 -8
View File
@@ -8,6 +8,7 @@ import { formatCents, formatMoney } from "~/lib/format.js";
import { ProjectStatus } from "@planarchy/shared/types"; import { ProjectStatus } from "@planarchy/shared/types";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js"; import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { PROJECT_STATUS_BADGE as STATUS_COLORS } from "~/lib/status-styles.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) { export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
const status = (config.status as ProjectStatus) || undefined; const status = (config.status as ProjectStatus) || undefined;
@@ -32,13 +33,13 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
if (isLoading) { if (isLoading) {
return ( return (
<div className="animate-pulse flex flex-col gap-2 pt-1"> <div className="flex flex-col gap-2 pt-1">
{/* header row */} {/* header row */}
<div className="flex gap-3 px-3 py-2"> <div className="flex gap-3 px-3 py-2">
{[40, 120, 80, 60, 60].map((w, i) => ( {[40, 120, 80, 60, 60].map((w, i) => (
<div <div
key={i} key={i}
className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded" className="h-2.5 shimmer-skeleton rounded"
style={{ width: w }} style={{ width: w }}
/> />
))} ))}
@@ -49,11 +50,11 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
key={i} key={i}
className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800" 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 w-10 shimmer-skeleton rounded font-mono" />
<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-16 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-12 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-10 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
@@ -275,7 +276,7 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
{formatCents(p.totalCostCents)} € {formatCents(p.totalCostCents)} €
</td> </td>
<td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200"> <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>
<td className="px-3 py-2 text-right"> <td className="px-3 py-2 text-right">
{p.budgetCents > 0 ? ( {p.budgetCents > 0 ? (
apps/web/src/components/dashboard/widgets/ResourceTableWidget.tsx
+7 -7
View File
@@ -46,13 +46,13 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
if (isLoading) { if (isLoading) {
return ( return (
<div className="animate-pulse flex flex-col gap-2 pt-1"> <div className="flex flex-col gap-2 pt-1">
{/* header row */} {/* header row */}
<div className="flex gap-3 px-3 py-2"> <div className="flex gap-3 px-3 py-2">
{[40, 120, 80, 60, 60].map((w, i) => ( {[40, 120, 80, 60, 60].map((w, i) => (
<div <div
key={i} key={i}
className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded" className="h-2.5 shimmer-skeleton rounded"
style={{ width: w }} style={{ width: w }}
/> />
))} ))}
@@ -63,11 +63,11 @@ export function ResourceTableWidget({ config, onConfigChange }: WidgetProps) {
key={i} key={i}
className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800" 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 w-10 shimmer-skeleton rounded font-mono" />
<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-16 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-12 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-10 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
+47 -13
View File
@@ -4,27 +4,51 @@ import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js"; import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { formatMoney } from "~/lib/format.js"; import { formatMoney } from "~/lib/format.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js"; import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
import { FadeIn } from "~/components/ui/FadeIn.js";
function StatCard({ function StatCard({
label, label,
value, value,
suffix,
sub, sub,
info, info,
accentColor,
delay = 0,
}: { }: {
label: string; label: string;
value: string | number; value: number;
suffix?: string;
sub?: string; sub?: string;
info?: React.ReactNode; 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 ( 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"> <FadeIn delay={delay} direction="up">
<span className="flex items-center text-xs font-semibold uppercase tracking-[0.18em] text-gray-500"> <div
{label} className={`rounded-2xl border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70 ${
{info && <InfoTooltip content={info} />} accentColor ? `border-l-[3px] ${accentBorder}` : ""
</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>} <span className="flex items-center text-xs font-semibold uppercase tracking-[0.18em] text-gray-500">
</div> {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) { if (isLoading || !data) {
return ( 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) => ( {[...Array(4)].map((_, i) => (
<div <div
key={i} key={i}
className="rounded-2xl border border-gray-200 bg-gray-100 p-4 dark:border-gray-700 dark:bg-gray-800" 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-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>
))} ))}
</div> </div>
); );
} }
const budgetPct = data.budgetSummary.avgUtilizationPercent;
const budgetAccent: "red" | "amber" | "green" =
budgetPct > 90 ? "red" : budgetPct >= 70 ? "amber" : "green";
return ( return (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 h-full content-start"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 h-full content-start">
<StatCard <StatCard
@@ -59,24 +87,30 @@ export function StatCardsWidget(_props: Partial<WidgetProps> = {}) {
value={data.totalResources} value={data.totalResources}
sub={`${data.activeResources} active`} sub={`${data.activeResources} active`}
info="All resources in the system. Sub-line shows active resources only." info="All resources in the system. Sub-line shows active resources only."
delay={0}
/> />
<StatCard <StatCard
label="Active Projects" label="Active Projects"
value={data.activeProjects} value={data.activeProjects}
sub={`${data.totalProjects} total`} sub={`${data.totalProjects} total`}
info="Projects with status ACTIVE. Total includes all statuses (DRAFT, ON_HOLD, COMPLETED, CANCELLED)." info="Projects with status ACTIVE. Total includes all statuses (DRAFT, ON_HOLD, COMPLETED, CANCELLED)."
delay={0.05}
/> />
<StatCard <StatCard
label="Total Allocations" label="Total Allocations"
value={data.totalAllocations} value={data.totalAllocations}
sub={`${data.activeAllocations} not cancelled`} sub={`${data.activeAllocations} not cancelled`}
info="All allocation records ever created. 'Not cancelled' excludes allocations with status CANCELLED." info="All allocation records ever created. 'Not cancelled' excludes allocations with status CANCELLED."
delay={0.1}
/> />
<StatCard <StatCard
label="Budget Utilization" label="Budget Utilization"
value={`${data.budgetSummary.avgUtilizationPercent}%`} value={budgetPct}
suffix="%"
sub={`${formatMoney(data.budgetSummary.totalCostCents)} of ${formatMoney(data.budgetSummary.totalBudgetCents)}`} 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." info="Sum of costs across non-cancelled allocations divided by total project budgets. Cost = resource LCR × booked hours."
accentColor={budgetAccent}
delay={0.15}
/> />
</div> </div>
); );
apps/web/src/components/dashboard/widgets/TaskWidget.tsx
+3 -3
View File
@@ -40,12 +40,12 @@ export function TaskWidget(_props: Partial<WidgetProps> = {}) {
return ( return (
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
<div className="flex items-center justify-between px-1 pb-3"> <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>
<div className="flex-1 space-y-2"> <div className="flex-1 space-y-2">
{[...Array(3)].map((_, i) => ( {[...Array(3)].map((_, i) => (
<div key={i} className="animate-pulse rounded-xl border border-gray-200 dark:border-gray-700 p-3"> <div key={i} className="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 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 className="mt-2 h-3 w-1/2 bg-gray-100 dark:bg-gray-800 rounded" />
</div> </div>
))} ))}
apps/web/src/components/dashboard/widgets/TopValueWidget.tsx
+7 -7
View File
@@ -25,15 +25,15 @@ export function TopValueWidget({ config }: WidgetProps) {
if (isLoading) { if (isLoading) {
return ( 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) => ( {[...Array(8)].map((_, i) => (
<div key={i} className="flex items-center gap-3 px-3 py-2"> <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-4 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" /> <div className="h-3 w-10 shimmer-skeleton rounded font-mono" />
<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-16 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-16 shimmer-skeleton rounded" />
<div className="h-5 w-10 bg-gray-200 dark:bg-gray-700 rounded-full" /> <div className="h-5 w-10 shimmer-skeleton rounded-full" />
<div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-3 w-12 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/components/estimates/CommercialTermsEditor.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export function CommercialTermsEditor({
if (isLoading) { if (isLoading) {
return ( return (
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm"> <div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<div className="h-6 w-48 animate-pulse rounded bg-gray-200" /> <div className="h-6 w-48 shimmer-skeleton rounded" />
</div> </div>
); );
} }
apps/web/src/components/layout/AppShell.tsx
+96 -44
View File
@@ -7,15 +7,17 @@ import type { Route } from "next";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { clsx } from "clsx"; import { clsx } from "clsx";
import { Suspense, useMemo, useState } from "react"; import { Suspense, useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { PreferencesModal } from "./PreferencesModal.js"; import { PreferencesModal } from "./PreferencesModal.js";
import { ThemeProvider } from "./ThemeProvider.js"; import { ThemeProvider } from "./ThemeProvider.js";
import { PageTransition } from "./PageTransition.js";
import { NotificationBell } from "../notifications/NotificationBell.js"; import { NotificationBell } from "../notifications/NotificationBell.js";
import { ChatPanel } from "../assistant/ChatPanel.js"; import { ChatPanel } from "../assistant/ChatPanel.js";
import { NavProgressBar } from "~/components/ui/NavProgressBar.js"; import { NavProgressBar } from "~/components/ui/NavProgressBar.js";
function IconFrame({ children }: { children: ReactNode }) { function IconFrame({ children }: { children: ReactNode }) {
return ( return (
<span className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/60 bg-white/80 text-slate-600 shadow-sm dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300"> <span className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/60 bg-white/80 text-slate-600 shadow-sm transition-shadow duration-200 hover:shadow-[0_0_12px_rgba(var(--accent-500),0.15)] dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300">
{children} {children}
</span> </span>
); );
@@ -223,7 +225,7 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
return ( return (
<> <>
<nav className="w-72 shrink-0 border-r border-white/60 bg-white/80 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/75 flex flex-col"> <nav className="w-72 shrink-0 border-r border-gray-200/60 bg-white/60 shadow-[1px_0_12px_rgba(0,0,0,0.03)] backdrop-blur-2xl backdrop-saturate-150 dark:border-slate-800 dark:bg-slate-950/75 dark:shadow-none flex flex-col">
{/* Logo */} {/* Logo */}
<div className="border-b border-gray-200/80 px-6 py-6 dark:border-slate-800"> <div className="border-b border-gray-200/80 px-6 py-6 dark:border-slate-800">
<div className="inline-flex items-center gap-3 rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 px-4 py-3 shadow-sm dark:border-brand-900/50 dark:from-slate-950 dark:to-slate-900"> <div className="inline-flex items-center gap-3 rounded-2xl border border-brand-200/70 bg-gradient-to-br from-white to-brand-50 px-4 py-3 shadow-sm dark:border-brand-900/50 dark:from-slate-950 dark:to-slate-900">
@@ -272,25 +274,45 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
</svg> </svg>
)} )}
</button> </button>
{!isCollapsed && ( <AnimatePresence initial={false}>
<div className="space-y-0.5"> {!isCollapsed && (
{section.items.map((item) => ( <motion.div
<Link initial={{ height: 0, opacity: 0 }}
key={item.href} animate={{ height: "auto", opacity: 1 }}
href={item.href as Route} exit={{ height: 0, opacity: 0 }}
className={clsx( transition={{ duration: 0.2, ease: "easeInOut" }}
"group flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium transition-all", className="overflow-hidden"
activeHrefSet.has(item.href) >
? "bg-gradient-to-r from-brand-50 to-brand-100/70 text-brand-800 shadow-sm ring-1 ring-brand-200/70 dark:from-brand-900/30 dark:to-brand-800/20 dark:text-brand-200 dark:ring-brand-900/40" <div className="space-y-0.5">
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white", {section.items.map((item) => {
)} const isActive = activeHrefSet.has(item.href);
> return (
<IconFrame>{item.icon}</IconFrame> <Link
<span className="flex-1">{item.label}</span> key={item.href}
</Link> href={item.href as Route}
))} className={clsx(
</div> "group relative flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium transition-colors",
)} isActive
? "text-brand-800 dark:text-brand-200"
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
)}
>
{isActive && (
<motion.div
layoutId="nav-indicator"
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
transition={{ type: "spring", stiffness: 350, damping: 30 }}
/>
)}
<IconFrame>{item.icon}</IconFrame>
<span className="relative flex-1">{item.label}</span>
</Link>
);
})}
</div>
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
})} })}
@@ -327,40 +349,68 @@ function Sidebar({ userRole, onChatOpen }: { userRole: string; onChatOpen: () =>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg> </svg>
</button> </button>
{!subCollapsed && ( <AnimatePresence initial={false}>
<div className="ml-4 space-y-0.5 border-l border-gray-200 pl-2 dark:border-slate-800"> {!subCollapsed && (
{entry.items.map((item) => ( <motion.div
<Link initial={{ height: 0, opacity: 0 }}
key={item.href} animate={{ height: "auto", opacity: 1 }}
href={item.href as Route} exit={{ height: 0, opacity: 0 }}
className={clsx( transition={{ duration: 0.2, ease: "easeInOut" }}
"group flex items-center gap-3 rounded-2xl px-3 py-1.5 text-sm font-medium transition-all", className="overflow-hidden"
activeHrefSet.has(item.href) >
? "bg-gradient-to-r from-brand-50 to-brand-100/70 text-brand-800 shadow-sm ring-1 ring-brand-200/70 dark:from-brand-900/30 dark:to-brand-800/20 dark:text-brand-200 dark:ring-brand-900/40" <div className="ml-4 space-y-0.5 border-l border-gray-200 pl-2 dark:border-slate-800">
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white", {entry.items.map((item) => {
)} const isActive = activeHrefSet.has(item.href);
> return (
<span className="flex-1">{item.label}</span> <Link
</Link> key={item.href}
))} href={item.href as Route}
</div> className={clsx(
)} "group relative flex items-center gap-3 rounded-2xl px-3 py-1.5 text-sm font-medium transition-colors",
isActive
? "text-brand-800 dark:text-brand-200"
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
)}
>
{isActive && (
<motion.div
layoutId="nav-indicator"
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
transition={{ type: "spring", stiffness: 350, damping: 30 }}
/>
)}
<span className="relative flex-1">{item.label}</span>
</Link>
);
})}
</div>
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
} }
const isActive = activeHrefSet.has(entry.href);
return ( return (
<Link <Link
key={entry.href} key={entry.href}
href={entry.href as Route} href={entry.href as Route}
className={clsx( className={clsx(
"group flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium transition-all", "group relative flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium transition-colors",
activeHrefSet.has(entry.href) isActive
? "bg-gradient-to-r from-brand-50 to-brand-100/70 text-brand-800 shadow-sm ring-1 ring-brand-200/70 dark:from-brand-900/30 dark:to-brand-800/20 dark:text-brand-200 dark:ring-brand-900/40" ? "text-brand-800 dark:text-brand-200"
: "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white", : "text-gray-700 hover:bg-gray-100/90 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-slate-900 dark:hover:text-white",
)} )}
> >
{isActive && (
<motion.div
layoutId="nav-indicator"
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-100 to-brand-50/80 shadow-sm ring-1 ring-brand-200/80 dark:from-brand-900/30 dark:to-brand-800/20 dark:ring-brand-900/40"
transition={{ type: "spring", stiffness: 350, damping: 30 }}
/>
)}
<IconFrame>{entry.icon}</IconFrame> <IconFrame>{entry.icon}</IconFrame>
<span className="flex-1">{entry.label}</span> <span className="relative flex-1">{entry.label}</span>
</Link> </Link>
); );
})} })}
@@ -430,7 +480,9 @@ export function AppShell({ children, userRole = "USER" }: { children: React.Reac
</Suspense> </Suspense>
<div className="flex h-screen bg-transparent"> <div className="flex h-screen bg-transparent">
<Sidebar userRole={userRole} onChatOpen={() => setChatOpen(true)} /> <Sidebar userRole={userRole} onChatOpen={() => setChatOpen(true)} />
<main className="flex-1 overflow-auto bg-transparent">{children}</main> <main className="flex-1 overflow-auto bg-transparent">
<PageTransition>{children}</PageTransition>
</main>
{chatOpen && <ChatPanel onClose={() => setChatOpen(false)} />} {chatOpen && <ChatPanel onClose={() => setChatOpen(false)} />}
</div> </div>
{/* Floating chat FAB — always visible when panel is closed */} {/* Floating chat FAB — always visible when panel is closed */}
apps/web/src/components/layout/PageTransition.tsx
+26
View File
@@ -0,0 +1,26 @@
"use client";
import { motion } from "framer-motion";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
interface PageTransitionProps {
children: ReactNode;
className?: string;
}
export function PageTransition({ children, className }: PageTransitionProps) {
const pathname = usePathname();
return (
<motion.div
key={pathname}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.25, ease: "easeOut" }}
className={className}
>
{children}
</motion.div>
);
}
apps/web/src/components/notifications/BroadcastManagementClient.tsx
+3 -3
View File
@@ -72,9 +72,9 @@ export function BroadcastManagementClient() {
{isLoading && ( {isLoading && (
<div className="space-y-3"> <div className="space-y-3">
{[...Array(3)].map((_, i) => ( {[...Array(3)].map((_, i) => (
<div key={i} className="animate-pulse rounded-xl border border-gray-200 dark:border-gray-700 p-4"> <div key={i} className="rounded-xl border border-gray-200 dark:border-gray-700 p-4 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
<div className="h-4 w-1/2 bg-gray-200 dark:bg-gray-700 rounded" /> <div className="h-4 w-1/2 shimmer-skeleton rounded" />
<div className="mt-2 h-3 w-1/3 bg-gray-100 dark:bg-gray-800 rounded" /> <div className="mt-2 h-3 w-1/3 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/components/notifications/NotificationBell.tsx
+20 -2
View File
@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import Link from "next/link"; import Link from "next/link";
import type { Route } from "next"; import type { Route } from "next";
import { motion, useAnimationControls } from "framer-motion";
import { trpc } from "~/lib/trpc/client.js"; import { trpc } from "~/lib/trpc/client.js";
function relativeTime(date: Date): string { function relativeTime(date: Date): string {
@@ -34,6 +35,9 @@ export function NotificationBell() {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const isAuthenticated = status === "authenticated" && !!session?.user?.email; const isAuthenticated = status === "authenticated" && !!session?.user?.email;
const badgeControls = useAnimationControls();
const prevUnreadRef = useRef<number | null>(null);
const utils = trpc.useUtils(); const utils = trpc.useUtils();
const { data: unreadCount = 0 } = trpc.notification.unreadCount.useQuery(undefined, { const { data: unreadCount = 0 } = trpc.notification.unreadCount.useQuery(undefined, {
@@ -48,6 +52,17 @@ export function NotificationBell() {
retry: false, retry: false,
}); });
// Bounce badge when unread count increases
useEffect(() => {
if (prevUnreadRef.current !== null && unreadCount > prevUnreadRef.current) {
void badgeControls.start({
scale: [1, 1.3, 1],
transition: { duration: 0.3, ease: "easeInOut" },
});
}
prevUnreadRef.current = unreadCount;
}, [unreadCount, badgeControls]);
const openTaskCount = (taskCounts?.open ?? 0) + (taskCounts?.inProgress ?? 0); const openTaskCount = (taskCounts?.open ?? 0) + (taskCounts?.inProgress ?? 0);
const { data: notifications = [] } = trpc.notification.list.useQuery( const { data: notifications = [] } = trpc.notification.list.useQuery(
@@ -160,9 +175,12 @@ export function NotificationBell() {
</svg> </svg>
{/* Unread notification badge (red) */} {/* Unread notification badge (red) */}
{unreadCount > 0 && ( {unreadCount > 0 && (
<span className="absolute top-0.5 right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full leading-none"> <motion.span
animate={badgeControls}
className="absolute top-0.5 right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full leading-none"
>
{unreadCount > 99 ? "99+" : unreadCount} {unreadCount > 99 ? "99+" : unreadCount}
</span> </motion.span>
)} )}
{/* Task count badge (orange) */} {/* Task count badge (orange) */}
{openTaskCount > 0 && ( {openTaskCount > 0 && (
apps/web/src/components/notifications/NotificationCenterClient.tsx
+3 -3
View File
@@ -190,9 +190,9 @@ export function NotificationCenterClient() {
{isLoading && ( {isLoading && (
<div className="space-y-3"> <div className="space-y-3">
{[...Array(5)].map((_, i) => ( {[...Array(5)].map((_, i) => (
<div key={i} className="animate-pulse rounded-xl border border-gray-200 dark:border-gray-700 p-4"> <div key={i} className="rounded-xl border border-gray-200 dark:border-gray-700 p-4 animate-row-enter" style={{ animationDelay: `${i * 50}ms` }}>
<div className="h-4 w-3/4 bg-gray-200 dark:bg-gray-700 rounded" /> <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 className="mt-2 h-3 w-1/2 shimmer-skeleton rounded" />
</div> </div>
))} ))}
</div> </div>
apps/web/src/components/projects/BudgetStatusCard.tsx
+4 -4
View File
@@ -57,12 +57,12 @@ export function BudgetStatusCard({ projectId }: BudgetStatusCardProps) {
if (isLoading) { if (isLoading) {
return ( return (
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 animate-pulse"> <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4" /> <div className="h-4 shimmer-skeleton rounded w-1/3 mb-4" />
<div className="h-3 bg-gray-100 dark:bg-gray-700 rounded-full mb-3" /> <div className="h-3 shimmer-skeleton rounded-full mb-3" />
<div className="grid grid-cols-4 gap-3"> <div className="grid grid-cols-4 gap-3">
{[0, 1, 2, 3].map((i) => ( {[0, 1, 2, 3].map((i) => (
<div key={i} className="h-14 bg-gray-100 dark:bg-gray-700 rounded-lg" /> <div key={i} className="h-14 shimmer-skeleton rounded-lg" />
))} ))}
</div> </div>
</div> </div>
apps/web/src/components/resources/ResourceDetail.tsx
+4 -4
View File
@@ -109,11 +109,11 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
if (loadingResource) { if (loadingResource) {
return ( return (
<div className="p-6"> <div className="p-6">
<div className="animate-pulse space-y-4"> <div className="space-y-4">
<div className="h-8 bg-gray-200 rounded w-64" /> <div className="h-8 shimmer-skeleton rounded w-64" />
<div className="h-4 bg-gray-100 rounded w-48" /> <div className="h-4 shimmer-skeleton rounded w-48" />
<div className="grid grid-cols-4 gap-4"> <div className="grid grid-cols-4 gap-4">
{[0, 1, 2, 3].map((i) => <div key={i} className="h-20 bg-gray-100 rounded-xl" />)} {[0, 1, 2, 3].map((i) => <div key={i} className="h-20 shimmer-skeleton rounded-xl" style={{ animationDelay: `${i * 50}ms` }} />)}
</div> </div>
</div> </div>
</div> </div>
apps/web/src/components/ui/AnimatedModal.tsx
+79
View File
@@ -0,0 +1,79 @@
"use client";
import { motion, AnimatePresence } from "framer-motion";
import { useEffect, useCallback, useRef, type ReactNode } from "react";
interface AnimatedModalProps {
open: boolean;
onClose: () => void;
children: ReactNode;
className?: string;
overlayClassName?: string;
maxWidth?: string;
}
export function AnimatedModal({
open,
onClose,
children,
className,
overlayClassName,
maxWidth = "max-w-xl",
}: AnimatedModalProps) {
const panelRef = useRef<HTMLDivElement>(null);
const handleEscape = useCallback(
(e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
},
[onClose],
);
useEffect(() => {
if (!open) return;
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [open, handleEscape]);
return (
<AnimatePresence>
{open && (
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Overlay */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className={
overlayClassName ??
"absolute inset-0 bg-black/40 backdrop-blur-sm"
}
onClick={onClose}
aria-hidden="true"
/>
{/* Panel */}
<motion.div
ref={panelRef}
role="dialog"
aria-modal="true"
initial={{ opacity: 0, scale: 0.97 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.97 }}
transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
className={[
"relative z-10 w-full rounded-xl bg-white shadow-2xl dark:bg-gray-800",
maxWidth,
className,
]
.filter(Boolean)
.join(" ")}
>
{children}
</motion.div>
</div>
)}
</AnimatePresence>
);
}
apps/web/src/components/ui/AnimatedNumber.tsx
+82
View File
@@ -0,0 +1,82 @@
"use client";
import { memo, useEffect, useRef, useState } from "react";
interface AnimatedNumberProps {
value: number;
duration?: number | undefined;
decimals?: number | undefined;
prefix?: string | undefined;
suffix?: string | undefined;
className?: string | undefined;
}
function easeOutExpo(t: number): number {
return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
}
function formatNumber(n: number, decimals: number): string {
return n.toLocaleString("de-DE", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals,
});
}
function AnimatedNumberInner({
value,
duration = 800,
decimals = 0,
prefix = "",
suffix = "",
className,
}: AnimatedNumberProps) {
const [display, setDisplay] = useState(value);
const prevValueRef = useRef(value);
const rafRef = useRef<number | null>(null);
useEffect(() => {
const from = prevValueRef.current;
const to = value;
prevValueRef.current = to;
if (from === to) {
setDisplay(to);
return;
}
const startTime = performance.now();
function tick(now: number) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = easeOutExpo(progress);
const current = from + (to - from) * eased;
setDisplay(current);
if (progress < 1) {
rafRef.current = requestAnimationFrame(tick);
} else {
setDisplay(to);
}
}
rafRef.current = requestAnimationFrame(tick);
return () => {
if (rafRef.current !== null) {
cancelAnimationFrame(rafRef.current);
}
};
}, [value, duration]);
return (
<span className={className}>
{prefix}
{formatNumber(display, decimals)}
{suffix}
</span>
);
}
export const AnimatedNumber = memo(AnimatedNumberInner);
apps/web/src/components/ui/DraggableTableRow.tsx
+3
View File
@@ -13,6 +13,7 @@ interface DraggableTableRowProps {
onDrop: (draggedId: string) => void; onDrop: (draggedId: string) => void;
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
style?: React.CSSProperties;
} }
/** /**
@@ -27,11 +28,13 @@ export function DraggableTableRow({
onDrop, onDrop,
children, children,
className = "", className = "",
style,
}: DraggableTableRowProps) { }: DraggableTableRowProps) {
const [isDragOver, setIsDragOver] = useState(false); const [isDragOver, setIsDragOver] = useState(false);
return ( return (
<tr <tr
style={style}
className={`${className} ${isDragOver ? "border-t-2 border-brand-400" : ""}`} className={`${className} ${isDragOver ? "border-t-2 border-brand-400" : ""}`}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
apps/web/src/components/ui/FadeIn.tsx
+75
View File
@@ -0,0 +1,75 @@
"use client";
import { motion, type Variants } from "framer-motion";
import { type ReactNode } from "react";
interface FadeInProps {
children: ReactNode;
delay?: number;
duration?: number;
direction?: "up" | "down" | "left" | "right" | "none";
distance?: number;
className?: string;
once?: boolean;
}
function getOffset(
direction: FadeInProps["direction"],
distance: number,
): { x: number; y: number } {
switch (direction) {
case "up":
return { x: 0, y: distance };
case "down":
return { x: 0, y: -distance };
case "left":
return { x: distance, y: 0 };
case "right":
return { x: -distance, y: 0 };
case "none":
default:
return { x: 0, y: 0 };
}
}
export function FadeIn({
children,
delay = 0,
duration = 0.3,
direction = "up",
distance = 12,
className,
once = true,
}: FadeInProps) {
const offset = getOffset(direction, distance);
const variants: Variants = {
hidden: {
opacity: 0,
x: offset.x,
y: offset.y,
},
visible: {
opacity: 1,
x: 0,
y: 0,
transition: {
duration,
delay,
ease: [0.25, 0.1, 0.25, 1],
},
},
};
return (
<motion.div
className={className}
initial="hidden"
whileInView="visible"
viewport={{ once, margin: "-40px" }}
variants={variants}
>
{children}
</motion.div>
);
}
apps/web/src/components/ui/ProgressRing.tsx
+86
View File
@@ -0,0 +1,86 @@
"use client";
import { useEffect, useState } from "react";
interface ProgressRingProps {
value: number;
size?: number;
strokeWidth?: number;
color?: string;
trackColor?: string;
className?: string;
children?: React.ReactNode;
animated?: boolean;
}
export function ProgressRing({
value,
size = 40,
strokeWidth = 3,
color = "var(--color-blue-500, #3b82f6)",
trackColor = "var(--color-gray-200, #e5e7eb)",
className,
children,
animated = true,
}: ProgressRingProps) {
const [mounted, setMounted] = useState(!animated);
useEffect(() => {
if (!animated) return;
// Trigger animation on next frame so the transition fires
const raf = requestAnimationFrame(() => setMounted(true));
return () => cancelAnimationFrame(raf);
}, [animated]);
const clamped = Math.max(0, Math.min(100, value));
const radius = (size - strokeWidth) / 2;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (clamped / 100) * circumference;
const center = size / 2;
return (
<div
className={`relative inline-flex items-center justify-center ${className ?? ""}`}
style={{ width: size, height: size }}
>
<svg
width={size}
height={size}
viewBox={`0 0 ${size} ${size}`}
className="rotate-[-90deg]"
>
{/* Track */}
<circle
cx={center}
cy={center}
r={radius}
fill="none"
stroke={trackColor}
strokeWidth={strokeWidth}
/>
{/* Progress */}
<circle
cx={center}
cy={center}
r={radius}
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeDasharray={circumference}
strokeDashoffset={mounted ? offset : circumference}
style={{
transition: animated
? "stroke-dashoffset 600ms cubic-bezier(0.25, 0.1, 0.25, 1)"
: "none",
}}
/>
</svg>
{children != null && (
<div className="absolute inset-0 flex items-center justify-center">
{children}
</div>
)}
</div>
);
}
apps/web/src/components/ui/ShimmerSkeleton.tsx
+156
View File
@@ -0,0 +1,156 @@
"use client";
import { Children, cloneElement, isValidElement, ReactNode } from "react";
/* ------------------------------------------------------------------ */
/* ShimmerSkeleton */
/* ------------------------------------------------------------------ */
interface ShimmerSkeletonProps {
className?: string;
width?: string | number;
height?: string | number;
rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
variant?: "text" | "circle" | "card" | "rect";
}
const roundedMap: Record<string, string> = {
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
xl: "rounded-xl",
"2xl": "rounded-2xl",
full: "rounded-full",
};
const variantDefaults: Record<
string,
{ width?: string | number; height?: string | number; rounded: string }
> = {
text: { width: "100%", height: "1em", rounded: "rounded" },
circle: { width: 40, height: 40, rounded: "rounded-full" },
card: { width: "100%", height: 120, rounded: "rounded-xl" },
rect: { width: "100%", height: 40, rounded: "rounded-md" },
};
export function ShimmerSkeleton({
className = "",
width,
height,
rounded,
variant = "rect",
}: ShimmerSkeletonProps) {
const defaults = variantDefaults[variant] ?? variantDefaults.rect;
const resolvedWidth = width ?? defaults?.width ?? "100%";
const resolvedHeight = height ?? defaults?.height ?? 40;
const resolvedRounded = rounded
? roundedMap[rounded] ?? "rounded-md"
: defaults?.rounded ?? "rounded-md";
return (
<div
className={`shimmer-skeleton ${resolvedRounded} ${className}`}
style={{
width:
typeof resolvedWidth === "number"
? `${resolvedWidth}px`
: resolvedWidth,
height:
typeof resolvedHeight === "number"
? `${resolvedHeight}px`
: resolvedHeight,
}}
/>
);
}
/* ------------------------------------------------------------------ */
/* ShimmerGroup – staggers children entrance by 50ms each */
/* ------------------------------------------------------------------ */
interface ShimmerGroupProps {
children: ReactNode;
staggerMs?: number;
className?: string;
}
export function ShimmerGroup({
children,
staggerMs = 50,
className,
}: ShimmerGroupProps) {
return (
<div className={className}>
{Children.map(children, (child, index) => {
if (!isValidElement(child)) return child;
return cloneElement(child as React.ReactElement<{ style?: React.CSSProperties }>, {
style: {
...(child.props as { style?: React.CSSProperties }).style,
animationDelay: `${index * staggerMs}ms`,
},
});
})}
</div>
);
}
/* ------------------------------------------------------------------ */
/* Inline <style> – injected once via a hidden element */
/* ------------------------------------------------------------------ */
const shimmerCSS = `
.shimmer-skeleton {
position: relative;
overflow: hidden;
background: var(--shimmer-bg, #e5e7eb);
}
@media (prefers-color-scheme: dark) {
.shimmer-skeleton {
--shimmer-bg: #374151;
--shimmer-highlight: rgba(255, 255, 255, 0.06);
}
}
:root {
--shimmer-bg: #e5e7eb;
--shimmer-highlight: rgba(255, 255, 255, 0.5);
}
.dark .shimmer-skeleton {
--shimmer-bg: #374151;
--shimmer-highlight: rgba(255, 255, 255, 0.06);
}
.shimmer-skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 25%,
var(--shimmer-highlight) 50%,
transparent 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
`;
/**
* Mount this once (e.g. in a layout) to inject shimmer styles,
* or simply import ShimmerSkeleton — the styles tag is rendered
* alongside the first skeleton automatically.
*/
export function ShimmerStyles() {
return <style dangerouslySetInnerHTML={{ __html: shimmerCSS }} />;
}
apps/web/src/components/ui/Sparkline.tsx
+162
View File
@@ -0,0 +1,162 @@
"use client";
import { useId } from "react";
interface SparklineProps {
data: number[];
width?: number;
height?: number;
color?: string;
fillOpacity?: number;
strokeWidth?: number;
className?: string;
animated?: boolean;
}
function buildPoints(
data: number[],
width: number,
height: number,
strokeWidth: number,
): string {
if (data.length === 0) return "";
const padding = strokeWidth;
const drawWidth = width - padding * 2;
const drawHeight = height - padding * 2;
const min = Math.min(...data);
const max = Math.max(...data);
const range = max - min || 1; // avoid division by zero when all values equal
return data
.map((v, i) => {
const x =
data.length === 1
? width / 2
: padding + (i / (data.length - 1)) * drawWidth;
const y = padding + drawHeight - ((v - min) / range) * drawHeight;
return `${x},${y}`;
})
.join(" ");
}
function buildAreaPoints(
linePoints: string,
width: number,
height: number,
strokeWidth: number,
dataLength: number,
): string {
if (!linePoints) return "";
const padding = strokeWidth;
const drawWidth = width - padding * 2;
const bottom = height - padding;
const lastX =
dataLength === 1 ? width / 2 : padding + drawWidth;
const firstX = dataLength === 1 ? width / 2 : padding;
return `${linePoints} ${lastX},${bottom} ${firstX},${bottom}`;
}
export function Sparkline({
data,
width = 60,
height = 20,
color = "currentColor",
fillOpacity = 0.1,
strokeWidth = 1.5,
className,
animated = true,
}: SparklineProps) {
const id = useId();
if (data.length === 0) {
return (
<svg
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
className={className}
role="img"
aria-label="No data"
/>
);
}
const linePoints = buildPoints(data, width, height, strokeWidth);
const areaPoints = buildAreaPoints(
linePoints,
width,
height,
strokeWidth,
data.length,
);
// Approximate path length for dash animation
const approxLength = width * 2;
return (
<>
{animated && (
<style
dangerouslySetInnerHTML={{
__html: `
@keyframes sparkline-draw-${CSS.escape(id)} {
from { stroke-dashoffset: ${approxLength}; }
to { stroke-dashoffset: 0; }
}
`,
}}
/>
)}
<svg
width={width}
height={height}
viewBox={`0 0 ${width} ${height}`}
className={className}
role="img"
aria-label={`Sparkline: ${data.join(", ")}`}
>
{/* Area fill */}
{data.length > 1 && (
<polygon
points={areaPoints}
fill={color}
opacity={fillOpacity}
/>
)}
{/* Line */}
{data.length === 1 ? (
<circle
cx={width / 2}
cy={height / 2}
r={strokeWidth}
fill={color}
/>
) : (
<polyline
points={linePoints}
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
{...(animated
? {
strokeDasharray: approxLength,
strokeDashoffset: approxLength,
style: {
animation: `sparkline-draw-${CSS.escape(id)} 600ms ease-out forwards`,
},
}
: {})}
/>
)}
</svg>
</>
);
}
apps/web/src/components/ui/StaggerList.tsx
+83
View File
@@ -0,0 +1,83 @@
"use client";
import { motion, type Variants } from "framer-motion";
import { type ReactNode } from "react";
/* ------------------------------------------------------------------ */
/* StaggerList */
/* ------------------------------------------------------------------ */
interface StaggerListProps {
children: ReactNode;
staggerDelay?: number;
className?: string;
as?: "div" | "ul" | "ol" | "tbody";
}
const containerVariants: (stagger: number) => Variants = (stagger) => ({
hidden: {},
visible: {
transition: {
staggerChildren: stagger,
},
},
});
const MotionComponents = {
div: motion.div,
ul: motion.ul,
ol: motion.ol,
tbody: motion.tbody,
} as const;
export function StaggerList({
children,
staggerDelay = 0.03,
className,
as = "div",
}: StaggerListProps) {
const Component = MotionComponents[as];
return (
<Component
className={className}
initial="hidden"
animate="visible"
variants={containerVariants(staggerDelay)}
>
{children}
</Component>
);
}
/* ------------------------------------------------------------------ */
/* StaggerItem */
/* ------------------------------------------------------------------ */
interface StaggerItemProps {
children: ReactNode;
className?: string;
}
const itemVariants: Variants = {
hidden: {
opacity: 0,
y: 8,
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.25,
ease: [0.25, 0.1, 0.25, 1],
},
},
};
export function StaggerItem({ children, className }: StaggerItemProps) {
return (
<motion.div className={className} variants={itemVariants}>
{children}
</motion.div>
);
}
apps/web/src/components/vacations/BalanceCard.tsx
+3 -3
View File
@@ -17,9 +17,9 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
if (isLoading) { if (isLoading) {
return ( return (
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 animate-pulse"> <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
<div className="h-4 bg-gray-100 dark:bg-gray-700 rounded w-1/3 mb-3" /> <div className="h-4 shimmer-skeleton rounded w-1/3 mb-3" />
<div className="h-8 bg-gray-100 dark:bg-gray-700 rounded w-1/2" /> <div className="h-8 shimmer-skeleton rounded w-1/2" />
</div> </div>
); );
} }
package.json
+4 -1
View File
@@ -30,5 +30,8 @@
"node": ">=20.0.0", "node": ">=20.0.0",
"pnpm": ">=9.0.0" "pnpm": ">=9.0.0"
}, },
"packageManager": "pnpm@9.14.2" "packageManager": "pnpm@9.14.2",
"dependencies": {
"framer-motion": "^12.38.0"
}
} }
pnpm-lock.yaml
Generated
+42
View File
@@ -7,6 +7,10 @@ settings:
importers: importers:
.: .:
dependencies:
framer-motion:
specifier: ^12.38.0
version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
devDependencies: devDependencies:
'@planarchy/eslint-config': '@planarchy/eslint-config':
specifier: workspace:* specifier: workspace:*
@@ -68,6 +72,9 @@ importers:
clsx: clsx:
specifier: ^2.1.1 specifier: ^2.1.1
version: 2.1.1 version: 2.1.1
framer-motion:
specifier: ^12.38.0
version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
next: next:
specifier: ^15.1.7 specifier: ^15.1.7
version: 15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) version: 15.5.12(@playwright/test@1.58.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2172,6 +2179,20 @@ packages:
fraction.js@5.3.4: fraction.js@5.3.4:
resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==} resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
framer-motion@12.38.0:
resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
fs-constants@1.0.0: fs-constants@1.0.0:
resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
@@ -2618,6 +2639,12 @@ packages:
resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==} resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
hasBin: true hasBin: true
motion-dom@12.38.0:
resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
motion-utils@12.36.0:
resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
ms@2.1.3: ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -5348,6 +5375,15 @@ snapshots:
fraction.js@5.3.4: {} fraction.js@5.3.4: {}
framer-motion@12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
motion-dom: 12.38.0
motion-utils: 12.36.0
tslib: 2.8.1
optionalDependencies:
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
fs-constants@1.0.0: {} fs-constants@1.0.0: {}
fs.realpath@1.0.0: {} fs.realpath@1.0.0: {}
@@ -5778,6 +5814,12 @@ snapshots:
dependencies: dependencies:
minimist: 1.2.8 minimist: 1.2.8
motion-dom@12.38.0:
dependencies:
motion-utils: 12.36.0
motion-utils@12.36.0: {}
ms@2.1.3: {} ms@2.1.3: {}
mz@2.7.0: mz@2.7.0: