Spaces:

Shiva7706
/

BlueFin

Sleeping

App Files Files Community

vedanshmadan21 commited on Mar 12

Commit

2fd574a

1 Parent(s): 26159c8

feat: rename to Blue-Fin, add entity onboarding 2-step form with progress indicator

Browse files

Files changed (8) hide show

frontend/index.html +1 -1
frontend/src/App.jsx +41 -4
frontend/src/components/Navbar.jsx +28 -9
frontend/src/index.css +272 -91
frontend/src/pages/AnalysisPage.jsx +66 -17
frontend/src/pages/EntityOnboardingPage.jsx +717 -0
frontend/src/pages/LandingPage.jsx +54 -22
frontend/src/pages/UploadPage.jsx +499 -206

frontend/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>INTELLI-CREDIT — AI Credit Decisioning</title>
   </head>
   <body>
     <div id="root"></div>

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Blue-Fin — AI Credit Decisioning</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.jsx CHANGED Viewed

@@ -8,6 +8,7 @@ import AnalysisPage from "./pages/AnalysisPage.jsx";
 import CAMPage from "./pages/CAMPage.jsx";
 import HistoryPage from "./pages/HistoryPage.jsx";
 import AuthPage from "./pages/AuthPage.jsx";
 import ProtectedRoute from "./components/ProtectedRoute.jsx";
 function AppShell() {
@@ -20,10 +21,46 @@ function AppShell() {
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/auth" element={<AuthPage />} />
-          <Route path="/upload" element={<ProtectedRoute><UploadPage /></ProtectedRoute>} />
-          <Route path="/analysis/:jobId" element={<ProtectedRoute><AnalysisPage /></ProtectedRoute>} />
-          <Route path="/cam/:jobId" element={<ProtectedRoute><CAMPage /></ProtectedRoute>} />
-          <Route path="/history" element={<ProtectedRoute><HistoryPage /></ProtectedRoute>} />
         </Routes>
       </div>
     </div>

 import CAMPage from "./pages/CAMPage.jsx";
 import HistoryPage from "./pages/HistoryPage.jsx";
 import AuthPage from "./pages/AuthPage.jsx";
+import EntityOnboardingPage from "./pages/EntityOnboardingPage.jsx";
 import ProtectedRoute from "./components/ProtectedRoute.jsx";
 function AppShell() {
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/auth" element={<AuthPage />} />
+          <Route
+            path="/onboard"
+            element={
+              <ProtectedRoute>
+                <EntityOnboardingPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/upload"
+            element={
+              <ProtectedRoute>
+                <UploadPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/analysis/:jobId"
+            element={
+              <ProtectedRoute>
+                <AnalysisPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/cam/:jobId"
+            element={
+              <ProtectedRoute>
+                <CAMPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/history"
+            element={
+              <ProtectedRoute>
+                <HistoryPage />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
       </div>
     </div>

frontend/src/components/Navbar.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { useTheme } from "../context/ThemeContext.jsx";
 const NAV_LINKS = [
   { to: "/", label: "Dashboard", icon: LayoutDashboard },
-  { to: "/upload", label: "Upload", icon: Upload },
   { to: "/history", label: "History", icon: History },
 ];
@@ -17,8 +17,11 @@ export default function Navbar() {
   return (
     <nav className="navbar">
       {/* Brand */}
-      <Link to="/" className="navbar-brand" style={{ textDecoration: 'none' }}>
-        <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Intelli</span>Credit
       </Link>
       {/* Center links */}
@@ -41,15 +44,31 @@ export default function Navbar() {
       <div className="flex items-center gap-sm">
         {user ? (
           <>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', background: 'var(--bg-elevated)', borderRadius: 'var(--radius-full)', border: '1px solid var(--border)' }}>
-              <span style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-secondary)' }}>
                 {user.email}
               </span>
             </div>
             <button
               onClick={logout}
               className="btn btn-secondary btn-sm"
-              style={{ borderRadius: 'var(--radius-full)' }}
             >
               Sign Out
             </button>
@@ -58,7 +77,7 @@ export default function Navbar() {
           <Link
             to="/auth"
             className="btn btn-primary btn-sm"
-            style={{ borderRadius: 'var(--radius-full)' }}
           >
             Sign In
           </Link>
@@ -66,12 +85,12 @@ export default function Navbar() {
         <button
           onClick={toggleTheme}
           className="btn-icon btn-ghost"
-          style={{ borderRadius: 'var(--radius-sm)' }}
           title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
         >
           {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
         </button>
       </div>
-      </nav>
   );
 }

 const NAV_LINKS = [
   { to: "/", label: "Dashboard", icon: LayoutDashboard },
+  { to: "/onboard", label: "New Analysis", icon: Upload },
   { to: "/history", label: "History", icon: History },
 ];
   return (
     <nav className="navbar">
       {/* Brand */}
+      <Link to="/" className="navbar-brand" style={{ textDecoration: "none" }}>
+        <span style={{ fontStyle: "italic", color: "var(--accent)" }}>
+          Blue
+        </span>
+        -Fin
       </Link>
       {/* Center links */}
       <div className="flex items-center gap-sm">
         {user ? (
           <>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "6px 14px",
+                background: "var(--bg-elevated)",
+                borderRadius: "var(--radius-full)",
+                border: "1px solid var(--border)",
+              }}
+            >
+              <span
+                style={{
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  color: "var(--text-secondary)",
+                }}
+              >
                 {user.email}
               </span>
             </div>
             <button
               onClick={logout}
               className="btn btn-secondary btn-sm"
+              style={{ borderRadius: "var(--radius-full)" }}
             >
               Sign Out
             </button>
           <Link
             to="/auth"
             className="btn btn-primary btn-sm"
+            style={{ borderRadius: "var(--radius-full)" }}
           >
             Sign In
           </Link>
         <button
           onClick={toggleTheme}
           className="btn-icon btn-ghost"
+          style={{ borderRadius: "var(--radius-sm)" }}
           title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
         >
           {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
         </button>
       </div>
+    </nav>
   );
 }

frontend/src/index.css CHANGED Viewed

@@ -1,16 +1,17 @@
 /* ═══════════════════════════════════════════════════════════════════════════
-   INTELLI-CREDIT — Global Design System (Vanilla CSS)
    Dark editorial theme · Playfair Display + Inter · Glassmorphism
    ═══════════════════════════════════════════════════════════════════════════ */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
 /* ─── CSS Variables ─────────────────────────────────────────────────────── */
 :root {
   /* Typography */
-  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
-  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
   /* Spacing */
   --space-xs: 4px;
@@ -37,7 +38,8 @@
 }
 /* Base colors: Dark Theme (Default) */
-:root, [data-theme='dark'] {
   --bg-primary: #1a1a1f;
   --bg-secondary: #212126;
   --bg-surface: #242429;
@@ -78,7 +80,7 @@
 }
 /* Light Theme Overrides */
-[data-theme='light'] {
   --bg-primary: #f8fafc;
   --bg-secondary: #f1f5f9;
   --bg-surface: #ffffff;
@@ -150,28 +152,60 @@ body {
 }
 /* ─── Typography ────────────────────────────────────────────────────────── */
-h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-heading);
   font-weight: 600;
   line-height: 1.2;
   color: var(--text-primary);
 }
-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
-h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
-h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
-.serif { font-family: var(--font-heading); }
-.serif-italic { font-family: var(--font-heading); font-style: italic; }
-.mono { font-family: var(--font-mono); }
-.text-primary { color: var(--text-primary); }
-.text-secondary { color: var(--text-secondary); }
-.text-muted { color: var(--text-muted); }
-.text-accent { color: var(--accent); }
-.text-success { color: var(--success); }
-.text-warning { color: var(--warning); }
-.text-danger { color: var(--danger); }
 .label {
   font-family: var(--font-body);
@@ -194,7 +228,7 @@ h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
 }
 .eyebrow::before {
-  content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -203,8 +237,13 @@ h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
 }
 @keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
 }
 /* ─── Links ─────────────────────────────────────────────────────────────── */
@@ -496,53 +535,124 @@ tr:hover td {
   padding: 0 var(--space-lg);
 }
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.flex-wrap { flex-wrap: wrap; }
-.items-center { align-items: center; }
-.items-start { align-items: flex-start; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.gap-xs { gap: var(--space-xs); }
-.gap-sm { gap: var(--space-sm); }
-.gap-md { gap: var(--space-md); }
-.gap-lg { gap: var(--space-lg); }
-.gap-xl { gap: var(--space-xl); }
-.flex-1 { flex: 1; }
-.shrink-0 { flex-shrink: 0; }
-.grid { display: grid; }
-.grid-2 { grid-template-columns: repeat(2, 1fr); }
-.grid-3 { grid-template-columns: repeat(3, 1fr); }
-.grid-4 { grid-template-columns: repeat(4, 1fr); }
 @media (max-width: 768px) {
-  .grid-2, .grid-3, .grid-4 {
     grid-template-columns: 1fr;
   }
 }
 @media (min-width: 769px) and (max-width: 1024px) {
-  .grid-3, .grid-4 {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-.w-full { width: 100%; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.whitespace-pre-wrap { white-space: pre-wrap; }
-.relative { position: relative; }
-.absolute { position: absolute; }
-.sticky { position: sticky; }
-.hidden { display: none; }
-.overflow-hidden { overflow: hidden; }
-.overflow-auto { overflow: auto; }
-.pointer-events-none { pointer-events: none; }
-.select-none { user-select: none; }
-.cursor-pointer { cursor: pointer; }
-.line-through { text-decoration: line-through; }
 /* ─── Animations ────────────────────────────────────────────────────────── */
 .page-enter {
@@ -565,45 +675,79 @@ tr:hover td {
 }
 @keyframes slideInRight {
-  from { opacity: 0; transform: translateX(40px); }
-  to { opacity: 1; transform: translateX(0); }
 }
 @keyframes spin {
-  to { transform: rotate(360deg); }
 }
-.animate-spin { animation: spin 1s linear infinite; }
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
 }
-.animate-pulse { animation: pulse 2s ease-in-out infinite; }
 /* Marquee */
-.marquee-outer { overflow: hidden; }
 .marquee-inner {
   display: flex;
   width: max-content;
   animation: marqueeScroll 32s linear infinite;
 }
 @keyframes marqueeScroll {
-  from { transform: translateX(0); }
-  to { transform: translateX(-50%); }
 }
 /* Carousel progress */
 @keyframes carouselProgress {
-  from { width: 0%; }
-  to { width: 100%; }
 }
 /* Float animation */
 @keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
 }
-.animate-float { animation: float 3s ease-in-out infinite; }
 /* ─── Navbar ────────────────────────────────────────────────────────────── */
 .navbar {
@@ -768,11 +912,15 @@ tr:hover td {
 /* ─── Visible only on specific screen widths ────────────────────────────── */
 @media (max-width: 768px) {
-  .hide-mobile { display: none !important; }
 }
 @media (min-width: 769px) {
-  .show-mobile-only { display: none !important; }
 }
 /* ─── Chart & Score Enhancements ────────────────────────────────────────── */
@@ -781,10 +929,18 @@ tr:hover td {
 .score-tab-enter > * {
   animation: chartSlideUp 0.5s ease-out both;
 }
-.score-tab-enter > *:nth-child(1) { animation-delay: 0s; }
-.score-tab-enter > *:nth-child(2) { animation-delay: 0.1s; }
-.score-tab-enter > *:nth-child(3) { animation-delay: 0.2s; }
-.score-tab-enter > *:nth-child(4) { animation-delay: 0.3s; }
 @keyframes chartSlideUp {
   from {
@@ -804,7 +960,9 @@ tr:hover td {
 }
 .score-card-hover:hover {
   transform: translateY(-4px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
 }
@@ -832,13 +990,22 @@ tr:hover td {
 .stress-flipped-bg {
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, transparent 60%);
   animation: stressFlash 3s ease-in-out infinite;
   pointer-events: none;
 }
 @keyframes stressFlash {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 0.8; }
 }
 /* Stress bar fill animation */
@@ -848,13 +1015,19 @@ tr:hover td {
   transform-origin: left;
 }
 @keyframes stressBarGrow {
-  from { transform: scaleX(0); }
-  to { transform: scaleX(1); }
 }
 /* Recharts hover enhancements */
 .recharts-bar-rectangle {
-  transition: filter 0.25s ease, opacity 0.25s ease;
 }
 .recharts-radar-polygon {
@@ -863,7 +1036,9 @@ tr:hover td {
 /* Recharts tooltip animation */
 .recharts-tooltip-wrapper {
-  transition: transform 0.15s ease, opacity 0.15s ease !important;
 }
 /* Recharts active dot pulse */
@@ -878,8 +1053,14 @@ tr:hover td {
 /* Radar chart label animation */
 @keyframes radarFadeIn {
-  from { opacity: 0; transform: scale(0.9); }
-  to { opacity: 1; transform: scale(1); }
 }
 .recharts-polar-angle-axis-tick text {

 /* ═══════════════════════════════════════════════════════════════════════════
+   BLUE-FIN — Global Design System (Vanilla CSS)
    Dark editorial theme · Playfair Display + Inter · Glassmorphism
    ═══════════════════════════════════════════════════════════════════════════ */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
 /* ─── CSS Variables ─────────────────────────────────────────────────────── */
 :root {
   /* Typography */
+  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
+  --font-body:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
   /* Spacing */
   --space-xs: 4px;
 }
 /* Base colors: Dark Theme (Default) */
+:root,
+[data-theme="dark"] {
   --bg-primary: #1a1a1f;
   --bg-secondary: #212126;
   --bg-surface: #242429;
 }
 /* Light Theme Overrides */
+[data-theme="light"] {
   --bg-primary: #f8fafc;
   --bg-secondary: #f1f5f9;
   --bg-surface: #ffffff;
 }
 /* ─── Typography ────────────────────────────────────────────────────────── */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-heading);
   font-weight: 600;
   line-height: 1.2;
   color: var(--text-primary);
 }
+h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+}
+h2 {
+  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
+}
+h3 {
+  font-size: clamp(1.1rem, 2vw, 1.4rem);
+}
+.serif {
+  font-family: var(--font-heading);
+}
+.serif-italic {
+  font-family: var(--font-heading);
+  font-style: italic;
+}
+.mono {
+  font-family: var(--font-mono);
+}
+.text-primary {
+  color: var(--text-primary);
+}
+.text-secondary {
+  color: var(--text-secondary);
+}
+.text-muted {
+  color: var(--text-muted);
+}
+.text-accent {
+  color: var(--accent);
+}
+.text-success {
+  color: var(--success);
+}
+.text-warning {
+  color: var(--warning);
+}
+.text-danger {
+  color: var(--danger);
+}
 .label {
   font-family: var(--font-body);
 }
 .eyebrow::before {
+  content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
 }
 @keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }
 /* ─── Links ─────────────────────────────────────────────────────────────── */
   padding: 0 var(--space-lg);
 }
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-center {
+  align-items: center;
+}
+.items-start {
+  align-items: flex-start;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-xs {
+  gap: var(--space-xs);
+}
+.gap-sm {
+  gap: var(--space-sm);
+}
+.gap-md {
+  gap: var(--space-md);
+}
+.gap-lg {
+  gap: var(--space-lg);
+}
+.gap-xl {
+  gap: var(--space-xl);
+}
+.flex-1 {
+  flex: 1;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+.grid {
+  display: grid;
+}
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
 @media (max-width: 768px) {
+  .grid-2,
+  .grid-3,
+  .grid-4 {
     grid-template-columns: 1fr;
   }
 }
 @media (min-width: 769px) and (max-width: 1024px) {
+  .grid-3,
+  .grid-4 {
     grid-template-columns: repeat(2, 1fr);
   }
 }
+.w-full {
+  width: 100%;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.sticky {
+  position: sticky;
+}
+.hidden {
+  display: none;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-auto {
+  overflow: auto;
+}
+.pointer-events-none {
+  pointer-events: none;
+}
+.select-none {
+  user-select: none;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.line-through {
+  text-decoration: line-through;
+}
 /* ─── Animations ────────────────────────────────────────────────────────── */
 .page-enter {
 }
 @keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 @keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
 }
 @keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
 }
 /* Marquee */
+.marquee-outer {
+  overflow: hidden;
+}
 .marquee-inner {
   display: flex;
   width: max-content;
   animation: marqueeScroll 32s linear infinite;
 }
 @keyframes marqueeScroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
 }
 /* Carousel progress */
 @keyframes carouselProgress {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
 }
 /* Float animation */
 @keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+.animate-float {
+  animation: float 3s ease-in-out infinite;
 }
 /* ─── Navbar ────────────────────────────────────────────────────────────── */
 .navbar {
 /* ─── Visible only on specific screen widths ────────────────────────────── */
 @media (max-width: 768px) {
+  .hide-mobile {
+    display: none !important;
+  }
 }
 @media (min-width: 769px) {
+  .show-mobile-only {
+    display: none !important;
+  }
 }
 /* ─── Chart & Score Enhancements ────────────────────────────────────────── */
 .score-tab-enter > * {
   animation: chartSlideUp 0.5s ease-out both;
 }
+.score-tab-enter > *:nth-child(1) {
+  animation-delay: 0s;
+}
+.score-tab-enter > *:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.score-tab-enter > *:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.score-tab-enter > *:nth-child(4) {
+  animation-delay: 0.3s;
+}
 @keyframes chartSlideUp {
   from {
 }
 .score-card-hover:hover {
   transform: translateY(-4px);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
 }
 .stress-flipped-bg {
   position: absolute;
   inset: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(239, 68, 68, 0.08) 0%,
+    transparent 60%
+  );
   animation: stressFlash 3s ease-in-out infinite;
   pointer-events: none;
 }
 @keyframes stressFlash {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.8;
+  }
 }
 /* Stress bar fill animation */
   transform-origin: left;
 }
 @keyframes stressBarGrow {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
 }
 /* Recharts hover enhancements */
 .recharts-bar-rectangle {
+  transition:
+    filter 0.25s ease,
+    opacity 0.25s ease;
 }
 .recharts-radar-polygon {
 /* Recharts tooltip animation */
 .recharts-tooltip-wrapper {
+  transition:
+    transform 0.15s ease,
+    opacity 0.15s ease !important;
 }
 /* Recharts active dot pulse */
 /* Radar chart label animation */
 @keyframes radarFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 .recharts-polar-angle-axis-tick text {

frontend/src/pages/AnalysisPage.jsx CHANGED Viewed

@@ -17,7 +17,9 @@ export default function AnalysisPage() {
   const sourceRef = useRef(null);
   useEffect(() => {
-    function onResize() { setIsMobile(window.innerWidth < 768); }
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, []);
@@ -32,7 +34,10 @@ export default function AnalysisPage() {
       setResult(event.data);
       setIsComplete(true);
       setPercent(100);
-      if (sourceRef.current) { sourceRef.current.close(); sourceRef.current = null; }
     } else if (event.type === "error") {
       setSseError(event.message);
       setEvents((prev) => [...prev, event]);
@@ -42,12 +47,20 @@ export default function AnalysisPage() {
   useEffect(() => {
     const source = createSSEConnection(jobId, handleEvent);
     sourceRef.current = source;
-    return () => { if (sourceRef.current) { sourceRef.current.close(); sourceRef.current = null; } };
   }, []);
   if (sseError) {
     return (
-      <div className="page-enter flex items-center justify-center" style={{ minHeight: "100vh", padding: "24px" }}>
         <div
           className="card"
           style={{
@@ -59,11 +72,22 @@ export default function AnalysisPage() {
             textAlign: "center",
           }}
         >
-          <span className="label" style={{ color: "var(--danger)", marginBottom: "8px", display: "block" }}>
             Pipeline Error
           </span>
           <p style={{ fontSize: "15px", marginBottom: "24px" }}>{sseError}</p>
-          <Link to="/" className="btn btn-primary btn-sm" style={{ textDecoration: "none" }}>
             Try Again
           </Link>
         </div>
@@ -73,34 +97,59 @@ export default function AnalysisPage() {
   if (isMobile) {
     return (
-      <div className="page-enter flex flex-col items-center justify-center" style={{ minHeight: "100vh", padding: "32px", textAlign: "center", gap: "16px" }}>
-        <span className="serif" style={{ fontSize: "20px", fontWeight: 700, color: "var(--accent)" }}>
-          INTELLI-CREDIT
         </span>
-        <p style={{ fontWeight: 600 }}>Analysis dashboard is optimised for desktop.</p>
         <p style={{ color: "var(--text-muted)", fontSize: "13px" }}>
           Please open this page on a larger screen.
         </p>
-        <Link to="/" style={{ fontSize: "13px" }}>← Back to Home</Link>
       </div>
     );
   }
   if (!isComplete) {
-    return <PipelineProgress events={events} percent={percent} currentStage={currentStage} />;
   }
   return (
     <div className="page-enter">
-      <ResultsDashboard
-        result={result}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
         jobId={jobId}
         onScoreUpdate={(newScore, newDecision, delta) => {
           setResult((prev) => ({
             ...prev,
-            score_breakdown: { ...prev.score_breakdown, final_score: newScore, decision: newDecision },
           }));
         }}
       />

   const sourceRef = useRef(null);
   useEffect(() => {
+    function onResize() {
+      setIsMobile(window.innerWidth < 768);
+    }
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, []);
       setResult(event.data);
       setIsComplete(true);
       setPercent(100);
+      if (sourceRef.current) {
+        sourceRef.current.close();
+        sourceRef.current = null;
+      }
     } else if (event.type === "error") {
       setSseError(event.message);
       setEvents((prev) => [...prev, event]);
   useEffect(() => {
     const source = createSSEConnection(jobId, handleEvent);
     sourceRef.current = source;
+    return () => {
+      if (sourceRef.current) {
+        sourceRef.current.close();
+        sourceRef.current = null;
+      }
+    };
   }, []);
   if (sseError) {
     return (
+      <div
+        className="page-enter flex items-center justify-center"
+        style={{ minHeight: "100vh", padding: "24px" }}
+      >
         <div
           className="card"
           style={{
             textAlign: "center",
           }}
         >
+          <span
+            className="label"
+            style={{
+              color: "var(--danger)",
+              marginBottom: "8px",
+              display: "block",
+            }}
+          >
             Pipeline Error
           </span>
           <p style={{ fontSize: "15px", marginBottom: "24px" }}>{sseError}</p>
+          <Link
+            to="/"
+            className="btn btn-primary btn-sm"
+            style={{ textDecoration: "none" }}
+          >
             Try Again
           </Link>
         </div>
   if (isMobile) {
     return (
+      <div
+        className="page-enter flex flex-col items-center justify-center"
+        style={{
+          minHeight: "100vh",
+          padding: "32px",
+          textAlign: "center",
+          gap: "16px",
+        }}
+      >
+        <span
+          className="serif"
+          style={{ fontSize: "20px", fontWeight: 700, color: "var(--accent)" }}
+        >
+          BLUE-FIN
         </span>
+        <p style={{ fontWeight: 600 }}>
+          Analysis dashboard is optimised for desktop.
+        </p>
         <p style={{ color: "var(--text-muted)", fontSize: "13px" }}>
           Please open this page on a larger screen.
         </p>
+        <Link to="/" style={{ fontSize: "13px" }}>
+          ← Back to Home
+        </Link>
       </div>
     );
   }
   if (!isComplete) {
+    return (
+      <PipelineProgress
+        events={events}
+        percent={percent}
+        currentStage={currentStage}
+      />
+    );
   }
   return (
     <div className="page-enter">
+      <ResultsDashboard
+        result={result}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
         jobId={jobId}
         onScoreUpdate={(newScore, newDecision, delta) => {
           setResult((prev) => ({
             ...prev,
+            score_breakdown: {
+              ...prev.score_breakdown,
+              final_score: newScore,
+              decision: newDecision,
+            },
           }));
         }}
       />

frontend/src/pages/EntityOnboardingPage.jsx ADDED Viewed

	@@ -0,0 +1,717 @@

+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  ArrowRight,
+  ArrowLeft,
+  Building2,
+  FileText,
+  CheckCircle,
+} from "lucide-react";
+const SECTORS = [
+  "Manufacturing",
+  "Textiles",
+  "Chemicals",
+  "Infrastructure",
+  "Real Estate",
+  "Trading",
+  "Services",
+  "NBFC",
+  "Other",
+];
+const CONSTITUTIONS = [
+  "Private Limited",
+  "Public Limited",
+  "LLP",
+  "Partnership",
+  "Proprietorship",
+];
+const LOAN_TYPES = [
+  "Term Loan",
+  "Working Capital",
+  "Cash Credit",
+  "Letter of Credit",
+  "Bank Guarantee",
+  "Mixed Facility",
+];
+const COLLATERAL_TYPES = [
+  "Immovable Property",
+  "Plant & Machinery",
+  "Receivables",
+  "FD Lien",
+  "Unsecured",
+  "Mixed",
+];
+const CIN_REGEX = /^[UL]\d{5}[A-Z]{2}\d{4}[A-Z]{3}\d{6}$/;
+const PAN_REGEX = /^[A-Z]{5}\d{4}[A-Z]$/;
+export default function EntityOnboardingPage() {
+  const navigate = useNavigate();
+  const [step, setStep] = useState(1);
+  const [errors, setErrors] = useState({});
+  const [entity, setEntity] = useState({
+    companyName: "",
+    cin: "",
+    pan: "",
+    gstin: "",
+    sector: "",
+    subSector: "",
+    annualTurnover: "",
+    yearsInOperation: "",
+    constitution: "",
+  });
+  const [loan, setLoan] = useState({
+    loanType: "",
+    loanAmount: "",
+    tenure: "",
+    interestRate: "",
+    purpose: "",
+    collateralType: "",
+  });
+  function updateEntity(field, value) {
+    setEntity((prev) => ({ ...prev, [field]: value }));
+    if (errors[field])
+      setErrors((prev) => {
+        const n = { ...prev };
+        delete n[field];
+        return n;
+      });
+  }
+  function updateLoan(field, value) {
+    setLoan((prev) => ({ ...prev, [field]: value }));
+    if (errors[field])
+      setErrors((prev) => {
+        const n = { ...prev };
+        delete n[field];
+        return n;
+      });
+  }
+  function validateStep1() {
+    const errs = {};
+    if (!entity.companyName.trim())
+      errs.companyName = "Company name is required";
+    if (entity.cin && !CIN_REGEX.test(entity.cin.toUpperCase()))
+      errs.cin = "Invalid CIN format";
+    if (entity.pan && !PAN_REGEX.test(entity.pan.toUpperCase()))
+      errs.pan = "Invalid PAN format (e.g. ABCDE1234F)";
+    if (!entity.sector) errs.sector = "Please select a sector";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+  function validateStep2() {
+    const errs = {};
+    if (!loan.loanType) errs.loanType = "Please select loan type";
+    if (!loan.loanAmount || Number(loan.loanAmount) <= 0)
+      errs.loanAmount = "Loan amount is required";
+    if (loan.purpose && loan.purpose.length > 500)
+      errs.purpose = "Max 500 characters";
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  }
+  function handleNext() {
+    if (validateStep1()) setStep(2);
+  }
+  function handleProceed() {
+    if (validateStep2()) {
+      // Store form data in sessionStorage for display purposes
+      sessionStorage.setItem("bluefin_entity", JSON.stringify(entity));
+      sessionStorage.setItem("bluefin_loan", JSON.stringify(loan));
+      navigate("/upload", {
+        state: { companyName: entity.companyName.trim() },
+      });
+    }
+  }
+  function FieldError({ field }) {
+    if (!errors[field]) return null;
+    return (
+      <span
+        style={{
+          color: "var(--danger)",
+          fontSize: "11px",
+          marginTop: "4px",
+          display: "block",
+        }}
+      >
+        {errors[field]}
+      </span>
+    );
+  }
+  const inputStyle = {
+    borderRadius: "var(--radius-lg)",
+    padding: "12px 16px",
+    width: "100%",
+  };
+  const labelStyle = {
+    display: "block",
+    marginBottom: "6px",
+    fontSize: "12px",
+    fontWeight: 600,
+    color: "var(--text-secondary)",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+  };
+  return (
+    <div
+      className="page-enter"
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: "32px 24px",
+      }}
+    >
+      {/* ── Progress Steps ── */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0",
+          marginBottom: "48px",
+          width: "100%",
+          maxWidth: "700px",
+        }}
+      >
+        {["Entity Details", "Documents", "Analysis", "Report"].map(
+          (label, i) => {
+            const stepNum = i + 1;
+            const isActive = (stepNum === 1 && step <= 2) || false;
+            const isCompleted = false;
+            let status = "pending";
+            if (stepNum === 1 && step >= 1)
+              status = step > 2 ? "completed" : "active";
+            if (stepNum === 2 && step > 2) status = "active";
+            return (
+              <div
+                key={label}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  flex: i < 3 ? 1 : "none",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    minWidth: "fit-content",
+                  }}
+                >
+                  <div
+                    className="step-indicator-dot"
+                    style={{
+                      width: "36px",
+                      height: "36px",
+                      borderRadius: "50%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "13px",
+                      fontWeight: 700,
+                      transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+                      background:
+                        status === "active"
+                          ? "var(--accent)"
+                          : status === "completed"
+                            ? "var(--success)"
+                            : "var(--bg-elevated)",
+                      border: `2px solid ${status === "active" ? "var(--accent)" : status === "completed" ? "var(--success)" : "var(--border)"}`,
+                      color:
+                        status === "active" || status === "completed"
+                          ? "#fff"
+                          : "var(--text-muted)",
+                      boxShadow:
+                        status === "active"
+                          ? "0 0 20px rgba(59,130,246,0.3)"
+                          : "none",
+                    }}
+                  >
+                    {status === "completed" ? (
+                      <CheckCircle size={16} />
+                    ) : (
+                      stepNum
+                    )}
+                  </div>
+                  <span
+                    style={{
+                      fontSize: "11px",
+                      fontWeight: status === "active" ? 600 : 400,
+                      color:
+                        status === "active"
+                          ? "var(--text-primary)"
+                          : "var(--text-muted)",
+                      marginTop: "6px",
+                      whiteSpace: "nowrap",
+                      transition: "all 0.3s ease",
+                    }}
+                  >
+                    {label}
+                  </span>
+                </div>
+                {i < 3 && (
+                  <div
+                    style={{
+                      flex: 1,
+                      height: "2px",
+                      margin: "0 12px",
+                      marginBottom: "20px",
+                      borderRadius: "1px",
+                      background: "var(--border)",
+                      position: "relative",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        width:
+                          status === "completed" || (stepNum === 1 && step >= 2)
+                            ? "100%"
+                            : "0%",
+                        background: "var(--accent)",
+                        transition: "width 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
+                        borderRadius: "1px",
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          },
+        )}
+      </div>
+      {/* ── Form Card ── */}
+      <div
+        className="card"
+        style={{
+          width: "100%",
+          maxWidth: "700px",
+          padding: "40px",
+          borderRadius: "var(--radius-xl)",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Animated step transition */}
+        <div
+          style={{
+            display: "flex",
+            transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+            transform: `translateX(${step === 1 ? "0" : "-100%"})`,
+            width: "200%",
+          }}
+        >
+          {/* ═══ STEP 1: Entity Details ═══ */}
+          <div style={{ width: "50%", flexShrink: 0, paddingRight: "40px" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                marginBottom: "32px",
+              }}
+            >
+              <div
+                style={{
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "12px",
+                  background: "rgba(59,130,246,0.1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Building2 size={20} style={{ color: "var(--accent)" }} />
+              </div>
+              <div>
+                <h2 style={{ fontSize: "20px", marginBottom: "2px" }}>
+                  Entity Details
+                </h2>
+                <p style={{ fontSize: "12px", color: "var(--text-muted)" }}>
+                  Basic information about the borrower
+                </p>
+              </div>
+            </div>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "16px",
+              }}
+            >
+              {/* Company Name — full width */}
+              <div style={{ gridColumn: "1 / -1" }}>
+                <label style={labelStyle}>
+                  Company Name <span style={{ color: "var(--danger)" }}>*</span>
+                </label>
+                <input
+                  className="input"
+                  style={inputStyle}
+                  value={entity.companyName}
+                  onChange={(e) => updateEntity("companyName", e.target.value)}
+                  placeholder="e.g. Mehta Textiles Pvt Ltd"
+                />
+                <FieldError field="companyName" />
+              </div>
+              <div>
+                <label style={labelStyle}>CIN</label>
+                <input
+                  className="input"
+                  style={inputStyle}
+                  value={entity.cin}
+                  onChange={(e) =>
+                    updateEntity("cin", e.target.value.toUpperCase())
+                  }
+                  placeholder="U12345AB1234CDE567890"
+                  maxLength={21}
+                />
+                <FieldError field="cin" />
+              </div>
+              <div>
+                <label style={labelStyle}>PAN</label>
+                <input
+                  className="input"
+                  style={inputStyle}
+                  value={entity.pan}
+                  onChange={(e) =>
+                    updateEntity("pan", e.target.value.toUpperCase())
+                  }
+                  placeholder="ABCDE1234F"
+                  maxLength={10}
+                />
+                <FieldError field="pan" />
+              </div>
+              <div>
+                <label style={labelStyle}>
+                  GSTIN{" "}
+                  <span style={{ color: "var(--text-muted)", fontWeight: 400 }}>
+                    (optional)
+                  </span>
+                </label>
+                <input
+                  className="input"
+                  style={inputStyle}
+                  value={entity.gstin}
+                  onChange={(e) =>
+                    updateEntity("gstin", e.target.value.toUpperCase())
+                  }
+                  placeholder="22ABCDE1234F1Z5"
+                  maxLength={15}
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>
+                  Sector <span style={{ color: "var(--danger)" }}>*</span>
+                </label>
+                <select
+                  className="input"
+                  style={inputStyle}
+                  value={entity.sector}
+                  onChange={(e) => updateEntity("sector", e.target.value)}
+                >
+                  <option value="">Select sector</option>
+                  {SECTORS.map((s) => (
+                    <option key={s} value={s}>
+                      {s}
+                    </option>
+                  ))}
+                </select>
+                <FieldError field="sector" />
+              </div>
+              <div>
+                <label style={labelStyle}>
+                  Sub-sector{" "}
+                  <span style={{ color: "var(--text-muted)", fontWeight: 400 }}>
+                    (optional)
+                  </span>
+                </label>
+                <input
+                  className="input"
+                  style={inputStyle}
+                  value={entity.subSector}
+                  onChange={(e) => updateEntity("subSector", e.target.value)}
+                  placeholder="e.g. Synthetic fibres"
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>
+                  Constitution <span style={{ color: "var(--danger)" }}>*</span>
+                </label>
+                <select
+                  className="input"
+                  style={inputStyle}
+                  value={entity.constitution}
+                  onChange={(e) => updateEntity("constitution", e.target.value)}
+                >
+                  <option value="">Select constitution</option>
+                  {CONSTITUTIONS.map((c) => (
+                    <option key={c} value={c}>
+                      {c}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label style={labelStyle}>Annual Turnover (₹ Cr)</label>
+                <input
+                  className="input"
+                  type="number"
+                  style={inputStyle}
+                  value={entity.annualTurnover}
+                  onChange={(e) =>
+                    updateEntity("annualTurnover", e.target.value)
+                  }
+                  placeholder="e.g. 150"
+                  min="0"
+                  step="0.01"
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>Years in Operation</label>
+                <input
+                  className="input"
+                  type="number"
+                  style={inputStyle}
+                  value={entity.yearsInOperation}
+                  onChange={(e) =>
+                    updateEntity("yearsInOperation", e.target.value)
+                  }
+                  placeholder="e.g. 12"
+                  min="0"
+                />
+              </div>
+            </div>
+            <button
+              onClick={handleNext}
+              className="btn btn-primary w-full"
+              style={{
+                marginTop: "32px",
+                padding: "14px",
+                borderRadius: "var(--radius-lg)",
+                fontSize: "15px",
+              }}
+            >
+              Next — Loan Details <ArrowRight size={16} />
+            </button>
+          </div>
+          {/* ═══ STEP 2: Loan Details ═══ */}
+          <div style={{ width: "50%", flexShrink: 0, paddingLeft: "40px" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                marginBottom: "32px",
+              }}
+            >
+              <div
+                style={{
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "12px",
+                  background: "rgba(59,130,246,0.1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <FileText size={20} style={{ color: "var(--accent)" }} />
+              </div>
+              <div>
+                <h2 style={{ fontSize: "20px", marginBottom: "2px" }}>
+                  Loan Details
+                </h2>
+                <p style={{ fontSize: "12px", color: "var(--text-muted)" }}>
+                  Proposed facility information
+                </p>
+              </div>
+            </div>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "16px",
+              }}
+            >
+              <div>
+                <label style={labelStyle}>
+                  Loan Type <span style={{ color: "var(--danger)" }}>*</span>
+                </label>
+                <select
+                  className="input"
+                  style={inputStyle}
+                  value={loan.loanType}
+                  onChange={(e) => updateLoan("loanType", e.target.value)}
+                >
+                  <option value="">Select type</option>
+                  {LOAN_TYPES.map((t) => (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  ))}
+                </select>
+                <FieldError field="loanType" />
+              </div>
+              <div>
+                <label style={labelStyle}>
+                  Loan Amount (₹ Cr){" "}
+                  <span style={{ color: "var(--danger)" }}>*</span>
+                </label>
+                <input
+                  className="input"
+                  type="number"
+                  style={inputStyle}
+                  value={loan.loanAmount}
+                  onChange={(e) => updateLoan("loanAmount", e.target.value)}
+                  placeholder="e.g. 25"
+                  min="0"
+                  step="0.01"
+                />
+                <FieldError field="loanAmount" />
+              </div>
+              <div>
+                <label style={labelStyle}>Tenure (months)</label>
+                <input
+                  className="input"
+                  type="number"
+                  style={inputStyle}
+                  value={loan.tenure}
+                  onChange={(e) => updateLoan("tenure", e.target.value)}
+                  placeholder="e.g. 60"
+                  min="1"
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>Proposed Interest Rate (%)</label>
+                <input
+                  className="input"
+                  type="number"
+                  style={inputStyle}
+                  value={loan.interestRate}
+                  onChange={(e) => updateLoan("interestRate", e.target.value)}
+                  placeholder="e.g. 10.5"
+                  min="0"
+                  step="0.1"
+                />
+              </div>
+              <div>
+                <label style={labelStyle}>Collateral Type</label>
+                <select
+                  className="input"
+                  style={inputStyle}
+                  value={loan.collateralType}
+                  onChange={(e) => updateLoan("collateralType", e.target.value)}
+                >
+                  <option value="">Select collateral</option>
+                  {COLLATERAL_TYPES.map((c) => (
+                    <option key={c} value={c}>
+                      {c}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div style={{ gridColumn: "1 / -1" }}>
+                <label style={labelStyle}>
+                  Purpose of Loan{" "}
+                  <span style={{ color: "var(--text-muted)", fontWeight: 400 }}>
+                    (max 500 chars)
+                  </span>
+                </label>
+                <textarea
+                  className="input"
+                  style={{
+                    ...inputStyle,
+                    minHeight: "80px",
+                    resize: "vertical",
+                  }}
+                  value={loan.purpose}
+                  onChange={(e) => updateLoan("purpose", e.target.value)}
+                  placeholder="Brief description of how the funds will be used..."
+                  maxLength={500}
+                />
+                <FieldError field="purpose" />
+                <span
+                  style={{
+                    fontSize: "11px",
+                    color: "var(--text-muted)",
+                    float: "right",
+                  }}
+                >
+                  {loan.purpose.length}/500
+                </span>
+              </div>
+            </div>
+            <div style={{ display: "flex", gap: "12px", marginTop: "32px" }}>
+              <button
+                onClick={() => {
+                  setStep(1);
+                  setErrors({});
+                }}
+                className="btn btn-secondary"
+                style={{
+                  padding: "14px 24px",
+                  borderRadius: "var(--radius-lg)",
+                  fontSize: "15px",
+                }}
+              >
+                <ArrowLeft size={16} /> Back
+              </button>
+              <button
+                onClick={handleProceed}
+                className="btn btn-primary"
+                style={{
+                  flex: 1,
+                  padding: "14px",
+                  borderRadius: "var(--radius-lg)",
+                  fontSize: "15px",
+                }}
+              >
+                Proceed to Document Upload <ArrowRight size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/LandingPage.jsx CHANGED Viewed

@@ -1,6 +1,13 @@
 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import { ArrowRight, Shield, Brain, Network, Search, FileText } from "lucide-react";
 /* ─── Animated counter on scroll ─── */
 function Counter({ target, suffix = "" }) {
@@ -203,10 +210,7 @@ export default function LandingPage() {
           }}
         >
           Credit decisions,{" "}
-          <em
-            className="serif-italic"
-            style={{ color: "var(--accent)" }}
-          >
             reimagined
           </em>
         </h1>
@@ -222,15 +226,15 @@ export default function LandingPage() {
           }}
         >
           End-to-end AI credit appraisal for Indian banks. Forensic PDF
-          analysis, LightGBM scoring, autonomous research, and
-          officer-grade memos in one pipeline.
         </p>
         {/* CTAs */}
         <div className="flex gap-md" style={{ marginBottom: "48px" }}>
           <button
             className="btn btn-primary btn-lg"
-            onClick={() => navigate("/upload")}
           >
             Get Started <ArrowRight size={18} />
           </button>
@@ -385,7 +389,12 @@ export default function LandingPage() {
               key={step.n}
               className="card"
               style={{
-                borderRadius: i === 0 ? "var(--radius-lg) 0 0 var(--radius-lg)" : i === 2 ? "0 var(--radius-lg) var(--radius-lg) 0" : "0",
                 borderLeft: i > 0 ? "none" : undefined,
               }}
             >
@@ -412,7 +421,13 @@ export default function LandingPage() {
               >
                 {step.title}
               </h3>
-              <p style={{ color: "var(--text-muted)", fontSize: "13px", lineHeight: 1.6 }}>
                 {step.body}
               </p>
             </div>
@@ -459,10 +474,7 @@ export default function LandingPage() {
                 {slide.tag}
               </span>
             </div>
-            <h3
-              className="serif"
-              style={{ fontSize: "20px", lineHeight: 1.3 }}
-            >
               {slide.title}
             </h3>
             <p
@@ -486,7 +498,8 @@ export default function LandingPage() {
                     width: i === activeSlide ? "28px" : "8px",
                     height: "8px",
                     borderRadius: "var(--radius-full)",
-                    background: i === activeSlide ? slide.accent : "var(--bg-elevated)",
                     border: "none",
                     cursor: "pointer",
                     transition: "all 0.3s ease",
@@ -509,14 +522,21 @@ export default function LandingPage() {
                     padding: "16px 20px",
                     borderRadius: "var(--radius-md)",
                     border: `1px solid ${i === activeSlide ? "var(--border-hover)" : "transparent"}`,
-                    background: i === activeSlide ? "var(--bg-surface)" : "transparent",
                     cursor: "pointer",
                     transition: "all 0.2s ease",
                   }}
                 >
-                  <div className="flex items-center gap-sm" style={{ marginBottom: "4px" }}>
                     <Icon size={14} style={{ color: s.accent, opacity: 0.7 }} />
-                    <span className="label" style={{ color: "var(--text-muted)" }}>
                       {s.tag.split("—")[0].trim()}
                     </span>
                   </div>
@@ -524,7 +544,10 @@ export default function LandingPage() {
                     style={{
                       fontSize: "14px",
                       fontWeight: 500,
-                      color: i === activeSlide ? "var(--text-primary)" : "var(--text-muted)",
                       transition: "color 0.2s",
                     }}
                   >
@@ -608,7 +631,13 @@ export default function LandingPage() {
                 >
                   {f.title}
                 </h3>
-                <p style={{ color: "var(--text-muted)", fontSize: "13px", lineHeight: 1.6 }}>
                   {f.body}
                 </p>
               </div>
@@ -631,7 +660,10 @@ export default function LandingPage() {
             overflow: "hidden",
           }}
         >
-          <div className="eyebrow" style={{ marginBottom: "20px", justifyContent: "center" }}>
             Get started today
           </div>
           <h2
@@ -656,7 +688,7 @@ export default function LandingPage() {
           </p>
           <button
             className="btn btn-primary btn-lg"
-            onClick={() => navigate("/upload")}
           >
             Upload Documents <ArrowRight size={18} />
           </button>

 import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
+import {
+  ArrowRight,
+  Shield,
+  Brain,
+  Network,
+  Search,
+  FileText,
+} from "lucide-react";
 /* ─── Animated counter on scroll ─── */
 function Counter({ target, suffix = "" }) {
           }}
         >
           Credit decisions,{" "}
+          <em className="serif-italic" style={{ color: "var(--accent)" }}>
             reimagined
           </em>
         </h1>
           }}
         >
           End-to-end AI credit appraisal for Indian banks. Forensic PDF
+          analysis, LightGBM scoring, autonomous research, and officer-grade
+          memos in one pipeline.
         </p>
         {/* CTAs */}
         <div className="flex gap-md" style={{ marginBottom: "48px" }}>
           <button
             className="btn btn-primary btn-lg"
+            onClick={() => navigate("/onboard")}
           >
             Get Started <ArrowRight size={18} />
           </button>
               key={step.n}
               className="card"
               style={{
+                borderRadius:
+                  i === 0
+                    ? "var(--radius-lg) 0 0 var(--radius-lg)"
+                    : i === 2
+                      ? "0 var(--radius-lg) var(--radius-lg) 0"
+                      : "0",
                 borderLeft: i > 0 ? "none" : undefined,
               }}
             >
               >
                 {step.title}
               </h3>
+              <p
+                style={{
+                  color: "var(--text-muted)",
+                  fontSize: "13px",
+                  lineHeight: 1.6,
+                }}
+              >
                 {step.body}
               </p>
             </div>
                 {slide.tag}
               </span>
             </div>
+            <h3 className="serif" style={{ fontSize: "20px", lineHeight: 1.3 }}>
               {slide.title}
             </h3>
             <p
                     width: i === activeSlide ? "28px" : "8px",
                     height: "8px",
                     borderRadius: "var(--radius-full)",
+                    background:
+                      i === activeSlide ? slide.accent : "var(--bg-elevated)",
                     border: "none",
                     cursor: "pointer",
                     transition: "all 0.3s ease",
                     padding: "16px 20px",
                     borderRadius: "var(--radius-md)",
                     border: `1px solid ${i === activeSlide ? "var(--border-hover)" : "transparent"}`,
+                    background:
+                      i === activeSlide ? "var(--bg-surface)" : "transparent",
                     cursor: "pointer",
                     transition: "all 0.2s ease",
                   }}
                 >
+                  <div
+                    className="flex items-center gap-sm"
+                    style={{ marginBottom: "4px" }}
+                  >
                     <Icon size={14} style={{ color: s.accent, opacity: 0.7 }} />
+                    <span
+                      className="label"
+                      style={{ color: "var(--text-muted)" }}
+                    >
                       {s.tag.split("—")[0].trim()}
                     </span>
                   </div>
                     style={{
                       fontSize: "14px",
                       fontWeight: 500,
+                      color:
+                        i === activeSlide
+                          ? "var(--text-primary)"
+                          : "var(--text-muted)",
                       transition: "color 0.2s",
                     }}
                   >
                 >
                   {f.title}
                 </h3>
+                <p
+                  style={{
+                    color: "var(--text-muted)",
+                    fontSize: "13px",
+                    lineHeight: 1.6,
+                  }}
+                >
                   {f.body}
                 </p>
               </div>
             overflow: "hidden",
           }}
         >
+          <div
+            className="eyebrow"
+            style={{ marginBottom: "20px", justifyContent: "center" }}
+          >
             Get started today
           </div>
           <h2
           </p>
           <button
             className="btn btn-primary btn-lg"
+            onClick={() => navigate("/onboard")}
           >
             Upload Documents <ArrowRight size={18} />
           </button>

frontend/src/pages/UploadPage.jsx CHANGED Viewed

@@ -1,22 +1,69 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ArrowRight, Loader } from "lucide-react";
 import FileDropZone from "../components/FileDropZone.jsx";
 import { createJob, uploadFiles } from "../api/client.js";
 import { useAuth } from "../context/AuthContext.jsx";
 const FILE_ZONES = [
-  { fileType: "annual_report", label: "Annual Report", description: "Digital or scanned PDF", acceptedFormats: ".pdf", required: true },
-  { fileType: "gst_3b", label: "GSTR-3B", description: "Monthly summary return", acceptedFormats: ".csv,.xlsx", required: true },
-  { fileType: "gst_2a", label: "GSTR-2A", description: "Auto-populated inward supplies", acceptedFormats: ".csv,.xlsx", required: false, fraudCritical: true },
-  { fileType: "bank_statement", label: "Bank Statement", description: "12–24 months CSV/XLSX", acceptedFormats: ".csv,.xlsx", required: true },
-  { fileType: "gst_1", label: "GSTR-1", description: "Outward supply return", acceptedFormats: ".csv,.xlsx", required: false },
-  { fileType: "itr", label: "ITR Filing", description: "Income Tax Return PDF", acceptedFormats: ".pdf", required: false },
-  { fileType: "mca", label: "MCA Filing", description: "Director & shareholding data", acceptedFormats: ".pdf", required: false },
 ];
 const REQUIRED_KEYS = ["annual_report", "gst_3b", "bank_statement"];
-const LABELS = { annual_report: "Annual Report", gst_3b: "GSTR-3B", bank_statement: "Bank Statement" };
 function computeFraudCoverage(files) {
   if (!files.gst_3b) return 20;
@@ -27,8 +74,10 @@ function computeFraudCoverage(files) {
 export default function UploadPage() {
   const navigate = useNavigate();
   const { user } = useAuth();
-  const [companyName, setCompanyName] = useState("");
   const [files, setFiles] = useState({});
   const [isLoading, setIsLoading] = useState(false);
   const [uploadError, setUploadError] = useState(null);
@@ -49,9 +98,15 @@ export default function UploadPage() {
   }
   async function handleSubmit() {
-    if (!companyName.trim()) { setUploadError("Please enter the company name."); return; }
     for (const key of REQUIRED_KEYS) {
-      if (!files[key]) { setUploadError(`${LABELS[key]} is required.`); return; }
     }
     setIsLoading(true);
@@ -74,244 +129,482 @@ export default function UploadPage() {
   const canSubmit = companyName.trim() && requiredDone === 3 && !isLoading;
   return (
-    <div className="page-enter" style={{ minHeight: "100vh", display: "flex" }}>
-      {/* ── Left panel ── */}
       <div
-        className="hide-mobile"
         style={{
-          width: "380px",
-          flexShrink: 0,
           display: "flex",
-          flexDirection: "column",
-          justifyContent: "flex-start",
-          gap: "64px",
-          padding: "32px 48px",
-          borderRight: "1px solid var(--border)",
-          position: "relative",
-          overflow: "hidden",
-          background: "radial-gradient(ellipse 100% 60% at 30% 20%, rgba(59,130,246,0.04) 0%, transparent 60%), var(--bg-secondary)",
         }}
       >
-        <div>
-          <div className="eyebrow" style={{ marginBottom: "24px" }}>
-            New Analysis
-          </div>
-          <h1 style={{ fontSize: "clamp(1.6rem, 3vw, 2.2rem)", marginBottom: "16px" }}>
-            Feed the pipeline.
-            <br />
-            <em className="serif-italic" style={{ color: "var(--accent)" }}>
-              Get the full picture.
-            </em>
-          </h1>
-          <p style={{ color: "var(--text-muted)", fontSize: "13px", lineHeight: 1.7, maxWidth: "280px" }}>
-            Three documents are enough to trigger all 12 pipeline stages — fraud forensics, ML scoring, research agent, entity graph, and CAM generation.
-          </p>
-        </div>
-        {/* Progress indicator */}
-        <div>
-          <div className="flex justify-between items-center" style={{ marginBottom: "10px" }}>
-            <span className="label">Documents uploaded</span>
-            <span style={{ fontSize: "12px", fontWeight: 600, color: "var(--accent)" }}>
-              {uploadedCount} / {FILE_ZONES.length}
-            </span>
-          </div>
-          <div className="progress-track">
-            <div
-              className="progress-fill"
-              style={{ width: `${(uploadedCount / FILE_ZONES.length) * 100}%` }}
-            />
-          </div>
-          <div className="flex flex-col gap-xs" style={{ marginTop: "16px" }}>
-            {FILE_ZONES.map((z) => {
-              const done = !!files[z.fileType];
-              return (
-                <div key={z.fileType} className="flex items-center gap-sm">
                   <div
                     style={{
-                      width: "20px",
-                      height: "20px",
-                      borderRadius: "var(--radius-full)",
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      fontSize: "11px",
-                      fontWeight: 600,
-                      flexShrink: 0,
-                      transition: "all 0.3s ease",
-                      background: done ? "var(--success-subtle)" : "rgba(255,255,255,0.04)",
-                      border: `1px solid ${done ? "var(--success)" : "var(--border)"}`,
-                      color: done ? "var(--success)" : "var(--text-muted)",
                     }}
                   >
-                    {done ? "✓" : "·"}
                   </div>
                   <span
                     style={{
-                      fontSize: "12px",
-                      transition: "color 0.2s",
-                      color: done ? "var(--text-primary)" : "var(--text-muted)",
                     }}
                   >
-                    {z.label}
-                    {z.required && (
-                      <span style={{ color: done ? "var(--text-muted)" : "var(--danger)", marginLeft: "3px" }}>*</span>
-                    )}
                   </span>
                 </div>
-              );
-            })}
-          </div>
-        </div>
       </div>
-      {/* ── Right panel / main form ── */}
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "flex-start",
-          padding: "48px 40px",
-          maxWidth: "720px",
-          overflowY: "auto",
-        }}
-      >
-        {/* Mobile headline */}
-        <div className="show-mobile-only" style={{ marginBottom: "32px" }}>
-          <div className="eyebrow" style={{ marginBottom: "12px" }}>New Analysis</div>
-          <h2>Upload documents to begin</h2>
-        </div>
-        {/* Company name */}
-        <div style={{ marginBottom: "32px" }}>
-          <label className="label" style={{ display: "block", marginBottom: "10px" }}>
-            Company Name
-          </label>
-          <input
-            type="text"
-            value={companyName}
-            onChange={(e) => { setCompanyName(e.target.value); if (uploadError) setUploadError(null); }}
-            placeholder="e.g. Mehta Textiles Pvt Ltd"
-            className="input"
-            style={{ borderRadius: "var(--radius-lg)", padding: "14px 20px" }}
-          />
-        </div>
-        {/* Section — Required */}
-        <div className="flex items-center gap-md" style={{ marginBottom: "16px" }}>
-          <span className="label">Required Documents</span>
-          <div style={{ flex: 1, height: "1px", background: "var(--border)" }} />
-          <span className="badge badge-danger" style={{ fontSize: "10px" }}>{requiredDone} / 3</span>
-        </div>
-        <div className="grid grid-3" style={{ gap: "12px", marginBottom: "20px" }}>
-          {FILE_ZONES.filter((z) => z.required).map((zone) => (
-            <FileDropZone
-              key={zone.fileType}
-              {...zone}
-              file={files[zone.fileType] || null}
-              onFileSelect={(f) => handleFileSelect(zone.fileType, f)}
-            />
-          ))}
         </div>
-        {/* Fraud Coverage Indicator */}
         <div
-          className="card flex items-center gap-md"
           style={{
-            padding: "12px 16px",
-            marginBottom: "32px",
-            borderColor: fraudCoverage === 100 ? "rgba(34,197,94,0.3)" : fraudCoverage >= 85 ? "rgba(59,130,246,0.3)" : "rgba(234,179,8,0.3)",
-            background: fraudCoverage === 100 ? "var(--success-subtle)" : fraudCoverage >= 85 ? "rgba(59,130,246,0.05)" : "var(--warning-subtle)",
           }}
         >
-          <div style={{ flex: 1 }}>
-            <div className="flex items-center gap-sm" style={{ marginBottom: "6px" }}>
-              <span className="label">Fraud Check Coverage</span>
-              <span style={{ fontSize: "12px", fontWeight: 700, color: fraudCoverage === 100 ? "var(--success)" : fraudCoverage >= 85 ? "var(--accent)" : "var(--warning)" }}>
-                {fraudCoverage}%
-              </span>
             </div>
-            <div className="progress-track" style={{ height: "4px" }}>
-              <div className="progress-fill" style={{ width: `${fraudCoverage}%`, background: fraudCoverage === 100 ? "var(--success)" : fraudCoverage >= 85 ? "var(--accent)" : "var(--warning)" }} />
-            </div>
-            {fraudCoverage < 85 && (
-              <p style={{ fontSize: "11px", color: "var(--warning)", marginTop: "6px" }}>
-                {!files.gst_2a ? "Upload GSTR-2A to enable ITC mismatch fraud check (+35% coverage)" : "Upload GSTR-1 to enable HSN anomaly check (+15% coverage)"}
-              </p>
-            )}
           </div>
-        </div>
-        {/* Section — Optional */}
-        <div className="flex items-center gap-md" style={{ marginBottom: "16px" }}>
-          <span className="label">Optional Documents</span>
-          <div style={{ flex: 1, height: "1px", background: "var(--border)" }} />
-          <span className="label">Improves accuracy</span>
-        </div>
-        <div className="grid grid-2" style={{ gap: "12px", marginBottom: "32px" }}>
-          {FILE_ZONES.filter((z) => !z.required).map((zone) => (
-            <FileDropZone
-              key={zone.fileType}
-              {...zone}
-              file={files[zone.fileType] || null}
-              onFileSelect={(f) => handleFileSelect(zone.fileType, f)}
             />
-          ))}
-        </div>
-        {/* Error */}
-        {uploadError && (
           <div
-            className="card flex items-center gap-sm"
             style={{
-              background: "var(--danger-subtle)",
-              borderColor: "rgba(239,68,68,0.25)",
               padding: "12px 16px",
-              marginBottom: "16px",
-              borderRadius: "var(--radius-md)",
-              color: "var(--danger)",
-              fontSize: "13px",
             }}
           >
-            {uploadError}
           </div>
-        )}
-        {/* Submit */}
-        <button
-          onClick={handleSubmit}
-          disabled={!canSubmit}
-          className={`btn w-full ${canSubmit ? "btn-primary" : ""}`}
-          style={{
-            padding: "16px",
-            borderRadius: "var(--radius-lg)",
-            fontSize: "15px",
-            ...(!canSubmit ? {
-              background: "var(--bg-elevated)",
-              border: "1px solid var(--border)",
-              color: "var(--text-muted)",
-              cursor: "not-allowed",
-              boxShadow: "none",
-            } : {}),
-          }}
-        >
-          {isLoading ? (
-            <span className="flex items-center justify-center gap-sm">
-              <Loader size={16} className="animate-spin" />
-              Starting pipeline…
-            </span>
-          ) : (
-            <>Run Credit Analysis <ArrowRight size={16} /></>
           )}
-        </button>
-        <p style={{ color: "var(--text-muted)", fontSize: "12px", textAlign: "center", marginTop: "12px" }}>
-          Analysis typically takes 2–4 minutes across 12 pipeline stages.
-        </p>
       </div>
     </div>
   );

 import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { ArrowRight, Loader, CheckCircle } from "lucide-react";
 import FileDropZone from "../components/FileDropZone.jsx";
 import { createJob, uploadFiles } from "../api/client.js";
 import { useAuth } from "../context/AuthContext.jsx";
 const FILE_ZONES = [
+  {
+    fileType: "annual_report",
+    label: "Annual Report",
+    description: "Digital or scanned PDF",
+    acceptedFormats: ".pdf",
+    required: true,
+  },
+  {
+    fileType: "gst_3b",
+    label: "GSTR-3B",
+    description: "Monthly summary return",
+    acceptedFormats: ".csv,.xlsx",
+    required: true,
+  },
+  {
+    fileType: "gst_2a",
+    label: "GSTR-2A",
+    description: "Auto-populated inward supplies",
+    acceptedFormats: ".csv,.xlsx",
+    required: false,
+    fraudCritical: true,
+  },
+  {
+    fileType: "bank_statement",
+    label: "Bank Statement",
+    description: "12–24 months CSV/XLSX",
+    acceptedFormats: ".csv,.xlsx",
+    required: true,
+  },
+  {
+    fileType: "gst_1",
+    label: "GSTR-1",
+    description: "Outward supply return",
+    acceptedFormats: ".csv,.xlsx",
+    required: false,
+  },
+  {
+    fileType: "itr",
+    label: "ITR Filing",
+    description: "Income Tax Return PDF",
+    acceptedFormats: ".pdf",
+    required: false,
+  },
+  {
+    fileType: "mca",
+    label: "MCA Filing",
+    description: "Director & shareholding data",
+    acceptedFormats: ".pdf",
+    required: false,
+  },
 ];
 const REQUIRED_KEYS = ["annual_report", "gst_3b", "bank_statement"];
+const LABELS = {
+  annual_report: "Annual Report",
+  gst_3b: "GSTR-3B",
+  bank_statement: "Bank Statement",
+};
 function computeFraudCoverage(files) {
   if (!files.gst_3b) return 20;
 export default function UploadPage() {
   const navigate = useNavigate();
+  const location = useLocation();
   const { user } = useAuth();
+  const passedName = location.state?.companyName || "";
+  const [companyName, setCompanyName] = useState(passedName);
   const [files, setFiles] = useState({});
   const [isLoading, setIsLoading] = useState(false);
   const [uploadError, setUploadError] = useState(null);
   }
   async function handleSubmit() {
+    if (!companyName.trim()) {
+      setUploadError("Please enter the company name.");
+      return;
+    }
     for (const key of REQUIRED_KEYS) {
+      if (!files[key]) {
+        setUploadError(`${LABELS[key]} is required.`);
+        return;
+      }
     }
     setIsLoading(true);
   const canSubmit = companyName.trim() && requiredDone === 3 && !isLoading;
   return (
+    <div
+      className="page-enter"
+      style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}
+    >
+      {/* ── Journey Progress Indicator ── */}
       <div
         style={{
           display: "flex",
+          alignItems: "center",
+          gap: "0",
+          padding: "24px 40px 0",
+          maxWidth: "700px",
+          margin: "0 auto",
+          width: "100%",
         }}
       >
+        {["Entity Details", "Documents", "Analysis", "Report"].map(
+          (label, i) => {
+            const stepNum = i + 1;
+            let status = "pending";
+            if (stepNum === 1) status = "completed";
+            if (stepNum === 2) status = "active";
+            return (
+              <div
+                key={label}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  flex: i < 3 ? 1 : "none",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    minWidth: "fit-content",
+                  }}
+                >
                   <div
                     style={{
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "50%",
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
+                      fontSize: "12px",
+                      fontWeight: 700,
+                      transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+                      background:
+                        status === "active"
+                          ? "var(--accent)"
+                          : status === "completed"
+                            ? "var(--success)"
+                            : "var(--bg-elevated)",
+                      border: `2px solid ${status === "active" ? "var(--accent)" : status === "completed" ? "var(--success)" : "var(--border)"}`,
+                      color:
+                        status === "active" || status === "completed"
+                          ? "#fff"
+                          : "var(--text-muted)",
+                      boxShadow:
+                        status === "active"
+                          ? "0 0 20px rgba(59,130,246,0.3)"
+                          : "none",
                     }}
                   >
+                    {status === "completed" ? (
+                      <CheckCircle size={14} />
+                    ) : (
+                      stepNum
+                    )}
                   </div>
                   <span
                     style={{
+                      fontSize: "10px",
+                      fontWeight: status === "active" ? 600 : 400,
+                      color:
+                        status === "active"
+                          ? "var(--text-primary)"
+                          : "var(--text-muted)",
+                      marginTop: "4px",
+                      whiteSpace: "nowrap",
                     }}
                   >
+                    {label}
                   </span>
                 </div>
+                {i < 3 && (
+                  <div
+                    style={{
+                      flex: 1,
+                      height: "2px",
+                      margin: "0 8px",
+                      marginBottom: "18px",
+                      background: "var(--border)",
+                      position: "relative",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        width: status === "completed" ? "100%" : "0%",
+                        background: "var(--accent)",
+                        transition: "width 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          },
+        )}
       </div>
+      <div style={{ flex: 1, display: "flex" }}>
+        {/* ── Left panel ── */}
+        <div
+          className="hide-mobile"
+          style={{
+            width: "380px",
+            flexShrink: 0,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            gap: "64px",
+            padding: "32px 48px",
+            borderRight: "1px solid var(--border)",
+            position: "relative",
+            overflow: "hidden",
+            background:
+              "radial-gradient(ellipse 100% 60% at 30% 20%, rgba(59,130,246,0.04) 0%, transparent 60%), var(--bg-secondary)",
+          }}
+        >
+          <div>
+            <div className="eyebrow" style={{ marginBottom: "24px" }}>
+              New Analysis
+            </div>
+            <h1
+              style={{
+                fontSize: "clamp(1.6rem, 3vw, 2.2rem)",
+                marginBottom: "16px",
+              }}
+            >
+              Feed the pipeline.
+              <br />
+              <em className="serif-italic" style={{ color: "var(--accent)" }}>
+                Get the full picture.
+              </em>
+            </h1>
+            <p
+              style={{
+                color: "var(--text-muted)",
+                fontSize: "13px",
+                lineHeight: 1.7,
+                maxWidth: "280px",
+              }}
+            >
+              Three documents are enough to trigger all 12 pipeline stages —
+              fraud forensics, ML scoring, research agent, entity graph, and CAM
+              generation.
+            </p>
+          </div>
+          {/* Progress indicator */}
+          <div>
+            <div
+              className="flex justify-between items-center"
+              style={{ marginBottom: "10px" }}
+            >
+              <span className="label">Documents uploaded</span>
+              <span
+                style={{
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  color: "var(--accent)",
+                }}
+              >
+                {uploadedCount} / {FILE_ZONES.length}
+              </span>
+            </div>
+            <div className="progress-track">
+              <div
+                className="progress-fill"
+                style={{
+                  width: `${(uploadedCount / FILE_ZONES.length) * 100}%`,
+                }}
+              />
+            </div>
+            <div className="flex flex-col gap-xs" style={{ marginTop: "16px" }}>
+              {FILE_ZONES.map((z) => {
+                const done = !!files[z.fileType];
+                return (
+                  <div key={z.fileType} className="flex items-center gap-sm">
+                    <div
+                      style={{
+                        width: "20px",
+                        height: "20px",
+                        borderRadius: "var(--radius-full)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: "11px",
+                        fontWeight: 600,
+                        flexShrink: 0,
+                        transition: "all 0.3s ease",
+                        background: done
+                          ? "var(--success-subtle)"
+                          : "rgba(255,255,255,0.04)",
+                        border: `1px solid ${done ? "var(--success)" : "var(--border)"}`,
+                        color: done ? "var(--success)" : "var(--text-muted)",
+                      }}
+                    >
+                      {done ? "✓" : "·"}
+                    </div>
+                    <span
+                      style={{
+                        fontSize: "12px",
+                        transition: "color 0.2s",
+                        color: done
+                          ? "var(--text-primary)"
+                          : "var(--text-muted)",
+                      }}
+                    >
+                      {z.label}
+                      {z.required && (
+                        <span
+                          style={{
+                            color: done ? "var(--text-muted)" : "var(--danger)",
+                            marginLeft: "3px",
+                          }}
+                        >
+                          *
+                        </span>
+                      )}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
         </div>
+        {/* ── Right panel / main form ── */}
         <div
           style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            padding: "48px 40px",
+            maxWidth: "720px",
+            overflowY: "auto",
           }}
         >
+          {/* Mobile headline */}
+          <div className="show-mobile-only" style={{ marginBottom: "32px" }}>
+            <div className="eyebrow" style={{ marginBottom: "12px" }}>
+              New Analysis
             </div>
+            <h2>Upload documents to begin</h2>
           </div>
+          {/* Company name */}
+          <div style={{ marginBottom: "32px" }}>
+            <label
+              className="label"
+              style={{ display: "block", marginBottom: "10px" }}
+            >
+              Company Name
+            </label>
+            <input
+              type="text"
+              value={companyName}
+              onChange={(e) => {
+                setCompanyName(e.target.value);
+                if (uploadError) setUploadError(null);
+              }}
+              placeholder="e.g. Mehta Textiles Pvt Ltd"
+              className="input"
+              style={{ borderRadius: "var(--radius-lg)", padding: "14px 20px" }}
+            />
+          </div>
+          {/* Section — Required */}
+          <div
+            className="flex items-center gap-md"
+            style={{ marginBottom: "16px" }}
+          >
+            <span className="label">Required Documents</span>
+            <div
+              style={{ flex: 1, height: "1px", background: "var(--border)" }}
             />
+            <span className="badge badge-danger" style={{ fontSize: "10px" }}>
+              {requiredDone} / 3
+            </span>
+          </div>
           <div
+            className="grid grid-3"
+            style={{ gap: "12px", marginBottom: "20px" }}
+          >
+            {FILE_ZONES.filter((z) => z.required).map((zone) => (
+              <FileDropZone
+                key={zone.fileType}
+                {...zone}
+                file={files[zone.fileType] || null}
+                onFileSelect={(f) => handleFileSelect(zone.fileType, f)}
+              />
+            ))}
+          </div>
+          {/* Fraud Coverage Indicator */}
+          <div
+            className="card flex items-center gap-md"
             style={{
               padding: "12px 16px",
+              marginBottom: "32px",
+              borderColor:
+                fraudCoverage === 100
+                  ? "rgba(34,197,94,0.3)"
+                  : fraudCoverage >= 85
+                    ? "rgba(59,130,246,0.3)"
+                    : "rgba(234,179,8,0.3)",
+              background:
+                fraudCoverage === 100
+                  ? "var(--success-subtle)"
+                  : fraudCoverage >= 85
+                    ? "rgba(59,130,246,0.05)"
+                    : "var(--warning-subtle)",
             }}
           >
+            <div style={{ flex: 1 }}>
+              <div
+                className="flex items-center gap-sm"
+                style={{ marginBottom: "6px" }}
+              >
+                <span className="label">Fraud Check Coverage</span>
+                <span
+                  style={{
+                    fontSize: "12px",
+                    fontWeight: 700,
+                    color:
+                      fraudCoverage === 100
+                        ? "var(--success)"
+                        : fraudCoverage >= 85
+                          ? "var(--accent)"
+                          : "var(--warning)",
+                  }}
+                >
+                  {fraudCoverage}%
+                </span>
+              </div>
+              <div className="progress-track" style={{ height: "4px" }}>
+                <div
+                  className="progress-fill"
+                  style={{
+                    width: `${fraudCoverage}%`,
+                    background:
+                      fraudCoverage === 100
+                        ? "var(--success)"
+                        : fraudCoverage >= 85
+                          ? "var(--accent)"
+                          : "var(--warning)",
+                  }}
+                />
+              </div>
+              {fraudCoverage < 85 && (
+                <p
+                  style={{
+                    fontSize: "11px",
+                    color: "var(--warning)",
+                    marginTop: "6px",
+                  }}
+                >
+                  {!files.gst_2a
+                    ? "Upload GSTR-2A to enable ITC mismatch fraud check (+35% coverage)"
+                    : "Upload GSTR-1 to enable HSN anomaly check (+15% coverage)"}
+                </p>
+              )}
+            </div>
           </div>
+          {/* Section — Optional */}
+          <div
+            className="flex items-center gap-md"
+            style={{ marginBottom: "16px" }}
+          >
+            <span className="label">Optional Documents</span>
+            <div
+              style={{ flex: 1, height: "1px", background: "var(--border)" }}
+            />
+            <span className="label">Improves accuracy</span>
+          </div>
+          <div
+            className="grid grid-2"
+            style={{ gap: "12px", marginBottom: "32px" }}
+          >
+            {FILE_ZONES.filter((z) => !z.required).map((zone) => (
+              <FileDropZone
+                key={zone.fileType}
+                {...zone}
+                file={files[zone.fileType] || null}
+                onFileSelect={(f) => handleFileSelect(zone.fileType, f)}
+              />
+            ))}
+          </div>
+          {/* Error */}
+          {uploadError && (
+            <div
+              className="card flex items-center gap-sm"
+              style={{
+                background: "var(--danger-subtle)",
+                borderColor: "rgba(239,68,68,0.25)",
+                padding: "12px 16px",
+                marginBottom: "16px",
+                borderRadius: "var(--radius-md)",
+                color: "var(--danger)",
+                fontSize: "13px",
+              }}
+            >
+              {uploadError}
+            </div>
           )}
+          {/* Submit */}
+          <button
+            onClick={handleSubmit}
+            disabled={!canSubmit}
+            className={`btn w-full ${canSubmit ? "btn-primary" : ""}`}
+            style={{
+              padding: "16px",
+              borderRadius: "var(--radius-lg)",
+              fontSize: "15px",
+              ...(!canSubmit
+                ? {
+                    background: "var(--bg-elevated)",
+                    border: "1px solid var(--border)",
+                    color: "var(--text-muted)",
+                    cursor: "not-allowed",
+                    boxShadow: "none",
+                  }
+                : {}),
+            }}
+          >
+            {isLoading ? (
+              <span className="flex items-center justify-center gap-sm">
+                <Loader size={16} className="animate-spin" />
+                Starting pipeline…
+              </span>
+            ) : (
+              <>
+                Run Credit Analysis <ArrowRight size={16} />
+              </>
+            )}
+          </button>
+          <p
+            style={{
+              color: "var(--text-muted)",
+              fontSize: "12px",
+              textAlign: "center",
+              marginTop: "12px",
+            }}
+          >
+            Analysis typically takes 2–4 minutes across 12 pipeline stages.
+          </p>
+        </div>
       </div>
     </div>
   );