From a5d467ece2af3921c80179122cae8aab217f6e0c Mon Sep 17 00:00:00 2001
From: CScull <cscull@users.noreply.github.com>
Date: Tue, 7 Apr 2026 11:11:08 -0700
Subject: [PATCH] Add playful UI animations with GSAP across entire app

Introduces a comprehensive animation system using GSAP: directional route
transitions, staggered data entrance effects, springy micro-interactions,
an animated canvas dot-grid background, button click ripples, badge pulse
glows, and upgraded modal transitions with backdrop blur. All animations
respect prefers-reduced-motion and clean up on component unmount.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 client/package-lock.json                      |   7 +
 client/package.json                           |   5 +-
 client/src/App.vue                            | 716 +++++++++++++++---
 client/src/components/AnimatedBackground.vue  | 125 +++
 client/src/components/BacklogDetailModal.vue  |  29 +-
 client/src/components/CostDetailModal.vue     |  29 +-
 client/src/components/FilterBar.vue           |  30 +-
 .../src/components/InventoryDetailModal.vue   |  21 +-
 client/src/components/ProductDetailModal.vue  |  29 +-
 client/src/components/ProfileDetailsModal.vue |  29 +-
 client/src/components/TasksModal.vue          |  29 +-
 client/src/composables/useAnimations.js       | 129 ++++
 client/src/composables/usePageTransition.js   |  24 +
 client/src/directives/vRipple.js              |  45 ++
 client/src/main.js                            |   2 +
 client/src/views/Dashboard.vue                |  25 +-
 client/src/views/Demand.vue                   |  23 +-
 client/src/views/Inventory.vue                |  19 +-
 client/src/views/Orders.vue                   |  18 +-
 client/src/views/Reports.vue                  |  26 +-
 client/src/views/Spending.vue                 |  19 +-
 21 files changed, 1132 insertions(+), 247 deletions(-)
 create mode 100644 client/src/components/AnimatedBackground.vue
 create mode 100644 client/src/composables/useAnimations.js
 create mode 100644 client/src/composables/usePageTransition.js
 create mode 100644 client/src/directives/vRipple.js

diff --git a/client/package-lock.json b/client/package-lock.json
index d13e6e77..7d59bc6a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "axios": "^1.6.7",
+        "gsap": "^3.14.2",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0"
       },
@@ -1177,6 +1178,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 58375dc8..88253ddf 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,9 +8,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
+    "gsap": "^3.14.2",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "axios": "^1.6.7"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/client/src/App.vue b/client/src/App.vue
index c2da05a5..e5f01eea 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,42 +1,132 @@
 <template>
-  <div class="app">
-    <header class="top-nav">
-      <div class="nav-container">
-        <div class="logo">
-          <h1>{{ t('nav.companyName') }}</h1>
-          <span class="subtitle">{{ t('nav.subtitle') }}</span>
+  <div class="app-layout">
+    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+      <!-- Logo -->
+      <div class="sidebar-logo">
+        <div class="logo-mark">
+          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="3" y="3" width="9" height="9" rx="2" fill="#3b82f6"/>
+            <rect x="16" y="3" width="9" height="9" rx="2" fill="#3b82f6" opacity="0.6"/>
+            <rect x="3" y="16" width="9" height="9" rx="2" fill="#3b82f6" opacity="0.6"/>
+            <rect x="16" y="16" width="9" height="9" rx="2" fill="#3b82f6" opacity="0.3"/>
+          </svg>
         </div>
-        <nav class="nav-tabs">
-          <router-link to="/" :class="{ active: $route.path === '/' }">
-            {{ t('nav.overview') }}
-          </router-link>
-          <router-link to="/inventory" :class="{ active: $route.path === '/inventory' }">
-            {{ t('nav.inventory') }}
-          </router-link>
-          <router-link to="/orders" :class="{ active: $route.path === '/orders' }">
-            {{ t('nav.orders') }}
-          </router-link>
-          <router-link to="/spending" :class="{ active: $route.path === '/spending' }">
-            {{ t('nav.finance') }}
-          </router-link>
-          <router-link to="/demand" :class="{ active: $route.path === '/demand' }">
-            {{ t('nav.demandForecast') }}
-          </router-link>
-          <router-link to="/reports" :class="{ active: $route.path === '/reports' }">
-            Reports
-          </router-link>
-        </nav>
-        <LanguageSwitcher />
-        <ProfileMenu
-          @show-profile-details="showProfileDetails = true"
-          @show-tasks="showTasks = true"
-        />
+        <span class="logo-text">Factory IMS</span>
       </div>
