From 61187b8a2e78886397009fd87cd90314bf04209c Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Mon, 2 Feb 2026 14:08:17 +0300
Subject: [PATCH] feat: update branding with official HiHala logo + 'Museums
 Data'

- Add official HiHala logo SVG (text portion from v1.5)
- Replace text-based nav brand with logo image + 'Museums Data'
- Update data source to default to NocoDB with Sheets fallback
- Move all credentials to environment variables (.env.local)
---
 .env.example                |  6 +++++-
 public/hihala-logo.svg      |  7 +++++++
 src/App.css                 | 20 ++++++++++++++++----
 src/App.js                  |  9 ++++++---
 src/services/dataService.js | 35 +++++++++++++++++++++++++++--------
 5 files changed, 61 insertions(+), 16 deletions(-)
 create mode 100644 public/hihala-logo.svg

diff --git a/.env.example b/.env.example
index ec47392..f58a03e 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,7 @@
-# NocoDB Configuration (optional - only needed if using NocoDB as data source)
+# NocoDB (primary data source)
 REACT_APP_NOCODB_URL=http://localhost:8090
 REACT_APP_NOCODB_TOKEN=your_token_here
+
+# Google Sheets (fallback if NocoDB fails)
+REACT_APP_SHEETS_ID=your_spreadsheet_id_here
+REACT_APP_SHEETS_NAME=Consolidated Data
diff --git a/public/hihala-logo.svg b/public/hihala-logo.svg
new file mode 100644
index 0000000..20952ba
--- /dev/null
+++ b/public/hihala-logo.svg
@@ -0,0 +1,7 @@
+<svg width="160" height="32" viewBox="0 0 370 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- HiHala text from official logo v1.5 -->
+  <g transform="translate(0, 0)">
+    <path d="M0 88.6381L0 2.57086L9.73743 2.57086L9.73743 40.8125L59.7567 40.8125L59.7567 2.57086L69.4941 2.57086L69.4941 88.6381L59.7567 88.6381L59.7567 50.3015L9.73743 50.3015L9.73743 88.6381L0 88.6381L0 88.6381ZM88.0777 12.726L88.0777 0L98.6081 0L98.6081 12.726L88.0777 12.726L88.0777 12.726ZM88.4583 88.6382L88.4583 23.6434L98.1957 23.6434L98.1957 88.6382L88.4583 88.6382L88.4583 88.6382Z" fill="#F8AD56" stroke-width="5" stroke="#F8AD56" transform="translate(0 2)" />
+    <path d="M0 90.9863L0 4.91904L9.73751 4.91904L9.73751 43.1607L59.7567 43.1607L59.7567 4.91904L69.4941 4.91904L69.4941 90.9863L59.7567 90.9863L59.7567 52.6497L9.73751 52.6497L9.73751 90.9863L0 90.9863L0 90.9863ZM115.863 92.0338C109.54 92.0338 104.021 90.5422 99.3058 87.5591C94.5905 84.5547 90.9323 80.5031 88.3314 75.4042C85.7306 70.2843 84.4302 64.6459 84.4302 58.4889C84.4302 52.2477 85.7306 46.5988 88.3314 41.5423C90.9323 36.4646 94.5905 32.4342 99.3058 29.451C104.021 26.4465 109.54 24.9444 115.863 24.9444C121.234 24.9444 125.843 25.9918 129.692 28.0864C133.561 30.1597 136.712 32.9735 139.144 36.5278L139.144 25.9918L148.881 25.9918L148.881 90.9863L139.144 90.9863L139.144 80.5773C136.712 84.0468 133.561 86.8289 129.692 88.9235C125.843 90.9973 121.234 92.0338 115.863 92.0338L115.863 92.0338ZM117.163 83.1793C122.027 83.1793 126.118 82.058 129.438 79.8154C132.779 77.5519 135.317 74.5369 137.051 70.7707C138.784 67.0048 139.651 62.9109 139.651 58.4892C139.651 53.9826 138.784 49.8674 137.051 46.1439C135.317 42.42 132.779 39.437 129.438 37.194C126.118 34.9303 122.027 33.7985 117.163 33.7985C112.406 33.7985 108.293 34.9303 104.825 37.194C101.357 39.437 98.7138 42.42 96.8953 46.1439C95.0767 49.8674 94.1675 53.9826 94.1675 58.4892C94.1675 62.9109 95.0767 67.0048 96.8953 70.7707C98.7138 74.5369 101.357 77.5519 104.825 79.8154C108.293 82.058 112.406 83.1793 117.163 83.1793L117.163 83.1793ZM165.758 90.9863L165.758 0L175.496 0L175.496 90.9863L165.758 90.9863L165.758 90.9863ZM219.796 92.0338C213.474 92.0338 207.955 90.5422 203.239 87.5591C198.524 84.5547 194.866 80.5031 192.265 75.4042C189.664 70.2843 188.364 64.6459 188.364 58.4889C188.364 52.2477 189.664 46.5988 192.265 41.5423C194.866 36.4646 198.524 32.4342 203.239 29.451C207.955 26.4465 213.474 24.9444 219.796 24.9444C225.167 24.9444 229.777 25.9918 233.625 28.0864C237.495 30.1597 240.645 32.9735 243.077 36.5278L243.077 25.9918L252.815 25.9918L252.815 90.9863L243.077 90.9863L243.077 80.5773C240.645 84.0468 237.495 86.8289 233.625 88.9235C229.777 90.9973 225.167 92.0338 219.796 92.0338L219.796 92.0338ZM221.097 83.1793C225.96 83.1793 230.052 82.058 233.371 79.8154C236.712 77.5519 239.25 74.5369 240.984 70.7707C242.718 67.0048 243.585 62.9109 243.585 58.4892C243.585 53.9826 242.718 49.8674 240.984 46.1439C239.25 42.42 236.712 39.437 233.371 37.194C230.052 34.9303 225.96 33.7985 221.097 33.7985C216.339 33.7985 212.226 34.9303 208.758 37.194C205.291 39.437 202.647 42.42 200.829 46.1439C199.01 49.8674 198.101 53.9826 198.101 58.4892C198.101 62.9109 199.01 67.0048 200.829 70.7707C202.647 74.5369 205.291 77.5519 208.758 79.8154C212.226 82.058 216.339 83.1793 221.097 83.1793L221.097 83.1793Z" fill="#0A4E62" stroke-width="5" stroke="#0A4E62" transform="translate(117 0)" />
+  </g>
+</svg>
diff --git a/src/App.css b/src/App.css
index e6e7190..1b027ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -159,14 +159,22 @@ body {
 }
 
 .nav-brand {
-  font-size: 1.125rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-secondary);
   letter-spacing: -0.02em;
 }
 
