Commit Graph

33 Commits

Author SHA1 Message Date
fahed
8cf6f9eedd feat: add PIN-based login with server-side cookie sessions
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
- Server: POST /auth/login (verify PIN, set httpOnly cookie)
- Server: GET /auth/check, POST /auth/logout
- Client: Login page shown when not authenticated
- Session persists 7 days via httpOnly cookie
- PIN stored server-side only (ADMIN_PIN env var)
- Dashboard loads data only after successful auth

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 22:02:34 +03:00
fahed
c99f2abe10 fix: center settings page to match dashboard layout
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 17:01:55 +03:00
fahed
b4c436f909 feat: add settings link at bottom of dashboard
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 7s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:20:02 +03:00
fahed
ef48372033 feat: add Settings page with hijri seasons CRUD
- Server: seasons CRUD routes + generic NocoDB helpers
- Client: Settings page at /settings with inline add/edit/delete
- Seasons stored in NocoDB Seasons table
- Vite proxy: /api/seasons routed to Express server
- Nav links added (desktop + mobile)
- Locale keys for EN + AR
- Seasons loaded non-blocking on app mount

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:03:50 +03:00
fahed
ac5b23326c fix: stable multi-select trigger width (no layout shift on selection)
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 15:28:58 +03:00
fahed
3912b3dd41 polish: fix page title, multi-select styling, chart colors
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
- Page title: "HiHala Data - Museums" -> "HiHala Data"
- Meta description: updated to "Event analytics"
- Multi-select dropdown: fix inherited uppercase, wider to fit labels
- Multi-select arrow: smooth CSS rotation instead of swapping characters
- Chart colors: 10-color palette for events/channels (was 3)
- Remove unused ArcElement (Doughnut) from Chart.js registration (-5KB)
- District chart uses dynamic palette instead of hardcoded 2 colors

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 15:16:20 +03:00
fahed
aa9813aed4 feat: multi-select filters for events and channels
- New MultiSelect component with checkbox dropdown
- Event and channel filters now accept multiple selections
- Empty array = all selected (no filter applied)
- URL params store selections as comma-separated values
- District and quarter remain single-select

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 14:53:23 +03:00
fahed
7d919979cc Delight: Add micro-interactions and entrance animations
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
- Stat cards lift on hover (translateY -2px + shadow elevation)
- Metric cards lift on hover
- Chart cards fade-up with staggered delays on mount
- All animations respect prefers-reduced-motion (already in place)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:30:21 +03:00
fahed
784a914ebf Colorize: Add dark mode with system/dark/light toggle
- Add prefers-color-scheme: dark media query for automatic dark mode
- Add data-theme attribute for manual override (persisted to localStorage)
- 3-state cycle: system → dark → light → system
- Theme toggle button in nav with contextual icon (sun/moon/half)
- Dark palette: slate-900 bg, slate-800 surfaces, adjusted text/accent/success/danger

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:29:39 +03:00
fahed
0df13abfee Polish + Optimize: Clean metadata, remove !important, prune unused CSS
- Update theme-color to match brand (#f8fafc), fix stale CRA description
- Remove manifest.json and logo192.png references (not used)
- Replace !important on chart export buttons with higher specificity selectors
- Remove unused .skeleton-text and .skeleton-loading CSS classes
- Remove duplicate skeleton animation keyframes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:28:34 +03:00
fahed
cf169b6b69 Normalize + Adapt: CSS tokens, RTL fixes, mobile nav, fluid charts
Normalize:
- Add 10+ new CSS variables (brand-icon, brand-text, text-inverse, warning-*, etc.)
- Replace 35+ hardcoded hex colors with CSS variable references

Adapt:
- Add Slides link to mobile bottom nav (was unreachable on mobile)
- Fix RTL table alignment: text-align left → start
- Make chart height fluid: 380px → clamp(280px, 30vw, 420px)
- Fix carousel dot touch targets to minimum 24px
- Fix margin-left → margin-inline-start for RTL

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:27:27 +03:00
fahed
25066af67c Harden: Fix critical accessibility issues
- Add aria-labels to icon-only buttons (refresh, language toggle)
- Add aria-hidden to decorative SVGs
- Add aria-label to data source select
- Replace outline:none with visible focus rings on all inputs/selects
- Add <main> landmark for screen reader navigation
- Add prefers-reduced-motion: disable all animations for vestibular safety
- Move error message inline style to CSS class
- Add aria-label to both nav landmarks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:23:04 +03:00
fahed
30ea4b6ecb Add route-based code splitting and loading skeletons
- Lazy-load Dashboard, Comparison, Slides via React.lazy + Suspense
- Main bundle reduced from 606KB to 256KB
- Replace full-screen spinner with skeleton cards during load
- Skeleton used for both initial data fetch and route transitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:10:42 +03:00
fahed
e98bebd60b fix: match refresh button size to other nav buttons 2026-02-04 11:53:18 +03:00
fahed
9044ab7da3 feat: VAT toggle + offline mode
- Rename Revenue to GrossRevenue, add NetRevenue (excl. VAT)
- Add VAT toggle (Incl/Excl) on Dashboard and Comparison pages
- Add offline mode with localStorage caching (24h validity)
- Add refresh button and offline indicator in nav
- Remove Google Sheets fallback (archived to dataService.legacy.js)
- Add AR/EN translations for new UI elements
2026-02-04 11:47:42 +03:00
fahed
afe276541f Fix chart data labels RTL alignment issue
- Force LTR direction on chart canvas elements via CSS
- Add locale: 'en-US' to chart options for consistent number formatting
- Add textDirection: 'ltr' to datalabels and tooltip configs
- Fixes background/text misalignment in Arabic RTL mode
2026-02-03 16:40:30 +03:00
fahed
0c7987493e Improve language toggle button design
- Add globe icon to language toggle
- Style with border, proper padding, and hover effects
- Match overall nav design language
- Use Inter font for Arabic mode to show 'EN' consistently
2026-02-03 16:32:31 +03:00
fahed
fa43cf8dd1 Fix chart height - override flex with explicit 380px
- Add .exportable-chart.chart-container rule with flex:none and height:380px
- This overrides the flex:1 that was preventing height from being applied
- Also fixed .chart-section .chart-container to 380px
2026-02-03 16:21:22 +03:00
fahed
1d7389cd43 Improve chart UX: taller charts, controls below header
- Increase chart height from 280px to 380px (more square-like)
- Move controls below chart title (column layout)
- Spread two control groups left/right with space-between
- Make controls more compact (smaller padding, font-size)
2026-02-03 15:53:14 +03:00
fahed
60eda25fe3 Position download button in corner + better Arabic font
- Move export button outside header-actions to enable absolute positioning
- Button now positioned at top-right (LTR) / top-left (RTL)
- Switch from Tajawal to IBM Plex Sans Arabic (slicker, more technical)
- Add RTL-specific font-family in CSS
2026-02-03 15:49:31 +03:00
fahed
12f548fc78 Fix chart export buttons and improve controls UX
- Add missing CSS for .chart-header-with-export layout
- Add .chart-header-actions for horizontal controls alignment
- Make .chart-export-btn.visible always show (was opacity: 0)
- Controls now display in clean horizontal row: title → toggles → tabs → download
2026-02-03 15:43:11 +03:00
fahed
00724aac3d Improve desktop UI readability
Typography improvements:
- Base font size increased to 15px
- Better text color contrast (darker text-secondary/muted)
- Stat card values: 2rem with font-weight 700
- Page titles: 1.75rem with font-weight 700
- Table font: 0.9375rem with better padding
- Toggle switches: larger buttons (0.8125rem, 6px 14px padding)
- Metric selector buttons: 0.8125rem with better padding
- Filter controls: larger labels and inputs
- Period banner: 1.75rem year display
- Metric cards: larger values (1.25rem)
- Nav links: 0.9375rem font size

Visual improvements:
- Subtle box shadows on stat/metric cards
- Better border contrast
- Improved spacing throughout
2026-02-03 15:39:03 +03:00
fahed
eb477158cb Restore translations + fix CSS for new components
- Restored Arabic/English translations from overhaul
- Restored LanguageContext for language switching
- Restored updated components with i18n support
- Kept original CSS from f17e19f (working desktop styling)
- Added missing CSS for new components:
  - .page-title-with-actions
  - .toggle-with-label
  - .period-display-banner

Desktop and Arabic translations both working.
2026-02-03 15:32:52 +03:00
fahed
b2fcb16d12 Restore working state from f17e19f (before mobile overhaul)
Reverting all my changes that broke the desktop layout.
Starting fresh for mobile improvements.
2026-02-03 15:29:03 +03:00
fahed
7ed7af314c Add mobile UX enhancements (scoped to @media queries)
Mobile-only improvements:
- Better touch targets (44px min for accessibility)
- Smoother carousel transitions
- Touch feedback animations
- Bottom nav active indicator
- Chart title padding for toggle overlap
- Period banner stacks vertically on mobile
- Table scroll hint gradient
- Small screen (≤375px) optimizations

All changes inside @media blocks, desktop unaffected
2026-02-03 15:19:01 +03:00
fahed
97afb8b3a7 Fix missing CSS for page-title-with-actions and period-display-banner
Added CSS rules that were missing after restoring from older commit:
- .page-title-with-actions (flex layout for title + toggle)
- .toggle-with-label (Labels On/Off toggle styling)
- .period-display-banner (Comparison page period display)
2026-02-03 15:18:26 +03:00
fahed
480885a8e6 Mobile UX enhancements (desktop unchanged)
- Added mobile-only CSS improvements at end of file
- Enhanced touch targets (min 44px for accessibility)
- Improved carousel with real-time drag feedback and rubber band effect
- Better visual feedback on touch interactions
- Bottom nav active indicator
- Improved stat/chart cards spacing on mobile
- Period banner stacks vertically on mobile
- Table scroll hint with fade gradient
- Extra small screen (≤375px) optimizations
- All changes scoped to @media (max-width: 768px)
2026-02-03 15:13:34 +03:00
fahed
0e5d285680 feat: Complete mobile UX/UI overhaul
Major improvements:
- New CSS design system with custom properties (tokens)
- Consistent spacing scale (4px base)
- Touch-friendly sizing (44px min targets)
- Improved Carousel with better touch handling and rubber-band effect
- Enhanced FilterControls (auto-collapse on mobile)
- Better stat card styling with change indicators
- Refined chart cards and toggle switches
- Smoother transitions and micro-interactions
- Better RTL support
- Print styles
- Responsive breakpoints for tablet (1024px), mobile (768px), and small mobile (375px)
- Cleaner typography hierarchy
- Subtle shadows and depth

Components updated:
- App.css: Complete rewrite with design tokens
- Carousel.jsx: Better touch gestures with velocity detection
- StatCard.jsx: Improved change indicator styling
- FilterControls.jsx: Auto-collapse on mobile
- EmptyState.jsx: Better accessibility
- ChartExport.js: Cleaned up unused imports
2026-02-03 15:02:29 +03:00
fahed
22878d5a16 Add PNG export for charts
- Hover any chart to reveal download button
- Exports with white background and padding
- Works on Dashboard and Comparison pages
2026-02-02 17:39:11 +03:00
fahed
a2e7aa16cd Add Slides builder, data source selector, fix cross-year labels
Features:
- Slides page: build presentations with configurable charts per slide
- Export slides as HTML zip
- Data source dropdown (Museums active, Coffees/eCommerce placeholders)
- Renamed app to 'HiHala Data' with 'Museums' as subtitle

Fixes:
- Cross-year period labels now show 'Nov 25–Jan 26' instead of misleading year
- Period display boxes updated to use smart labels

UI:
- New nav link for Slides
- Mobile nav updated
- Data source select styled to match brand
2026-02-02 17:36:15 +03:00
fahed
61187b8a2e 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)
2026-02-02 14:08:17 +03:00
fahed
8a3b6a8d2e refactor: major architecture improvements
Security:
- Remove exposed NocoDB token from client code
- Add .env.example for environment variables

