Commit Graph

40 Commits

Author SHA1 Message Date
fahed 0f6881309c feat: replace year/quarter filters with free date range pickers
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Dashboard: PeriodPicker replaces year + quarter dropdowns. Defaults to
current month. YoY stat card now compares same range vs previous year.

Comparison: two independent PeriodPicker blocks (Period A and Period B).
Changing Period A auto-updates Period B to same period previous year,
but Period B remains freely editable.

Both pages use filterDataByDateRange; Filters type drops year/quarter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-19 15:02:06 +03:00
fahed e41cff831b feat: per-user museum and channel access control
- PATCH /api/users/:id route to update user permissions
- Auth session stores and returns allowedMuseums/allowedChannels
- User type gains AllowedMuseums/AllowedChannels (JSON string fields)
- parseAllowed() with fail-closed semantics (empty string → null → no data)
- Dashboard/Comparison apply permission base filter before user filters
- Filter dropdowns (museums, channels, years, districts) derived from
  permission-filtered data — restricted users only see their allowed options
- Settings UserRow component with inline checkbox pickers for access config
- Access badges in users table showing current restriction summary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-08 18:03:19 +03:00
fahed f615407bba fix: default district performance chart to pie
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:19:47 +03:00
fahed 47122b5445 feat: add bar/pie and #/% toggles to district performance chart
Deploy HiHala Dashboard / deploy (push) Successful in 7s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:17:58 +03:00
fahed e373363e75 feat: add % toggle to revenue/visitors by event chart
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:16:15 +03:00
fahed 0a80103cfc feat: add % toggle to channel performance, default events and channel to pie chart
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:14:17 +03:00
fahed ebdf90c8ab fix: use correct translation keys for visitors/revenue/bar/pie toggles
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:11:47 +03:00
fahed cb4fb6071a feat: merge event charts with metric toggle, add pie chart option to events and channels
Deploy HiHala Dashboard / deploy (push) Successful in 8s
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 13:09:37 +03:00
fahed f3ce7705d6 fix: style select input in settings, fix user name placeholder
Deploy HiHala Dashboard / deploy (push) Successful in 6s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 22:20:39 +03:00
fahed 70af4962a6 feat: multi-user auth with role-based access
Deploy HiHala Dashboard / deploy (push) Successful in 6s
- Server checks PIN against env (super admin) + NocoDB Users table
- Session stores name + role (admin/viewer)
- Admin: sees Settings page (seasons + users management)
- Viewer: sees Dashboard + Comparison only, no Settings
- Users CRUD on Settings page: add name + PIN + role, delete
- Settings link + nav hidden for non-admin users

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 22:17:44 +03:00
fahed 8cf6f9eedd feat: add PIN-based login with server-side cookie sessions
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 3c19dee236 feat: add season annotation bands to Comparison trend chart
Deploy HiHala Dashboard / deploy (push) Successful in 7s
Seasons that overlap the current comparison period appear as
colored bands on the Revenue Trend chart, same as Dashboard.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:23:35 +03:00
fahed b4c436f909 feat: add settings link at bottom of dashboard
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 db6a6ac609 feat: season filter + chart bands on Dashboard and Comparison
Deploy HiHala Dashboard / deploy (push) Successful in 7s
Dashboard:
- Season dropdown filter (filters data by season date range)
- Revenue trend chart shows colored annotation bands for each season
- All downstream memos use season-filtered data

Comparison:
- Season presets in period selector (optgroup)
- Auto-compares with same season from previous hijri year if defined
- Season preset persists start/end dates in URL

Added chartjs-plugin-annotation for chart bands.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:10:49 +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 3912b3dd41 polish: fix page title, multi-select styling, chart colors
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 9332cae350 feat: always-visible visitors bar chart, replace doughnut
Deploy HiHala Dashboard / deploy (push) Successful in 7s
- Visitors by Event and Revenue by Event are now horizontal bar charts
- Both always visible (no longer hidden when events are filtered)
- Free attractions (Trail To Hira Cave, Makkah Greets Us) now visible
- Removed Doughnut chart and unused import

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 14:55:06 +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 219680fb5e feat: add district filter (Hiraa/AsSaffiyah) from static mapping
- ETL writes District column to NocoDB DailySales
- Museums mapped: Hiraa (Revelation, Holy Quraan, Trail, Makkah, VIP)
  AsSaffiyah (Creation Story, Best of Creation)
- District filter added to Dashboard and Comparison (cascades to museum)
- District Performance chart added (desktop + mobile)
- Locale keys added for both EN and AR

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 14:08:16 +03:00
fahed f6b7d4ba8d feat: migrate museum sales from NocoDB to Hono ERP API
- Replace NocoDB museum data (Districts/Museums/DailyStats) with ERP API
- Client fetches via server proxy (/api/erp/sales) — no credentials in browser
- Aggregate transaction-level ERP data into daily/museum/channel records
- Replace "district" dimension with "channel" (B2C/HiHala, POS, B2B, etc.)
- Add product-to-museum mapping (46 products → 6 museums)
- NocoDB retained only for PilgrimStats
- Remove old server/index.js (replaced by modular TS in server/src/)
- Update all components, types, and locale files

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 16:43:34 +03:00
fahed c8567da75f Enable TypeScript strict mode and fix all type errors
Deploy HiHala Dashboard / deploy (push) Successful in 6s
- Enable strict: true in tsconfig.json (was false)
- Add proper interfaces for all component props (Dashboard, Comparison, Slides)
- Add SlideConfig, ChartTypeOption, MetricOption types
- Type all function parameters, callbacks, and state variables
- Fix dynamic property access with proper keyof assertions
- 233 type errors resolved across 5 files

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:17:09 +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 97a208734e updates 2026-02-18 14:13:45 +03:00
fahed e92f11241d feat: add linear regression trendline to revenue charts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 10:56:49 +03:00
fahed d1c500a677 Complete TypeScript migration
- Convert all shared components to TypeScript (.jsx → .tsx)
  - Carousel, ChartCard, EmptyState, FilterControls, StatCard, ToggleSwitch
- Add proper TypeScript interfaces for all component props
- Delete unused dataService.legacy.ts (archived Google Sheets code)
- Build passes successfully
2026-02-04 13:59:56 +03:00
fahed 868f46fc6e chore: migrate to TypeScript
- Convert all .js files to .tsx/.ts
- Add types for data structures (MuseumRecord, Metrics, etc.)
- Add type declarations for react-chartjs-2
- Configure tsconfig with relaxed strictness for gradual adoption
- All components now use TypeScript
2026-02-04 13:45:50 +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 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 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 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 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 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 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