From 92f16a03a4fcda39a1c2a7e6eccbf60d1912df88 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Wed, 17 Jun 2026 13:34:59 +0530
Subject: [PATCH 01/15] feat: add interactive device simulator component to
 showcase TimeManagement UI

---
 website/src/pages/index.js         | 465 +++++++++++++++
 website/src/pages/index.module.css | 905 +++++++++++++++++++++++++++++
 2 files changed, 1370 insertions(+)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 56e97128..f4468647 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -177,6 +177,468 @@ function TerminalPreview() {
   );
 }
 
+function DeviceSimulator() {
+  const [orientation, setOrientation] = useState("portrait");
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [activeScreen, setActiveScreen] = useState("Dashboard");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState("most-time");
+
+  const menuItems = [
+    { name: "Dashboard", icon: "🏠" },
+    { name: "Timesheet", icon: "⏱" },
+    { name: "Activities", icon: "📅" },
+    { name: "My Tasks", icon: "⭐" },
+    { name: "All Tasks", icon: "☑" },
+    { name: "Projects", icon: "📁" },
+    { name: "Project Updates", icon: "🕒" },
+    { name: "About Us", icon: "ℹ" },
+    { name: "Settings", icon: "⚙" }
+  ];
+
+  const projectsData = [
+    { name: "Child project of main instance nnmhbbnnn kkkk", time: "4507.0 h", percent: 92, color: "#e07a24", tasks: 6 },
+    { name: "UT time management", time: "2187.6 h", percent: 75, color: "#e53935", tasks: 124 },
+    { name: "CURQ migration v18", time: "1240.0 h", percent: 55, color: "#1e88e5", tasks: 28 },
+    { name: "UT App Development", time: "680.0 h", percent: 40, color: "#43a047", tasks: 15 },
+    { name: "Notes App Development", time: "420.0 h", percent: 28, color: "#ffb300", tasks: 10 },
+    { name: "Ubuntu Touch Development- Level 1", time: "280.0 h", percent: 18, color: "#00acc1", tasks: 8 },
+    { name: "CURQ- Support", time: "230.0 h", percent: 12, color: "#8e24aa", tasks: 5 },
+    { name: "CURQ documentation", time: "150.0 h", percent: 8, color: "#d81b60", tasks: 2 }
+  ];
+
+  const filteredProjects = projectsData.filter(p => 
+    p.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Reusable Left Menu Content
+  const renderMenuList = () => (
+    <ul className={styles.menuListActual}>
+      {menuItems.map((item) => (
+        <li
+          key={item.name}
+          className={clsx(
+            styles.menuItemActual,
+            activeScreen === item.name && styles.menuItemActiveActual
+          )}
+          onClick={() => {
+            setActiveScreen(item.name);
+            setMenuOpen(false);
+          }}
+        >
+          <span className={styles.menuItemIcon}>{item.icon}</span>
+          <span>{item.name}</span>
+        </li>
+      ))}
+    </ul>
+  );
+
+  // Reusable Eisenhower Matrix Content
+  const renderDashboardMatrix = () => (
+    <div className={styles.matrixSection}>
+      <div className={styles.matrixTitle}>Time spent based on priorities</div>
+      
+      <div className={styles.matrixWrapper}>
+        <div className={styles.matrixHeaderRow}>
+          <div style={{ width: "24px" }} />
+          <div className={styles.matrixColHeader}>URGENT</div>
+          <div className={styles.matrixColHeader}>NOT URGENT</div>
+        </div>
+
+        <div className={styles.matrixBodyRow}>
+          <div className={styles.matrixRowHeader}>
+            <span>IMPORTANT</span>
+          </div>
+          
+          <div className={clsx(styles.matrixCard, styles.matrixCardUrgentImportant)}>
+            <div className={styles.matrixCardIcon}>✓</div>
+            <div className={styles.matrixCardLabel}>Do First</div>
+            <div className={styles.matrixCardValue}>9521H</div>
+          </div>
+
+          <div className={clsx(styles.matrixCard, styles.matrixCardNoturgentImportant)}>
+            <div className={styles.matrixCardIcon}>🕒</div>
+            <div className={styles.matrixCardLabel}>Do Next</div>
+            <div className={styles.matrixCardValue}>0H</div>
+          </div>
+        </div>
+
+        <div className={styles.matrixBodyRow}>
+          <div className={styles.matrixRowHeader}>
+            <span>NOT IMPORTANT</span>
+          </div>
+          
+          <div className={clsx(styles.matrixCard, styles.matrixCardUrgentNotimportant)}>
+            <div className={styles.matrixCardIcon}>⏱</div>
+            <div className={styles.matrixCardLabel}>Do Later</div>
+            <div className={styles.matrixCardValue}>0H</div>
+          </div>
+
+          <div className={clsx(styles.matrixCard, styles.matrixCardNoturgentNotimportant)}>
+            <div className={styles.matrixCardIcon}>🗑</div>
+            <div className={styles.matrixCardLabel}>Don't do</div>
+            <div className={styles.matrixCardValue}>13H</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  // Reusable Project Overview Pie & Bar Chart Content
+  const renderProjectOverview = () => (
+    <>
+      <div className={styles.tabBarActual}>
+        <button className={clsx(styles.tabBtnActual, styles.tabBtnActiveActual)}>
+          Overview
+        </button>
+        <button className={styles.tabBtnActual}>
+          Projects
+        </button>
+        <button className={styles.tabBtnActual}>
+          Tasks
+        </button>
+      </div>
+
+      <div className={styles.chartHeading}>Most Time-Consuming Projects</div>
+      
+      <div className={styles.pieChartContainer}>
+        <svg className={styles.pieChartSvg} viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="35" fill="none" stroke="#eeeeee" strokeWidth="12" />
+          
+          {/* Segment 1: Orange (Child Project) */}
+          <circle cx="50" cy="50" r="35" fill="none" className={styles.pieSlice} 
+                  stroke="#e07a24" strokeWidth="12"
+                  strokeDasharray="105.6 220" strokeDashoffset="0" />
+          
+          {/* Segment 2: Red (UT TimeManagement) */}
+          <circle cx="50" cy="50" r="35" fill="none" className={styles.pieSlice} 
+                  stroke="#e53935" strokeWidth="12"
+                  strokeDasharray="50.6 220" strokeDashoffset="-105.6" />
+          
+          {/* Segment 3: Blue (CURQ Migration) */}
+          <circle cx="50" cy="50" r="35" fill="none" className={styles.pieSlice} 
+                  stroke="#1e88e5" strokeWidth="12"
+                  strokeDasharray="28.6 220" strokeDashoffset="-156.2" />
+          
+          {/* Segment 4: Green (UT App Dev) */}
+          <circle cx="50" cy="50" r="35" fill="none" className={styles.pieSlice} 
+                  stroke="#43a047" strokeWidth="12"
+                  strokeDasharray="15.4 220" strokeDashoffset="-184.8" />
+
+          {/* Segment 5: Cyan (Notes App Dev) */}
+          <circle cx="50" cy="50" r="35" fill="none" className={styles.pieSlice} 
+                  stroke="#00acc1" strokeWidth="12"
+                  strokeDasharray="19.8 220" strokeDashoffset="-200.2" />
+                  
+          <circle cx="50" cy="50" r="22" fill="#ffffff" />
+        </svg>
+      </div>
+      
+      <div style={{ textAlign: "center", paddingBottom: "16px" }}>
+        <button style={{ background: "transparent", border: "none", fontSize: "0.85rem", cursor: "pointer", color: "#666" }}>
+          ▲
+        </button>
+      </div>
+    </>
+  );
+
+  return (
+    <section className={styles.workbenchSection}>
+      <div className="container">
+        <div className={styles.workbenchGrid}>
+          {/* Controls Panel */}
+          <div className={styles.workbenchPanel} data-reveal>
+            <p className={styles.sectionLabel}>Live Preview</p>
+            <h2 className={styles.panelTitle}>Interactive Device Simulator</h2>
+            <p className={styles.panelDesc}>
+              Experience the actual TimeManagement user interface directly on an interactive Ubuntu Touch emulator.
+            </p>
+            
+            <div className={styles.controlGroup}>
+              <div>
+                <span className={styles.controlLabel}>Device Form Factor</span>
+                <div className={styles.toggleRow}>
+                  <button 
+                    className={clsx(styles.toggleBtn, orientation === "portrait" && styles.toggleBtnActive)}
+                    onClick={() => setOrientation("portrait")}
+                  >
+                    📱 Mobile (Portrait)
+                  </button>
+                  <button 
+                    className={clsx(styles.toggleBtn, orientation === "landscape" && styles.toggleBtnActive)}
+                    onClick={() => setOrientation("landscape")}
+                  >
+                    💻 Convergent (Tablet/Desktop)
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <span className={styles.controlLabel}>Quick Navigate</span>
+                <div className={styles.toggleRow}>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "Dashboard" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Dashboard")}
+                  >
+                    🏠 Dashboard
+                  </button>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "Projects" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Projects")}
+                  >
+                    📁 Projects
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className={styles.gestureHint}>
+              <span>💡</span>
+              <p>Ubuntu Touch gesture: Hover or swipe from the <strong>left screen border</strong> to toggle the menu drawer, or tap the blue Floating Action Button (FAB).</p>
+            </div>
+          </div>
+
+          {/* Interactive Phone */}
+          <div className={styles.deviceCanvas} data-reveal style={{ "--reveal-delay": 1 }}>
+            <div className={styles.deviceTurntable}>
+              <div className={clsx(styles.deviceFrame, styles[orientation])}>
+                
+                {orientation === "portrait" ? (
+                  /* ── PORTRAIT MOBILE VIEW ── */
+                  <div className={styles.deviceScreen}>
+                    {/* Swipe Hotspot */}
+                    <div 
+                      className={styles.leftEdgeSwipeBoundary} 
+                      onMouseEnter={() => setMenuOpen(true)}
+                    />
+
+                    {/* Top Status Bar */}
+                    <div className={styles.statusBarActual}>
+                      <span>Ubuntu Touch</span>
+                      <div style={{ display: "flex", gap: "6px" }}>
+                        <span>📶</span>
+                        <span>🔋 88%</span>
+                        <span>12:00 PM</span>
+                      </div>
+                    </div>
+
+                    {/* App Header */}
+                    <header className={styles.appHeaderActual}>
+                      <button 
+                        className={styles.headerIconBtn}
+                        onClick={() => setMenuOpen(!menuOpen)}
+                      >
+                        ☰
+                      </button>
+                      <h3 className={styles.headerTitle}>
+                        {activeScreen === "Dashboard" ? "Account [TestCIT]" : activeScreen}
+                      </h3>
+                      <div className={styles.headerIcons}>
+                        <button className={styles.headerIconBtn} title="Add Entry">⏱⁺</button>
+                        <button className={styles.headerIconBtn} title="Notifications">🔔</button>
+                        <button className={styles.headerIconBtn} title="Info">ⓘ</button>
+                      </div>
+                    </header>
+
+                    {/* Screen Scrollable Body */}
+                    <div className={styles.pageScrollContent}>
+                      {activeScreen === "Dashboard" ? (
+                        <>
+                          {renderDashboardMatrix()}
+                          {renderProjectOverview()}
+                        </>
+                      ) : (
+                        <div style={{ padding: "30px 16px", textAlign: "center", color: "#666" }}>
+                          <h3>{activeScreen} View</h3>
+                          <p>Simulating the active Ubuntu Touch component. Switch back to Dashboard to view the Eisenhower priority matrix.</p>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Floating Action Button (FAB) */}
+                    <button 
+                      className={styles.fabButtonActual}
+                      onClick={() => setMenuOpen(!menuOpen)}
+                    >
+                      ☰
+                    </button>
+
+                    {/* Ubuntu Left Menu Drawer */}
+                    <div className={clsx(styles.menuPanelActual, menuOpen && styles.menuPanelOpen)}>
+                      <div className={styles.menuHeaderActual}>
+                        <h4 className={styles.menuHeaderTitle}>Menu</h4>
+                        <div className={styles.menuHeaderControls}>
+                          <span style={{ fontSize: "1.1rem", cursor: "pointer" }}>👤</span>
+                          <span style={{ fontSize: "1.1rem", cursor: "pointer" }}>🌙</span>
+                        </div>
+                      </div>
+                      {renderMenuList()}
+                    </div>
+
+                    {/* Dimmed backdrop when Menu is open */}
+                    <div 
+                      className={clsx(styles.menuBackdrop, menuOpen && styles.menuBackdropVisible)}
+                      onClick={() => setMenuOpen(false)}
+                    />
+
+                    {/* Bottom Home Indicator Gesture bar */}
+                    <div 
+                      className={styles.indicatorBarActual}
+                      onClick={() => setActiveScreen("Dashboard")}
+                    />
+                  </div>
+                ) : (
+                  /* ── LANDSCAPE CONVERGENT VIEW ── */
+                  <div className={styles.deviceScreen}>
+                    {/* Top Status Bar */}
+                    <div className={styles.statusBarActual}>
+                      <span>Ubuntu Touch converged workspace</span>
+                      <div style={{ display: "flex", gap: "6px" }}>
+                        <span>📶</span>
+                        <span>🔋 88%</span>
+                        <span>12:00 PM</span>
+                      </div>
+                    </div>
+
+                    <div className={styles.convergedGrid}>
+                      {/* Column 1: Permanent Sidebar Menu */}
+                      <aside className={styles.convergedSidebar}>
+                        <div className={styles.menuHeaderActual}>
+                          <h4 className={styles.menuHeaderTitle}>Menu</h4>
+                          <div className={styles.menuHeaderControls}>
+                            <span style={{ fontSize: "1rem" }}>🌙</span>
+                            <span style={{ fontSize: "1rem" }}>👤</span>
+                          </div>
+                        </div>
+                        {renderMenuList()}
+                      </aside>
+
+                      {/* Column 2: Dashboard/Account Main View */}
+                      <main className={styles.convergedCenter}>
+                        <header className={styles.appHeaderActual}>
+                          <h3 className={styles.headerTitle}>Account [TestCIT]</h3>
+                          <div className={styles.headerIcons}>
+                            <button className={styles.headerIconBtn}>⏱⁺</button>
+                            <button className={styles.headerIconBtn}>🔔</button>
+                            <button className={styles.headerIconBtn}>ⓘ</button>
+                          </div>
+                        </header>
+                        <div className={styles.pageScrollContent}>
+                          {renderDashboardMatrix()}
+                          {renderProjectOverview()}
+                        </div>
+                        
+                        <button className={styles.fabButtonActual}>
+                          ☰
+                        </button>
+                      </main>
+
+                      {/* Column 3: Charts / Projects View */}
+                      <section className={styles.convergedRight}>
+                        <header className={styles.rightHeader}>
+                          Charts
+                        </header>
+                        
+                        <div className={styles.rightContent}>
+                          <div className={styles.barChartTitle}>Projectwise Time Spent</div>
+                          
+                          <div className={styles.barChartContainer}>
+                            {projectsData.map((p) => (
+                              <div key={p.name} className={styles.barChartRow}>
+                                <span className={styles.barChartLabel} title={p.name}>
+                                  {p.name}
+                                </span>
+                                <div className={styles.barChartValueWrapper}>
+                                  <div className={styles.barChartBarBg}>
+                                    <div 
+                                      className={styles.barChartBarFill} 
+                                      style={{ width: `${p.percent}%`, backgroundColor: p.color }}
+                                    />
+                                  </div>
+                                  <span className={styles.barChartValText}>{p.time.split(" ")[0]}</span>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+
+                          <button className={styles.showNextBtn}>
+                            Show next 10 ↓
+                          </button>
+
+                          <div className={styles.projectsSectionHeader}>
+                            <h4 className={styles.projectsSectionTitle}>Projects</h4>
+                            <span className={styles.projectsTotalBadge}>9490.0 h</span>
+                          </div>
+
+                          <input 
+                            type="text" 
+                            className={styles.projectSearchBox} 
+                            placeholder="Search projects..." 
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                          />
+
+                          <div className={styles.projectFilterTabs}>
+                            <button 
+                              className={clsx(styles.projectFilterBtn, filterType === "most-time" && styles.projectFilterBtnActive)}
+                              onClick={() => setFilterType("most-time")}
+                            >
+                              Most time
+                            </button>
+                            <button 
+                              className={clsx(styles.projectFilterBtn, filterType === "tasks" && styles.projectFilterBtnActive)}
+                              onClick={() => setFilterType("tasks")}
+                            >
+                              Tasks
+                            </button>
+                            <button 
+                              className={clsx(styles.projectFilterBtn, filterType === "a-z" && styles.projectFilterBtnActive)}
+                              onClick={() => setFilterType("a-z")}
+                            >
+                              A-Z
+                            </button>
+                          </div>
+
+                          <div className={styles.projectListLandscape}>
+                            {filteredProjects.map((p) => (
+                              <div key={p.name} className={styles.projectListItemCard}>
+                                <div className={styles.projectListItemHeader}>
+                                  <h4 className={styles.projectListItemName}>{p.name}</h4>
+                                  <span className={styles.projectListItemTime}>{p.time}</span>
+                                </div>
+                                <div className={styles.projectListItemTasks}>
+                                  {p.tasks} tasks
+                                </div>
+                                <div className={styles.projectProgressBg}>
+                                  <div 
+                                    className={styles.projectProgressBar}
+                                    style={{ width: `${p.percent}%`, backgroundColor: p.color }}
+                                  />
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </section>
+                    </div>
+
+                    {/* Bottom indicator gesture bar */}
+                    <div 
+                      className={styles.indicatorBarActual}
+                      onClick={() => setActiveScreen("Dashboard")}
+                    />
+                  </div>
+                )}
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home() {
   const mainRef = useScrollReveal();
 
@@ -247,6 +709,9 @@ export default function Home() {
           </div>
         </section>
 
+        {/* ── INTERACTIVE MOBILE MODEL ── */}
+        <DeviceSimulator />
+
         {/* ── ARCHITECTURE ── */}
         <section className={clsx(styles.section, styles.sectionDark)}>
           <div className="container">
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 08b5710c..0d669274 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -580,3 +580,908 @@
     border-right: none;
   }
 }
+
+/* ── Interactive Device Workbench ── */
+.workbenchSection {
+  background: #0b110e;
+  border-top: 1px solid rgba(224, 122, 36, 0.15);
+  border-bottom: 1px solid rgba(224, 122, 36, 0.15);
+  padding: 6rem 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.workbenchSection::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: 
+    linear-gradient(rgba(224, 122, 36, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(224, 122, 36, 0.02) 1px, transparent 1px);
+  background-size: 24px 24px;
+  pointer-events: none;
+}
+
+.workbenchGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+@media (min-width: 1200px) {
+  .workbenchGrid {
+    grid-template-columns: 360px 1fr;
+  }
+}
+
+.workbenchPanel {
+  z-index: 2;
+}
+
+.panelTitle {
+  font-family: "Space Grotesk", sans-serif;
+  font-size: 2.2rem;
+  font-weight: 700;
+  line-height: 1.1;
+  color: #f0ebe0;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+.panelDesc {
+  color: #9aa89c;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+}
+
+.controlGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  background: #111a14;
+  border: 1px solid rgba(224, 122, 36, 0.15);
+  padding: 1.5rem;
+  border-radius: 2px;
+}
+
+.controlLabel {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #8f9e91;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.toggleRow {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.toggleRow:last-child {
+  margin-bottom: 0;
+}
+
+.toggleBtn {
+  flex: 1;
+  background: rgba(224, 122, 36, 0.05);
+  border: 1px solid rgba(224, 122, 36, 0.2);
+  color: #c8bfa8;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+}
+
+.toggleBtn:hover {
+  background: rgba(224, 122, 36, 0.1);
+  color: #f0ebe0;
+  border-color: rgba(224, 122, 36, 0.4);
+}
+
+.toggleBtnActive {
+  background: #e07a24;
+  color: #0f1a14 !important;
+  border-color: #e07a24;
+  box-shadow: 0 4px 12px rgba(224, 122, 36, 0.2);
+}
+
+.gestureHint {
+  margin-top: 1.5rem;
+  font-size: 0.8rem;
+  color: #8a9b8c;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  background: rgba(224, 122, 36, 0.05);
+  border-left: 2px solid #e07a24;
+  padding: 0.75rem;
+}
+
+/* ── Device Simulator Canvas ── */
+.deviceCanvas {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  min-height: 680px;
+  z-index: 1;
+  width: 100%;
+}
+
+.deviceTurntable {
+  position: relative;
+  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+}
+
+/* Phone Bezel Frame */
+.deviceFrame {
+  background: #1e1e1e;
+  border: 14px solid #282828;
+  border-radius: 36px;
+  box-shadow: 
+    0 30px 60px -15px rgba(0, 0, 0, 0.7),
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    inset 0 0 8px rgba(0, 0, 0, 0.8);
+  position: relative;
+  overflow: hidden;
+  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: width, height;
+  display: flex;
+  flex-direction: column;
+}
+
+.portrait {
+  width: 360px;
+  height: 720px;
+}
+
+.landscape {
+  width: 900px;
+  height: 520px;
+}
+
+/* Earpiece notch area for portrait */
+.deviceFrame::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 130px;
+  height: 20px;
+  background: #282828;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  z-index: 120;
+  transition: opacity 0.3s ease;
+}
+
+.landscape .deviceFrame::before {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Screen container */
+.deviceScreen {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: #ffffff;
+}
+
+/* Status Bar */
+.statusBarActual {
+  height: 24px;
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.65rem;
+  font-weight: 600;
+  z-index: 80;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  background: #f4f2ea;
+  color: #5d6d60;
+  flex-shrink: 0;
+}
+
+/* App Header Actual */
+.appHeaderActual {
+  height: 48px;
+  background: #e05a2b;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  z-index: 10;
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.headerTitle {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 0;
+  color: #ffffff;
+}
+
+.headerIcons {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.headerIconBtn {
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+}
+
+.headerIconBtn:hover {
+  opacity: 0.8;
+}
+
+/* Page content wrapper */
+.pageScrollContent {
+  flex: 1;
+  overflow-y: auto;
+  position: relative;
+  background: #ffffff;
+  color: #333333;
+}
+
+/* Matrix Layout CSS */
+.matrixSection {
+  padding: 12px;
+}
+
+.matrixTitle {
+  text-align: center;
+  font-size: 0.85rem;
+  color: #666666;
+  margin: 6px 0 12px;
+  font-weight: 400;
+}
+
+.matrixWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.matrixHeaderRow {
+  display: flex;
+  align-items: center;
+}
+
+.matrixColHeader {
+  flex: 1;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: 0.05em;
+  padding: 2px 0;
+}
+
+.matrixBodyRow {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.matrixRowHeader {
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.matrixRowHeader span {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.72rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+}
+
+.matrixCard {
+  flex: 1;
+  border-radius: 8px;
+  padding: 16px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  min-height: 124px;
+  position: relative;
+  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
+}
+
+.matrixCardUrgentImportant {
+  background: #e53935; /* Red */
+}
+
+.matrixCardNoturgentImportant {
+  background: #1e88e5; /* Blue */
+}
+
+.matrixCardUrgentNotimportant {
+  background: #43a047; /* Green */
+}
+
+.matrixCardNoturgentNotimportant {
+  background: #757575; /* Grey */
+}
+
+.matrixCardIcon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1.5px solid #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.95rem;
+  margin-bottom: 6px;
+}
+
+.matrixCardLabel {
+  font-size: 0.68rem;
+  font-weight: 600;
+  margin-bottom: 4px;
+  opacity: 0.9;
+}
+
+.matrixCardValue {
+  font-size: 1.7rem;
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+/* Secondary Tab Bar */
+.tabBarActual {
+  display: flex;
+  background: #2d2d2d;
+  padding: 0;
+  border-top: 1px solid rgba(0,0,0,0.1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  flex-shrink: 0;
+}
+
+.tabBtnActual {
+  flex: 1;
+  background: #2d2d2d;
+  color: #c8bfa8;
+  border: none;
+  padding: 10px 0;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s, color 0.15s;
+}
+
+.tabBtnActiveActual {
+  background: #ffffff !important;
+  color: #2b3a30 !important;
+}
+
+/* Donut Chart section */
+.chartHeading {
+  font-size: 0.82rem;
+  color: #666666;
+  text-align: center;
+  margin: 16px 0 10px;
+  font-weight: 600;
+}
+
+.pieChartContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 24px;
+}
+
+.pieChartSvg {
+  width: 140px;
+  height: 140px;
+  transform: rotate(-90deg);
+}
+
+/* Circular Pie Slice classes */
+.pieSlice {
+  fill: none;
+  stroke-width: 28;
+}
+
+.pieSlice1 { stroke: #e53935; }
+.pieSlice2 { stroke: #1e88e5; }
+.pieSlice3 { stroke: #43a047; }
+.pieSlice4 { stroke: #ffb300; }
+.pieSlice5 { stroke: #00acc1; }
+.pieSlice6 { stroke: #8e24aa; }
+.pieSlice7 { stroke: #d81b60; }
+.pieSlice8 { stroke: #3949ab; }
+
+/* Floating Action Button (FAB) */
+.fabButtonActual {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #00bcd4;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0, 188, 212, 0.45);
+  font-size: 1.2rem;
+  z-index: 90;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
+}
+
+.fabButtonActual:hover {
+  transform: scale(1.05);
+  background: #00acc1;
+}
+
+.fabButtonActual:active {
+  transform: scale(0.95);
+}
+
+/* Slide-out Menu drawer */
+.menuPanelActual {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 240px;
+  background: #ffffff;
+  z-index: 110;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 4px 0 15px rgba(0,0,0,0.15);
+  display: flex;
+  flex-direction: column;
+}
+
+.menuPanelOpen {
+  transform: translateX(0);
+}
+
+.menuHeaderActual {
+  height: 48px;
+  background: #e05a2b;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+
+.menuHeaderTitle {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.menuHeaderControls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.menuListActual {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+  list-style: none;
+  margin: 0;
+}
+
+.menuItemActual {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 18px;
+  color: #555555;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-left: 4px solid transparent;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.menuItemActual:hover {
+  background: #fdfaf2;
+  color: #e05a2b;
+}
+
+.menuItemActiveActual {
+  background: #faf2eb;
+  color: #e05a2b !important;
+  border-left-color: #e05a2b;
+  font-weight: 700;
+}
+
+.menuItemIcon {
+  font-size: 1.05rem;
+  width: 20px;
+  text-align: center;
+  opacity: 0.85;
+}
+
+.menuBackdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.menuBackdropVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Swipe boundary tip hotspot */
+.leftEdgeSwipeBoundary {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 14px;
+  height: 100%;
+  z-index: 95;
+  cursor: ew-resize;
+  background: linear-gradient(90deg, rgba(224, 90, 43, 0.1) 0%, transparent 100%);
+}
+
+.leftEdgeSwipeBoundary:hover {
+  background: linear-gradient(90deg, rgba(224, 90, 43, 0.2) 0%, transparent 100%);
+}
+
+/* ── Converged Landscape 3-Column Grid ── */
+.convergedGrid {
+  display: grid;
+  grid-template-columns: 200px 330px 1fr;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+/* Sidebar Column */
+.convergedSidebar {
+  background: #ffffff;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.convergedSidebar .menuListActual {
+  padding-top: 10px;
+}
+
+/* Center Dashboard Column */
+.convergedCenter {
+  background: #ffffff;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* Right Charts Column */
+.convergedRight {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #ffffff;
+}
+
+.rightHeader {
+  height: 48px;
+  background: #e05a2b;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.rightContent {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Project wise horizontal bar chart */
+.barChartTitle {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #333333;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.barChartContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.barChartRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.65rem;
+}
+
+.barChartLabel {
+  width: 110px;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #555555;
+  font-weight: 500;
+}
+
+.barChartValueWrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.barChartBarBg {
+  flex: 1;
+  height: 8px;
+  background: #eeeeee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.barChartBarFill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.8s ease;
+}
+
+.barChartValText {
+  width: 45px;
+  font-weight: 700;
+  color: #333333;
+  text-align: left;
+}
+
+/* Show Next 10 button */
+.showNextBtn {
+  width: 100%;
+  background: #f5f5f5;
+  color: #666666;
+  border: 1px solid #e0e0e0;
+  padding: 6px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  transition: background 0.15s;
+}
+
+.showNextBtn:hover {
+  background: #eeeeee;
+}
+
+/* Projects header with badge */
+.projectsSectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 6px;
+  margin-bottom: 12px;
+}
+
+.projectsSectionTitle {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #333333;
+  margin: 0;
+}
+
+.projectsTotalBadge {
+  background: #e05a2b;
+  color: #ffffff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+/* Search Box */
+.projectSearchBox {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  margin-bottom: 12px;
+  outline: none;
+  font-family: inherit;
+}
+
+.projectSearchBox:focus {
+  border-color: #e05a2b;
+}
+
+/* Projects Filters */
+.projectFilterTabs {
+  display: flex;
+  background: #eeeeee;
+  padding: 2px;
+  border-radius: 4px;
+  margin-bottom: 14px;
+}
+
+.projectFilterBtn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  padding: 5px 0;
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: #666666;
+  cursor: pointer;
+  border-radius: 3px;
+  text-align: center;
+  transition: all 0.15s;
+}
+
+.projectFilterBtnActive {
+  background: #e05a2b;
+  color: #ffffff;
+}
+
+/* Project Cards list */
+.projectListLandscape {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.projectListItemCard {
+  border-left: 3px solid #e05a2b;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  padding: 10px 12px;
+  background: #ffffff;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  cursor: pointer;
+}
+
+.projectListItemCard:hover {
+  background: #fafafa;
+}
+
+.projectListItemHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.projectListItemName {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #333333;
+  margin: 0;
+  line-height: 1.25;
+}
+
+.projectListItemTime {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #e05a2b;
+  white-space: nowrap;
+}
+
+.projectListItemTasks {
+  font-size: 0.65rem;
+  color: #777777;
+}
+
+.projectProgressBg {
+  width: 100%;
+  height: 4px;
+  background: #eeeeee;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.projectProgressBar {
+  height: 100%;
+  background: #e05a2b;
+  border-radius: 2px;
+}
+
+/* Home collapsed bar in bottom */
+.indicatorBarActual {
+  height: 10px;
+  background: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-top: 1px solid rgba(0,0,0,0.04);
+  flex-shrink: 0;
+}
+
+.indicatorBarActual::after {
+  content: "";
+  width: 32px;
+  height: 4px;
+  background: #cccccc;
+  border-radius: 2px;
+  transition: background 0.2s;
+}
+
+.indicatorBarActual:hover::after {
+  background: #e05a2b;
+}
+
+

From 8e1b44c427d1c785e69a0cf1ede76b8d8e581594 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Wed, 17 Jun 2026 17:55:33 +0530
Subject: [PATCH 02/15] feat: add theme-aware UI components, timesheet/task
 data models, and screen rendering logic

---
 website/src/pages/index.js         | 620 ++++++++++++++++++++++++++---
 website/src/pages/index.module.css | 432 ++++++++++++++++++++
 2 files changed, 986 insertions(+), 66 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index f4468647..66c6981c 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -183,17 +183,18 @@ function DeviceSimulator() {
   const [activeScreen, setActiveScreen] = useState("Dashboard");
   const [searchQuery, setSearchQuery] = useState("");
   const [filterType, setFilterType] = useState("most-time");
+  const [themeMode, setThemeMode] = useState("dark"); // Default dark mode to match the visual screenshots
 
   const menuItems = [
-    { name: "Dashboard", icon: "🏠" },
-    { name: "Timesheet", icon: "⏱" },
-    { name: "Activities", icon: "📅" },
-    { name: "My Tasks", icon: "⭐" },
-    { name: "All Tasks", icon: "☑" },
-    { name: "Projects", icon: "📁" },
-    { name: "Project Updates", icon: "🕒" },
-    { name: "About Us", icon: "ℹ" },
-    { name: "Settings", icon: "⚙" }
+    { name: "Dashboard", icon: "🏠", target: "Dashboard" },
+    { name: "Timesheet", icon: "⏱", target: "Timesheets" },
+    { name: "Activities", icon: "📅", target: "Activities" },
+    { name: "My Tasks", icon: "⭐", target: "My Tasks" },
+    { name: "All Tasks", icon: "☑", target: "All Tasks" },
+    { name: "Projects", icon: "📁", target: "Projects" },
+    { name: "Project Updates", icon: "🕒", target: "Project Updates" },
+    { name: "About Us", icon: "ℹ", target: "About Us" },
+    { name: "Settings", icon: "⚙", target: "Settings" }
   ];
 
   const projectsData = [
@@ -207,6 +208,125 @@ function DeviceSimulator() {
     { name: "CURQ documentation", time: "150.0 h", percent: 8, color: "#d81b60", tasks: 2 }
   ];
 
+  const timesheetsData = [
+    {
+      title: "test timesheet this thing this...",
+      project: "Main Parent Project / Child pr... (testCit)",
+      task: "User manual",
+      author: "Suraj Yadav",
+      hours: "5:00 H",
+      date: "2026-04-24",
+      action: "Do",
+      borderColor: "#e07a24"
+    },
+    {
+      title: "Test",
+      project: "Main Parent Project / Child pr... (testCit)",
+      task: "This is a Notification Test.",
+      author: "Parvathy",
+      hours: "4500:00 H",
+      date: "2026-05-05",
+      action: "Unknown",
+      borderColor: "#999999"
+    },
+    {
+      title: "sub taSK 2 TIMESHEETY",
+      project: "Main Parent Project / Child pr... (testCit)",
+      task: "HR Bundle",
+      author: "Parvathy",
+      hours: "2:00 H",
+      date: "2026-04-24",
+      action: "Unknown",
+      borderColor: "#e07a24"
+    },
+    {
+      title: "test",
+      project: "UT App Development / Dekko App... (testCit)",
+      task: "Coordination",
+      author: "Parvathy",
+      hours: "3:00 H",
+      date: "2026-04-24",
+      action: "Unknown",
+      borderColor: "#e07a24"
+    },
+    {
+      title: "Time Off (1/1)",
+      project: "Internal (testCit)",
+      task: "Time Off",
+      author: "Suraj Yadav",
+      hours: "8:00 H",
+      date: "2026-05-01",
+      action: "Unknown",
+      borderColor: "#999999"
+    },
+    {
+      title: "Time Off (1/1)",
+      project: "Internal (testCit)",
+      task: "Time Off",
+      author: "Anusha PP",
+      hours: "8:00 H",
+      date: "2026-05-01",
+      action: "Unknown",
+      borderColor: "#999999"
+    }
+  ];
+
+  const tasksData = [
+    {
+      title: "[Req] Content hub",
+      project: "UT time management",
+      stage: "Analysis",
+      stars: [false, false, false],
+      planned: "N/A",
+      start: "2025-08-08",
+      end: "2025-08-22",
+      overdue: "299 days overdue"
+    },
+    {
+      title: "[IMP - Weblates improvements]",
+      project: "UT time management",
+      stage: "Analysis",
+      stars: [true, false, false],
+      planned: "N/A",
+      start: "2025-11-17",
+      end: "2026-01-16",
+      overdue: "152 days overdue"
+    },
+    {
+      title: "Activity Retention",
+      project: "UT time management",
+      stage: "Design",
+      stars: [false, false, false],
+      planned: "N/A",
+      start: "2026-01-20",
+      end: "Not set",
+      overdue: null
+    },
+    {
+      title: "Parent task",
+      project: "Child project of",
+      stage: "Analysis",
+      stars: [false, false, false],
+      planned: "N/A",
+      start: "2026-04-24",
+      end: "2026-06-08",
+      overdue: "9 days overdue",
+      locked: true,
+      hasTasks: true,
+      borderColor: "#e07a24"
+    },
+    {
+      title: "UI Improvements And Bug Fixes",
+      project: "UT time management",
+      stage: "Development",
+      stars: [false, false, false],
+      planned: "N/A",
+      start: "2026-01-21",
+      end: "Not set",
+      overdue: null
+    }
+  ];
+
   const filteredProjects = projectsData.filter(p => 
     p.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -219,10 +339,10 @@ function DeviceSimulator() {
           key={item.name}
           className={clsx(
             styles.menuItemActual,
-            activeScreen === item.name && styles.menuItemActiveActual
+            activeScreen === item.target && styles.menuItemActiveActual
           )}
           onClick={() => {
-            setActiveScreen(item.name);
+            setActiveScreen(item.target);
             setMenuOpen(false);
           }}
         >
@@ -253,7 +373,7 @@ function DeviceSimulator() {
           <div className={clsx(styles.matrixCard, styles.matrixCardUrgentImportant)}>
             <div className={styles.matrixCardIcon}>✓</div>
             <div className={styles.matrixCardLabel}>Do First</div>
-            <div className={styles.matrixCardValue}>9521H</div>
+            <div className={styles.matrixCardValue}>{themeMode === "dark" ? "100H" : "9521H"}</div>
           </div>
 
           <div className={clsx(styles.matrixCard, styles.matrixCardNoturgentImportant)}>
@@ -277,7 +397,7 @@ function DeviceSimulator() {
           <div className={clsx(styles.matrixCard, styles.matrixCardNoturgentNotimportant)}>
             <div className={styles.matrixCardIcon}>🗑</div>
             <div className={styles.matrixCardLabel}>Don't do</div>
-            <div className={styles.matrixCardValue}>13H</div>
+            <div className={styles.matrixCardValue}>{themeMode === "dark" ? "0H" : "13H"}</div>
           </div>
         </div>
       </div>
@@ -330,7 +450,7 @@ function DeviceSimulator() {
                   stroke="#00acc1" strokeWidth="12"
                   strokeDasharray="19.8 220" strokeDashoffset="-200.2" />
                   
-          <circle cx="50" cy="50" r="22" fill="#ffffff" />
+          <circle cx="50" cy="50" r="22" fill={themeMode === "dark" ? "#151515" : "#ffffff"} />
         </svg>
       </div>
       
@@ -342,6 +462,192 @@ function DeviceSimulator() {
     </>
   );
 
+  // Render Timesheets List Screen
+  const renderTimesheetsList = () => (
+    <div className={styles.timesheetListContainer}>
+      <div className={styles.tabBarActual}>
+        <button className={clsx(styles.tabBtnActual, styles.tabBtnActiveActual)}>All</button>
+        <button className={styles.tabBtnActual}>Active</button>
+        <button className={styles.tabBtnActual}>Draft</button>
+      </div>
+
+      {timesheetsData.map((t, idx) => (
+        <div key={idx} className={styles.timesheetListItem}>
+          <div className={styles.timesheetLeftBorder} style={{ backgroundColor: t.borderColor }} />
+          <div className={styles.timesheetMainInfo}>
+            <h4 className={styles.timesheetTitleText}>{t.title}</h4>
+            <span className={styles.timesheetSubtext}>{t.project}</span>
+            <span className={styles.timesheetSubtext}>{t.task}</span>
+            <span className={styles.timesheetSubtext} style={{ fontSize: "0.62rem" }}>{t.author}</span>
+          </div>
+          <div className={styles.timesheetRightInfo}>
+            <span className={styles.timesheetHours}>{t.hours}</span>
+            <span className={styles.timesheetDate}>{t.date}</span>
+            <span className={styles.timesheetActionLink}>{t.action}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  // Render My Tasks Screen
+  const renderMyTasksList = () => (
+    <div className={styles.timesheetListContainer}>
+      <div className={styles.tabBarActual}>
+        <button className={clsx(styles.tabBtnActual, styles.tabBtnActiveActual)}>Inbox</button>
+        <button className={styles.tabBtnActual}>Today</button>
+        <button className={styles.tabBtnActual}>This Week</button>
+        <button className={styles.tabBtnActual}>This Month</button>
+      </div>
+
+      <div className={styles.taskListContainer}>
+        {tasksData.map((task, idx) => (
+          <div key={idx} className={styles.taskListItemCardActual}>
+            {task.borderColor && (
+              <div className={styles.timesheetLeftBorder} style={{ backgroundColor: task.borderColor }} />
+            )}
+            <div className={styles.taskItemLeftCol}>
+              <h4 className={styles.taskItemTitleActual}>{task.title}</h4>
+              <span className={styles.taskItemSubProjectText}>
+                {task.project} {task.locked && "🔒"}
+              </span>
+              <div className={styles.taskCardStarRowActual}>
+                {task.stars.map((filled, sIdx) => (
+                  <span key={sIdx} style={{ color: filled ? "#ffb300" : "#bbb" }}>
+                    ★
+                  </span>
+                ))}
+              </div>
+              {task.hasTasks && (
+                <span style={{ fontSize: "0.65rem", color: "#e07a24", fontWeight: 600 }}>[+1] Tasks</span>
+              )}
+              <span className={styles.taskItemStageBadge}>{task.stage}</span>
+            </div>
+            <div className={styles.taskItemRightCol}>
+              <span>Planned (H): {task.planned}</span>
+              <span>Start Date: {task.start}</span>
+              <span>End Date: {task.end}</span>
+              {task.overdue && (
+                <span className={styles.taskOverdueBadgeActual}>{task.overdue}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  // Render Timesheet Entry Form
+  const renderTimesheetEntryForm = () => (
+    <div className={styles.formContainerActual}>
+      <div className={styles.formRowInput}>
+        <span className={styles.formLabelSmall}>Account</span>
+        <span className={styles.formValueMain}>{themeMode === "dark" ? "dem" : "testCit"}</span>
+      </div>
+
+      <div className={styles.formRowInput}>
+        <span className={styles.formLabelSmall}>Project</span>
+        <span className={styles.formValueMain}>
+          {themeMode === "dark" ? '"Task-wise Time Allocation an...' : "Child project of"}
+        </span>
+      </div>
+
+      <div className={styles.formRowInput}>
+        <span className={styles.formLabelSmall}>Subproject</span>
+        <span className={styles.formValueMain} style={{ fontWeight: 400, color: "#888" }}>Tap to select</span>
+      </div>
+
+      <div className={styles.formRowInput}>
+        <span className={styles.formLabelSmall}>Task</span>
+        <span className={styles.formValueMain}>{themeMode === "dark" ? "111Ojne" : "sub task1"}</span>
+      </div>
+
+      <div className={styles.formRowInput}>
+        <span className={styles.formLabelSmall}>Subtask</span>
+        <span className={styles.formValueMain} style={{ fontWeight: 400, color: "#888" }}>Tap to select</span>
+      </div>
+
+      <div className={styles.prioritySectionTitle}>
+        <span>Priority</span>
+        <span style={{ fontSize: "0.8rem", color: "#888", cursor: "pointer" }}>ⓘ</span>
+      </div>
+
+      <div className={styles.priorityRadioGrid}>
+        <div className={styles.radioOption}>
+          <div className={clsx(styles.radioCircle, styles.radioCircleActive)}>
+            <div className={styles.radioCircleActiveInner} />
+          </div>
+          <span>Important, Urgent (1)</span>
+        </div>
+        <div className={styles.radioOption}>
+          <div className={styles.radioCircle} />
+          <span>Important, Not Urgent (2)</span>
+        </div>
+        <div className={styles.radioOption}>
+          <div className={styles.radioCircle} />
+          <span>Urgent, Not Important (3)</span>
+        </div>
+        <div className={styles.radioOption}>
+          <div className={styles.radioCircle} />
+          <span>Not Urgent, Not Important (4)</span>
+        </div>
+      </div>
+
+      <div className={styles.prioritySectionTitle} style={{ marginTop: 4 }}>
+        <span>Time Tracking</span>
+      </div>
+
+      <div style={{ display: "flex", gap: "20px", fontSize: "0.78rem" }}>
+        <div className={styles.radioOption}>
+          <div className={clsx(styles.radioCircle, styles.radioCircleActive)}>
+            <div className={styles.radioCircleActiveInner} />
+          </div>
+          <span>Manual</span>
+        </div>
+        <div className={styles.radioOption}>
+          <div className={styles.radioCircle} />
+          <span>Automated</span>
+        </div>
+      </div>
+
+      <div className={styles.trackingRowActual}>
+        <button className={styles.cyanDurationBtn}>
+          {themeMode === "dark" ? "5:04" : "5:00"}
+        </button>
+      </div>
+
+      <div className={styles.dateRowActual}>
+        <span>Date</span>
+        {themeMode === "dark" ? (
+          <span style={{ fontWeight: 600 }}>10-03-2026</span>
+        ) : (
+          <select className={styles.dateSelectBox} defaultValue="24-04-2026">
+            <option value="Today">Today</option>
+            <option value="24-04-2026">24-04-2026</option>
+          </select>
+        )}
+      </div>
+
+      <div className={styles.descContainerActual}>
+        <span style={{ fontSize: "0.8rem", fontWeight: 600 }}>Description</span>
+        <div className={styles.descTextareaWrapper}>
+          <textarea 
+            className={styles.descTextareaActual} 
+            readOnly
+            value={themeMode === "dark" 
+              ? "hello world, The background sybc works."
+              : "test timesheet this thing this new version of voice to text feature moments voice to text feature is working as expected"
+            }
+          />
+          <div className={styles.descTextareaButtons}>
+            <button className={styles.descMicroBtn} title="Voice Input">🎤</button>
+            <button className={styles.descMicroBtn} title="Expand">⤢</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <section className={styles.workbenchSection}>
       <div className="container">
@@ -373,6 +679,24 @@ function DeviceSimulator() {
                 </div>
               </div>
 
+              <div>
+                <span className={styles.controlLabel}>App Color Theme</span>
+                <div className={styles.toggleRow}>
+                  <button 
+                    className={clsx(styles.toggleBtn, themeMode === "dark" && styles.toggleBtnActive)}
+                    onClick={() => setThemeMode("dark")}
+                  >
+                    🌙 Dark Mode
+                  </button>
+                  <button 
+                    className={clsx(styles.toggleBtn, themeMode === "light" && styles.toggleBtnActive)}
+                    onClick={() => setThemeMode("light")}
+                  >
+                    ☀️ Light Mode
+                  </button>
+                </div>
+              </div>
+
               <div>
                 <span className={styles.controlLabel}>Quick Navigate</span>
                 <div className={styles.toggleRow}>
@@ -383,10 +707,24 @@ function DeviceSimulator() {
                     🏠 Dashboard
                   </button>
                   <button 
-                    className={clsx(styles.toggleBtn, activeScreen === "Projects" && styles.toggleBtnActive)}
-                    onClick={() => setActiveScreen("Projects")}
+                    className={clsx(styles.toggleBtn, activeScreen === "Timesheets" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Timesheets")}
+                  >
+                    ⏱ Timesheets
+                  </button>
+                </div>
+                <div className={styles.toggleRow}>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "Timesheet" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Timesheet")}
+                  >
+                    📝 Entry Form
+                  </button>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "My Tasks" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("My Tasks")}
                   >
-                    📁 Projects
+                    ⭐ Tasks
                   </button>
                 </div>
               </div>
@@ -405,7 +743,7 @@ function DeviceSimulator() {
                 
                 {orientation === "portrait" ? (
                   /* ── PORTRAIT MOBILE VIEW ── */
-                  <div className={styles.deviceScreen}>
+                  <div className={clsx(styles.deviceScreen, themeMode === "dark" ? styles.themeDark : styles.themeLight)}>
                     {/* Swipe Hotspot */}
                     <div 
                       className={styles.leftEdgeSwipeBoundary} 
@@ -418,39 +756,89 @@ function DeviceSimulator() {
                       <div style={{ display: "flex", gap: "6px" }}>
                         <span>📶</span>
                         <span>🔋 88%</span>
-                        <span>12:00 PM</span>
+                        <span>{themeMode === "dark" ? "12:15 PM" : "5:31 PM"}</span>
                       </div>
                     </div>
 
                     {/* App Header */}
                     <header className={styles.appHeaderActual}>
-                      <button 
-                        className={styles.headerIconBtn}
-                        onClick={() => setMenuOpen(!menuOpen)}
-                      >
-                        ☰
-                      </button>
-                      <h3 className={styles.headerTitle}>
-                        {activeScreen === "Dashboard" ? "Account [TestCIT]" : activeScreen}
-                      </h3>
-                      <div className={styles.headerIcons}>
-                        <button className={styles.headerIconBtn} title="Add Entry">⏱⁺</button>
-                        <button className={styles.headerIconBtn} title="Notifications">🔔</button>
-                        <button className={styles.headerIconBtn} title="Info">ⓘ</button>
-                      </div>
+                      {activeScreen === "Timesheet" ? (
+                        <>
+                          <button 
+                            className={styles.headerIconBtn}
+                            onClick={() => setActiveScreen("Timesheets")}
+                          >
+                            ⟨
+                          </button>
+                          <h3 className={styles.headerTitle}>Timesheet</h3>
+                          <div className={styles.headerIcons}>
+                            <button className={styles.headerIconBtn} title="Save">
+                              {themeMode === "dark" ? "📝" : "✓"}
+                            </button>
+                          </div>
+                        </>
+                      ) : (
+                        <>
+                          <button 
+                            className={styles.headerIconBtn}
+                            onClick={() => setMenuOpen(!menuOpen)}
+                          >
+                            ☰
+                          </button>
+                          <h3 className={styles.headerTitle}>
+                            {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "dem" : "testCit"}]`}
+                            {activeScreen === "Timesheets" && "Timesheets"}
+                            {activeScreen === "My Tasks" && "My Tasks"}
+                            {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "My Tasks" && activeScreen}
+                          </h3>
+                          <div className={styles.headerIcons}>
+                            {activeScreen === "My Tasks" ? (
+                              <>
+                                <button className={styles.headerIconBtn} title="Sort">🎚</button>
+                                <button className={styles.headerIconBtn} title="Help">ⓘ</button>
+                                <button className={styles.headerIconBtn} title="Search">🔍</button>
+                                <button className={styles.headerIconBtn} title="Grid">⚃</button>
+                                <button 
+                                  className={styles.headerIconBtn} 
+                                  title="Add Task"
+                                  onClick={() => setActiveScreen("Timesheet")}
+                                >
+                                  +
+                                </button>
+                              </>
+                            ) : (
+                              <>
+                                <button 
+                                  className={styles.headerIconBtn} 
+                                  title="Add Entry"
+                                  onClick={() => setActiveScreen("Timesheet")}
+                                >
+                                  ⏱⁺
+                                </button>
+                                <button className={styles.headerIconBtn} title="Notifications">🔔</button>
+                                <button className={styles.headerIconBtn} title="Info">ⓘ</button>
+                              </>
+                            )}
+                          </div>
+                        </>
+                      )}
                     </header>
 
                     {/* Screen Scrollable Body */}
                     <div className={styles.pageScrollContent}>
-                      {activeScreen === "Dashboard" ? (
+                      {activeScreen === "Dashboard" && (
                         <>
                           {renderDashboardMatrix()}
                           {renderProjectOverview()}
                         </>
-                      ) : (
-                        <div style={{ padding: "30px 16px", textAlign: "center", color: "#666" }}>
+                      )}
+                      {activeScreen === "Timesheets" && renderTimesheetsList()}
+                      {activeScreen === "Timesheet" && renderTimesheetEntryForm()}
+                      {activeScreen === "My Tasks" && renderMyTasksList()}
+                      {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && (
+                        <div style={{ padding: "30px 16px", textAlign: "center", opacity: 0.6 }}>
                           <h3>{activeScreen} View</h3>
-                          <p>Simulating the active Ubuntu Touch component. Switch back to Dashboard to view the Eisenhower priority matrix.</p>
+                          <p>Simulating the active Ubuntu Touch component. Switch back to Dashboard, Timesheets, or Tasks using the control panel.</p>
                         </div>
                       )}
                     </div>
@@ -458,9 +846,15 @@ function DeviceSimulator() {
                     {/* Floating Action Button (FAB) */}
                     <button 
                       className={styles.fabButtonActual}
-                      onClick={() => setMenuOpen(!menuOpen)}
+                      onClick={() => {
+                        if (activeScreen === "Timesheet") {
+                          setActiveScreen("Timesheets");
+                        } else {
+                          setMenuOpen(!menuOpen);
+                        }
+                      }}
                     >
-                      ☰
+                      {activeScreen === "Timesheet" ? "⟨" : "☰"}
                     </button>
 
                     {/* Ubuntu Left Menu Drawer */}
@@ -469,7 +863,12 @@ function DeviceSimulator() {
                         <h4 className={styles.menuHeaderTitle}>Menu</h4>
                         <div className={styles.menuHeaderControls}>
                           <span style={{ fontSize: "1.1rem", cursor: "pointer" }}>👤</span>
-                          <span style={{ fontSize: "1.1rem", cursor: "pointer" }}>🌙</span>
+                          <span 
+                            style={{ fontSize: "1.1rem", cursor: "pointer" }}
+                            onClick={() => setThemeMode(themeMode === "dark" ? "light" : "dark")}
+                          >
+                            {themeMode === "dark" ? "☀️" : "🌙"}
+                          </span>
                         </div>
                       </div>
                       {renderMenuList()}
@@ -489,14 +888,14 @@ function DeviceSimulator() {
                   </div>
                 ) : (
                   /* ── LANDSCAPE CONVERGENT VIEW ── */
-                  <div className={styles.deviceScreen}>
+                  <div className={clsx(styles.deviceScreen, themeMode === "dark" ? styles.themeDark : styles.themeLight)}>
                     {/* Top Status Bar */}
                     <div className={styles.statusBarActual}>
                       <span>Ubuntu Touch converged workspace</span>
                       <div style={{ display: "flex", gap: "6px" }}>
                         <span>📶</span>
                         <span>🔋 88%</span>
-                        <span>12:00 PM</span>
+                        <span>{themeMode === "dark" ? "12:15 PM" : "5:31 PM"}</span>
                       </div>
                     </div>
 
@@ -506,7 +905,12 @@ function DeviceSimulator() {
                         <div className={styles.menuHeaderActual}>
                           <h4 className={styles.menuHeaderTitle}>Menu</h4>
                           <div className={styles.menuHeaderControls}>
-                            <span style={{ fontSize: "1rem" }}>🌙</span>
+                            <span 
+                              style={{ fontSize: "1rem", cursor: "pointer" }}
+                              onClick={() => setThemeMode(themeMode === "dark" ? "light" : "dark")}
+                            >
+                              {themeMode === "dark" ? "☀️" : "🌙"}
+                            </span>
                             <span style={{ fontSize: "1rem" }}>👤</span>
                           </div>
                         </div>
@@ -514,59 +918,118 @@ function DeviceSimulator() {
                       </aside>
 
                       {/* Column 2: Dashboard/Account Main View */}
-                      <main className={styles.convergedCenter}>
+                      <main className={styles.convergedCenter} style={{ background: "transparent" }}>
                         <header className={styles.appHeaderActual}>
-                          <h3 className={styles.headerTitle}>Account [TestCIT]</h3>
+                          <h3 className={styles.headerTitle}>
+                            {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "dem" : "testCit"}]`}
+                            {activeScreen === "Timesheets" && "Timesheets"}
+                            {activeScreen === "Timesheet" && "Timesheet"}
+                            {activeScreen === "My Tasks" && "My Tasks"}
+                            {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && activeScreen}
+                          </h3>
                           <div className={styles.headerIcons}>
-                            <button className={styles.headerIconBtn}>⏱⁺</button>
-                            <button className={styles.headerIconBtn}>🔔</button>
-                            <button className={styles.headerIconBtn}>ⓘ</button>
+                            {activeScreen === "Timesheet" ? (
+                              <button className={styles.headerIconBtn}>
+                                {themeMode === "dark" ? "📝" : "✓"}
+                              </button>
+                            ) : (
+                              <>
+                                <button 
+                                  className={styles.headerIconBtn}
+                                  onClick={() => setActiveScreen("Timesheet")}
+                                >
+                                  ⏱⁺
+                                </button>
+                                <button className={styles.headerIconBtn}>🔔</button>
+                                <button className={styles.headerIconBtn}>ⓘ</button>
+                              </>
+                            )}
                           </div>
                         </header>
+                        
                         <div className={styles.pageScrollContent}>
-                          {renderDashboardMatrix()}
-                          {renderProjectOverview()}
+                          {activeScreen === "Dashboard" && (
+                            <>
+                              {renderDashboardMatrix()}
+                              {renderProjectOverview()}
+                            </>
+                          )}
+                          {activeScreen === "Timesheets" && renderTimesheetsList()}
+                          {activeScreen === "Timesheet" && renderTimesheetEntryForm()}
+                          {activeScreen === "My Tasks" && renderMyTasksList()}
+                          {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && (
+                            <div style={{ padding: "30px 16px", textAlign: "center", opacity: 0.6 }}>
+                              <h3>{activeScreen} View</h3>
+                              <p>Simulating view. Switch tabs in the left sidebar menu.</p>
+                            </div>
+                          )}
                         </div>
                         
-                        <button className={styles.fabButtonActual}>
-                          ☰
+                        <button 
+                          className={styles.fabButtonActual}
+                          onClick={() => setActiveScreen("Timesheet")}
+                        >
+                          ⏱⁺
                         </button>
                       </main>
 
                       {/* Column 3: Charts / Projects View */}
-                      <section className={styles.convergedRight}>
+                      <section className={styles.convergedRight} style={{ background: themeMode === "dark" ? "#1e1e1e" : "#ffffff" }}>
                         <header className={styles.rightHeader}>
                           Charts
                         </header>
                         
                         <div className={styles.rightContent}>
-                          <div className={styles.barChartTitle}>Projectwise Time Spent</div>
+                          <div className={styles.barChartTitle} style={{ color: themeMode === "dark" ? "#f0ebe0" : "#333333" }}>
+                            Projectwise Time Spent
+                          </div>
                           
                           <div className={styles.barChartContainer}>
                             {projectsData.map((p) => (
                               <div key={p.name} className={styles.barChartRow}>
-                                <span className={styles.barChartLabel} title={p.name}>
+                                <span 
+                                  className={styles.barChartLabel} 
+                                  title={p.name}
+                                  style={{ color: themeMode === "dark" ? "#aaaaaa" : "#555555" }}
+                                >
                                   {p.name}
                                 </span>
                                 <div className={styles.barChartValueWrapper}>
-                                  <div className={styles.barChartBarBg}>
+                                  <div className={styles.barChartBarBg} style={{ background: themeMode === "dark" ? "#333" : "#eee" }}>
                                     <div 
                                       className={styles.barChartBarFill} 
                                       style={{ width: `${p.percent}%`, backgroundColor: p.color }}
                                     />
                                   </div>
-                                  <span className={styles.barChartValText}>{p.time.split(" ")[0]}</span>
+                                  <span 
+                                    className={styles.barChartValText}
+                                    style={{ color: themeMode === "dark" ? "#f0ebe0" : "#333333" }}
+                                  >
+                                    {p.time.split(" ")[0]}
+                                  </span>
                                 </div>
                               </div>
                             ))}
                           </div>
 
-                          <button className={styles.showNextBtn}>
+                          <button 
+                            className={styles.showNextBtn}
+                            style={{
+                              background: themeMode === "dark" ? "#2a2a2a" : "#f5f5f5",
+                              borderColor: themeMode === "dark" ? "#444" : "#e0e0e0",
+                              color: themeMode === "dark" ? "#ccc" : "#666"
+                            }}
+                          >
                             Show next 10 ↓
                           </button>
 
-                          <div className={styles.projectsSectionHeader}>
-                            <h4 className={styles.projectsSectionTitle}>Projects</h4>
+                          <div className={styles.projectsSectionHeader} style={{ borderBottomColor: themeMode === "dark" ? "#444" : "#e0e0e0" }}>
+                            <h4 
+                              className={styles.projectsSectionTitle}
+                              style={{ color: themeMode === "dark" ? "#f0ebe0" : "#333333" }}
+                            >
+                              Projects
+                            </h4>
                             <span className={styles.projectsTotalBadge}>9490.0 h</span>
                           </div>
 
@@ -576,24 +1039,35 @@ function DeviceSimulator() {
                             placeholder="Search projects..." 
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
+                            style={{
+                              background: themeMode === "dark" ? "#222" : "#fff",
+                              borderColor: themeMode === "dark" ? "#444" : "#ccc",
+                              color: themeMode === "dark" ? "#fff" : "#333"
+                            }}
                           />
 
-                          <div className={styles.projectFilterTabs}>
+                          <div 
+                            className={styles.projectFilterTabs}
+                            style={{ background: themeMode === "dark" ? "#2a2a2a" : "#eeeeee" }}
+                          >
                             <button 
                               className={clsx(styles.projectFilterBtn, filterType === "most-time" && styles.projectFilterBtnActive)}
                               onClick={() => setFilterType("most-time")}
+                              style={{ color: themeMode === "dark" ? "#aaa" : "#666" }}
                             >
                               Most time
                             </button>
                             <button 
                               className={clsx(styles.projectFilterBtn, filterType === "tasks" && styles.projectFilterBtnActive)}
                               onClick={() => setFilterType("tasks")}
+                              style={{ color: themeMode === "dark" ? "#aaa" : "#666" }}
                             >
                               Tasks
                             </button>
                             <button 
                               className={clsx(styles.projectFilterBtn, filterType === "a-z" && styles.projectFilterBtnActive)}
                               onClick={() => setFilterType("a-z")}
+                              style={{ color: themeMode === "dark" ? "#aaa" : "#666" }}
                             >
                               A-Z
                             </button>
@@ -601,15 +1075,29 @@ function DeviceSimulator() {
 
                           <div className={styles.projectListLandscape}>
                             {filteredProjects.map((p) => (
-                              <div key={p.name} className={styles.projectListItemCard}>
+                              <div 
+                                key={p.name} 
+                                className={styles.projectListItemCard}
+                                style={{
+                                  background: themeMode === "dark" ? "#222" : "#fff",
+                                  borderLeftColor: p.color
+                                }}
+                              >
                                 <div className={styles.projectListItemHeader}>
-                                  <h4 className={styles.projectListItemName}>{p.name}</h4>
-                                  <span className={styles.projectListItemTime}>{p.time}</span>
+                                  <h4 
+                                    className={styles.projectListItemName}
+                                    style={{ color: themeMode === "dark" ? "#f0ebe0" : "#333" }}
+                                  >
+                                    {p.name}
+                                  </h4>
+                                  <span className={styles.projectListItemTime} style={{ color: p.color }}>
+                                    {p.time}
+                                  </span>
                                 </div>
-                                <div className={styles.projectListItemTasks}>
+                                <div className={styles.projectListItemTasks} style={{ color: themeMode === "dark" ? "#aaa" : "#777" }}>
                                   {p.tasks} tasks
                                 </div>
-                                <div className={styles.projectProgressBg}>
+                                <div className={styles.projectProgressBg} style={{ background: themeMode === "dark" ? "#333" : "#eee" }}>
                                   <div 
                                     className={styles.projectProgressBar}
                                     style={{ width: `${p.percent}%`, backgroundColor: p.color }}
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 0d669274..da05e809 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -1484,4 +1484,436 @@
   background: #e05a2b;
 }
 
+/* Screen Themes */
+.themeLight {
+  background: #f5f5f5 !important;
+  color: #333333 !important;
+}
+
+.themeLight .appHeaderActual {
+  background: #e05a2b;
+  color: #ffffff;
+}
+
+.themeLight .indicatorBarActual {
+  background: #f5f5f5;
+}
+
+.themeDark {
+  background: #151515 !important;
+  color: #f0ebe0 !important;
+}
+
+.themeDark .appHeaderActual {
+  background: #e05a2b;
+  color: #ffffff;
+}
+
+.themeDark .indicatorBarActual {
+  background: #151515;
+}
+
+/* Timesheet Entry Form */
+.formContainerActual {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.themeDark .formRowInput {
+  background: #222222;
+  border: 1px solid #333333;
+  color: #ffffff;
+}
+
+.themeLight .formRowInput {
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  color: #333333;
+}
+
+.formRowInput {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+}
+
+.formLabelSmall {
+  font-size: 0.65rem;
+  color: #888888;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.formValueMain {
+  font-size: 0.85rem;
+  font-weight: 700;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.formValueMain::after {
+  content: "▼";
+  font-size: 0.6rem;
+  color: #999;
+}
+
+/* Priority Option Grid */
+.prioritySectionTitle {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-top: 14px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.priorityRadioGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.radioOption {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.72rem;
+  cursor: pointer;
+}
+
+.radioCircle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1.5px solid #888;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.radioCircleActive {
+  border-color: #e05a2b;
+}
+
+.radioCircleActiveInner {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #e05a2b;
+}
+
+.themeDark .radioCircleActive {
+  border-color: #e07a24;
+}
+.themeDark .radioCircleActiveInner {
+  background: #e07a24;
+}
+
+/* Tracking Button */
+.trackingRowActual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 10px;
+  margin-bottom: 14px;
+}
+
+.cyanDurationBtn {
+  background: #00cbd6;
+  color: #ffffff;
+  font-size: 0.95rem;
+  font-weight: 700;
+  padding: 8px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  min-width: 80px;
+}
+
+/* Date Pick */
+.dateRowActual {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.82rem;
+  margin-bottom: 12px;
+}
+
+.dateSelectBox {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  outline: none;
+}
+
+.themeDark .dateSelectBox {
+  background: #222222;
+  border: 1px solid #333;
+  color: #ffffff;
+}
+
+.themeLight .dateSelectBox {
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  color: #333333;
+}
+
+/* Description Textarea */
+.descContainerActual {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.descTextareaWrapper {
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.themeDark .descTextareaWrapper {
+  border: 1px solid #333333;
+}
+
+.themeLight .descTextareaWrapper {
+  border: 1px solid #cccccc;
+}
+
+.descTextareaActual {
+  width: 100%;
+  min-height: 80px;
+  padding: 10px;
+  font-size: 0.78rem;
+  outline: none;
+  font-family: inherit;
+  resize: none;
+  border: none;
+}
+
+.themeDark .descTextareaActual {
+  background: #1a1a1a;
+  color: #ffffff;
+}
+
+.themeLight .descTextareaActual {
+  background: #ffffff;
+  color: #333333;
+}
+
+.descTextareaButtons {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  gap: 6px;
+}
+
+.descMicroBtn {
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  border: none;
+  background: #e05a2b;
+  color: #ffffff;
+  font-size: 0.7rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Timesheets List */
+.timesheetListContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.themeLight .timesheetListContainer {
+  background: #ffffff;
+}
+
+.themeDark .timesheetListContainer {
+  background: #151515;
+}
+
+.timesheetListItem {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 12px 14px;
+  position: relative;
+}
+
+.themeDark .timesheetListItem {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.timesheetLeftBorder {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+}
+
+.timesheetMainInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 6px;
+}
+
+.timesheetTitleText {
+  font-size: 0.78rem;
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 0;
+}
+
+.timesheetSubtext {
+  font-size: 0.68rem;
+  color: #777777;
+}
+
+.themeDark .timesheetSubtext {
+  color: #aaaaaa;
+}
+
+.timesheetRightInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  min-width: 80px;
+}
+
+.timesheetHours {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #333333;
+}
+
+.themeDark .timesheetHours {
+  color: #f0ebe0;
+}
+
+.timesheetDate {
+  font-size: 0.65rem;
+  color: #777777;
+}
+
+.timesheetActionLink {
+  font-size: 0.68rem;
+  color: #00bcd4;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+/* My Tasks List */
+.taskListContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  gap: 10px;
+}
+
+.taskListItemCardActual {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  border-radius: 4px;
+  padding: 10px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  position: relative;
+  background: #ffffff;
+}
+
+.themeDark .taskListItemCardActual {
+  background: #222222;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.taskItemLeftCol {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.taskItemRightCol {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  font-size: 0.65rem;
+  color: #777777;
+  text-align: right;
+}
+
+.themeDark .taskItemRightCol {
+  color: #aaaaaa;
+}
+
+.taskOverdueBadgeActual {
+  color: #e53935;
+  font-weight: 600;
+}
+
+.taskCardStarRowActual {
+  display: flex;
+  gap: 2px;
+  font-size: 0.75rem;
+}
+
+.taskItemTitleActual {
+  font-size: 0.82rem;
+  font-weight: 700;
+  margin: 0;
+  color: #333333;
+  line-height: 1.25;
+}
+
+.themeDark .taskItemTitleActual {
+  color: #f0ebe0;
+}
+
+.taskItemSubProjectText {
+  font-size: 0.68rem;
+  color: #777777;
+}
+
+.themeDark .taskItemSubProjectText {
+  color: #aaaaaa;
+}
+
+.taskItemStageBadge {
+  align-self: flex-start;
+  font-size: 0.62rem;
+  padding: 2px 6px;
+  background: #f0f0f0;
+  border-radius: 10px;
+  font-weight: 600;
+  color: #555555;
+}
+
+.themeDark .taskItemStageBadge {
+  background: #333333;
+  color: #cccccc;
+}
+
+
 

From b1474d326208e3cc9ede95b9350e41ea6bc7f992 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Wed, 17 Jun 2026 18:20:29 +0530
Subject: [PATCH 03/15] feat: implement project summaries, task lists, activity
 logs, and settings dashboard views

---
 website/src/pages/index.js         | 368 +++++++++++++++++++++++++++--
 website/src/pages/index.module.css | 205 ++++++++++++++++
 2 files changed, 555 insertions(+), 18 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 66c6981c..97db5ab3 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -317,13 +317,100 @@ function DeviceSimulator() {
     },
     {
       title: "UI Improvements And Bug Fixes",
-      project: "UT time management",
-      stage: "Development",
-      stars: [false, false, false],
-      planned: "N/A",
-      start: "2026-01-21",
+      borderColor: "#999999"
+    }
+  ];
+
+  const allTasksData = [
+    {
+      title: "Design app launch icon",
+      project: "Mobile App Core",
+      stage: "Completed",
+      stars: [true, true, true],
+      planned: "8.0 H",
+      start: "2026-06-01",
+      end: "2026-06-03",
+      overdue: null,
+      status: "complete",
+      borderColor: "#43a047"
+    },
+    {
+      title: "Implement Docusaurus Search Option",
+      project: "Docs Integration",
+      stage: "Active",
+      stars: [true, true, false],
+      planned: "12.0 H",
+      start: "2026-06-10",
+      end: "2026-06-15",
+      overdue: "2 days overdue",
+      status: "active",
+      borderColor: "#1e88e5"
+    },
+    {
+      title: "Refactor navigation drawer layout",
+      project: "QML Layout Refactoring",
+      stage: "Draft",
+      stars: [true, false, false],
+      planned: "4.0 H",
+      start: "2026-06-15",
       end: "Not set",
-      overdue: null
+      overdue: null,
+      status: "draft",
+      borderColor: "#e07a24"
+    },
+    {
+      title: "Write unit tests for Timesheet model",
+      project: "Mobile App Core",
+      stage: "Active",
+      stars: [true, true, true],
+      planned: "16.0 H",
+      start: "2026-06-11",
+      end: "2026-06-18",
+      overdue: null,
+      status: "active",
+      borderColor: "#43a047"
+    }
+  ];
+
+  const projectUpdatesData = [
+    {
+      log: "Suraj Yadav logged 3:30 H on 'QML Layout Refactoring' (Task: Fix layout spacing)",
+      time: "2 hours ago"
+    },
+    {
+      log: "Parvathy Yadav updated status of 'Website Redesign' to Active",
+      time: "5 hours ago"
+    },
+    {
+      log: "Automated Sync completed: 42 tasks synchronized with server",
+      time: "Yesterday"
+    },
+    {
+      log: "Anisha PP created new task 'Add search filter' in 'Mobile App Core'",
+      time: "2 days ago"
+    },
+    {
+      log: "System database backup successfully created: 1.24 MB",
+      time: "3 days ago"
+    }
+  ];
+
+  const activitiesData = [
+    {
+      log: "Reviewed Voice-To-Text PR changes and validated models",
+      time: "2026-06-16"
+    },
+    {
+      log: "Optimized Docusaurus landing page layout structure",
+      time: "2026-06-15"
+    },
+    {
+      log: "Verified Ubuntu Touch QML compile flags on build server",
+      time: "2026-06-14"
+    },
+    {
+      log: "Validated color palette variables for Eisenhower Matrix",
+      time: "2026-06-12"
     }
   ];
 
@@ -648,6 +735,223 @@ function DeviceSimulator() {
     </div>
   );
 
+  // Render Projects List
+  const renderProjectsList = () => (
+    <div className={styles.timesheetListContainer}>
+      <div style={{ padding: "12px 14px", display: "flex", flexDirection: "column", gap: "10px" }}>
+        {projectsData.map((project, idx) => (
+          <div key={idx} style={{ 
+            padding: "12px", 
+            background: themeMode === "dark" ? "#222222" : "#ffffff", 
+            borderRadius: "6px",
+            border: themeMode === "dark" ? "1px solid #333333" : "1px solid #e0e0e0",
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px"
+          }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "8px" }}>
+              <h4 style={{ margin: 0, fontSize: "0.82rem", fontWeight: "700" }}>{project.name}</h4>
+              <span className={styles.taskItemStageBadge} style={{ background: project.color, color: "#ffffff", padding: "2px 6px" }}>
+                {project.tasks} Tasks
+              </span>
+            </div>
+            
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.68rem", color: "#888888" }}>
+              <span>Total Logged: <strong>{project.time}</strong></span>
+              <span>{project.percent}%</span>
+            </div>
+
+            {/* Simulated Progress Bar */}
+            <div style={{ height: "4px", background: themeMode === "dark" ? "#151515" : "#f0f0f0", borderRadius: "2px", overflow: "hidden" }}>
+              <div style={{ height: "100%", width: `${project.percent}%`, background: project.color }} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  // Render Project Updates
+  const renderProjectUpdates = () => (
+    <div className={styles.logListContainer}>
+      {projectUpdatesData.map((log, idx) => (
+        <div key={idx} className={styles.logItem}>
+          <div className={styles.logDot} />
+          <div className={styles.logContent}>
+            <p className={styles.logTitle}>{log.log}</p>
+            <span className={styles.logTime}>{log.time}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  // Render Activities
+  const renderActivitiesList = () => (
+    <div className={styles.logListContainer}>
+      {activitiesData.map((act, idx) => (
+        <div key={idx} className={styles.logItem}>
+          <div className={styles.logDot} style={{ backgroundColor: "#43a047" }} />
+          <div className={styles.logContent}>
+            <p className={styles.logTitle}>{act.log}</p>
+            <span className={styles.logTime}>{act.time}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  // Render All Tasks List
+  const renderAllTasksList = () => (
+    <div className={styles.timesheetListContainer}>
+      <div className={styles.tabBarActual}>
+        <button className={clsx(styles.tabBtnActual, styles.tabBtnActiveActual)}>All</button>
+        <button className={styles.tabBtnActual}>Active</button>
+        <button className={styles.tabBtnActual}>Completed</button>
+      </div>
+
+      <div className={styles.taskListContainer}>
+        {allTasksData.map((task, idx) => (
+          <div key={idx} className={styles.taskListItemCardActual}>
+            <div className={styles.timesheetLeftBorder} style={{ backgroundColor: task.borderColor }} />
+            <div className={styles.taskItemLeftCol}>
+              <div style={{ display: "flex", gap: "6px", alignItems: "center" }}>
+                <span style={{ 
+                  color: task.status === "complete" ? "#43a047" : "#888888", 
+                  fontSize: "0.85rem",
+                  fontWeight: "bold"
+                }}>
+                  {task.status === "complete" ? "☑" : "☐"}
+                </span>
+                <h4 className={styles.taskItemTitleActual} style={{
+                  textDecoration: task.status === "complete" ? "line-through" : "none",
+                  opacity: task.status === "complete" ? 0.6 : 1
+                }}>
+                  {task.title}
+                </h4>
+              </div>
+              <span className={styles.taskItemSubProjectText}>
+                {task.project}
+              </span>
+              <div className={styles.taskCardStarRowActual}>
+                {task.stars.map((filled, sIdx) => (
+                  <span key={sIdx} style={{ color: filled ? "#ffb300" : "#bbb" }}>
+                    ★
+                  </span>
+                ))}
+              </div>
+              <span className={styles.taskItemStageBadge}>{task.stage}</span>
+            </div>
+            <div className={styles.taskItemRightCol}>
+              <span>Planned: {task.planned}</span>
+              <span>Start: {task.start}</span>
+              <span>End: {task.end}</span>
+              {task.overdue && (
+                <span className={styles.taskOverdueBadgeActual}>{task.overdue}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  // Render Settings Screen
+  const renderSettingsScreen = () => (
+    <div style={{ paddingBottom: "20px" }}>
+      <div className={styles.settingsGroup}>
+        <div className={styles.settingsGroupTitle}>Profile Settings</div>
+        <div className={styles.settingsItem}>
+          <span>Username</span>
+          <span className={styles.settingsItemValue}>surajyadav</span>
+        </div>
+        <div className={styles.settingsItem}>
+          <span>Email</span>
+          <span className={styles.settingsItemValue}>suraj@example.com</span>
+        </div>
+      </div>
+
+      <div className={styles.settingsGroup}>
+        <div className={styles.settingsGroupTitle}>Synchronization</div>
+        <div className={styles.settingsItem}>
+          <span>Sync Server</span>
+          <span className={styles.settingsItemValue}>https://sync.timemanagement.org</span>
+        </div>
+        <div className={styles.settingsItem}>
+          <span>Interval</span>
+          <select className={styles.settingsSelect} defaultValue="15m">
+            <option value="5m">Every 5 mins</option>
+            <option value="15m">Every 15 mins</option>
+            <option value="1h">Every hour</option>
+            <option value="manual">Manual only</option>
+          </select>
+        </div>
+      </div>
+
+      <div className={styles.settingsGroup}>
+        <div className={styles.settingsGroupTitle}>Voice-To-Text</div>
+        <div className={styles.settingsItem}>
+          <span>Detection Engine</span>
+          <span className={styles.settingsItemValue}>whisper-base-en</span>
+        </div>
+        <div className={styles.settingsItem}>
+          <span>Input Language</span>
+          <select className={styles.settingsSelect} defaultValue="en-US">
+            <option value="en-US">English (US)</option>
+            <option value="de-DE">Deutsch</option>
+            <option value="tr-TR">Türkçe</option>
+            <option value="hi-IN">Hindi</option>
+          </select>
+        </div>
+      </div>
+
+      <div className={styles.settingsGroup}>
+        <div className={styles.settingsGroupTitle}>Database Maintenance</div>
+        <div className={styles.settingsItem}>
+          <span>Database Size</span>
+          <span className={styles.settingsItemValue}>1.24 MB</span>
+        </div>
+        <div className={styles.settingsItem}>
+          <span>Cached Tasks</span>
+          <span className={styles.settingsItemValue}>186</span>
+        </div>
+        <button className={styles.settingsButton}>
+          Clear Local Cache
+        </button>
+      </div>
+    </div>
+  );
+
+  // Render About Screen
+  const renderAboutScreen = () => (
+    <div className={styles.aboutContainer}>
+      <div className={styles.aboutLogo}>⏱</div>
+      <h3 className={styles.aboutAppName}>TimeManagement</h3>
+      <div className={styles.aboutAppVersion}>Version 2.4.1 (GPL-3.0)</div>
+      
+      <div className={styles.aboutDivider} />
+      
+      <p className={styles.aboutText}>
+        A convergent time tracking and task management application designed for Ubuntu Touch and Debian-based systems.
+      </p>
+
+      <div className={styles.aboutDivider} />
+
+      <div className={styles.aboutSectionTitle}>Project Team</div>
+      <div className={styles.aboutContributorList}>
+        <div className={styles.aboutContributor}>• Suraj Yadav (Lead Developer)</div>
+        <div className={styles.aboutContributor}>• Parvathy (Core Architect)</div>
+        <div className={styles.aboutContributor}>• Anisha PP (UI/UX Designer)</div>
+      </div>
+
+      <div className={styles.aboutDivider} />
+
+      <button className={styles.settingsButton} style={{ backgroundColor: "#43a047" }}>
+        Check for Updates
+      </button>
+    </div>
+  );
+
   return (
     <section className={styles.workbenchSection}>
       <div className="container">
@@ -727,6 +1031,34 @@ function DeviceSimulator() {
                     ⭐ Tasks
                   </button>
                 </div>
+                <div className={styles.toggleRow}>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "Projects" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Projects")}
+                  >
+                    📁 Projects
+                  </button>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "Project Updates" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Project Updates")}
+                  >
+                    🕒 Updates
+                  </button>
+                </div>
+                <div className={styles.toggleRow}>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "Settings" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("Settings")}
+                  >
+                    ⚙ Settings
+                  </button>
+                  <button 
+                    className={clsx(styles.toggleBtn, activeScreen === "About Us" && styles.toggleBtnActive)}
+                    onClick={() => setActiveScreen("About Us")}
+                  >
+                    ℹ About Us
+                  </button>
+                </div>
               </div>
             </div>
 
@@ -835,12 +1167,12 @@ function DeviceSimulator() {
                       {activeScreen === "Timesheets" && renderTimesheetsList()}
                       {activeScreen === "Timesheet" && renderTimesheetEntryForm()}
                       {activeScreen === "My Tasks" && renderMyTasksList()}
-                      {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && (
-                        <div style={{ padding: "30px 16px", textAlign: "center", opacity: 0.6 }}>
-                          <h3>{activeScreen} View</h3>
-                          <p>Simulating the active Ubuntu Touch component. Switch back to Dashboard, Timesheets, or Tasks using the control panel.</p>
-                        </div>
-                      )}
+                      {activeScreen === "All Tasks" && renderAllTasksList()}
+                      {activeScreen === "Projects" && renderProjectsList()}
+                      {activeScreen === "Project Updates" && renderProjectUpdates()}
+                      {activeScreen === "Activities" && renderActivitiesList()}
+                      {activeScreen === "Settings" && renderSettingsScreen()}
+                      {activeScreen === "About Us" && renderAboutScreen()}
                     </div>
 
                     {/* Floating Action Button (FAB) */}
@@ -957,12 +1289,12 @@ function DeviceSimulator() {
                           {activeScreen === "Timesheets" && renderTimesheetsList()}
                           {activeScreen === "Timesheet" && renderTimesheetEntryForm()}
                           {activeScreen === "My Tasks" && renderMyTasksList()}
-                          {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && (
-                            <div style={{ padding: "30px 16px", textAlign: "center", opacity: 0.6 }}>
-                              <h3>{activeScreen} View</h3>
-                              <p>Simulating view. Switch tabs in the left sidebar menu.</p>
-                            </div>
-                          )}
+                          {activeScreen === "All Tasks" && renderAllTasksList()}
+                          {activeScreen === "Projects" && renderProjectsList()}
+                          {activeScreen === "Project Updates" && renderProjectUpdates()}
+                          {activeScreen === "Activities" && renderActivitiesList()}
+                          {activeScreen === "Settings" && renderSettingsScreen()}
+                          {activeScreen === "About Us" && renderAboutScreen()}
                         </div>
                         
                         <button 
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index da05e809..abbec1de 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -1915,5 +1915,210 @@
   color: #cccccc;
 }
 
+/* Settings View Styles */
+.settingsGroup {
+  margin: 16px 14px;
+  border-radius: 6px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.themeDark .settingsGroup {
+  background: #222222;
+  border: 1px solid #333333;
+}
+
+.themeLight .settingsGroup {
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+}
+
+.settingsGroupTitle {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #e05a2b;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  letter-spacing: 0.05em;
+}
+
+.settingsItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  font-size: 0.8rem;
+}
+
+.settingsItem:last-child {
+  border-bottom: none;
+}
+
+.themeDark .settingsItem {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.settingsItemValue {
+  font-weight: 600;
+  color: #777777;
+}
+
+.themeDark .settingsItemValue {
+  color: #aaaaaa;
+}
+
+.settingsSelect {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  outline: none;
+}
+
+.themeDark .settingsSelect {
+  background: #151515;
+  border: 1px solid #444;
+  color: #fff;
+}
+
+.themeLight .settingsSelect {
+  background: #fff;
+  border: 1px solid #ccc;
+  color: #333;
+}
+
+.settingsButton {
+  background: #e53935;
+  color: #ffffff;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  width: 100%;
+  margin-top: 6px;
+  transition: opacity 0.15s;
+}
+
+.settingsButton:hover {
+  opacity: 0.9;
+}
+
+/* About Screen Styles */
+.aboutContainer {
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
+}
+
+.aboutLogo {
+  font-size: 3rem;
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.aboutAppName {
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-align: center;
+  margin: 0;
+}
+
+.aboutAppVersion {
+  font-size: 0.72rem;
+  color: #888888;
+  text-align: center;
+}
+
+.aboutText {
+  font-size: 0.78rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.aboutDivider {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  margin: 8px 0;
+}
+
+.themeDark .aboutDivider {
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+
+.aboutSectionTitle {
+  font-size: 0.8rem;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+
+.aboutContributorList {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 8px;
+}
+
+.aboutContributor {
+  font-size: 0.72rem;
+  color: #555555;
+}
+
+.themeDark .aboutContributor {
+  color: #aaaaaa;
+}
+
+/* Activity & Project Update Log Items */
+.logListContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.logItem {
+  display: flex;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  position: relative;
+}
+
+.themeDark .logItem {
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.logDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #e05a2b;
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+
+.logContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.logTitle {
+  font-size: 0.78rem;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.logTime {
+  font-size: 0.65rem;
+  color: #888888;
+}
+
+
 
 

From 0265d2c3af460017cee629f7d47b966b4f627045 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Wed, 17 Jun 2026 18:33:41 +0530
Subject: [PATCH 04/15] feat: add dark mode styles for navigation components
 and update UI improvements project metadata

---
 website/src/pages/index.js         |  7 ++++++
 website/src/pages/index.module.css | 36 ++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 97db5ab3..2b1a2f04 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -317,6 +317,13 @@ function DeviceSimulator() {
     },
     {
       title: "UI Improvements And Bug Fixes",
+      project: "UT time management",
+      stage: "Development",
+      stars: [false, false, false],
+      planned: "N/A",
+      start: "2026-01-21",
+      end: "Not set",
+      overdue: null,
       borderColor: "#999999"
     }
   ];
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index abbec1de..1ac7b6f2 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -2119,6 +2119,42 @@
   color: #888888;
 }
 
+/* Dark Mode Overrides for Menu & Convergent Layout */
+.themeDark .menuPanelActual {
+  background: #222222;
+  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.4);
+}
+
+.themeDark .menuItemActual {
+  color: #cccccc;
+}
+
+.themeDark .menuItemActual:hover {
+  background: #2b2b2b;
+  color: #e05a2b;
+}
+
+.themeDark .menuItemActiveActual {
+  background: #2b211a;
+  color: #e05a2b !important;
+  border-left-color: #e05a2b;
+}
+
+.themeDark .convergedSidebar {
+  background: #222222;
+  border-right: 1px solid #333333;
+}
+
+.themeDark .convergedCenter {
+  background: #151515;
+  border-right: 1px solid #333333;
+}
+
+.themeDark .convergedRight {
+  background: #1e1e1e;
+}
+
+
 
 
 

From f1e61d57687adf4feb9abb5edf9f5b56f4b63103 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Thu, 18 Jun 2026 11:19:00 +0530
Subject: [PATCH 05/15] feat: redesign settings screen with Ubuntu Touch style
 list components

---
 website/src/pages/index.js         | 104 +++++++++++++++--------------
 website/src/pages/index.module.css |  68 +++++++++++++++++++
 2 files changed, 121 insertions(+), 51 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 2b1a2f04..7472f487 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -865,66 +865,68 @@ function DeviceSimulator() {
 
   // Render Settings Screen
   const renderSettingsScreen = () => (
-    <div style={{ paddingBottom: "20px" }}>
-      <div className={styles.settingsGroup}>
-        <div className={styles.settingsGroupTitle}>Profile Settings</div>
-        <div className={styles.settingsItem}>
-          <span>Username</span>
-          <span className={styles.settingsItemValue}>surajyadav</span>
-        </div>
-        <div className={styles.settingsItem}>
-          <span>Email</span>
-          <span className={styles.settingsItemValue}>suraj@example.com</span>
+    <div className={styles.utSettingsList}>
+      <div className={styles.utSettingsRow}>
+        <div className={styles.utSettingsIconWrapper}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#4a90e2" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+          </svg>
         </div>
+        <span className={styles.utSettingsLabel}>Connected Accounts</span>
+        <span className={styles.utSettingsChevron}>›</span>
       </div>
-
-      <div className={styles.settingsGroup}>
-        <div className={styles.settingsGroupTitle}>Synchronization</div>
-        <div className={styles.settingsItem}>
-          <span>Sync Server</span>
-          <span className={styles.settingsItemValue}>https://sync.timemanagement.org</span>
-        </div>
-        <div className={styles.settingsItem}>
-          <span>Interval</span>
-          <select className={styles.settingsSelect} defaultValue="15m">
-            <option value="5m">Every 5 mins</option>
-            <option value="15m">Every 15 mins</option>
-            <option value="1h">Every hour</option>
-            <option value="manual">Manual only</option>
-          </select>
+      <div className={styles.utSettingsDivider} />
+
+      <div className={styles.utSettingsRow}>
+        <div className={styles.utSettingsIconWrapper}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#ff5e5b" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+          </svg>
         </div>
+        <span className={styles.utSettingsLabel}>Notifications</span>
+        <span className={styles.utSettingsChevron}>›</span>
       </div>
+      <div className={styles.utSettingsDivider} />
 
-      <div className={styles.settingsGroup}>
-        <div className={styles.settingsGroupTitle}>Voice-To-Text</div>
-        <div className={styles.settingsItem}>
-          <span>Detection Engine</span>
-          <span className={styles.settingsItemValue}>whisper-base-en</span>
-        </div>
-        <div className={styles.settingsItem}>
-          <span>Input Language</span>
-          <select className={styles.settingsSelect} defaultValue="en-US">
-            <option value="en-US">English (US)</option>
-            <option value="de-DE">Deutsch</option>
-            <option value="tr-TR">Türkçe</option>
-            <option value="hi-IN">Hindi</option>
-          </select>
+      <div className={styles.utSettingsRow}>
+        <div className={styles.utSettingsIconWrapper}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#3cb371" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 10h-.01M17 10a5 5 0 0 0-9.13-2.58A6.5 6.5 0 0 0 8 20h10a5 5 0 0 0 0-10z" />
+          </svg>
         </div>
+        <span className={styles.utSettingsLabel}>Background Sync</span>
+        <span className={styles.utSettingsChevron}>›</span>
       </div>
-
-      <div className={styles.settingsGroup}>
-        <div className={styles.settingsGroupTitle}>Database Maintenance</div>
-        <div className={styles.settingsItem}>
-          <span>Database Size</span>
-          <span className={styles.settingsItemValue}>1.24 MB</span>
+      <div className={styles.utSettingsDivider} />
+
+      <div className={styles.utSettingsRow}>
+        <div className={styles.utSettingsIconWrapper}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="#cccccc" strokeWidth="1" />
+            <path d="M3 5l8 9v7h2v-7l8-9" />
+            <path d="M9 3l3 4 3-4" />
+            <path d="M12 5.5l-1 1.5h2l-1-1.5z" fill="#e05a2b" stroke="#e05a2b" />
+            <path d="M12 7l-1.5 3 1.5 2 1.5-2-1.5-3z" fill="#e05a2b" stroke="#e05a2b" />
+          </svg>
         </div>
-        <div className={styles.settingsItem}>
-          <span>Cached Tasks</span>
-          <span className={styles.settingsItemValue}>186</span>
+        <span className={styles.utSettingsLabel}>Theme Settings</span>
+        <span className={styles.utSettingsChevron}>›</span>
+      </div>
+      <div className={styles.utSettingsDivider} />
+
+      <div className={styles.utSettingsRow}>
+        <div className={styles.utSettingsIconWrapper}>
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9b5de5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+            <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" />
+          </svg>
         </div>
-        <button className={styles.settingsButton}>
-          Clear Local Cache
-        </button>
+        <span className={styles.utSettingsLabel}>Voice Model Settings</span>
+        <span className={styles.utSettingsChevron}>›</span>
       </div>
     </div>
   );
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 1ac7b6f2..5d83b42e 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -2154,6 +2154,74 @@
   background: #1e1e1e;
 }
 
+/* Ubuntu Touch Style Settings */
+.utSettingsList {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  min-height: 100%;
+}
+
+.themeDark .utSettingsList {
+  background: #151515;
+}
+
+.utSettingsRow {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.utSettingsRow:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.themeDark .utSettingsRow:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.utSettingsIconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 18px;
+  flex-shrink: 0;
+}
+
+.utSettingsLabel {
+  font-size: 0.95rem;
+  font-weight: 400;
+  color: #333333;
+  flex-grow: 1;
+}
+
+.themeDark .utSettingsLabel {
+  color: #dddddd;
+}
+
+.utSettingsChevron {
+  font-size: 1.2rem;
+  color: #cccccc;
+  font-weight: 300;
+  margin-left: auto;
+  user-select: none;
+}
+
+.utSettingsDivider {
+  height: 1px;
+  background: #eeeeee;
+  margin-left: 66px;
+}
+
+.themeDark .utSettingsDivider {
+  background: #2a2a2a;
+}
+
+
 
 
 

From 8ee6cbbb09768246dba632a638a2992e1d137ddb Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Thu, 18 Jun 2026 11:48:26 +0530
Subject: [PATCH 06/15] feat: implement Ubuntu Touch-style activities list with
 navigation tabs and custom cards

---
 website/src/pages/index.js         | 127 +++++++++++++++++---
 website/src/pages/index.module.css | 186 +++++++++++++++++++++++++++++
 2 files changed, 296 insertions(+), 17 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 7472f487..093efa15 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -404,20 +404,44 @@ function DeviceSimulator() {
 
   const activitiesData = [
     {
-      log: "Reviewed Voice-To-Text PR changes and validated models",
-      time: "2026-06-16"
+      title: "Activity test for sU...",
+      notes: "No Notes",
+      assigned: "Assigned to: Suraj Yadav",
+      type: "To Do",
+      date: "08 May",
+      status: "overdue",
+      iconType: "ellipsis",
+      hasDraft: true
     },
     {
-      log: "Optimized Docusaurus landing page layout structure",
-      time: "2026-06-15"
+      title: "This is a Activity- ...",
+      notes: "Hello World.",
+      assigned: "Assigned to: Suraj Yadav",
+      type: "Meeting",
+      date: "14 May",
+      status: "overdue",
+      iconType: "meeting",
+      hasDraft: false
     },
     {
-      log: "Verified Ubuntu Touch QML compile flags on build server",
-      time: "2026-06-14"
+      title: "Activity assigned to...",
+      notes: "No Notes",
+      assigned: "Assigned to: Suraj Yadav",
+      type: "Call",
+      date: "17 May",
+      status: "overdue",
+      iconType: "call",
+      hasDraft: false
     },
     {
-      log: "Validated color palette variables for Eisenhower Matrix",
-      time: "2026-06-12"
+      title: "New Activity",
+      notes: "Hello World.",
+      assigned: "Assigned to: Suraj Yadav",
+      type: "Call",
+      date: "18 Jun",
+      status: "today",
+      iconType: "call",
+      hasDraft: false
     }
   ];
 
@@ -795,16 +819,73 @@ function DeviceSimulator() {
 
   // Render Activities
   const renderActivitiesList = () => (
-    <div className={styles.logListContainer}>
-      {activitiesData.map((act, idx) => (
-        <div key={idx} className={styles.logItem}>
-          <div className={styles.logDot} style={{ backgroundColor: "#43a047" }} />
-          <div className={styles.logContent}>
-            <p className={styles.logTitle}>{act.log}</p>
-            <span className={styles.logTime}>{act.time}</span>
-          </div>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      {/* Tab Bar sticky */}
+      <div className={styles.utTabBar}>
+        <div className={clsx(styles.utTabBtn, styles.utTabBtnActive)}>
+          Today
+          <div className={styles.utTabIndicator} />
         </div>
-      ))}
+        <div className={styles.utTabBtn}>This Week</div>
+        <div className={styles.utTabBtn}>This Month</div>
+        <div className={styles.utTabBtn}>Later</div>
+      </div>
+
+      {/* Activity Card list */}
+      <div className={styles.logListContainer}>
+        {activitiesData.map((act, idx) => (
+          <div key={idx} className={styles.utActivityCard}>
+            {/* Left border strip */}
+            <div className={styles.utActivityAccentStrip} />
+
+            {/* Left circular icon */}
+            <div className={styles.utActivityIconCircle}>
+              {act.iconType === "ellipsis" && (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="1" />
+                  <circle cx="19" cy="12" r="1" />
+                  <circle cx="5" cy="12" r="1" />
+                </svg>
+              )}
+              {act.iconType === "meeting" && (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                  <circle cx="9" cy="7" r="4" />
+                  <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+              )}
+              {act.iconType === "call" && (
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="#ffffff" stroke="none">
+                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+                </svg>
+              )}
+            </div>
+
+            {/* Middle description col */}
+            <div className={styles.utActivityMainContent}>
+              <h4 className={styles.utActivityTitle}>{act.title}</h4>
+              <p className={styles.utActivityNotes}>{act.notes}</p>
+              <p className={styles.utActivityAssigned}>{act.assigned}</p>
+              {act.hasDraft && (
+                <span className={styles.utActivityDraftBadge}>Draft</span>
+              )}
+            </div>
+
+            {/* Right meta details col */}
+            <div className={styles.utActivityRightCol}>
+              <span className={styles.utActivityType}>{act.type}</span>
+              <span className={styles.utActivityDate}>{act.date}</span>
+              <span 
+                className={styles.utActivityStatusBadge}
+                style={{ backgroundColor: act.status === "overdue" ? "#ff5e5b" : "#ffa726" }}
+              >
+                {act.status}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 
@@ -1147,6 +1228,12 @@ function DeviceSimulator() {
                                   +
                                 </button>
                               </>
+                            ) : activeScreen === "Activities" ? (
+                              <>
+                                <button className={styles.headerIconBtn} title="Accounts">👥</button>
+                                <button className={styles.headerIconBtn} title="Add Activity">+</button>
+                                <button className={styles.headerIconBtn} title="Search">🔍</button>
+                              </>
                             ) : (
                               <>
                                 <button 
@@ -1273,6 +1360,12 @@ function DeviceSimulator() {
                               <button className={styles.headerIconBtn}>
                                 {themeMode === "dark" ? "📝" : "✓"}
                               </button>
+                            ) : activeScreen === "Activities" ? (
+                              <>
+                                <button className={styles.headerIconBtn} title="Accounts">👥</button>
+                                <button className={styles.headerIconBtn} title="Add Activity">+</button>
+                                <button className={styles.headerIconBtn} title="Search">🔍</button>
+                              </>
                             ) : (
                               <>
                                 <button 
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 5d83b42e..2a579ac1 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -2221,6 +2221,192 @@
   background: #2a2a2a;
 }
 
+/* Ubuntu Touch Style Activities */
+.utTabBar {
+  display: flex;
+  background: #eeeeee;
+  border-bottom: 1px solid #d8d8d8;
+  height: 40px;
+  align-items: stretch;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.themeDark .utTabBar {
+  background: #202020;
+  border-bottom: 1px solid #333333;
+}
+
+.utTabBtn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  border-right: 1px solid #dcdcdc;
+  font-size: 0.82rem;
+  color: #666666;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  position: relative;
+  font-weight: 500;
+}
+
+.utTabBtn:last-child {
+  border-right: none;
+}
+
+.themeDark .utTabBtn {
+  border-right: 1px solid #2d2d2d;
+  color: #aaaaaa;
+}
+
+.utTabBtnActive {
+  color: #e05a2b;
+  font-weight: 700;
+}
+
+.utTabIndicator {
+  position: absolute;
+  bottom: 0;
+  left: 25%;
+  right: 25%;
+  height: 3px;
+  background: #e05a2b;
+  border-radius: 2px;
+}
+
+.utActivityCard {
+  display: flex;
+  padding: 14px 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.themeDark .utActivityCard {
+  background: #151515;
+  border-bottom: 1px solid #282828;
+}
+
+.utActivityAccentStrip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: #8b3d88;
+}
+
+.utActivityIconCircle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #f48152;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.utActivityMainContent {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+  min-width: 0;
+}
+
+.utActivityTitle {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #333333;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.themeDark .utActivityTitle {
+  color: #e0e0e0;
+}
+
+.utActivityNotes {
+  font-size: 0.8rem;
+  color: #555555;
+  margin: 0;
+}
+
+.themeDark .utActivityNotes {
+  color: #a0a0a0;
+}
+
+.utActivityAssigned {
+  font-size: 0.76rem;
+  color: #888888;
+  margin: 0;
+}
+
+.utActivityDraftBadge {
+  align-self: flex-start;
+  border: 1.2px solid #e05a2b;
+  border-radius: 10px;
+  padding: 0px 8px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: #e05a2b;
+  text-transform: uppercase;
+  margin-top: 3px;
+  display: inline-block;
+  line-height: 1.4;
+}
+
+.utActivityRightCol {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+  min-width: 75px;
+  flex-shrink: 0;
+}
+
+.utActivityType {
+  font-size: 0.78rem;
+  color: #777777;
+}
+
+.themeDark .utActivityType {
+  color: #999999;
+}
+
+.utActivityDate {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #555555;
+}
+
+.themeDark .utActivityDate {
+  color: #bbbbbb;
+}
+
+.utActivityStatusBadge {
+  font-size: 0.64rem;
+  font-weight: 700;
+  color: #ffffff;
+  padding: 1.5px 6px;
+  border-radius: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  min-width: 62px;
+  text-align: center;
+  line-height: 1.3;
+}
+
+
 
 
 

From 03e931b891f9fa25943c329d1ca870f35850f280 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Thu, 18 Jun 2026 12:20:40 +0530
Subject: [PATCH 07/15] feat: redesign project updates view with categorized
 cards, status badges, and progress bars

---
 website/src/pages/index.js         | 107 ++++++++++++++++++++-----
 website/src/pages/index.module.css | 120 +++++++++++++++++++++++++++++
 2 files changed, 208 insertions(+), 19 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 093efa15..97f49fa9 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -381,24 +381,44 @@ function DeviceSimulator() {
 
   const projectUpdatesData = [
     {
-      log: "Suraj Yadav logged 3:30 H on 'QML Layout Refactoring' (Task: Fix layout spacing)",
-      time: "2 hours ago"
+      title: "New Project Update.",
+      author: "Suraj Yadav",
+      date: "2026-06-04",
+      project: "25-00005 - UT App Developmutent",
+      status: "on_track",
+      completion: 40
     },
     {
-      log: "Parvathy Yadav updated status of 'Website Redesign' to Active",
-      time: "5 hours ago"
+      title: "New Update.",
+      author: "Suraj Yadav",
+      date: "2026-05-14",
+      project: "25-00005 - UT App Developmutent",
+      status: "at_risk",
+      completion: 90
     },
     {
-      log: "Automated Sync completed: 42 tasks synchronized with server",
-      time: "Yesterday"
+      title: "project update edit after notificat...",
+      author: "Suraj Yadav",
+      date: "2026-04-28",
+      project: "Child project of main instancfe nnmhbbnn...",
+      status: "at_risk",
+      completion: 15
     },
     {
-      log: "Anisha PP created new task 'Add search filter' in 'Mobile App Core'",
-      time: "2 days ago"
+      title: "project update edit after notificat...",
+      author: "Suraj Yadav",
+      date: "2026-04-27",
+      project: "Child project of main instancfe nnmhbbnn...",
+      status: "on_hold",
+      completion: 30
     },
     {
-      log: "System database backup successfully created: 1.24 MB",
-      time: "3 days ago"
+      title: "New project Update",
+      author: "Suraj Yadav",
+      date: "2026-04-27",
+      project: "Child project of main instancfe nnmhbbnn...",
+      status: "on_track",
+      completion: 10
     }
   ];
 
@@ -804,16 +824,55 @@ function DeviceSimulator() {
 
   // Render Project Updates
   const renderProjectUpdates = () => (
-    <div className={styles.logListContainer}>
-      {projectUpdatesData.map((log, idx) => (
-        <div key={idx} className={styles.logItem}>
-          <div className={styles.logDot} />
-          <div className={styles.logContent}>
-            <p className={styles.logTitle}>{log.log}</p>
-            <span className={styles.logTime}>{log.time}</span>
-          </div>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      {/* Tab Bar sticky */}
+      <div className={styles.utTabBar}>
+        <div className={clsx(styles.utTabBtn, styles.utTabBtnActive)}>
+          All
+          <div className={styles.utTabIndicator} />
         </div>
-      ))}
+        <div className={styles.utTabBtn}>On Track</div>
+        <div className={styles.utTabBtn}>At Risk</div>
+        <div className={styles.utTabBtn}>Off Track</div>
+      </div>
+
+      {/* Project Updates Card list */}
+      <div className={styles.logListContainer}>
+        {projectUpdatesData.map((log, idx) => (
+          <div key={idx} className={styles.utUpdateCard}>
+            
+            {/* Left description col */}
+            <div className={styles.utUpdateMainContent}>
+              <h4 className={styles.utUpdateTitle}>{log.title}</h4>
+              <p className={styles.utUpdateMeta}>By: {log.author} | {log.date}</p>
+              <p className={styles.utUpdateProject}>{log.project}</p>
+              
+              {/* Progress Bar representing Project Completion */}
+              <div className={styles.utProgressBarTrack}>
+                <div 
+                  className={styles.utProgressBarFill} 
+                  style={{ width: `${log.completion}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Right status details col */}
+            <div className={styles.utUpdateRightCol}>
+              <span 
+                className={styles.utUpdateStatusBadge}
+                style={{ 
+                  backgroundColor: 
+                    log.status === "on_track" ? "#4cae80" : 
+                    log.status === "at_risk" ? "#e68a45" : "#757575" 
+                }}
+              >
+                {log.status}
+              </span>
+              <button className={styles.utUpdateDetailsBtn}>Details</button>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 
@@ -1234,6 +1293,11 @@ function DeviceSimulator() {
                                 <button className={styles.headerIconBtn} title="Add Activity">+</button>
                                 <button className={styles.headerIconBtn} title="Search">🔍</button>
                               </>
+                            ) : activeScreen === "Project Updates" ? (
+                              <>
+                                <button className={styles.headerIconBtn} title="Add Update">+</button>
+                                <button className={styles.headerIconBtn} title="Search">🔍</button>
+                              </>
                             ) : (
                               <>
                                 <button 
@@ -1366,6 +1430,11 @@ function DeviceSimulator() {
                                 <button className={styles.headerIconBtn} title="Add Activity">+</button>
                                 <button className={styles.headerIconBtn} title="Search">🔍</button>
                               </>
+                            ) : activeScreen === "Project Updates" ? (
+                              <>
+                                <button className={styles.headerIconBtn} title="Add Update">+</button>
+                                <button className={styles.headerIconBtn} title="Search">🔍</button>
+                              </>
                             ) : (
                               <>
                                 <button 
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 2a579ac1..37e7c612 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -2406,6 +2406,126 @@
   line-height: 1.3;
 }
 
+/* Project Updates layout */
+.utUpdateCard {
+  display: flex;
+  padding: 14px 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.themeDark .utUpdateCard {
+  background: #151515;
+  border-bottom: 1px solid #282828;
+}
+
+.utUpdateMainContent {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+  min-width: 0;
+}
+
+.utUpdateTitle {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #333333;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.themeDark .utUpdateTitle {
+  color: #e0e0e0;
+}
+
+.utUpdateMeta {
+  font-size: 0.78rem;
+  color: #777777;
+  margin: 0;
+}
+
+.themeDark .utUpdateMeta {
+  color: #999999;
+}
+
+.utUpdateProject {
+  font-size: 0.8rem;
+  color: #555555;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.themeDark .utUpdateProject {
+  color: #aaaaaa;
+}
+
+.utProgressBarTrack {
+  height: 4px;
+  background: #e5e5e5;
+  border-radius: 2px;
+  width: 100%;
+  margin-top: 4px;
+  overflow: hidden;
+}
+
+.themeDark .utProgressBarTrack {
+  background: #333333;
+}
+
+.utProgressBarFill {
+  height: 100%;
+  background: #254a8a;
+  border-radius: 2px;
+}
+
+.utUpdateRightCol {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+  min-width: 85px;
+  flex-shrink: 0;
+}
+
+.utUpdateStatusBadge {
+  font-size: 0.76rem;
+  font-weight: 500;
+  color: #ffffff;
+  padding: 3px 12px;
+  border-radius: 6px;
+  text-align: center;
+  min-width: 85px;
+  line-height: 1.3;
+}
+
+.utUpdateDetailsBtn {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #e05a2b;
+  background: #fdf2ee;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 16px;
+  min-width: 85px;
+  text-align: center;
+  cursor: pointer;
+  line-height: 1.3;
+}
+
+.themeDark .utUpdateDetailsBtn {
+  background: #2c1e19;
+  color: #f07f56;
+}
+
+
 
 
 

From 9a609f90847f356d39019585dab4d0bf93d366b2 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Thu, 18 Jun 2026 13:10:10 +0530
Subject: [PATCH 08/15] feat: overhaul about screen layout with new styles and
 detailed feature documentation

---
 website/src/pages/index.js         |  85 ++++++++++++++------
 website/src/pages/index.module.css | 120 +++++++++++++++++++++++++++++
 2 files changed, 183 insertions(+), 22 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 97f49fa9..36431edf 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1073,31 +1073,70 @@ function DeviceSimulator() {
 
   // Render About Screen
   const renderAboutScreen = () => (
-    <div className={styles.aboutContainer}>
-      <div className={styles.aboutLogo}>⏱</div>
-      <h3 className={styles.aboutAppName}>TimeManagement</h3>
-      <div className={styles.aboutAppVersion}>Version 2.4.1 (GPL-3.0)</div>
+    <div className={styles.utAboutPage}>
+      <h4 className={styles.utAboutHeaderBlue}>Time Management - Alpha Draft</h4>
       
-      <div className={styles.aboutDivider} />
-      
-      <p className={styles.aboutText}>
-        A convergent time tracking and task management application designed for Ubuntu Touch and Debian-based systems.
-      </p>
+      <div className={styles.utAboutVersionLarge}>Version 1.2.9</div>
 
-      <div className={styles.aboutDivider} />
+      <p className={styles.utAboutText}>
+        <strong>Time Management</strong> is a native time-tracking and productivity application built exclusively for Ubuntu Touch phones. It empowers users to manage projects, tasks, timesheets, and activities—both offline and online—through seamless integration with CURQ and Odoo servers.
+      </p>
 
-      <div className={styles.aboutSectionTitle}>Project Team</div>
-      <div className={styles.aboutContributorList}>
-        <div className={styles.aboutContributor}>• Suraj Yadav (Lead Developer)</div>
-        <div className={styles.aboutContributor}>• Parvathy (Core Architect)</div>
-        <div className={styles.aboutContributor}>• Anisha PP (UI/UX Designer)</div>
-      </div>
+      <h4 className={styles.utAboutSectionTitle}>What Does This App Do?</h4>
+      <p className={styles.utAboutText}>
+        This app is your all-in-one productivity companion on Ubuntu Touch. Whether you're a freelancer tracking billable hours, a project manager overseeing team tasks, or simply someone who wants to stay organized, Time Management has you covered.
+      </p>
 
-      <div className={styles.aboutDivider} />
+      <h4 className={styles.utAboutSectionTitle}>Key Features</h4>
+      <ul className={styles.utAboutList}>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Project Management:</span> Create and organize projects with full hierarchy support (Projects → Subprojects → Tasks → Subtasks)
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Task Tracking:</span> Manage tasks with deadlines, priorities, stages, and assignees
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Timesheet Logging:</span> Track your work hours with built-in timers and sync to your server
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Activity Management:</span> Log and schedule activities linked to projects and tasks
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Project Updates:</span> Create and share project status updates with rich text support
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Push Notifications:</span> Stay informed with real-time notifications for assignments and updates
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Auto-Sync:</span> Automatic bidirectional synchronization with your CURQ/Odoo server
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Offline Support:</span> Work offline and sync when connected
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Visual Dashboard:</span> See where your time goes with charts and analytics
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Multi-Account:</span> Connect to multiple server instances simultaneously
+        </li>
+        <li className={styles.utAboutListItem}>
+          <span className={styles.utAboutListItemBold}>Dark Mode:</span> Full dark theme support for comfortable viewing
+        </li>
+      </ul>
 
-      <button className={styles.settingsButton} style={{ backgroundColor: "#43a047" }}>
-        Check for Updates
-      </button>
+      <div className={styles.utAboutServerBand}>
+        Recommended Server: CURQ
+      </div>
+      <p className={styles.utAboutText}>
+        <a 
+          href="https://curq.nl" 
+          target="_blank" 
+          rel="noopener noreferrer" 
+          className={styles.utAboutLink}
+        >
+          CURQ
+        </a> is the all-in-one platform for your business, fully Open Source and tailored to your needs.
+      </p>
     </div>
   );
 
@@ -1270,7 +1309,8 @@ function DeviceSimulator() {
                             {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "dem" : "testCit"}]`}
                             {activeScreen === "Timesheets" && "Timesheets"}
                             {activeScreen === "My Tasks" && "My Tasks"}
-                            {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "My Tasks" && activeScreen}
+                            {activeScreen === "About Us" && "About"}
+                            {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "My Tasks" && activeScreen !== "About Us" && activeScreen}
                           </h3>
                           <div className={styles.headerIcons}>
                             {activeScreen === "My Tasks" ? (
@@ -1417,7 +1457,8 @@ function DeviceSimulator() {
                             {activeScreen === "Timesheets" && "Timesheets"}
                             {activeScreen === "Timesheet" && "Timesheet"}
                             {activeScreen === "My Tasks" && "My Tasks"}
-                            {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && activeScreen}
+                            {activeScreen === "About Us" && "About"}
+                            {activeScreen !== "Dashboard" && activeScreen !== "Timesheets" && activeScreen !== "Timesheet" && activeScreen !== "My Tasks" && activeScreen !== "About Us" && activeScreen}
                           </h3>
                           <div className={styles.headerIcons}>
                             {activeScreen === "Timesheet" ? (
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 37e7c612..6edb8bbf 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -2525,6 +2525,126 @@
   color: #f07f56;
 }
 
+/* About Screen Styles */
+.utAboutPage {
+  padding: 20px 24px;
+  background: #ffffff;
+  color: #333333;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.themeDark .utAboutPage {
+  background: #151515;
+  color: #cccccc;
+}
+
+.utAboutHeaderBlue {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: #2e5b82;
+  margin-top: 5px;
+  margin-bottom: 15px;
+}
+
+.themeDark .utAboutHeaderBlue {
+  color: #72a8d6;
+}
+
+.utAboutVersionLarge {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #3fa6f2;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.utAboutSectionTitle {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #2e5b82;
+  margin-top: 25px;
+  margin-bottom: 12px;
+}
+
+.themeDark .utAboutSectionTitle {
+  color: #72a8d6;
+}
+
+.utAboutText {
+  font-size: 0.92rem;
+  color: #444444;
+  margin-bottom: 16px;
+}
+
+.themeDark .utAboutText {
+  color: #bbbbbb;
+}
+
+.utAboutList {
+  list-style: none;
+  padding-left: 0;
+  margin: 12px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.utAboutListItem {
+  font-size: 0.9rem;
+  color: #333333;
+  position: relative;
+  padding-left: 14px;
+}
+
+.themeDark .utAboutListItem {
+  color: #cccccc;
+}
+
+.utAboutListItem::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: #333333;
+  font-weight: bold;
+}
+
+.themeDark .utAboutListItem::before {
+  color: #cccccc;
+}
+
+.utAboutListItemBold {
+  font-weight: 700;
+}
+
+.utAboutServerBand {
+  background: #f2f5f8;
+  padding: 10px 24px;
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-top: 25px;
+  margin-bottom: 12px;
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #2e5b82;
+}
+
+.themeDark .utAboutServerBand {
+  background: #202020;
+  color: #72a8d6;
+}
+
+.utAboutLink {
+  color: #3fa6f2;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.utAboutLink:hover {
+  text-decoration: underline;
+}
+
+
 
 
 

From 4846e79e97d1af41505b9b72ce0ccbada4226e99 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Thu, 18 Jun 2026 13:39:14 +0530
Subject: [PATCH 09/15] feat: add interactive simulator dimension controls and
 update scroll container layouts

---
 website/src/pages/index.js         | 198 +++++++++++++++++++++++++----
 website/src/pages/index.module.css |  11 +-
 2 files changed, 181 insertions(+), 28 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 36431edf..ae4f0c8c 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -184,6 +184,10 @@ function DeviceSimulator() {
   const [searchQuery, setSearchQuery] = useState("");
   const [filterType, setFilterType] = useState("most-time");
   const [themeMode, setThemeMode] = useState("dark"); // Default dark mode to match the visual screenshots
+  const [portraitWidth, setPortraitWidth] = useState(360);
+  const [portraitHeight, setPortraitHeight] = useState(720);
+  const [landscapeWidth, setLandscapeWidth] = useState(900);
+  const [landscapeHeight, setLandscapeHeight] = useState(520);
 
   const menuItems = [
     { name: "Dashboard", icon: "🏠", target: "Dashboard" },
@@ -824,7 +828,7 @@ function DeviceSimulator() {
 
   // Render Project Updates
   const renderProjectUpdates = () => (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
       {/* Tab Bar sticky */}
       <div className={styles.utTabBar}>
         <div className={clsx(styles.utTabBtn, styles.utTabBtnActive)}>
@@ -837,7 +841,7 @@ function DeviceSimulator() {
       </div>
 
       {/* Project Updates Card list */}
-      <div className={styles.logListContainer}>
+      <div className={clsx(styles.logListContainer, styles.utScrollContainer)}>
         {projectUpdatesData.map((log, idx) => (
           <div key={idx} className={styles.utUpdateCard}>
             
@@ -878,7 +882,7 @@ function DeviceSimulator() {
 
   // Render Activities
   const renderActivitiesList = () => (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
       {/* Tab Bar sticky */}
       <div className={styles.utTabBar}>
         <div className={clsx(styles.utTabBtn, styles.utTabBtnActive)}>
@@ -891,7 +895,7 @@ function DeviceSimulator() {
       </div>
 
       {/* Activity Card list */}
-      <div className={styles.logListContainer}>
+      <div className={clsx(styles.logListContainer, styles.utScrollContainer)}>
         {activitiesData.map((act, idx) => (
           <div key={idx} className={styles.utActivityCard}>
             {/* Left border strip */}
@@ -1250,16 +1254,100 @@ function DeviceSimulator() {
               </div>
             </div>
 
-            <div className={styles.gestureHint}>
-              <span>💡</span>
-              <p>Ubuntu Touch gesture: Hover or swipe from the <strong>left screen border</strong> to toggle the menu drawer, or tap the blue Floating Action Button (FAB).</p>
+              <div style={{ marginTop: "16px", paddingTop: "16px", borderTop: "1px dashed rgba(255, 255, 255, 0.15)" }}>
+                <span className={styles.controlLabel}>Resize Simulator</span>
+                
+                {orientation === "portrait" ? (
+                  <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginTop: "8px" }}>
+                    <div>
+                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.78rem", marginBottom: "4px" }}>
+                        <span>Width: <strong>{portraitWidth}px</strong></span>
+                        <span style={{ opacity: 0.5 }}>300 - 480px</span>
+                      </div>
+                      <input 
+                        type="range" 
+                        min="300" 
+                        max="480" 
+                        value={portraitWidth} 
+                        onChange={(e) => setPortraitWidth(Number(e.target.value))}
+                        style={{ width: "100%", accentColor: "#e05a2b", cursor: "ew-resize" }}
+                      />
+                    </div>
+                    <div>
+                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.78rem", marginBottom: "4px" }}>
+                        <span>Height: <strong>{portraitHeight}px</strong></span>
+                        <span style={{ opacity: 0.5 }}>550 - 850px</span>
+                      </div>
+                      <input 
+                        type="range" 
+                        min="550" 
+                        max="850" 
+                        value={portraitHeight} 
+                        onChange={(e) => setPortraitHeight(Number(e.target.value))}
+                        style={{ width: "100%", accentColor: "#e05a2b", cursor: "ew-resize" }}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginTop: "8px" }}>
+                    <div>
+                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.78rem", marginBottom: "4px" }}>
+                        <span>Width: <strong>{landscapeWidth}px</strong></span>
+                        <span style={{ opacity: 0.5 }}>750 - 1100px</span>
+                      </div>
+                      <input 
+                        type="range" 
+                        min="750" 
+                        max="1100" 
+                        value={landscapeWidth} 
+                        onChange={(e) => setLandscapeWidth(Number(e.target.value))}
+                        style={{ width: "100%", accentColor: "#e05a2b", cursor: "ew-resize" }}
+                      />
+                    </div>
+                    <div>
+                      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.78rem", marginBottom: "4px" }}>
+                        <span>Height: <strong>{landscapeHeight}px</strong></span>
+                        <span style={{ opacity: 0.5 }}>450 - 700px</span>
+                      </div>
+                      <input 
+                        type="range" 
+                        min="450" 
+                        max="700" 
+                        value={landscapeHeight} 
+                        onChange={(e) => setLandscapeHeight(Number(e.target.value))}
+                        style={{ width: "100%", accentColor: "#e05a2b", cursor: "ew-resize" }}
+                      />
+                    </div>
+                  </div>
+                )}
+                
+                <button 
+                  className={styles.toggleBtn}
+                  onClick={() => {
+                    setPortraitWidth(360);
+                    setPortraitHeight(720);
+                    setLandscapeWidth(900);
+                    setLandscapeHeight(520);
+                  }}
+                  style={{ marginTop: "12px", width: "100%", display: "block", textAlign: "center", fontSize: "0.75rem", padding: "6px" }}
+                >
+                  🔄 Reset Dimensions
+                </button>
+              </div>
+
+              <div className={styles.gestureHint}>
+                <span>💡</span>
+                <p>Ubuntu Touch gesture: Hover or swipe from the <strong>left screen border</strong> to toggle the menu drawer, or tap the blue Floating Action Button (FAB).</p>
+              </div>
             </div>
-          </div>
 
           {/* Interactive Phone */}
           <div className={styles.deviceCanvas} data-reveal style={{ "--reveal-delay": 1 }}>
             <div className={styles.deviceTurntable}>
-              <div className={clsx(styles.deviceFrame, styles[orientation])}>
+              <div 
+                className={clsx(styles.deviceFrame, styles[orientation])}
+                style={orientation === "portrait" ? { width: `${portraitWidth}px`, height: `${portraitHeight}px` } : { width: `${landscapeWidth}px`, height: `${landscapeHeight}px` }}
+              >
                 
                 {orientation === "portrait" ? (
                   /* ── PORTRAIT MOBILE VIEW ── */
@@ -1359,20 +1447,48 @@ function DeviceSimulator() {
                     {/* Screen Scrollable Body */}
                     <div className={styles.pageScrollContent}>
                       {activeScreen === "Dashboard" && (
-                        <>
+                        <div className={styles.utScrollContainer}>
                           {renderDashboardMatrix()}
                           {renderProjectOverview()}
-                        </>
+                        </div>
+                      )}
+                      {activeScreen === "Timesheets" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderTimesheetsList()}
+                        </div>
+                      )}
+                      {activeScreen === "Timesheet" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderTimesheetEntryForm()}
+                        </div>
+                      )}
+                      {activeScreen === "My Tasks" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderMyTasksList()}
+                        </div>
+                      )}
+                      {activeScreen === "All Tasks" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderAllTasksList()}
+                        </div>
+                      )}
+                      {activeScreen === "Projects" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderProjectsList()}
+                        </div>
                       )}
-                      {activeScreen === "Timesheets" && renderTimesheetsList()}
-                      {activeScreen === "Timesheet" && renderTimesheetEntryForm()}
-                      {activeScreen === "My Tasks" && renderMyTasksList()}
-                      {activeScreen === "All Tasks" && renderAllTasksList()}
-                      {activeScreen === "Projects" && renderProjectsList()}
                       {activeScreen === "Project Updates" && renderProjectUpdates()}
                       {activeScreen === "Activities" && renderActivitiesList()}
-                      {activeScreen === "Settings" && renderSettingsScreen()}
-                      {activeScreen === "About Us" && renderAboutScreen()}
+                      {activeScreen === "Settings" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderSettingsScreen()}
+                        </div>
+                      )}
+                      {activeScreen === "About Us" && (
+                        <div className={styles.utScrollContainer}>
+                          {renderAboutScreen()}
+                        </div>
+                      )}
                     </div>
 
                     {/* Floating Action Button (FAB) */}
@@ -1493,20 +1609,48 @@ function DeviceSimulator() {
                         
                         <div className={styles.pageScrollContent}>
                           {activeScreen === "Dashboard" && (
-                            <>
+                            <div className={styles.utScrollContainer}>
                               {renderDashboardMatrix()}
                               {renderProjectOverview()}
-                            </>
+                            </div>
+                          )}
+                          {activeScreen === "Timesheets" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderTimesheetsList()}
+                            </div>
+                          )}
+                          {activeScreen === "Timesheet" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderTimesheetEntryForm()}
+                            </div>
+                          )}
+                          {activeScreen === "My Tasks" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderMyTasksList()}
+                            </div>
+                          )}
+                          {activeScreen === "All Tasks" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderAllTasksList()}
+                            </div>
+                          )}
+                          {activeScreen === "Projects" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderProjectsList()}
+                            </div>
                           )}
-                          {activeScreen === "Timesheets" && renderTimesheetsList()}
-                          {activeScreen === "Timesheet" && renderTimesheetEntryForm()}
-                          {activeScreen === "My Tasks" && renderMyTasksList()}
-                          {activeScreen === "All Tasks" && renderAllTasksList()}
-                          {activeScreen === "Projects" && renderProjectsList()}
                           {activeScreen === "Project Updates" && renderProjectUpdates()}
                           {activeScreen === "Activities" && renderActivitiesList()}
-                          {activeScreen === "Settings" && renderSettingsScreen()}
-                          {activeScreen === "About Us" && renderAboutScreen()}
+                          {activeScreen === "Settings" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderSettingsScreen()}
+                            </div>
+                          )}
+                          {activeScreen === "About Us" && (
+                            <div className={styles.utScrollContainer}>
+                              {renderAboutScreen()}
+                            </div>
+                          )}
                         </div>
                         
                         <button 
diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 6edb8bbf..49f4eb23 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -853,12 +853,21 @@
 /* Page content wrapper */
 .pageScrollContent {
   flex: 1;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   position: relative;
   background: #ffffff;
   color: #333333;
 }
 
+.utScrollContainer {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 20px;
+  width: 100%;
+}
+
 /* Matrix Layout CSS */
 .matrixSection {
   padding: 12px;

From cb49dd599908ebbf33131d65c5302d3aee0410c0 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Thu, 18 Jun 2026 17:55:14 +0530
Subject: [PATCH 10/15] refactor: set default theme to light and remove theme
 toggle controls

---
 website/src/pages/index.js | 32 ++------------------------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index ae4f0c8c..1aeaad4e 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -183,7 +183,7 @@ function DeviceSimulator() {
   const [activeScreen, setActiveScreen] = useState("Dashboard");
   const [searchQuery, setSearchQuery] = useState("");
   const [filterType, setFilterType] = useState("most-time");
-  const [themeMode, setThemeMode] = useState("dark"); // Default dark mode to match the visual screenshots
+  const [themeMode, setThemeMode] = useState("light"); // Forced light mode by default
   const [portraitWidth, setPortraitWidth] = useState(360);
   const [portraitHeight, setPortraitHeight] = useState(720);
   const [landscapeWidth, setLandscapeWidth] = useState(900);
@@ -1175,23 +1175,7 @@ function DeviceSimulator() {
                 </div>
               </div>
 
-              <div>
-                <span className={styles.controlLabel}>App Color Theme</span>
-                <div className={styles.toggleRow}>
-                  <button 
-                    className={clsx(styles.toggleBtn, themeMode === "dark" && styles.toggleBtnActive)}
-                    onClick={() => setThemeMode("dark")}
-                  >
-                    🌙 Dark Mode
-                  </button>
-                  <button 
-                    className={clsx(styles.toggleBtn, themeMode === "light" && styles.toggleBtnActive)}
-                    onClick={() => setThemeMode("light")}
-                  >
-                    ☀️ Light Mode
-                  </button>
-                </div>
-              </div>
+
 
               <div>
                 <span className={styles.controlLabel}>Quick Navigate</span>
@@ -1511,12 +1495,6 @@ function DeviceSimulator() {
                         <h4 className={styles.menuHeaderTitle}>Menu</h4>
                         <div className={styles.menuHeaderControls}>
                           <span style={{ fontSize: "1.1rem", cursor: "pointer" }}>👤</span>
-                          <span 
-                            style={{ fontSize: "1.1rem", cursor: "pointer" }}
-                            onClick={() => setThemeMode(themeMode === "dark" ? "light" : "dark")}
-                          >
-                            {themeMode === "dark" ? "☀️" : "🌙"}
-                          </span>
                         </div>
                       </div>
                       {renderMenuList()}
@@ -1553,12 +1531,6 @@ function DeviceSimulator() {
                         <div className={styles.menuHeaderActual}>
                           <h4 className={styles.menuHeaderTitle}>Menu</h4>
                           <div className={styles.menuHeaderControls}>
-                            <span 
-                              style={{ fontSize: "1rem", cursor: "pointer" }}
-                              onClick={() => setThemeMode(themeMode === "dark" ? "light" : "dark")}
-                            >
-                              {themeMode === "dark" ? "☀️" : "🌙"}
-                            </span>
                             <span style={{ fontSize: "1rem" }}>👤</span>
                           </div>
                         </div>

From 8baba69dae106a00a78bef21595482273049f8f7 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Fri, 19 Jun 2026 12:18:50 +0530
Subject: [PATCH 11/15] refactor: rename projects and update user display names
 in mock dashboard data

---
 website/src/pages/index.js | 90 +++++++++++++++++++-------------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 1aeaad4e..2fc04dea 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -202,22 +202,22 @@ function DeviceSimulator() {
   ];
 
   const projectsData = [
-    { name: "Child project of main instance nnmhbbnnn kkkk", time: "4507.0 h", percent: 92, color: "#e07a24", tasks: 6 },
-    { name: "UT time management", time: "2187.6 h", percent: 75, color: "#e53935", tasks: 124 },
-    { name: "CURQ migration v18", time: "1240.0 h", percent: 55, color: "#1e88e5", tasks: 28 },
-    { name: "UT App Development", time: "680.0 h", percent: 40, color: "#43a047", tasks: 15 },
-    { name: "Notes App Development", time: "420.0 h", percent: 28, color: "#ffb300", tasks: 10 },
-    { name: "Ubuntu Touch Development- Level 1", time: "280.0 h", percent: 18, color: "#00acc1", tasks: 8 },
-    { name: "CURQ- Support", time: "230.0 h", percent: 12, color: "#8e24aa", tasks: 5 },
-    { name: "CURQ documentation", time: "150.0 h", percent: 8, color: "#d81b60", tasks: 2 }
+    { name: "Project Alpha - Phase 1", time: "4507.0 h", percent: 92, color: "#e07a24", tasks: 6 },
+    { name: "Core Productivity Suite", time: "2187.6 h", percent: 75, color: "#e53935", tasks: 124 },
+    { name: "Database Migration v18", time: "1240.0 h", percent: 55, color: "#1e88e5", tasks: 28 },
+    { name: "Mobile Client App", time: "680.0 h", percent: 40, color: "#43a047", tasks: 15 },
+    { name: "Collaborative Editor", time: "420.0 h", percent: 28, color: "#ffb300", tasks: 10 },
+    { name: "OS Platform Layer", time: "280.0 h", percent: 18, color: "#00acc1", tasks: 8 },
+    { name: "Technical Support Queue", time: "230.0 h", percent: 12, color: "#8e24aa", tasks: 5 },
+    { name: "API Documentation", time: "150.0 h", percent: 8, color: "#d81b60", tasks: 2 }
   ];
 
   const timesheetsData = [
     {
       title: "test timesheet this thing this...",
-      project: "Main Parent Project / Child pr... (testCit)",
+      project: "Project Alpha / Child A (Demo)",
       task: "User manual",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       hours: "5:00 H",
       date: "2026-04-24",
       action: "Do",
@@ -225,9 +225,9 @@ function DeviceSimulator() {
     },
     {
       title: "Test",
-      project: "Main Parent Project / Child pr... (testCit)",
+      project: "Project Alpha / Child A (Demo)",
       task: "This is a Notification Test.",
-      author: "Parvathy",
+      author: "Sarah Connor",
       hours: "4500:00 H",
       date: "2026-05-05",
       action: "Unknown",
@@ -235,9 +235,9 @@ function DeviceSimulator() {
     },
     {
       title: "sub taSK 2 TIMESHEETY",
-      project: "Main Parent Project / Child pr... (testCit)",
+      project: "Project Alpha / Child A (Demo)",
       task: "HR Bundle",
-      author: "Parvathy",
+      author: "Sarah Connor",
       hours: "2:00 H",
       date: "2026-04-24",
       action: "Unknown",
@@ -245,9 +245,9 @@ function DeviceSimulator() {
     },
     {
       title: "test",
-      project: "UT App Development / Dekko App... (testCit)",
+      project: "Mobile Client App / Email module (Demo)",
       task: "Coordination",
-      author: "Parvathy",
+      author: "Sarah Connor",
       hours: "3:00 H",
       date: "2026-04-24",
       action: "Unknown",
@@ -255,9 +255,9 @@ function DeviceSimulator() {
     },
     {
       title: "Time Off (1/1)",
-      project: "Internal (testCit)",
+      project: "Internal (Demo)",
       task: "Time Off",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       hours: "8:00 H",
       date: "2026-05-01",
       action: "Unknown",
@@ -265,9 +265,9 @@ function DeviceSimulator() {
     },
     {
       title: "Time Off (1/1)",
-      project: "Internal (testCit)",
+      project: "Internal (Demo)",
       task: "Time Off",
-      author: "Anusha PP",
+      author: "David Miller",
       hours: "8:00 H",
       date: "2026-05-01",
       action: "Unknown",
@@ -278,7 +278,7 @@ function DeviceSimulator() {
   const tasksData = [
     {
       title: "[Req] Content hub",
-      project: "UT time management",
+      project: "Core Productivity Suite",
       stage: "Analysis",
       stars: [false, false, false],
       planned: "N/A",
@@ -288,7 +288,7 @@ function DeviceSimulator() {
     },
     {
       title: "[IMP - Weblates improvements]",
-      project: "UT time management",
+      project: "Core Productivity Suite",
       stage: "Analysis",
       stars: [true, false, false],
       planned: "N/A",
@@ -298,7 +298,7 @@ function DeviceSimulator() {
     },
     {
       title: "Activity Retention",
-      project: "UT time management",
+      project: "Core Productivity Suite",
       stage: "Design",
       stars: [false, false, false],
       planned: "N/A",
@@ -308,7 +308,7 @@ function DeviceSimulator() {
     },
     {
       title: "Parent task",
-      project: "Child project of",
+      project: "Project Alpha - Phase 1",
       stage: "Analysis",
       stars: [false, false, false],
       planned: "N/A",
@@ -321,7 +321,7 @@ function DeviceSimulator() {
     },
     {
       title: "UI Improvements And Bug Fixes",
-      project: "UT time management",
+      project: "Core Productivity Suite",
       stage: "Development",
       stars: [false, false, false],
       planned: "N/A",
@@ -386,41 +386,41 @@ function DeviceSimulator() {
   const projectUpdatesData = [
     {
       title: "New Project Update.",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       date: "2026-06-04",
-      project: "25-00005 - UT App Developmutent",
+      project: "25-00005 - Mobile Client App",
       status: "on_track",
       completion: 40
     },
     {
       title: "New Update.",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       date: "2026-05-14",
-      project: "25-00005 - UT App Developmutent",
+      project: "25-00005 - Mobile Client App",
       status: "at_risk",
       completion: 90
     },
     {
       title: "project update edit after notificat...",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       date: "2026-04-28",
-      project: "Child project of main instancfe nnmhbbnn...",
+      project: "Project Alpha - Phase 1...",
       status: "at_risk",
       completion: 15
     },
     {
       title: "project update edit after notificat...",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       date: "2026-04-27",
-      project: "Child project of main instancfe nnmhbbnn...",
+      project: "Project Alpha - Phase 1...",
       status: "on_hold",
       completion: 30
     },
     {
       title: "New project Update",
-      author: "Suraj Yadav",
+      author: "Alex Mercer",
       date: "2026-04-27",
-      project: "Child project of main instancfe nnmhbbnn...",
+      project: "Project Alpha - Phase 1...",
       status: "on_track",
       completion: 10
     }
@@ -428,9 +428,9 @@ function DeviceSimulator() {
 
   const activitiesData = [
     {
-      title: "Activity test for sU...",
+      title: "Activity test for Al...",
       notes: "No Notes",
-      assigned: "Assigned to: Suraj Yadav",
+      assigned: "Assigned to: Alex Mercer",
       type: "To Do",
       date: "08 May",
       status: "overdue",
@@ -440,7 +440,7 @@ function DeviceSimulator() {
     {
       title: "This is a Activity- ...",
       notes: "Hello World.",
-      assigned: "Assigned to: Suraj Yadav",
+      assigned: "Assigned to: Alex Mercer",
       type: "Meeting",
       date: "14 May",
       status: "overdue",
@@ -450,7 +450,7 @@ function DeviceSimulator() {
     {
       title: "Activity assigned to...",
       notes: "No Notes",
-      assigned: "Assigned to: Suraj Yadav",
+      assigned: "Assigned to: Alex Mercer",
       type: "Call",
       date: "17 May",
       status: "overdue",
@@ -460,7 +460,7 @@ function DeviceSimulator() {
     {
       title: "New Activity",
       notes: "Hello World.",
-      assigned: "Assigned to: Suraj Yadav",
+      assigned: "Assigned to: Alex Mercer",
       type: "Call",
       date: "18 Jun",
       status: "today",
@@ -684,13 +684,13 @@ function DeviceSimulator() {
     <div className={styles.formContainerActual}>
       <div className={styles.formRowInput}>
         <span className={styles.formLabelSmall}>Account</span>
-        <span className={styles.formValueMain}>{themeMode === "dark" ? "dem" : "testCit"}</span>
+        <span className={styles.formValueMain}>{themeMode === "dark" ? "demo" : "demo_db"}</span>
       </div>
 
       <div className={styles.formRowInput}>
         <span className={styles.formLabelSmall}>Project</span>
         <span className={styles.formValueMain}>
-          {themeMode === "dark" ? '"Task-wise Time Allocation an...' : "Child project of"}
+          {themeMode === "dark" ? "Project Alpha - Phase 1..." : "Project Alpha - Phase 1"}
         </span>
       </div>
 
@@ -701,7 +701,7 @@ function DeviceSimulator() {
 
       <div className={styles.formRowInput}>
         <span className={styles.formLabelSmall}>Task</span>
-        <span className={styles.formValueMain}>{themeMode === "dark" ? "111Ojne" : "sub task1"}</span>
+        <span className={styles.formValueMain}>{themeMode === "dark" ? "Database Migration" : "sub task1"}</span>
       </div>
 
       <div className={styles.formRowInput}>
@@ -1378,7 +1378,7 @@ function DeviceSimulator() {
                             ☰
                           </button>
                           <h3 className={styles.headerTitle}>
-                            {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "dem" : "testCit"}]`}
+                            {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "demo" : "demo_db"}]`}
                             {activeScreen === "Timesheets" && "Timesheets"}
                             {activeScreen === "My Tasks" && "My Tasks"}
                             {activeScreen === "About Us" && "About"}
@@ -1541,7 +1541,7 @@ function DeviceSimulator() {
                       <main className={styles.convergedCenter} style={{ background: "transparent" }}>
                         <header className={styles.appHeaderActual}>
                           <h3 className={styles.headerTitle}>
-                            {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "dem" : "testCit"}]`}
+                            {activeScreen === "Dashboard" && `Account [${themeMode === "dark" ? "demo" : "demo_db"}]`}
                             {activeScreen === "Timesheets" && "Timesheets"}
                             {activeScreen === "Timesheet" && "Timesheet"}
                             {activeScreen === "My Tasks" && "My Tasks"}

From adac491891fa035d7307ea7b0c5ca251d379561e Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Fri, 26 Jun 2026 15:22:50 +0530
Subject: [PATCH 12/15]  implement responsive device scaling using
 ResizeObserver to maintain container fit

---
 website/src/pages/index.js | 58 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 2fc04dea..72de5c79 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -189,6 +189,39 @@ function DeviceSimulator() {
   const [landscapeWidth, setLandscapeWidth] = useState(900);
   const [landscapeHeight, setLandscapeHeight] = useState(520);
 
+  const containerRef = useRef(null);
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !containerRef.current) return;
+
+    const handleResize = () => {
+      if (!containerRef.current) return;
+      const containerWidth = containerRef.current.getBoundingClientRect().width;
+      const frameWidth = (orientation === "portrait" ? portraitWidth : landscapeWidth) + 28;
+      const buffer = 16; // breathing room gutter (8px on each side)
+      const targetWidth = frameWidth + buffer;
+
+      if (containerWidth < targetWidth) {
+        setScale(containerWidth / targetWidth);
+      } else {
+        setScale(1);
+      }
+    };
+
+    handleResize();
+
+    const observer = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    observer.observe(containerRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [orientation, portraitWidth, landscapeWidth, portraitHeight, landscapeHeight]);
+
   const menuItems = [
     { name: "Dashboard", icon: "🏠", target: "Dashboard" },
     { name: "Timesheet", icon: "⏱", target: "Timesheets" },
@@ -1325,9 +1358,28 @@ function DeviceSimulator() {
               </div>
             </div>
 
-          {/* Interactive Phone */}
-          <div className={styles.deviceCanvas} data-reveal style={{ "--reveal-delay": 1 }}>
-            <div className={styles.deviceTurntable}>
+          <div 
+            ref={containerRef}
+            className={styles.deviceCanvas} 
+            data-reveal 
+            style={{ 
+              "--reveal-delay": 1,
+              height: `${((orientation === "portrait" ? portraitHeight : landscapeHeight) + 28) * scale}px`,
+              minHeight: "auto",
+              alignItems: "flex-start",
+              overflow: "hidden"
+            }}
+          >
+            <div 
+              className={styles.deviceTurntable}
+              style={{
+                transform: `scale(${scale})`,
+                transformOrigin: "top center",
+                width: `${(orientation === "portrait" ? portraitWidth : landscapeWidth) + 28}px`,
+                height: `${(orientation === "portrait" ? portraitHeight : landscapeHeight) + 28}px`,
+                maxWidth: "none"
+              }}
+            >
               <div 
                 className={clsx(styles.deviceFrame, styles[orientation])}
                 style={orientation === "portrait" ? { width: `${portraitWidth}px`, height: `${portraitHeight}px` } : { width: `${landscapeWidth}px`, height: `${landscapeHeight}px` }}

From 6f32c2241417587582cff7cf215b9ac3b9c295ac Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Fri, 26 Jun 2026 17:35:52 +0530
Subject: [PATCH 13/15] ci: trigger github pages deployment on
 website-customDeviceSimulation

---
 .github/workflows/deploy-docs.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 4b874a1c..ce510d9a 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - website-customDeviceSimulation
   workflow_dispatch:
 
 permissions:

From 78f87c6826fb1aeefff730f65e87d96206b2c5e9 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Fri, 26 Jun 2026 17:49:16 +0530
Subject: [PATCH 14/15] style: fix simulator range labels visibility in
 light/dark modes

---
 website/src/pages/index.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index 49f4eb23..6bba28c5 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -584,6 +584,7 @@
 /* ── Interactive Device Workbench ── */
 .workbenchSection {
   background: #0b110e;
+  color: #c8bfa8;
   border-top: 1px solid rgba(224, 122, 36, 0.15);
   border-bottom: 1px solid rgba(224, 122, 36, 0.15);
   padding: 6rem 0;

From 4e15b29d3247ecbed04fda8aaf80fb47145c8a09 Mon Sep 17 00:00:00 2001
From: Suraj Yadav <surajyadav200701@gmail.com>
Date: Fri, 26 Jun 2026 18:02:52 +0530
Subject: [PATCH 15/15] docs: hide Features sidebar items and remove
 architecture flow diagram

---
 website/docs/technical/architecture.md | 4 ----
 website/sidebars.js                    | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/website/docs/technical/architecture.md b/website/docs/technical/architecture.md
index 9d104d68..a72f56ab 100644
--- a/website/docs/technical/architecture.md
+++ b/website/docs/technical/architecture.md
@@ -51,10 +51,6 @@ graph TD
     UI -->|Import / Call| State
     State -->|D-Bus / Sync Commands| Service
 ```
-
-![Architecture Flow Diagram](/img/snapshots/architecture.png)
-*Figure 1: Component layout and communication lines between UI, JavaScript models, and Python backend services.*
-
 ## Documentation intent
 
 This technical section should answer:
diff --git a/website/sidebars.js b/website/sidebars.js
index 06fe3175..dc9a322e 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -7,8 +7,8 @@ const sidebars = {
         "user/overview",
         "user/install-and-run",
         "user/setup-and-sync",
-        "user/features",
-        "user/all-features",
+        // "user/features",
+        // "user/all-features",
         "user/troubleshooting",
         {
           type: "category",