-    </header>
-    <FilterBar />
-    <main class="main-content">
-      <router-view />
-    </main>
+
+      <!-- Nav Links -->
+      <nav class="sidebar-nav">
+        <!-- Overview -->
+        <router-link to="/" :class="['nav-item', { active: isActiveRoute('/') }]">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav-icon">
+            <path d="M3 3h6v6H3V3zm8 0h6v6h-6V3zm-8 8h6v6H3v-6zm8 0h6v6h-6v-6z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
+          </svg>
+          <span class="nav-label">{{ t('nav.overview') }}</span>
+          <span class="nav-tooltip">{{ t('nav.overview') }}</span>
+        </router-link>
+
+        <!-- Inventory -->
+        <router-link to="/inventory" :class="['nav-item', { active: isActiveRoute('/inventory') }]">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav-icon">
+            <path d="M3 7l7-4 7 4v8l-7 4-7-4V7z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
+            <path d="M10 11V19M3 7l7 4 7-4" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          </svg>
+          <span class="nav-label">{{ t('nav.inventory') }}</span>
+          <span class="nav-tooltip">{{ t('nav.inventory') }}</span>
+        </router-link>
+
+        <!-- Orders -->
+        <router-link to="/orders" :class="['nav-item', { active: isActiveRoute('/orders') }]">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav-icon">
+            <path d="M7 3h6v2H7V3z" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linejoin="round"/>
+            <rect x="4" y="4" width="12" height="14" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/>
+            <path d="M7 9h6M7 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <span class="nav-label">{{ t('nav.orders') }}</span>
+          <span class="nav-tooltip">{{ t('nav.orders') }}</span>
+        </router-link>
+
+        <!-- Finance -->
+        <router-link to="/spending" :class="['nav-item', { active: isActiveRoute('/spending') }]">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav-icon">
+            <path d="M4 17V11M8 17V7M12 17V10M16 17V5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <span class="nav-label">{{ t('nav.finance') }}</span>
+          <span class="nav-tooltip">{{ t('nav.finance') }}</span>
+        </router-link>
+
+        <!-- Demand -->
+        <router-link to="/demand" :class="['nav-item', { active: isActiveRoute('/demand') }]">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav-icon">
+            <path d="M3 17l4-4 3 2 7-8" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M14 7h3v3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+          </svg>
+          <span class="nav-label">{{ t('nav.demandForecast') }}</span>
+          <span class="nav-tooltip">{{ t('nav.demandForecast') }}</span>
+        </router-link>
+
+        <!-- Reports -->
+        <router-link to="/reports" :class="['nav-item', { active: isActiveRoute('/reports') }]">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="nav-icon">
+            <path d="M6 3h7l4 4v10a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z" stroke="currentColor" stroke-width="1.5" fill="none"/>
+            <path d="M13 3v4h4M8 10h4M8 13h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <span class="nav-label">Reports</span>
+          <span class="nav-tooltip">Reports</span>
+        </router-link>
+      </nav>
+
+      <!-- Spacer -->
+      <div class="sidebar-spacer"></div>
+
+      <!-- Profile section -->
+      <div class="sidebar-profile">
+        <div class="profile-avatar">{{ getInitials(currentUser.name) }}</div>
+        <div class="profile-info">
+          <span class="profile-name">{{ currentUser.name }}</span>
+          <span class="profile-role">{{ currentUser.jobTitle }}</span>
+        </div>
+      </div>
+
+      <div class="sidebar-divider"></div>
+
+      <!-- Collapse Toggle -->
+      <button class="sidebar-toggle" @click="toggleSidebar" :title="sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="toggle-icon" :class="{ rotated: sidebarCollapsed }">
+          <path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span class="toggle-label">Collapse</span>
+      </button>
+    </aside>
+
+    <div class="main-panel">
+      <!-- Header -->
+      <header class="top-header">
+        <div class="header-left">
+          <h1 class="page-title">{{ pageTitle }}</h1>
+        </div>
+        <div class="header-right">
+          <LanguageSwitcher />
+          <ProfileMenu
+            @show-profile-details="showProfileDetails = true"
+            @show-tasks="showTasks = true"
+          />
+        </div>
+      </header>
+
+      <!-- Filter Bar -->
+      <FilterBar />
+
+      <!-- Content -->
+      <main class="main-content">
+        <AnimatedBackground />
+        <router-view v-slot="{ Component }">
+          <Transition :name="transitionName" mode="out-in">
+            <component :is="Component" :key="$route.path" />
+          </Transition>
+        </router-view>
+      </main>
+    </div>
 
     <ProfileDetailsModal
       :is-open="showProfileDetails"
@@ -56,14 +146,17 @@
 
 <script>
 import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { api } from './api'
 import { useAuth } from './composables/useAuth'
 import { useI18n } from './composables/useI18n'
+import { usePageTransition } from './composables/usePageTransition'
 import FilterBar from './components/FilterBar.vue'
 import ProfileMenu from './components/ProfileMenu.vue'
 import ProfileDetailsModal from './components/ProfileDetailsModal.vue'
 import TasksModal from './components/TasksModal.vue'
 import LanguageSwitcher from './components/LanguageSwitcher.vue'