+.nav-logo {
+  height: 24px;
+  width: auto;
+}
+
 .nav-brand span {
-  color: var(--gold);
+  color: var(--text-secondary);
 }
 
 .nav-links {
@@ -1011,7 +1019,11 @@ table tbody tr:hover {
   }
   
   .nav-brand {
-    font-size: 1.1rem;
+    font-size: 0.9rem;
+  }
+  
+  .nav-logo {
+    height: 20px;
   }
   
   /* Mobile Bottom Navigation */
diff --git a/src/App.js b/src/App.js
index 56e6811..4c1a3be 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
 import Dashboard from './components/Dashboard';
 import Comparison from './components/Comparison';
-import { fetchSheetData } from './services/dataService';
+import { fetchData } from './services/dataService';
 import './App.css';
 
 function NavLink({ to, children }) {
@@ -25,7 +25,7 @@ function App() {
     async function loadData() {
       try {
         setLoading(true);
-        const result = await fetchSheetData();
+        const result = await fetchData();
         setData(result);
         setError(null);
       } catch (err) {
@@ -61,7 +61,10 @@ function App() {
     <Router>
       <div className="app">
         <nav className="nav-bar">
-          <div className="nav-brand">Hi<span>Hala</span> Museums</div>
+          <div className="nav-brand">
+            <img src="/hihala-logo.svg" alt="HiHala" className="nav-logo" />
+            <span>Museums Data</span>
+          </div>
           <div className="nav-links">
             <NavLink to="/">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
diff --git a/src/services/dataService.js b/src/services/dataService.js
index b0a3b9f..6c1e10f 100644
--- a/src/services/dataService.js
+++ b/src/services/dataService.js
@@ -1,13 +1,17 @@
-// Google Sheets configuration
-const SPREADSHEET_ID = '1rdK1e7jmfu-es4Ql0YwDYNBY2OvVihBjYaXTM-MHHqg';
-const SHEET_NAME = 'Consolidated Data';
-const SHEET_URL = `https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/gviz/tq?tqx=out:csv&sheet=${encodeURIComponent(SHEET_NAME)}`;
+// Data source configuration - all from environment variables
+// Set these in .env.local (never commit .env.local to git)
 
-// NocoDB configuration - uses environment variables for security
-// Set REACT_APP_NOCODB_URL and REACT_APP_NOCODB_TOKEN in .env.local
+// NocoDB (primary/default)
 const NOCODB_URL = process.env.REACT_APP_NOCODB_URL || '';
 const NOCODB_TOKEN = process.env.REACT_APP_NOCODB_TOKEN || '';
 
+// Google Sheets (fallback)
+const SPREADSHEET_ID = process.env.REACT_APP_SHEETS_ID || '';
+const SHEET_NAME = process.env.REACT_APP_SHEETS_NAME || 'Consolidated Data';
+const SHEET_URL = SPREADSHEET_ID 
+  ? `https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/gviz/tq?tqx=out:csv&sheet=${encodeURIComponent(SHEET_NAME)}`
+  : '';
+
 // Table IDs (not sensitive - just identifiers)
 const NOCODB_TABLES = {
   districts: 'm8cup7lesbet0sa',
@@ -168,8 +172,23 @@ export async function fetchNocoDBData() {
   }
 }
 
-export async function fetchData(source = 'sheets') {
-  return source === 'nocodb' ? fetchNocoDBData() : fetchSheetData();
+// Main data fetcher - tries NocoDB first, falls back to Sheets
+export async function fetchData() {
+  // Try NocoDB if configured
+  if (NOCODB_URL && NOCODB_TOKEN) {
+    try {
+      return await fetchNocoDBData();
+    } catch (err) {
+      console.warn('NocoDB failed, trying Google Sheets fallback...', err.message);
+    }
+  }
+  
+  // Fallback to Google Sheets if configured
+  if (SHEET_URL) {
+    return await fetchSheetData();
+  }
+  
+  throw new Error('No data source configured. Set REACT_APP_NOCODB_URL + REACT_APP_NOCODB_TOKEN, or REACT_APP_SHEETS_ID in .env.local');
 }
 
 export function filterData(data, filters) {