From 5d6472afbd35664814762fb1390ee5df7919c006 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 16 Jun 2026 14:53:20 +0000
Subject: [PATCH 1/2] Bob AI: Add dashboard page

---
 src/App.tsx                 |   2 +
 src/components/Layout.tsx   |   4 +-
 src/pages/DashboardPage.tsx | 107 ++++++++++++++++++++++++++++++++++++
 src/routes.ts               |   1 +
 4 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/DashboardPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..21c0cfa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import DashboardPage from "@/pages/DashboardPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 0206f49..b5414a1 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -30,7 +30,9 @@ export default function Layout() {
   {
     "name": "Contact",
     "href": "#contact"
-  }
+  },
+  { name: "Dashboard", href: "/dashboard" },
+
 ];
 
   return (
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
new file mode 100644
index 0000000..9e38d7c
--- /dev/null
+++ b/src/pages/DashboardPage.tsx
@@ -0,0 +1,107 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import MetricsSimpleCards from "@/components/sections/metrics/MetricsSimpleCards";
+import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
+
+export default function DashboardPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col" dir="rtl">
+      <NavbarCentered
+        logo="Dialysis OS Pro"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "התנתק", href: "/" }}
+      />
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar Simulation */}
+        <aside className="w-64 border-l border-border bg-card hidden md:flex flex-col p-4 shrink-0">
+          <div className="mb-6 px-2">
+            <h2 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">תפריט ניווט</h2>
+          </div>
+          <nav className="space-y-1">
+            <a href="/dashboard" className="block px-3 py-2.5 rounded-md bg-primary-cta/10 text-primary-cta font-medium text-sm">
+              דאשבורד מרכזי
+            </a>
+            <a href="#" className="block px-3 py-2.5 rounded-md hover:bg-muted text-muted-foreground transition-colors text-sm">
+              ניהול מטופלים
+            </a>
+            <a href="#" className="block px-3 py-2.5 rounded-md hover:bg-muted text-muted-foreground transition-colors text-sm">
+              ארכיון דוחות
+            </a>
+            <a href="#" className="block px-3 py-2.5 rounded-md hover:bg-muted text-muted-foreground transition-colors text-sm">
+              הגדרות מערכת
+            </a>
+          </nav>
+        </aside>
+
+        {/* Main Content Area */}
+        <main className="flex-1 overflow-y-auto p-6 lg:p-10">
+          {/* Topbar Simulation */}
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 pb-5 border-b border-border gap-4">
+            <div>
+              <h1 className="text-2xl font-bold text-foreground">סקירה כללית</h1>
+              <p className="text-muted-foreground mt-1 text-sm">ניהול חודשי וסטטוס הפקות דוחות דיאליזה</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <select className="bg-card border border-border text-foreground rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-primary-cta">
+                <option>אוקטובר 2023</option>
+                <option>ספטמבר 2023</option>
+                <option>אוגוסט 2023</option>
+              </select>
+              <span className="px-3 py-1.5 rounded-md bg-green-500/10 text-green-500 text-sm font-medium border border-green-500/20">
+                סטטוס: פעיל ותקין
+              </span>
+            </div>
+          </div>
+
+          <div className="space-y-16">
+            <MetricsSimpleCards
+              tag="נתוני אמת"
+              title="מדדים מרכזיים לחודש הנוכחי"
+              description="תמונת מצב עדכנית של פעילות המחלקה, מטופלים והתקדמות הפקת הדוחות."
+              metrics={[
+                { value: "142", description: "סה״כ מטופלים פעילים" },
+                { value: "89%", description: "דוחות שהושלמו החודש" },
+                { value: "15", description: "ממתינים לאישור רופא" },
+                { value: "3", description: "התראות חריגות לטיפול" }
+              ]}
+            />
+
+            <FeaturesDetailedSteps
+              tag="Workflow"
+              title="מפת דרכים להפקת דוח"
+              description="התהליך המובנה במערכת להפקת דוח דיאליזה חודשי מלא, מדויק ותקין רגולטורית."
+              steps={[
+                {
+                  tag: "שלב 1",
+                  title: "קליטת נתונים ממכשור",
+                  subtitle: "סנכרון אוטומטי",
+                  description: "משיכת נתוני טיפול גולמיים ממכונות הדיאליזה ומערכות המעבדה ישירות למסד הנתונים המאובטח."
+                },
+                {
+                  tag: "שלב 2",
+                  title: "עיבוד וניתוח מדדים",
+                  subtitle: "אלגוריתם חכם",
+                  description: "חישוב מדדי יעילות קליניים (כגון Kt/V), סינון חריגים והכנת הנתונים לתצוגה ברורה."
+                },
+                {
+                  tag: "שלב 3",
+                  title: "הפקת טיוטת דוח",
+                  subtitle: "יצירת מסמך",
+                  description: "בניית הדוח החודשי בפורמט הנדרש, כולל שילוב גרפים, מגמות לאורך זמן והיסטוריה רפואית."
+                },
+                {
+                  tag: "שלב 4",
+                  title: "אישור וחתימה",
+                  subtitle: "בקרת רופא",
+                  description: "מעבר רופא מטפל על הדוח המופק, הוספת הערות קליניות נדרשות וחתימה דיגיטלית סופית."
+                }
+              ]}
+            />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..6f95978 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/dashboard', label: 'Dashboard', pageFile: 'DashboardPage' },
 ];
