HOUSY PLATFORM
|
┌──────────────────────┴──────────────────────┐
| |
PUBLIC PAGES AUTHENTICATED PAGES
| |
├─ / (Landing Page) ├─ CLIENT INTERFACES
│ ├─ Hero Section │ ├─ /dashboard
│ ├─ Quick Estimator │ │ ├─ Statistics Cards (4)
│ ├─ Image Gallery │ │ ├─ Charts (Budget, Progress)
│ ├─ Testimonials │ │ ├─ Recent Activity
│ ├─ Features │ │ └─ Quick Actions
│ └─ Assistant Chatbot │ │
│ │ ├─ /estimation
├─ /auth │ │ ├─ AI Model Selector
│ ├─ Login Form │ │ ├─ Property Form
│ ├─ Register Form │ │ ├─ Advanced Options
│ └─ Social Auth │ │ └─ Results Display
│ │ │
└─ Public Features │ ├─ /projects or /client/projects
├─ Free Estimation │ │ ├─ Projects Grid/List
├─ Materials Catalog │ │ ├─ Filters & Search
├─ Gallery View │ │ └─ Quick Actions
└─ IA Chat (Guest) │ │
│ ├─ /projects/:id
│ │ ├─ Overview Tab
│ │ ├─ Tasks Tab
│ │ ├─ Team Tab
│ │ ├─ Documents Tab
│ │ ├─ Finances Tab
│ │ └─ Timeline Tab
│ │
│ ├─ /client/request
│ │ ├─ Step 1: Project Type
│ │ ├─ Step 2: Details
│ │ ├─ Step 3: Documents
│ │ └─ Step 4: Confirmation
│ │
│ ├─ /client/quotations
│ │ ├─ Received Quotes
│ │ ├─ Quote Details
│ │ └─ Actions (Accept/Reject)
│ │
│ ├─ /client/documents
│ │ ├─ File Browser
│ │ ├─ Upload Zone
│ │ └─ Preview/Download
│ │
│ ├─ /client/payments
│ │ ├─ Payment Schedule
│ │ ├─ Transaction History
│ │ └─ Payment Methods
│ │
│ └─ /profile or /client/profile
│ ├─ Personal Info
│ ├─ Preferences
│ ├─ Security
│ └─ Notifications
│
├─ ADMIN INTERFACES
│ ├─ /admin/dashboard
│ │ ├─ System Overview
│ │ ├─ Quick Stats (4 cards)
│ │ ├─ Real-time Analytics
│ │ └─ Recent Activities
│ │
│ ├─ /admin/users
│ │ ├─ Users Table (CRUD)
│ │ ├─ Search & Filters
│ │ ├─ Role Management
│ │ └─ Bulk Actions
│ │
│ ├─ /admin/requests
│ │ ├─ Pending Requests
│ │ ├─ Request Details
│ │ └─ Approval Workflow
│ │
│ ├─ /admin/quotations
│ │ ├─ All Quotations
│ │ ├─ Generate Quote
│ │ └─ Templates
│ │
│ ├─ /admin/analytics
│ │ ├─ Revenue Charts
│ │ ├─ Geographic Distribution
│ │ ├─ User Behavior
│ │ └─ Export Reports
│ │
│ ├─ /admin/categories
│ │ ├─ Project Types
│ │ ├─ Material Categories
│ │ └─ Tags Management
│ │
│ ├─ /admin/notifications
│ │ ├─ Send Notifications
│ │ ├─ Templates
│ │ └─ History
│ │
│ ├─ /admin/system-monitoring
│ │ ├─ Server Status
│ │ ├─ API Performance
│ │ ├─ Database Metrics
│ │ └─ Logs Viewer
│ │
│ └─ /admin/financial
│ ├─ Revenue Overview
│ ├─ Expenses
│ ├─ Transactions
│ └─ Reports
│
├─ SHARED INTERFACES
│ ├─ /chatbot
│ │ ├─ AI Model Selector
│ │ ├─ Chat Messages
│ │ ├─ Quick Actions
│ │ └─ File Upload
│ │
│ ├─ /materials
│ │ ├─ Materials Grid
│ │ ├─ Filters (Category, Price)
│ │ ├─ Search
│ │ └─ Price Comparison
│ │
│ └─ /data-analysis
│ ├─ Market Trends
│ ├─ Property Analysis
│ ├─ Regional Stats
│ └─ Export Data
│
└─ ERROR PAGES
├─ /404 (Not Found)
└─ /500 (Server Error)
AppLayout
├─ Sidebar (Desktop)
│ ├─ Logo
│ ├─ Navigation Menu
│ │ ├─ Dashboard Link
│ │ ├─ Projects Link
│ │ ├─ Estimation Link
│ │ ├─ Materials Link
│ │ ├─ Chatbot Link
│ │ └─ Profile Link
│ └─ Theme Toggle
│
├─ Header
│ ├─ Breadcrumbs
│ ├─ Search Bar
│ ├─ Notifications Icon
│ └─ User Menu
│
├─ Main Content Area
│ └─ {children} (Page content)
│
└─ BottomNav (Mobile)
├─ Home
├─ Projects
├─ Add
├─ Chat
└─ Profile
Landing Page
|
v
[Voir un aperçu] Button
|
v
Login/Register Page
|
v
Dashboard
|
v
[Nouvelle Demande] Button
|
v
Request Form (Step 1: Type)
|
v
Request Form (Step 2: Details)
|
v
Request Form (Step 3: Documents)
|
v
Request Form (Step 4: Confirmation)
|
v
Request Submitted ✅
|
v
My Projects Page
|
v
Project Details (Track Progress)
Landing Page
|
v
Quick Estimator Component
|
v
[Estimer gratuitement] Button
|
v
Estimation Page
|
v
Select AI Model (OpenAI/Claude/DeepSeek)
|
v
Fill Property Form
|
v
Submit for Estimation
|
v
AI Processing (5s)
|
v
Results Display
|
v
[Télécharger PDF] or [Créer un Projet]
Admin Dashboard
|
v
Notifications Badge (New Request)
|
v
Requests Management Page
|
v
Click on Request Card
|
v
Request Details Modal
|
v
Review Information
|
v
[Approuver] Button
|
v
Assign to Entrepreneur
|
v
Create Project
|
v
Notification Sent to Client ✅
┌─────────────────────────────────────────┐
│ HEADER │
│ [Breadcrumb] [Search] [Notifications] │
├─────────────────────────────────────────┤
│ STATISTICS CARDS (Grid 2x2) │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 12 │ │ 3 │ │ 8/12 │ │ 85% │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
├─────────────────────────────────────────┤
│ CHARTS SECTION (Grid 1x2) │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Budget Chart │ │ Progress Line│ │
│ └──────────────┘ └──────────────┘ │
├─────────────────────────────────────────┤
│ RECENT ACTIVITY & ACTIVE PROJECTS │
│ ┌────────────────────────────────────┐ │
│ │ Timeline | Project Cards │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ HEADER + ACTIONS │
│ [+ Nouvelle Demande] [Filtres] [Vue] │
├─────────────────────────────────────────┤
│ FILTERS BAR │
│ [Status] [Type] [Localisation] [Date] │
├─────────────────────────────────────────┤
│ PROJECT CARDS (Grid) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│ │ Project 1│ │ Project 2│ │ Project 3││
│ │ [View] │ │ [View] │ │ [View] ││
│ └──────────┘ └──────────┘ └──────────┘│
│ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│ │ Project 4│ │ Project 5│ │ Project 6││
│ └──────────┘ └──────────┘ └──────────┘│
├─────────────────────────────────────────┤
│ PAGINATION │
│ [< Previous] [1] [2] [3] [Next >] │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ PROJECT HEADER │
│ Title | Status Badge | Actions Menu │
├─────────────────────────────────────────┤
│ TABS NAVIGATION │
│ [Vue d'ensemble] [Tâches] [Équipe] ... │
├─────────────────────────────────────────┤
│ TAB CONTENT │
│ ┌─────────────┐ ┌─────────────────────┐│
│ │ Left Panel │ │ Right Panel/Chart ││
│ │ Project Info│ │ Gantt/Progress ││
│ └─────────────┘ └─────────────────────┘│
├─────────────────────────────────────────┤
│ BOTTOM SECTION │
│ Documents | Comments | Activity Log │
└─────────────────────────────────────────┘
/* Client Interface */
--client-primary: #4F46E5 /* Indigo */
--client-accent: #10B981 /* Green */
/* Admin Interface */
--admin-primary: #DC2626 /* Red */
--admin-accent: #F59E0B /* Amber */
/* Entrepreneur Interface */
--entrepreneur-primary: #7C3AED /* Purple */
--entrepreneur-accent: #06B6D4 /* Cyan */Default → Hover → Active → Disabled
↓ ↓ ↓ ↓
Normal +Shadow Pressed Grayed
- Home: HomeIcon
- Projects: BriefcaseIcon
- Estimation: CalculatorIcon
- Materials: BoxIcon
- Chat: MessageCircleIcon
- Profile: UserIcon
- Settings: SettingsIcon
- Notifications: BellIcon
- Add: PlusIcon
- Edit: PencilIcon
- Delete: TrashIcon
- Download: DownloadIcon
- Bar Chart: Budget comparison, Monthly revenue
- Line Chart: Progress over time, Trends
- Pie Chart: Budget distribution, Project types
- Area Chart: Cumulative costs, Timeline
- Gantt Chart: Project timeline, Task scheduling
- Sortable: Click headers to sort
- Filterable: Search and filter bars
- Paginated: 10/25/50/100 items per page
- Actionable: Inline actions (edit, delete, view)
- Exportable: CSV, Excel, PDF
✅ Success: Green background, CheckCircle icon
❌ Error: Red background, XCircle icon
⚠️ Warning: Yellow background, AlertTriangle icon
ℹ️ Info: Blue background, Info icon
- Toast: Bottom-right corner
- Banner: Top of page
- Badge: On icons (count)
- Modal: Center screen (important)
- RTL Layout support (future)
- Multi-language strings
- Date/Time formatting
- Currency formatting (TND)
- Number formatting
Pour une présentation complète:
- Landing Page - Full page, hero visible
- Dashboard - Charts and stats visible
- Projects List - Grid view with cards
- Project Details - All tabs
- Estimation Form - Before and after
- AI Chat - Conversation example
- Admin Dashboard - Analytics visible
- Admin Users - Table with data
- Mobile View - Responsive design
- Dark Mode - Theme variant
- Intro (15s): Landing page, scroll through features
- Estimation (30s): Quick estimation demo
- Login (10s): Quick login
- Dashboard (20s): Show statistics and charts
- Projects (30s): Browse projects, open details
- AI Chat (30s): Ask questions, get responses
- Admin (30s): Show admin capabilities
- Mobile (15s): Show responsive design
- Conclusion (10s): Thank you slide
🗺️ Complete UI Map - Every interface documented and ready to showcase
Ready for GitHub, Portfolio, and Presentations 🎯