+import AnimatedBackground from './components/AnimatedBackground.vue'
 
 export default {
   name: 'App',
@@ -72,15 +165,48 @@ export default {
     ProfileMenu,
     ProfileDetailsModal,
     TasksModal,
-    LanguageSwitcher
+    LanguageSwitcher,
+    AnimatedBackground
   },
   setup() {
-    const { currentUser } = useAuth()
+    const { currentUser, getInitials } = useAuth()
     const { t } = useI18n()
+    const route = useRoute()
+    const { transitionName } = usePageTransition()
+
     const showProfileDetails = ref(false)
     const showTasks = ref(false)
     const apiTasks = ref([])
 
+    // Sidebar collapse state — persisted in localStorage
+    const storedCollapsed = localStorage.getItem('sidebarCollapsed')
+    const sidebarCollapsed = ref(storedCollapsed === 'true')
+
+    const toggleSidebar = () => {
+      sidebarCollapsed.value = !sidebarCollapsed.value
+      localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value)
+    }
+
+    const isActiveRoute = (path) => {
+      if (path === '/') {
+        return route.path === '/'
+      }
+      return route.path === path
+    }
+
+    const pageTitleMap = {
+      '/': 'Dashboard',
+      '/inventory': 'Inventory',
+      '/orders': 'Orders',
+      '/spending': 'Finance',
+      '/demand': 'Demand Forecast',
+      '/reports': 'Reports'
+    }
+
+    const pageTitle = computed(() => {
+      return pageTitleMap[route.path] || 'Dashboard'
+    })
+
     // Merge mock tasks from currentUser with API tasks
     const tasks = computed(() => {
       return [...currentUser.value.tasks, ...apiTasks.value]
@@ -97,7 +223,6 @@ export default {
     const addTask = async (taskData) => {
       try {
         const newTask = await api.createTask(taskData)
-        // Add new task to the beginning of the array
         apiTasks.value.unshift(newTask)
       } catch (err) {
         console.error('Failed to add task:', err)
@@ -106,17 +231,13 @@ export default {
 
     const deleteTask = async (taskId) => {
       try {
-        // Check if it's a mock task (from currentUser)
         const isMockTask = currentUser.value.tasks.some(t => t.id === taskId)
-
         if (isMockTask) {
-          // Remove from mock tasks
           const index = currentUser.value.tasks.findIndex(t => t.id === taskId)
           if (index !== -1) {
             currentUser.value.tasks.splice(index, 1)
           }
         } else {
-          // Remove from API tasks
           await api.deleteTask(taskId)
           apiTasks.value = apiTasks.value.filter(t => t.id !== taskId)
         }
@@ -127,14 +248,10 @@ export default {
 
     const toggleTask = async (taskId) => {
       try {
-        // Check if it's a mock task (from currentUser)
         const mockTask = currentUser.value.tasks.find(t => t.id === taskId)
-
         if (mockTask) {
-          // Toggle mock task status
           mockTask.status = mockTask.status === 'pending' ? 'completed' : 'pending'
         } else {
-          // Toggle API task
           const updatedTask = await api.toggleTask(taskId)
           const index = apiTasks.value.findIndex(t => t.id === taskId)
           if (index !== -1) {
@@ -150,18 +267,44 @@ export default {
 
     return {
       t,
+      currentUser,
+      getInitials,
       showProfileDetails,
       showTasks,
       tasks,
       addTask,
       deleteTask,
-      toggleTask
+      toggleTask,
+      sidebarCollapsed,
+      toggleSidebar,
+      isActiveRoute,
+      pageTitle,
+      transitionName
     }
   }
 }
 </script>
 
 <style>
+:root {
+  --sidebar-bg: #0c111d;
+  --sidebar-hover: rgba(255,255,255,0.04);
+  --sidebar-active: rgba(59,130,246,0.08);
+  --sidebar-text: #8896ab;
+  --sidebar-text-active: #ffffff;
+  --sidebar-accent: #3b82f6;
+  --sidebar-divider: rgba(255,255,255,0.06);
+  --sidebar-width: 240px;
+  --sidebar-collapsed-width: 64px;
+  --header-height: 56px;
+  --content-bg: #f1f5f9;
+  --surface: #ffffff;
+  --border: #e2e8f0;
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --accent: #3b82f6;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -169,111 +312,330 @@ export default {
 }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background: #f8fafc;
+  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: var(--content-bg);
   color: #1e293b;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.app {
+/* ─── App Layout ─────────────────────────────────────────── */
+
+.app-layout {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
 }
 
-.top-nav {
-  background: #ffffff;
-  border-bottom: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
+/* ─── Sidebar ─────────────────────────────────────────────── */
 
-.nav-container {
-  max-width: 1600px;
-  margin: 0 auto;
+.sidebar {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background: linear-gradient(180deg, #0c111d 0%, #111827 50%, #0c111d 100%);
+  background-size: 100% 200%;
+  animation: sidebar-gradient 8s ease infinite;
   display: flex;
-  align-items: center;
-  padding: 0 2rem;
-  height: 70px;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 200;
+  overflow: hidden;
+  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+              min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.nav-container > .nav-tabs {
-  margin-left: auto;
-  margin-right: 1rem;
+.sidebar.collapsed {
+  width: var(--sidebar-collapsed-width);
+  min-width: var(--sidebar-collapsed-width);
 }
 
-.nav-container > .language-switcher {
-  margin-right: 1rem;
+/* Logo */
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 18px;
+  border-bottom: 1px solid var(--sidebar-divider);
+  min-height: 72px;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
-.logo {
+.logo-mark {
+  flex-shrink: 0;
   display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
+  align-items: center;
 }
 
-.logo h1 {
-  font-size: 1.375rem;
+.logo-text {
+  font-size: 1rem;
   font-weight: 700;
-  color: #0f172a;
-  letter-spacing: -0.025em;
+  color: #ffffff;
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+  letter-spacing: -0.01em;
 }
 
-.subtitle {
-  font-size: 0.813rem;
-  color: #64748b;
-  font-weight: 400;
-  padding-left: 0.75rem;
-  border-left: 1px solid #e2e8f0;
+.sidebar.collapsed .logo-text {
+  opacity: 0;
+  pointer-events: none;
 }
 
-.nav-tabs {
-  display: flex;
-  gap: 0.25rem;
+/* Nav */
+.sidebar-nav {
+  padding: 12px 0;
+  flex-shrink: 0;
 }
 
-.nav-tabs a {
-  padding: 0.625rem 1.25rem;
-  color: #64748b;
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  margin: 2px 10px;
+  border-radius: 8px;
+  color: var(--sidebar-text);
   text-decoration: none;
+  font-size: 0.875rem;
   font-weight: 500;
-  font-size: 0.938rem;
-  border-radius: 6px;
-  transition: all 0.2s ease;
+  transition: background 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
   position: relative;
+  border-left: 3px solid transparent;
 }
 
-.nav-tabs a:hover {
-  color: #0f172a;
-  background: #f1f5f9;
+.nav-item:hover {
+  background: var(--sidebar-hover);
+  color: #c8d3e0;
 }
 
-.nav-tabs a.active {
-  color: #2563eb;
-  background: #eff6ff;
+.nav-item.active {
+  background: var(--sidebar-active);
+  color: var(--sidebar-text-active);
+  border-left-color: var(--sidebar-accent);
+}
+
+.nav-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.nav-label {
+  opacity: 1;
+  transition: opacity 0.15s ease;
+  overflow: hidden;
 }
 
-.nav-tabs a.active::after {
+.sidebar.collapsed .nav-label {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+/* Tooltip shown when collapsed */
+.nav-tooltip {
+  display: none;
+  position: absolute;
+  left: calc(var(--sidebar-collapsed-width) + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: #1e293b;
+  color: #f1f5f9;
+  font-size: 0.8rem;
+  font-weight: 500;
+  padding: 5px 10px;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 300;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.nav-tooltip::before {
   content: '';
   position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: #2563eb;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 5px solid transparent;
+  border-right-color: #1e293b;
 }
 
-.main-content {
+.sidebar.collapsed .nav-item:hover .nav-tooltip {
+  display: block;
+}
+
+/* Spacer */
+.sidebar-spacer {
   flex: 1;
-  max-width: 1600px;
+}
+
+/* Profile */
+.sidebar-profile {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  overflow: hidden;
+}
+
+.profile-avatar {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.profile-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+}
+
+.sidebar.collapsed .profile-info {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+.profile-name {
+  font-size: 0.813rem;
+  font-weight: 600;
+  color: #e2e8f0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profile-role {
+  font-size: 0.75rem;
+  color: var(--sidebar-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Divider */
+.sidebar-divider {
+  height: 1px;
+  background: var(--sidebar-divider);
+  margin: 0 16px;
+}
+
+/* Collapse toggle */
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  background: none;
+  border: none;
+  color: var(--sidebar-text);
+  cursor: pointer;
+  font-size: 0.813rem;
+  font-weight: 500;
+  transition: color 0.15s ease;
   width: 100%;
-  margin: 0 auto;
-  padding: 1.5rem 2rem;
+  text-align: left;
+  flex-shrink: 0;
 }
 
+.sidebar-toggle:hover {
+  color: #c8d3e0;
+}
+
+.toggle-icon {
+  flex-shrink: 0;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toggle-icon.rotated {
+  transform: rotate(180deg);
+}
+
+.toggle-label {
+  opacity: 1;
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
+}
+
+.sidebar.collapsed .toggle-label {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+/* ─── Main Panel ─────────────────────────────────────────── */
+
+.main-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--sidebar-width);
+  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 100vh;
+}
+
+.app-layout:has(.sidebar.collapsed) .main-panel {
+  margin-left: var(--sidebar-collapsed-width);
+}
+
+/* ─── Top Header ─────────────────────────────────────────── */
+
+.top-header {
+  height: var(--header-height);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.page-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ─── Main Content ───────────────────────────────────────── */
+
+.main-content {
+  flex: 1;
+  padding: 24px;
+  background: var(--content-bg);
+}
+
+/* ─── Global Component Styles ────────────────────────────── */
+
 .page-header {
   margin-bottom: 1.5rem;
 }
@@ -281,13 +643,13 @@ body {
 .page-header h2 {
   font-size: 1.875rem;
   font-weight: 700;
-  color: #0f172a;
+  color: var(--text-primary);
   margin-bottom: 0.375rem;
   letter-spacing: -0.025em;
 }
 
 .page-header p {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.938rem;
 }
 
@@ -302,17 +664,20 @@ body {
   background: white;
   padding: 1.25rem;
   border-radius: 10px;
-  border: 1px solid #e2e8f0;
-  transition: all 0.2s ease;
+  border: 1px solid var(--border);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+              box-shadow 0.3s ease,
+              border-color 0.3s ease;
 }
 
 .stat-card:hover {
+  transform: translateY(-6px) scale(1.02);
   border-color: #cbd5e1;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
 }
 
 .stat-label {
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.875rem;
   font-weight: 600;
   text-transform: uppercase;
@@ -323,7 +688,7 @@ body {
 .stat-value {
   font-size: 2.25rem;
   font-weight: 700;
-  color: #0f172a;
+  color: var(--text-primary);
   letter-spacing: -0.025em;
 }
 
@@ -347,8 +712,15 @@ body {
   background: white;
   border-radius: 10px;
   padding: 1.25rem;
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border);
   margin-bottom: 1.25rem;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+              box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 
 .card-header {
@@ -357,13 +729,13 @@ body {
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 0.875rem;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border);
 }
 
 .card-title {
   font-size: 1.125rem;
   font-weight: 700;
-  color: #0f172a;
+  color: var(--text-primary);
   letter-spacing: -0.025em;
 }
 
@@ -378,8 +750,8 @@ table {
 
 thead {
   background: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-  border-bottom: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
 }
 
 th {
@@ -400,11 +772,12 @@ td {
 }
 
 tbody tr {
-  transition: background-color 0.15s ease;
+  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
 tbody tr:hover {
-  background: #f8fafc;
+  background: #f0f7ff;
+  transform: translateX(4px);
 }
 
 .badge {
@@ -470,8 +843,14 @@ tbody tr:hover {
 .loading {
   text-align: center;
   padding: 3rem;
-  color: #64748b;
+  color: var(--text-secondary);
   font-size: 0.938rem;
+  animation: loading-pulse 1.5s ease-in-out infinite;
+}
+
+.loading::after {
+  content: '';
+  animation: loading-dots 1.5s steps(4, end) infinite;
 }
 
 .error {
@@ -483,4 +862,93 @@ tbody tr:hover {
   margin: 1rem 0;
   font-size: 0.938rem;
 }
+
+/* ─── Route Transitions ─────────────────────────────────── */
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(60px) scale(0.97);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-60px) scale(0.97);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-60px) scale(0.97);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(60px) scale(0.97);
+}
+
+/* ─── Badge Pulse Animations ────────────────────────────── */
+
+.badge.danger {
+  animation: pulse-danger 2s ease-in-out infinite;
+}
+
+.badge.warning {
+  animation: pulse-warning 2.5s ease-in-out infinite;
+}
+
+@keyframes pulse-danger {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
+}
+
+@keyframes pulse-warning {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.3); }
+  50% { box-shadow: 0 0 0 5px rgba(234, 88, 12, 0); }
+}
+
+/* ─── Loading Animation ─────────────────────────────────── */
+
+@keyframes loading-pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.02); }
+}
+
+@keyframes loading-dots {
+  0% { content: ''; }
+  25% { content: '.'; }
+  50% { content: '..'; }
+  75% { content: '...'; }
+}
+
+/* ─── Sidebar Gradient ──────────────────────────────────── */
+
+@keyframes sidebar-gradient {
+  0%, 100% { background-position: 0% 0%; }
+  50% { background-position: 0% 100%; }
+}
+
+/* ─── Nav Active Indicator ──────────────────────────────── */
+
+.nav-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%) scaleY(0);
+  width: 3px;
+  height: 60%;
+  background: var(--sidebar-accent);
+  border-radius: 0 2px 2px 0;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.nav-item.active::before {
+  transform: translateY(-50%) scaleY(1);
+}
 </style>
diff --git a/client/src/components/AnimatedBackground.vue b/client/src/components/AnimatedBackground.vue
new file mode 100644
index 00000000..fa4d7e10
--- /dev/null
+++ b/client/src/components/AnimatedBackground.vue
@@ -0,0 +1,125 @@
+<template>
+  <canvas ref="canvas" class="animated-bg"></canvas>
+</template>
+
+<script>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+export default {
+  name: 'AnimatedBackground',
+  setup() {
+    const canvas = ref(null)
+    let animationId = null
+    let time = 0
+
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    const DOT_SPACING = 40
+    const DOT_RADIUS = 1.5
+    const LINE_DISTANCE = 80
+    const DOT_COLOR = { r: 59, g: 130, b: 246 }
+
+    function draw(ctx, width, height) {
+      ctx.clearRect(0, 0, width, height)
+      time += 0.015
+
+      const cols = Math.ceil(width / DOT_SPACING) + 1
+      const rows = Math.ceil(height / DOT_SPACING) + 1
+      const dots = []
+
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const x = i * DOT_SPACING
+          const y = j * DOT_SPACING
+          const wave = Math.sin(time + i * 0.15 + j * 0.15) * 0.5 + 0.5
+          const alpha = 0.03 + wave * 0.05
+          const scale = 0.8 + wave * 0.4
+
+          ctx.beginPath()
+          ctx.arc(x, y, DOT_RADIUS * scale, 0, Math.PI * 2)
+          ctx.fillStyle = `rgba(${DOT_COLOR.r}, ${DOT_COLOR.g}, ${DOT_COLOR.b}, ${alpha})`
+          ctx.fill()
+
+          dots.push({ x, y, alpha })
+        }
+      }
+
+      // Draw constellation lines between nearby dots
+      ctx.lineWidth = 0.5
+      for (let i = 0; i < dots.length; i++) {
+        for (let j = i + 1; j < dots.length; j++) {
+          const dx = dots[i].x - dots[j].x
+          const dy = dots[i].y - dots[j].y
+          const dist = Math.sqrt(dx * dx + dy * dy)
+          if (dist < LINE_DISTANCE && dist > DOT_SPACING * 0.5) {
+            const lineAlpha = (1 - dist / LINE_DISTANCE) * 0.03 * (dots[i].alpha + dots[j].alpha)
+            ctx.beginPath()
+            ctx.moveTo(dots[i].x, dots[i].y)
+            ctx.lineTo(dots[j].x, dots[j].y)
+            ctx.strokeStyle = `rgba(${DOT_COLOR.r}, ${DOT_COLOR.g}, ${DOT_COLOR.b}, ${lineAlpha})`
+            ctx.stroke()
+          }
+        }
+      }
+    }
+
+    function animate() {
+      const c = canvas.value
+      if (!c) return
+      const ctx = c.getContext('2d')
+      draw(ctx, c.width, c.height)
+      animationId = requestAnimationFrame(animate)
+    }
+
+    function resize() {
+      const c = canvas.value
+      if (!c) return
+      const dpr = window.devicePixelRatio || 1
+      const rect = c.parentElement.getBoundingClientRect()
+      c.width = rect.width * dpr
+      c.height = rect.height * dpr
+      c.style.width = rect.width + 'px'
+      c.style.height = rect.height + 'px'
+      const ctx = c.getContext('2d')
+      ctx.scale(dpr, dpr)
+    }
+
+    function handleVisibility() {
+      if (document.hidden) {
+        if (animationId) cancelAnimationFrame(animationId)
+        animationId = null
+      } else {
+        if (!animationId) animate()
+      }
+    }
+
+    onMounted(() => {
+      if (prefersReducedMotion) return
+      resize()
+      animate()
+      window.addEventListener('resize', resize)
+      document.addEventListener('visibilitychange', handleVisibility)
+    })
+
+    onBeforeUnmount(() => {
+      if (animationId) cancelAnimationFrame(animationId)
+      window.removeEventListener('resize', resize)
+      document.removeEventListener('visibilitychange', handleVisibility)
+    })
+
+    return { canvas }
+  }
+}
+</script>
+
+<style scoped>
+.animated-bg {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: var(--sidebar-width, 240px);
+  z-index: 0;
+  pointer-events: none;
+}
+</style>
diff --git a/client/src/components/BacklogDetailModal.vue b/client/src/components/BacklogDetailModal.vue
index 280958ac..d243fee2 100644
--- a/client/src/components/BacklogDetailModal.vue
+++ b/client/src/components/BacklogDetailModal.vue
@@ -130,7 +130,8 @@ const formatDate = (dateString) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -358,23 +359,11 @@ const formatDate = (dateString) => {
 }
 
 /* Modal transition animations */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .modal-container,
-.modal-leave-active .modal-container {
-  transition: transform 0.2s ease;
-}
-
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  transform: scale(0.95);
-}
+.modal-enter-active { transition: opacity 0.35s ease; }
+.modal-leave-active { transition: opacity 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+.modal-enter-active .modal-container { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.modal-leave-active .modal-container { transition: transform 0.2s ease-in; }
+.modal-enter-from .modal-container { transform: scale(0.8); }
+.modal-leave-to .modal-container { transform: scale(0.9); }
 </style>
diff --git a/client/src/components/CostDetailModal.vue b/client/src/components/CostDetailModal.vue
index aa31bd14..7927d03e 100644
--- a/client/src/components/CostDetailModal.vue
+++ b/client/src/components/CostDetailModal.vue
@@ -156,7 +156,8 @@ const close = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -362,23 +363,11 @@ const close = () => {
 }
 
 /* Modal transition animations */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .modal-container,
-.modal-leave-active .modal-container {
-  transition: transform 0.2s ease;
-}
-
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  transform: scale(0.95);
-}
+.modal-enter-active { transition: opacity 0.35s ease; }
+.modal-leave-active { transition: opacity 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+.modal-enter-active .modal-container { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.modal-leave-active .modal-container { transition: transform 0.2s ease-in; }
+.modal-enter-from .modal-container { transform: scale(0.8); }
+.modal-leave-to .modal-container { transform: scale(0.9); }
 </style>
diff --git a/client/src/components/FilterBar.vue b/client/src/components/FilterBar.vue
index 9e12b694..287bcf34 100644
--- a/client/src/components/FilterBar.vue
+++ b/client/src/components/FilterBar.vue
@@ -70,8 +70,10 @@
 </template>
 
 <script>
+import { watch, ref } from 'vue'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
+import gsap from 'gsap'
 
 export default {
   name: 'FilterBar',
@@ -87,6 +89,24 @@ export default {
 
     const { t } = useI18n()
 
+    // Pulse animation on filter change
+    const pulseSelect = (index) => {
+      const selects = document.querySelectorAll('.filter-select')
+      if (selects[index]) {
+        gsap.from(selects[index], {
+          scale: 1.05,
+          duration: 0.3,
+          ease: 'back.out(2)',
+          clearProps: 'scale'
+        })
+      }
+    }
+
+    watch(selectedPeriod, () => pulseSelect(0))
+    watch(selectedLocation, () => pulseSelect(1))
+    watch(selectedCategory, () => pulseSelect(2))
+    watch(selectedStatus, () => pulseSelect(3))
+
     return {
       t,
       selectedPeriod,
@@ -102,18 +122,16 @@ export default {
 
 <style scoped>
 .filters-bar {
-  background: #f8fafc;
+  background: #ffffff;
   border-bottom: 1px solid #e2e8f0;
   padding: 0.75rem 0;
   position: sticky;
-  top: 70px;
-  z-index: 90;
+  top: 0;
+  z-index: 50;
 }
 
 .filters-container {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 24px;
   display: flex;
   align-items: center;
   gap: 1rem;
diff --git a/client/src/components/InventoryDetailModal.vue b/client/src/components/InventoryDetailModal.vue
index 9d648af3..33eed0f6 100644
--- a/client/src/components/InventoryDetailModal.vue
+++ b/client/src/components/InventoryDetailModal.vue
@@ -181,7 +181,8 @@ const getSummaryCardClass = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -192,7 +193,7 @@ const getSummaryCardClass = () => {
 .modal-container {
   background: white;
   border-radius: 12px;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
   max-width: 700px;
   width: 100%;
   max-height: 90vh;
@@ -428,7 +429,9 @@ const getSummaryCardClass = () => {
 }
 
 /* Modal transition animations */
-.modal-enter-active,
+.modal-enter-active {
+  transition: opacity 0.35s ease;
+}
 .modal-leave-active {
   transition: opacity 0.2s ease;
 }
@@ -438,13 +441,17 @@ const getSummaryCardClass = () => {
   opacity: 0;
 }
 
-.modal-enter-active .modal-container,
+.modal-enter-active .modal-container {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 .modal-leave-active .modal-container {
-  transition: transform 0.2s ease;
+  transition: transform 0.2s ease-in;
 }
 
-.modal-enter-from .modal-container,
+.modal-enter-from .modal-container {
+  transform: scale(0.8);
+}
 .modal-leave-to .modal-container {
-  transform: scale(0.95);
+  transform: scale(0.9);
 }
 </style>
diff --git a/client/src/components/ProductDetailModal.vue b/client/src/components/ProductDetailModal.vue
index 76218306..ee7feb47 100644
--- a/client/src/components/ProductDetailModal.vue
+++ b/client/src/components/ProductDetailModal.vue
@@ -137,7 +137,8 @@ const getStockBadgeClass = (stockLevel) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -313,23 +314,11 @@ const getStockBadgeClass = (stockLevel) => {
 }
 
 /* Modal transition animations */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .modal-container,
-.modal-leave-active .modal-container {
-  transition: transform 0.2s ease;
-}
-
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  transform: scale(0.95);
-}
+.modal-enter-active { transition: opacity 0.35s ease; }
+.modal-leave-active { transition: opacity 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+.modal-enter-active .modal-container { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.modal-leave-active .modal-container { transition: transform 0.2s ease-in; }
+.modal-enter-from .modal-container { transform: scale(0.8); }
+.modal-leave-to .modal-container { transform: scale(0.9); }
 </style>
diff --git a/client/src/components/ProfileDetailsModal.vue b/client/src/components/ProfileDetailsModal.vue
index 4896a602..e2cdaffc 100644
--- a/client/src/components/ProfileDetailsModal.vue
+++ b/client/src/components/ProfileDetailsModal.vue
@@ -103,7 +103,8 @@ const formatDate = (dateString) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -258,23 +259,11 @@ const formatDate = (dateString) => {
 }
 
 /* Modal transition animations */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .modal-container,
-.modal-leave-active .modal-container {
-  transition: transform 0.2s ease;
-}
-
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  transform: scale(0.95);
-}
+.modal-enter-active { transition: opacity 0.35s ease; }
+.modal-leave-active { transition: opacity 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+.modal-enter-active .modal-container { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.modal-leave-active .modal-container { transition: transform 0.2s ease-in; }
+.modal-enter-from .modal-container { transform: scale(0.8); }
+.modal-leave-to .modal-container { transform: scale(0.9); }
 </style>
diff --git a/client/src/components/TasksModal.vue b/client/src/components/TasksModal.vue
index 67d44638..f230fdde 100644
--- a/client/src/components/TasksModal.vue
+++ b/client/src/components/TasksModal.vue
@@ -251,7 +251,8 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -599,23 +600,11 @@ label {
 }
 
 /* Modal transitions */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-active .modal-container,
-.modal-leave-active .modal-container {
-  transition: transform 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-from .modal-container,
-.modal-leave-to .modal-container {
-  transform: scale(0.9);
-}
+.modal-enter-active { transition: opacity 0.35s ease; }
+.modal-leave-active { transition: opacity 0.2s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+.modal-enter-active .modal-container { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.modal-leave-active .modal-container { transition: transform 0.2s ease-in; }
+.modal-enter-from .modal-container { transform: scale(0.8); }
+.modal-leave-to .modal-container { transform: scale(0.9); }
 </style>
diff --git a/client/src/composables/useAnimations.js b/client/src/composables/useAnimations.js
new file mode 100644
index 00000000..7db1d9c2
--- /dev/null
+++ b/client/src/composables/useAnimations.js
@@ -0,0 +1,129 @@
+import gsap from 'gsap'
+
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+export function useAnimations() {
+  const timelines = []
+
+  function track(tl) {
+    timelines.push(tl)
+    return tl
+  }
+
+  function staggerFadeUp(selector, options = {}) {
+    if (prefersReducedMotion) return null
+    const els = document.querySelectorAll(selector)
+    if (!els.length) return null
+    const tl = gsap.from(els, {
+      opacity: 0,
+      y: 30,
+      duration: options.duration || 0.5,
+      stagger: options.stagger || 0.08,
+      ease: options.ease || 'power3.out',
+      delay: options.delay || 0
+    })
+    return track(tl)
+  }
+
+  function countUp(el, endValue, options = {}) {
+    if (prefersReducedMotion) {
+      if (el && options.formatter) el.textContent = options.formatter(endValue)
+      return null
+    }
+    const obj = { value: 0 }
+    const tl = gsap.to(obj, {
+      value: endValue,
+      duration: options.duration || 1.5,
+      ease: options.ease || 'power2.out',
+      delay: options.delay || 0,
+      onUpdate: () => {
+        if (el) {
+          el.textContent = options.formatter
+            ? options.formatter(obj.value)
+            : Math.round(obj.value).toLocaleString()
+        }
+      }
+    })
+    return track(tl)
+  }
+
+  function barGrow(selector, options = {}) {
+    if (prefersReducedMotion) return null
+    const els = document.querySelectorAll(selector)
+    if (!els.length) return null
+    const tl = gsap.from(els, {
+      width: 0,
+      duration: options.duration || 1,
+      stagger: options.stagger || 0.1,
+      ease: options.ease || 'elastic.out(1, 0.5)',
+      delay: options.delay || 0
+    })
+    return track(tl)
+  }
+
+  function springPop(selector, options = {}) {
+    if (prefersReducedMotion) return null
+    const els = typeof selector === 'string' ? document.querySelectorAll(selector) : [selector]
+    if (!els.length) return null
+    const tl = gsap.from(els, {
+      scale: 0.85,
+      opacity: 0,
+      duration: options.duration || 0.5,
+      stagger: options.stagger || 0.06,
+      ease: 'back.out(1.7)',
+      delay: options.delay || 0
+    })
+    return track(tl)
+  }
+
+  function staggerTableRows(selector, options = {}) {
+    if (prefersReducedMotion) return null
+    const rows = document.querySelectorAll(`${selector} tbody tr`)
+    if (!rows.length) return null
+    const maxRows = options.maxRows || 15
+    const visible = Array.from(rows).slice(0, maxRows)
+    const tl = gsap.from(visible, {
+      opacity: 0,
+      x: -20,
+      duration: options.duration || 0.4,
+      stagger: options.stagger || 0.03,
+      ease: 'power2.out',
+      delay: options.delay || 0
+    })
+    return track(tl)
+  }
+
+  function animateDonut(selector, options = {}) {
+    if (prefersReducedMotion) return null
+    const circles = document.querySelectorAll(`${selector} circle[stroke-dasharray]`)
+    if (!circles.length) return null
+    const tl = gsap.timeline({ delay: options.delay || 0 })
+    circles.forEach((circle, i) => {
+      const target = circle.getAttribute('stroke-dasharray')
+      circle.setAttribute('stroke-dasharray', '0 408')
+      tl.to(circle, {
+        attr: { 'stroke-dasharray': target },
+        duration: 0.8,
+        ease: 'power3.out'
+      }, i * 0.15)
+    })
+    return track(tl)
+  }
+
+  function cleanup() {
+    timelines.forEach(tl => {
+      if (tl && tl.kill) tl.kill()
+    })
+    timelines.length = 0
+  }
+
+  return {
+    staggerFadeUp,
+    countUp,
+    barGrow,
+    springPop,
+    staggerTableRows,
+    animateDonut,
+    cleanup
+  }
+}
diff --git a/client/src/composables/usePageTransition.js b/client/src/composables/usePageTransition.js
new file mode 100644
index 00000000..981f37f7
--- /dev/null
+++ b/client/src/composables/usePageTransition.js
@@ -0,0 +1,24 @@
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const ROUTE_INDEX = {
+  '/': 0,
+  '/inventory': 1,
+  '/orders': 2,
+  '/spending': 3,
+  '/demand': 4,
+  '/reports': 5
+}
+
+export function usePageTransition() {
+  const transitionName = ref('slide-left')
+  const router = useRouter()
+
+  router.beforeEach((to, from) => {
+    const toIndex = ROUTE_INDEX[to.path] ?? 0
+    const fromIndex = ROUTE_INDEX[from.path] ?? 0
+    transitionName.value = toIndex >= fromIndex ? 'slide-left' : 'slide-right'
+  })
+
+  return { transitionName }
+}
diff --git a/client/src/directives/vRipple.js b/client/src/directives/vRipple.js
new file mode 100644
index 00000000..3eab55bc
--- /dev/null
+++ b/client/src/directives/vRipple.js
@@ -0,0 +1,45 @@
+import gsap from 'gsap'
+
+export const vRipple = {
+  mounted(el) {
+    el.style.position = 'relative'
+    el.style.overflow = 'hidden'
+
+    el.__rippleHandler = (e) => {
+      const rect = el.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      const size = Math.max(rect.width, rect.height) * 2
+
+      const ripple = document.createElement('span')
+      ripple.style.cssText = `
+        position: absolute;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.35);
+        width: ${size}px;
+        height: ${size}px;
+        left: ${x - size / 2}px;
+        top: ${y - size / 2}px;
+        pointer-events: none;
+        transform: scale(0);
+      `
+      el.appendChild(ripple)
+
+      gsap.to(ripple, {
+        scale: 1,
+        opacity: 0,
+        duration: 0.6,
+        ease: 'power2.out',
+        onComplete: () => ripple.remove()
+      })
+    }
+
+    el.addEventListener('click', el.__rippleHandler)
+  },
+
+  unmounted(el) {
+    if (el.__rippleHandler) {
+      el.removeEventListener('click', el.__rippleHandler)
+    }
+  }
+}
diff --git a/client/src/main.js b/client/src/main.js
index 477c2d96..bddd8c00 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
+import { vRipple } from './directives/vRipple'
 import Dashboard from './views/Dashboard.vue'
 import Inventory from './views/Inventory.vue'
 import Orders from './views/Orders.vue'
@@ -21,5 +22,6 @@ const router = createRouter({
 })
 
 const app = createApp(App)
+app.directive('ripple', vRipple)
 app.use(router)
 app.mount('#app')
diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue
index 437da9c2..a9201d22 100644
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -213,6 +213,7 @@
                       v-if="!item.purchase_order_id"
                       @click.stop="openPOModal(item)"
                       class="po-button create"
+                      v-ripple
                     >
                       Create PO
                     </button>
@@ -220,6 +221,7 @@
                       v-else
                       @click.stop="viewPO(item)"
                       class="po-button view"
+                      v-ripple
                     >
                       View PO
                     </button>
@@ -297,10 +299,11 @@
 </template>
 
 <script>
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
 import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
+import { useAnimations } from '../composables/useAnimations'
 import { formatCurrency } from '../utils/currency'
 import ProductDetailModal from '../components/ProductDetailModal.vue'
 import BacklogDetailModal from '../components/BacklogDetailModal.vue'
@@ -313,6 +316,16 @@ export default {
   },
   setup() {
     const { t, currentCurrency, translateProductName, translateWarehouse } = useI18n()
+    const { staggerFadeUp, barGrow, staggerTableRows, animateDonut, cleanup } = useAnimations()
+
+    const playEntranceAnimations = () => {
+      staggerFadeUp('.kpi-card')
+      barGrow('.kpi-progress', { delay: 0.3 })
+      staggerFadeUp('.chart-card', { delay: 0.4 })
+      barGrow('.h-bar', { delay: 0.6 })
+      animateDonut('.donut-svg-compact', { delay: 0.5 })
+      staggerTableRows('.full-width table', { delay: 0.7 })
+    }
     const loading = ref(true)
     const error = ref(null)
     const summary = ref({})
@@ -677,6 +690,16 @@ export default {
       loadData()
     })
 
+    // Trigger entrance animations once loading completes successfully
+    watch(loading, async (newVal, oldVal) => {
+      if (oldVal === true && newVal === false && !error.value) {
+        await nextTick()
+        playEntranceAnimations()
+      }
+    })
+
+    onBeforeUnmount(cleanup)
+
     onMounted(loadData)
 
     return {
diff --git a/client/src/views/Demand.vue b/client/src/views/Demand.vue
index 2cdf01a6..570528d4 100644
--- a/client/src/views/Demand.vue
+++ b/client/src/views/Demand.vue
@@ -111,15 +111,17 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch, computed, nextTick, onBeforeUnmount } from 'vue'
 import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
+import { useAnimations } from '../composables/useAnimations'
 
 export default {
   name: 'Demand',
   setup() {
     const { t } = useI18n()
+    const { staggerFadeUp, springPop, staggerTableRows, cleanup } = useAnimations()
     const loading = ref(true)
     const error = ref(null)
     const allForecasts = ref([])
@@ -161,11 +163,25 @@ export default {
       }
     }
 
+    const playEntranceAnimations = () => {
+      springPop('.trend-card')
+      staggerTableRows('.table-container table', { delay: 0.4 })
+    }
+
     // Watch for filter changes and reload data
     watch([selectedLocation, selectedCategory], () => {
       loadForecasts()
     })
 
+    watch(loading, async (newVal, oldVal) => {
+      if (oldVal === true && newVal === false && !error.value) {
+        await nextTick()
+        playEntranceAnimations()
+      }
+    })
+
+    onBeforeUnmount(cleanup)
+
     const getForecastsByTrend = (trend) => {
       return forecasts.value.filter(f => f.trend === trend)
     }
@@ -236,11 +252,12 @@ export default {
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   padding: 1.5rem;
-  transition: all 0.2s ease;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
 }
 
 .trend-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transform: translateY(-6px) scale(1.02);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
 }
 
 .increasing-card {
diff --git a/client/src/views/Inventory.vue b/client/src/views/Inventory.vue
index 4819326e..e3b21a1b 100644
--- a/client/src/views/Inventory.vue
+++ b/client/src/views/Inventory.vue
@@ -84,8 +84,9 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch, computed, nextTick, onBeforeUnmount } from 'vue'
 import { api } from '../api'
+import { useAnimations } from '../composables/useAnimations'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
 import InventoryDetailModal from '../components/InventoryDetailModal.vue'
@@ -201,6 +202,22 @@ export default {
       showItemModal.value = true
     }
 
+    const { staggerFadeUp, staggerTableRows, cleanup } = useAnimations()
+
+    const playEntranceAnimations = () => {
+      staggerFadeUp('.card', { duration: 0.4 })
+      staggerTableRows('.table-container table', { delay: 0.2 })
+    }
+
+    watch(loading, async (newVal, oldVal) => {
+      if (oldVal === true && newVal === false && !error.value) {
+        await nextTick()
+        playEntranceAnimations()
+      }
+    })
+
+    onBeforeUnmount(cleanup)
+
     onMounted(loadInventory)
 
     return {
diff --git a/client/src/views/Orders.vue b/client/src/views/Orders.vue
index 7413f6e6..07455813 100644
--- a/client/src/views/Orders.vue
+++ b/client/src/views/Orders.vue
@@ -79,10 +79,11 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed, nextTick } from 'vue'
 import { api } from '../api'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
+import { useAnimations } from '../composables/useAnimations'
 
 export default {
   name: 'Orders',
@@ -105,6 +106,13 @@ export default {
       getCurrentFilters
     } = useFilters()
 
+    const { staggerFadeUp, staggerTableRows, cleanup } = useAnimations()
+
+    const playEntranceAnimations = () => {
+      staggerFadeUp('.stat-card')
+      staggerTableRows('.orders-table', { delay: 0.3 })
+    }
+
     const loadOrders = async () => {
       try {
         loading.value = true
@@ -153,7 +161,15 @@ export default {
       })
     }
 
+    watch(loading, async (newVal, oldVal) => {
+      if (oldVal === true && newVal === false && !error.value) {
+        await nextTick()
+        playEntranceAnimations()
+      }
+    })
+
     onMounted(loadOrders)
+    onBeforeUnmount(cleanup)
 
     return {
       t,
diff --git a/client/src/views/Reports.vue b/client/src/views/Reports.vue
index 35187eaf..204acc76 100644
--- a/client/src/views/Reports.vue
+++ b/client/src/views/Reports.vue
@@ -126,6 +126,7 @@
 
 <script>
 import axios from 'axios'
+import gsap from 'gsap'
 
 export default {
   name: 'Reports',
@@ -138,13 +139,17 @@ export default {
       totalRevenue: 0,
       avgMonthlyRevenue: 0,
       totalOrders: 0,
-      bestQuarter: ''
+      bestQuarter: '',
+      _timelines: []
     }
   },
   mounted() {
     console.log('Reports component mounted')
     this.loadData()
   },
+  beforeUnmount() {
+    this._timelines.forEach(tl => { if (tl && tl.kill) tl.kill() })
+  },
   methods: {
     async loadData() {
       console.log('Loading reports data...')
@@ -174,9 +179,28 @@ export default {
       } finally {
         this.loading = false
         console.log('Loading complete')
+        this.$nextTick(() => {
+          if (!this.error) {
+            this.playEntranceAnimations()
+          }
+        })
       }
     },
 
+    playEntranceAnimations() {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+      this._timelines.push(
+        gsap.from('.stat-card', { opacity: 0, y: 30, stagger: 0.08, ease: 'power3.out', duration: 0.5 })
+      )
+      this._timelines.push(
+        gsap.from('.reports-table tbody tr', { opacity: 0, x: -20, stagger: 0.03, ease: 'power2.out', duration: 0.4, delay: 0.3 })
+      )
+      this._timelines.push(
+        gsap.from('.bar', { height: 0, stagger: 0.05, ease: 'elastic.out(1, 0.5)', duration: 1, delay: 0.4 })
+      )
+    },
+
     calculateSummaryStats() {
       // Calculate total revenue
       var total = 0
diff --git a/client/src/views/Spending.vue b/client/src/views/Spending.vue
index 17af4d10..e9cc5803 100644
--- a/client/src/views/Spending.vue
+++ b/client/src/views/Spending.vue
@@ -172,8 +172,9 @@
 </template>
 
 <script>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch, computed, nextTick, onBeforeUnmount } from 'vue'
 import { api } from '../api'
+import { useAnimations } from '../composables/useAnimations'
 import { useFilters } from '../composables/useFilters'
 import { useI18n } from '../composables/useI18n'
 import { formatCurrency as formatCurrencyUtil } from '../utils/currency'
@@ -186,6 +187,14 @@ export default {
   },
   setup() {
     const { t, currentCurrency } = useI18n()
+    const { staggerFadeUp, barGrow, staggerTableRows, cleanup } = useAnimations()
+
+    const playEntranceAnimations = () => {
+      staggerFadeUp('.stats-grid-finance .stat-card')
+      staggerFadeUp('.chart-card', { delay: 0.3 })
+      barGrow('.category-bar', { delay: 0.5 })
+      staggerTableRows('.transactions-table', { delay: 0.6 })
+    }
     const loading = ref(true)
     const error = ref(null)
     const allMonthlySpending = ref([])
@@ -375,6 +384,13 @@ export default {
       // Data will automatically update via computed properties
     })
 
+    watch(loading, async (newVal, oldVal) => {
+      if (oldVal === true && newVal === false && !error.value) {
+        await nextTick()
+        playEntranceAnimations()
+      }
+    })
+
     const formatCurrency = (value) => {
       return formatCurrencyUtil(value, currentCurrency.value)
     }
@@ -458,6 +474,7 @@ export default {
     }
 
     onMounted(loadData)
+    onBeforeUnmount(cleanup)
 
     return {
       t,