Commit Graph

65 Commits

Author SHA1 Message Date
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
222d583847 Enhance Carousel with real-time drag feedback
- Track touch position and show live drag offset while swiping
- Add rubber band effect at edges (25% resistance)
- Disable CSS transition during drag for instant response
- Improve accessibility with role/aria attributes
2026-02-03 15:19:33 +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
f17e19f3f8 Add PNG export to Capture Rate chart 2026-02-02 18:08:34 +03:00
fahed
b51edaeeb8 Add top padding to charts when labels shown
Prevents data labels from being clipped at top of chart container
2026-02-02 17:42:10 +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
75a11170f6 Add January 2026 sales data import scripts
- process_daily_sales.py: Parse XLS sales reports and extract museum-by-museum data
- january_2026_data.csv: Verified data for all 31 days, 4 museums (124 records)

Data imported to NocoDB DailyStats table:
- Qur'an Museum: 8,493 visits, 196,450 SAR
- Revelation Museum: 68,449 visits, 1,637,290 SAR
- Creation Story Museum: 32,926 visits, 697,225 SAR
- The Best Of Creation: 15,110 visits, 263,783 SAR
- Total: 124,978 visits, 2,794,748 SAR
2026-02-02 16:57:53 +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
c0c36c7904 feat: URL state for shareable filter views
- Dashboard filters (year, district, museum, quarter) sync to URL
- Comparison filters (preset, dates, district, museum) sync to URL
- Users can now share links with specific filter configurations
- Reset filters also clears URL parameters
- Add useUrlState hook (unused but available for future use)
2026-02-02 13:58:34 +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