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/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 type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
function UtilizationBar({ percent }: { percent: number }) {
const barColor =
percent >= 80 ? "bg-green-500" : percent >= 50 ? "bg-amber-500" : "bg-red-500";
return (
<div className="h-1 w-full rounded-full bg-gray-100 dark:bg-gray-800 mt-0.5">
<div
className={`h-full rounded-full transition-all duration-500 ${barColor}`}
style={{ width: `${Math.min(percent, 100)}%` }}
/>
</div>
);
}
type TopSortKey = "name" | "actual" | "expected";
type WatchSortKey = "name" | "actual" | "target";
@@ -120,21 +134,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
if (isLoading) {
return (
<div className="animate-pulse flex flex-col gap-3 pt-1">
<div className="h-2 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="flex flex-col gap-3 pt-1">
<div className="h-2 w-32 shimmer-skeleton rounded" />
{[...Array(4)].map((_, i) => (
<div key={i} className="flex gap-3 px-2 py-1">
<div className="h-3 w-4 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-3 w-4 shimmer-skeleton rounded" />
<div className="h-3 flex-1 shimmer-skeleton rounded" />
<div className="h-3 w-10 shimmer-skeleton rounded" />
<div className="h-3 w-10 shimmer-skeleton rounded" />
</div>
))}
<div className="border-t border-gray-100 dark:border-gray-800 mt-1 pt-2">
<div className="h-2 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
<div className="h-2 w-20 shimmer-skeleton rounded mb-2" />
{[...Array(3)].map((_, i) => (
<div key={i} className="flex gap-3 px-2 py-1">
<div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
<div className="h-3 flex-1 shimmer-skeleton rounded" />
<div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
<div className="h-3 w-10 bg-gray-100 dark:bg-gray-800 rounded" />
</div>
@@ -357,16 +371,21 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
</thead>
<tbody className="divide-y divide-gray-50">
{visibleTop.map((r, i) => (
<tr key={r.id} className="hover:bg-gray-50">
<tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40">
<td className="px-2 py-1 text-gray-400">{i + 1}</td>
<td className="px-2 py-1 text-gray-800 truncate max-w-[120px]">
<span title={r.displayName}>{r.displayName}</span>
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
<td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[120px]">
<div className="truncate">
<span title={r.displayName}>{r.displayName}</span>
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
</div>
<UtilizationBar percent={r.actualChargeability} />
</td>
<td className="px-2 py-1 text-right font-semibold text-green-700">
{r.actualChargeability}%
<td className="px-2 py-1 text-right font-semibold text-green-700 dark:text-green-400">
<AnimatedNumber value={r.actualChargeability} suffix="%" />
</td>
<td className="px-2 py-1 text-right text-gray-400">
<AnimatedNumber value={r.expectedChargeability} suffix="%" />
</td>
<td className="px-2 py-1 text-right text-gray-400">{r.expectedChargeability}%</td>
</tr>
))}
</tbody>
@@ -436,15 +455,20 @@ export function ChargeabilityWidget({ config: _config }: WidgetProps) {
</thead>
<tbody className="divide-y divide-gray-50">
{visibleWatchlist.map((r) => (
<tr key={r.id} className="hover:bg-gray-50">
<td className="px-2 py-1 text-gray-800 truncate max-w-[140px]">
<span title={r.displayName}>{r.displayName}</span>
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
<tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40">
<td className="px-2 py-1 text-gray-800 dark:text-gray-200 max-w-[140px]">
<div className="truncate">
<span title={r.displayName}>{r.displayName}</span>
{r.chapter && <span className="text-gray-400 ml-1">· {r.chapter}</span>}
</div>
<UtilizationBar percent={r.actualChargeability} />
</td>
<td className="px-2 py-1 text-right font-semibold text-red-600">
{r.actualChargeability}%
<td className="px-2 py-1 text-right font-semibold text-red-600 dark:text-red-400">
<AnimatedNumber value={r.actualChargeability} suffix="%" />
</td>
<td className="px-2 py-1 text-right text-gray-400">
<AnimatedNumber value={r.chargeabilityTarget} suffix="%" />
</td>
<td className="px-2 py-1 text-right text-gray-400">{r.chargeabilityTarget}%</td>
</tr>
))}
</tbody>