From 32d3e86d38131353849e926a899b7372f6a53884 Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Thu, 4 Jun 2026 11:30:18 +0200
Subject: [PATCH] fix(frontend): resolve linting errors and component
 duplication

---
 frontend/src/components/Footer.tsx            | 13 +++++++
 .../src/components/stats/DailySummary.tsx     |  4 +--
 .../src/components/stats/SleepTimetable.tsx   | 35 ++++++++++---------
 frontend/src/hooks/SettingsProvider.tsx       |  2 +-
 frontend/src/hooks/useSettings.ts             |  2 +-
 frontend/vite.config.ts                       |  7 ++++
 6 files changed, 42 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/Footer.tsx

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
new file mode 100644
index 0000000..c93b9e1
--- /dev/null
+++ b/frontend/src/components/Footer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="py-4 text-center">
+      <p className="text-xs text-slate-500">
+        v{__APP_VERSION__} ({__APP_GITSHA__})
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/frontend/src/components/stats/DailySummary.tsx b/frontend/src/components/stats/DailySummary.tsx
index 44ac3cc..4162311 100644
--- a/frontend/src/components/stats/DailySummary.tsx
+++ b/frontend/src/components/stats/DailySummary.tsx
@@ -100,8 +100,8 @@ const DailySummary: React.FC<DailySummaryProps> = ({ from_date, to_date, day_sta
              width={60}
            />
           <Tooltip
-              formatter={(value: any, name: any) => [
-                formatMinutes(Math.round(Number(value ?? 0) * 60)),
+              formatter={(value: number | string | readonly (string | number)[] | undefined, name: string | number | undefined) => [
+                formatMinutes(Math.round(Number((Array.isArray(value) ? value[0] : value ?? 0) * 60))),
                 name === 'daySleep' ? 'Day' : 'Night',
               ]}
           />
diff --git a/frontend/src/components/stats/SleepTimetable.tsx b/frontend/src/components/stats/SleepTimetable.tsx
index ce852ba..7605f2e 100644
--- a/frontend/src/components/stats/SleepTimetable.tsx
+++ b/frontend/src/components/stats/SleepTimetable.tsx
@@ -52,7 +52,8 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
 
   useEffect(() => {
     if (days.length > 0) {
-      setSelectedDayIndex(days.length - 1);
+      const newIndex = days.length - 1;
+      setSelectedDayIndex(prev => (prev !== newIndex ? newIndex : prev));
     }
   }, [days]);
 
@@ -158,7 +159,7 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
               </button>
             );
           })}
-        </div >
+        </div>
       )}
 
       {/* Grid Container */}
@@ -176,27 +177,27 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
           {visibleDays.map((day) => (
             <div key={day} className="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-2">
               {getDayName(day)}
-            </div >
+            </div>
           ))}
-        </div >
+        </div>
 
         {/* Time Grid Container */}
         <div className="relative">
           <div 
-          className="grid" 
-          style={{ 
-            gridTemplateColumns: tier === 'desktop' 
-              ? `4rem repeat(${days.length}, minmax(40px, 1fr))`
-              : `4rem repeat(${visibleDays.length}, 1fr)`
-          }}
-        >
+            className="grid" 
+            style={{ 
+              gridTemplateColumns: tier === 'desktop' 
+                ? `4rem repeat(${days.length}, minmax(40px, 1fr))`
+                : `4rem repeat(${visibleDays.length}, 1fr)`
+            }}
+          >
             {/* Time Rows */}
             {timeSteps.map((step) => (
               <Fragment key={step}>
                 {/* Time Label */}
                 <div className="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-2">
                   {step % 60 === 0 ? formatTimeLabel(step) : ''}
-                </div >
+                </div>
                 
                 {/* Grid Cells */}
                 {visibleDays.map((day) => {
@@ -220,11 +221,11 @@ const Timetable = ({ from_date, to_date, day_start, day_end }: TimetableProps) =
                 transform: 'translateY(-50%)'
               }}
             />
-          </div >
-        </div >
-      </div >
-    </div >
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 
-export default Timetable;
\ No newline at end of file
+export default Timetable;
diff --git a/frontend/src/hooks/SettingsProvider.tsx b/frontend/src/hooks/SettingsProvider.tsx
index b4caf53..5a45487 100644
--- a/frontend/src/hooks/SettingsProvider.tsx
+++ b/frontend/src/hooks/SettingsProvider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { createContext, useState, useEffect, ReactNode } from 'react';
 
 const STORAGE_KEY = 'baby-sleep-settings';
 
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
index 2117d33..e2bdec0 100644
--- a/frontend/src/hooks/useSettings.ts
+++ b/frontend/src/hooks/useSettings.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { SettingsContext, Settings } from './SettingsProvider';
+import { SettingsContext } from './SettingsProvider';
 
 export function useSettings() {
   const context = useContext(SettingsContext);
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 447a1e0..7c919cd 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -3,9 +3,16 @@ import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
+const APP_VERSION = process.env.VITE_APP_VERSION || 'unknown';
+const APP_GITSHA = process.env.VITE_APP_GITSHA || 'unknown';
+
 export default defineConfig({
   base: './',
   plugins: [react(), tailwindcss()],
+  define: {
+    __APP_VERSION__: JSON.stringify(APP_VERSION),
+    __APP_GITSHA__: JSON.stringify(APP_GITSHA),
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),