-- 
2.49.1


From 257aa14dc838cee85a016a52a469d5b00286be86 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 16 Jun 2026 14:53:59 +0000
Subject: [PATCH 2/2] Bob AI: Populate src/pages/DashboardPage.tsx (snippet
 builder, 2 sections)

---
 src/pages/DashboardPage.tsx | 124 ++++++------------------------------
 1 file changed, 21 insertions(+), 103 deletions(-)

diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 9e38d7c..697c24a 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,107 +1,25 @@
-import React from "react";
-import { routes } from "@/routes";
-import NavbarCentered from "@/components/ui/NavbarCentered";
-import MetricsSimpleCards from "@/components/sections/metrics/MetricsSimpleCards";
-import FeaturesDetailedSteps from "@/components/sections/features/FeaturesDetailedSteps";
+import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
 
 export default function DashboardPage() {
   return (
-    <div className="min-h-screen bg-background text-foreground flex flex-col" dir="rtl">
-      <NavbarCentered
-        logo="Dialysis OS Pro"
-        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
-        ctaButton={{ text: "התנתק", href: "/" }}
-      />
-
-      <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar Simulation */}
-        <aside className="w-64 border-l border-border bg-card hidden md:flex flex-col p-4 shrink-0">
-          <div className="mb-6 px-2">
-            <h2 className="text-xs font-bold text-muted-foreground uppercase tracking-wider">תפריט ניווט</h2>
-          </div>
-          <nav className="space-y-1">
-            <a href="/dashboard" className="block px-3 py-2.5 rounded-md bg-primary-cta/10 text-primary-cta font-medium text-sm">
-              דאשבורד מרכזי
-            </a>
-            <a href="#" className="block px-3 py-2.5 rounded-md hover:bg-muted text-muted-foreground transition-colors text-sm">
-              ניהול מטופלים
-            </a>
-            <a href="#" className="block px-3 py-2.5 rounded-md hover:bg-muted text-muted-foreground transition-colors text-sm">
-              ארכיון דוחות
-            </a>
-            <a href="#" className="block px-3 py-2.5 rounded-md hover:bg-muted text-muted-foreground transition-colors text-sm">
-              הגדרות מערכת
-            </a>
-          </nav>
-        </aside>
-
-        {/* Main Content Area */}
-        <main className="flex-1 overflow-y-auto p-6 lg:p-10">
-          {/* Topbar Simulation */}
-          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 pb-5 border-b border-border gap-4">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">סקירה כללית</h1>
-              <p className="text-muted-foreground mt-1 text-sm">ניהול חודשי וסטטוס הפקות דוחות דיאליזה</p>
-            </div>
-            <div className="flex items-center gap-3">
-              <select className="bg-card border border-border text-foreground rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-primary-cta">
-                <option>אוקטובר 2023</option>
-                <option>ספטמבר 2023</option>
-                <option>אוגוסט 2023</option>
-              </select>
-              <span className="px-3 py-1.5 rounded-md bg-green-500/10 text-green-500 text-sm font-medium border border-green-500/20">
-                סטטוס: פעיל ותקין
-              </span>
-            </div>
-          </div>
-
-          <div className="space-y-16">
-            <MetricsSimpleCards
-              tag="נתוני אמת"
-              title="מדדים מרכזיים לחודש הנוכחי"
-              description="תמונת מצב עדכנית של פעילות המחלקה, מטופלים והתקדמות הפקת הדוחות."
-              metrics={[
-                { value: "142", description: "סה״כ מטופלים פעילים" },
-                { value: "89%", description: "דוחות שהושלמו החודש" },
-                { value: "15", description: "ממתינים לאישור רופא" },
-                { value: "3", description: "התראות חריגות לטיפול" }
-              ]}
-            />
-
-            <FeaturesDetailedSteps
-              tag="Workflow"
-              title="מפת דרכים להפקת דוח"
-              description="התהליך המובנה במערכת להפקת דוח דיאליזה חודשי מלא, מדויק ותקין רגולטורית."
-              steps={[
-                {
-                  tag: "שלב 1",
-                  title: "קליטת נתונים ממכשור",
-                  subtitle: "סנכרון אוטומטי",
-                  description: "משיכת נתוני טיפול גולמיים ממכונות הדיאליזה ומערכות המעבדה ישירות למסד הנתונים המאובטח."
-                },
-                {
-                  tag: "שלב 2",
-                  title: "עיבוד וניתוח מדדים",
-                  subtitle: "אלגוריתם חכם",
-                  description: "חישוב מדדי יעילות קליניים (כגון Kt/V), סינון חריגים והכנת הנתונים לתצוגה ברורה."
-                },
-                {
-                  tag: "שלב 3",
-                  title: "הפקת טיוטת דוח",
-                  subtitle: "יצירת מסמך",
-                  description: "בניית הדוח החודשי בפורמט הנדרש, כולל שילוב גרפים, מגמות לאורך זמן והיסטוריה רפואית."
-                },
-                {
-                  tag: "שלב 4",
-                  title: "אישור וחתימה",
-                  subtitle: "בקרת רופא",
-                  description: "מעבר רופא מטפל על הדוח המופק, הוספת הערות קליניות נדרשות וחתימה דיגיטלית סופית."
-                }
-              ]}
-            />
-          </div>
-        </main>
-      </div>
-    </div>
+    <>
+      <div data-webild-section="MetricsIconCards"><MetricsIconCards
+        tag="תמונת מצב"
+        title="מדדי דיווח לחודש הנוכחי"
+        description="צפה בסטטוס הדוחות החודשיים, עקוב אחר התקדמות האישורים ונהל חריגות קליניות בזמן אמת."
+        primaryButton={{"text":"המשך דיווח","href":"/workflow"}}
+        secondaryButton={{"text":"היסטוריית דוחות","href":"/history"}}
+        metrics={[{"icon":"Users","title":"מטופלים פעילים","value":"142"},{"icon":"FileCheck","title":"דוחות שהושלמו","value":"118"},{"icon":"Clock","title":"ממתינים לאישור","value":"24"},{"icon":"AlertCircle","title":"חריגות קליניות","value":"7"}]}
+      /></div>
+      <div data-webild-section="FeaturesDetailedSteps"><section aria-label="Features detailed steps section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>תהליך עבודה</p></div><TextAnimation text="תהליך הפקת דוחות חודשיים" variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="עקוב אחר שלבי העבודה המרכזיים להפקת דוחות דיאליזה בצורה חכמה, מהירה ומדויקת." variant="slide-up" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="התחל תהליך" href="/workflow" variant="primary" /><Button text="הגדרות מערכת" href="/settings" variant="secondary" animationDelay={0.1} /></div></div><div className="flex flex-col w-content-width mx-auto gap-5"><ScrollReveal variant="fade-blur" key="ייבוא ומיפוי נתונים" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>שלב 1</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">ייבוא ומיפוי נתונים</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">קליטת נתונים ממערכות המרפאה</h4><p className="text-base md:text-lg leading-snug text-balance">ייבוא אוטומטי של מדדי מטופלים ומיפוי חכם למערכת הדוחות.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/data-analysis-graphs-charts-screen_53876-120538.jpg" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade-blur" key="בקרת איכות ואימות" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>שלב 2</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">בקרת איכות ואימות</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">בדיקת חריגים ואישור נתונים</h4><p className="text-base md:text-lg leading-snug text-balance">זיהוי אוטומטי של מדדים חריגים ואישור ידני על ידי הצוות הרפואי.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/doctor-working-laptop-clinic_23-2148962314.jpg" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade-blur" key="הפקת דוחות" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>שלב 3</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">הפקת דוחות</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">יצירת דוח חודשי מרוכז</h4><p className="text-base md:text-lg leading-snug text-balance">הפקה מהירה של דוחות דיאליזה חודשיים העומדים בתקני הרגולציה.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/medical-report-clipboard-stethoscope_23-2148213968.jpg" /></div></div></ScrollReveal>
+<ScrollReveal variant="fade-blur" key="ייצוא והפצה" className="flex flex-col md:flex-row justify-between 2xl:w-8/10 mx-auto gap-6 p-6 md:p-10 card rounded overflow-hidden"><div className="flex flex-col justify-between w-full md:w-1/2"><div className="flex flex-col gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>שלב 4</p></div><h3 className="text-7xl md:text-8xl font-semibold leading-[1.15] text-balance">ייצוא והפצה</h3></div><div className="block md:hidden w-full h-px my-5 bg-accent/20" /><div className="flex flex-col gap-2"><h4 className="text-2xl md:text-3xl font-semibold leading-snug text-balance">שליחה לגורמים המאשרים</h4><p className="text-base md:text-lg leading-snug text-balance">הפצת הדוחות המאושרים לרופאים, מנהלי מרפאות וגורמי רגולציה.</p></div></div><div className="flex flex-col w-full md:w-35/100 gap-10"><span className="hidden md:block self-end text-7xl md:text-8xl font-semibold text-accent"></span><div className="aspect-square rounded overflow-hidden -rotate-3"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/doctor-holding-digital-tablet_53876-104938.jpg" /></div></div></ScrollReveal></div></div></section></div>
+    </>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1