Shared Components:
- Carousel: touch/keyboard navigation, accessibility
- ChartCard: reusable chart container
- EmptyState: for no-data scenarios
- FilterControls: collapsible filter panel with reset button
- StatCard: metric display with change indicator
- ToggleSwitch: accessible radio-style toggle

Architecture:
- Create src/config/chartConfig.js for shared chart options
- Extract ChartJS registration to single location
- Reduce code duplication in Dashboard and Comparison

UX Improvements:
- Add empty state when filters return no data
- Add Reset Filters button to filter controls
- Add skeleton loader CSS utilities
- Improve focus states for accessibility
- Use shared components in Dashboard and Comparison
2026-02-02 13:50:23 +03:00
fahed
24fa601aec feat(dashboard): add data labels toggle, dual-axis capture rate chart, mobile bottom nav
- Global data labels toggle in header (works on Dashboard & Comparison pages)
- Labels show formatted values (K/M suffix, max 2 decimals) with white pill background
- Capture Rate chart now shows pilgrims as curved line on right Y-axis
- Revenue Trends toggle moved to top-right corner of chart container
- Mobile: bottom navigation bar with Dashboard, Compare, Labels toggle
- Mobile: top nav simplified to brand only, bottom nav is thumb-friendly
2026-02-02 13:39:56 +03:00