# Epic 1: Core Foundation & Infrastructure > **Note:** The color palette referenced in this epic (Navy+Gold) has been superseded. > Epic 10 (Brand Color Refresh) updated all colors to Charcoal+Warm Gray palette. > See `docs/brand.md` for current brand specifications. ## Epic Goal Establish the foundational Laravel application with authentication, bilingual support (Arabic/English), and RTL/LTR layout switching to enable all subsequent feature development. ## Epic Description ### Business Context Libra Law Firm requires a professional bilingual web platform. This epic lays the groundwork by setting up the Laravel 12 application with proper authentication, role-based access (Admin/Client), and full Arabic/English language support with RTL layout. ### Technical Context - **Framework:** Laravel 12 with PHP 8.4 - **Frontend:** Livewire 3, Volt, Flux UI Free, Tailwind CSS 4 - **Database:** SQLite (dev), MariaDB (production) - **Auth:** Laravel Fortify ### Success Criteria - [ ] Laravel 12 project configured and running - [ ] Database schema designed and migrations created - [ ] Fortify authentication working (login only, no self-registration) - [ ] Admin and Client roles implemented with proper authorization - [ ] Bilingual infrastructure (Arabic primary, English secondary) - [ ] RTL/LTR layout switching functional - [ ] Base UI framework with brand colors (Navy #0A1F44, Gold #D4AF37) - [ ] Navigation system with language toggle --- ## Stories ### Story 1.1: Project Setup & Database Schema **Description:** Initialize Laravel 12 project with all required packages and design the complete database schema. **Acceptance Criteria:** - [ ] Laravel 12 project created with Livewire 3, Volt, Flux UI - [ ] Tailwind CSS 4 configured - [ ] Database migrations for all core tables: - users (with user_type, national_id, company fields) - consultations - timelines - timeline_updates - posts - working_hours - blocked_times - notifications - admin_logs - [ ] Model factories created for testing - [ ] Development environment working (`composer run dev`) **Technical Notes:** - Use SQLite for development - Follow existing Volt class-based component pattern - Reference PRD Section 16.1 for schema details --- ### Story 1.2: Authentication & Role System **Description:** Implement Fortify authentication with Admin/Client roles. No self-registration - admin creates all accounts. **Acceptance Criteria:** - [ ] Fortify configured with custom Volt views - [ ] Login page with bilingual support - [ ] Session timeout after 2 hours inactivity - [ ] Rate limiting on login attempts - [ ] Admin role with full access - [ ] Client role with restricted access - [ ] Gates/Policies for authorization - [ ] CSRF protection enabled - [ ] Password hashing (bcrypt) **Technical Notes:** - Disable registration feature in Fortify config - Reference existing `app/Actions/Fortify/` for patterns - Use `FortifyServiceProvider` for custom views --- ### Story 1.3: Bilingual Infrastructure (Arabic/English) **Description:** Implement full bilingual support with Arabic as primary language and RTL/LTR layout switching. **Acceptance Criteria:** - [ ] Language files for Arabic (ar) and English (en) - [ ] Language toggle in navigation - [ ] User language preference stored in database - [ ] RTL layout for Arabic, LTR for English - [ ] Date formats: DD/MM/YYYY (Arabic), MM/DD/YYYY (English) - [ ] 12-hour time format (AM/PM) for both languages - [ ] Western numerals (123) for both languages - [ ] All UI elements translatable - [ ] Arabic fonts (Cairo/Tajawal) configured - [ ] English fonts (Montserrat/Lato) configured **Technical Notes:** - Use Laravel's localization features - Store preference in users.preferred_language - Configure Tailwind for RTL support --- ### Story 1.4: Base UI & Navigation **Description:** Implement the base UI framework with brand colors and responsive navigation system. **Acceptance Criteria:** - [ ] Color scheme implemented: - Primary: Dark Navy Blue (#0A1F44) - Accent: Gold (#D4AF37) - Supporting colors per PRD Section 7.1 - [ ] Fixed top navigation bar - [ ] Language toggle (Arabic/English) - [ ] Responsive mobile menu - [ ] Main menu items: Home, Booking, Posts, Login - [ ] Libra scales logo placement (left desktop, center mobile) - [ ] Footer with firm information - [ ] Card-based layouts with proper shadows/radius - [ ] Flux UI components used where available - [ ] WCAG AA contrast compliance **Technical Notes:** - Reference PRD Section 7 for all design specifications - Use Flux UI Free components - Ensure mobile-first responsive design --- ## Dependencies - None (this is the foundation epic) ## Risks & Mitigations | Risk | Impact | Mitigation | |------|--------|------------| | RTL implementation complexity | Medium | Use established RTL patterns, test early | | Font loading performance | Low | Use font-display: swap, preload critical fonts | | Fortify customization | Low | Reference existing Actions in codebase | ## Definition of Done - [ ] All stories completed with acceptance criteria met - [ ] Tests passing for authentication and authorization - [ ] Bilingual switching works seamlessly - [ ] RTL/LTR layouts render correctly - [ ] Navigation responsive on all breakpoints - [ ] Code formatted with Pint - [ ] No critical accessibility issues