Lofts des Arts Web Platform

Documentation Française Disponible

Overview

The Lofts des Arts Web Platform is a comprehensive management system for luxury condominium buildings, specifically designed for the "Lofts des Arts" located at 1625 Clark, Montreal. This Next.js 14 application provides administrators and residents with tools for building management, communication, document sharing, and community engagement.

Current Status

• Phase 1 (Foundation): ✅ Complete (April 1, 2025)
• Phase 2 (Admin Features): ✅ Complete (April 5, 2025)
• Phase 3 (Resident Portal): 🔄 15% Complete - In Progress

Website Flow Chart

flowchart TD
    %% Main sections
    PublicPages[Public Pages]
    Auth[Authentication]
    AdminPortal[Admin Portal]
    ResidentPortal[Resident Portal]
    
    %% Public pages
    PublicPages --> Home[Home Page]
    PublicPages --> Gallery[Gallery]
    PublicPages --> About[About Us]
    PublicPages --> Contact[Contact Form]
    
    %% Authentication flow
    Home --> Auth
    Auth --> Login[Login Page]
    Auth --> RoleCheck{Role Check}
    
    %% Admin portal section
    RoleCheck -->|Admin| AdminPortal
    RoleCheck -->|Doorman| DoormanDashboard[Doorman Dashboard]
    RoleCheck -->|Resident| ResidentPortal
    
    %% Admin portal pages
    AdminPortal --> AdminDashboard[Admin Dashboard]
    AdminDashboard --> DocumentMgmt[Document Management]
    AdminDashboard --> UserMgmt[User Management]
    AdminDashboard --> ResidentMgmt[Resident Management]
    AdminDashboard --> BuildingMgmt[Building Management]
    AdminDashboard --> Analytics[Analytics Dashboard]
    AdminDashboard --> Settings[System Settings]
    
    %% Resident management subsection
    ResidentMgmt --> ResidentDirectory[Resident Directory]
    ResidentMgmt --> UnitManagement[Unit Management]
    
    %% Document management subsection
    DocumentMgmt --> DocUpload[Document Upload]
    DocumentMgmt --> DocCategories[Document Categories]
    DocumentMgmt --> DocPermissions[Document Permissions]
    
    %% Package management
    DoormanDashboard --> PackageMgmt[Package Management]
    PackageMgmt --> PackageReg[Package Registration]
    PackageMgmt --> PackageStatus[Package Status]
    PackageMgmt --> PackageNotify[Resident Notification]
    
    %% Resident portal (in progress)
    ResidentPortal -->|In Progress| ResidentDash[Resident Dashboard]
    ResidentDash -->|In Progress| ResidentProfile[Resident Profile]
    ResidentDash -->|In Progress| BuildingInfo[Building Information]
    ResidentDash -->|In Progress| Packages[Package Notifications]
    ResidentDash -->|In Progress| Maintenance[Maintenance Requests]
    ResidentDash -->|In Progress| CommunityBoard[Community Board]
    
    %% Access levels
    classDef public fill:#black,stroke:#333,stroke-width:1px
    classDef admin fill:#c33,stroke:#633,stroke-width:1px
    classDef doorman fill:#36c,stroke:#36c,stroke-width:1px
    classDef resident fill:#293,stroke:#293,stroke-width:1px
    classDef inProgress fill:#999,stroke:#666,stroke-width:1px,stroke-dasharray: 5 5
    
    class Home,Gallery,About,Contact,Login public
    class AdminDashboard,DocumentMgmt,UserMgmt,ResidentMgmt,BuildingMgmt,Analytics,Settings,ResidentDirectory,UnitManagement,DocUpload,DocCategories,DocPermissions admin
    class DoormanDashboard,PackageMgmt,PackageReg,PackageStatus,PackageNotify doorman
    class ResidentDash,ResidentProfile,BuildingInfo,Packages,Maintenance,CommunityBoard resident
    class ResidentDash,ResidentProfile,BuildingInfo,Packages,Maintenance,CommunityBoard inProgress

Loading

User Guides

Admin Guide For building administrators and management

Resident Guide For building residents and owners

Doorman Guide For building staff and concierge

Feature-Specific Guides

• 📄 Document Management System
• 📦 Package Management System
• 💬 Messaging System
• 🔐 RBAC: Role-Based Access Control

Key Features

Implemented Features

• Authentication System

  • Role-based access control with 6 distinct user roles
  • Secure login and session management
  • Account recovery and security policies

• Admin Dashboard

  • Personalized welcome with time-of-day greeting
  • Quick access to key management functions
  • Activity summaries and metrics

• Document Management

  • Secure file upload and storage
  • Category-based organization
  • Version control and access management
  • Document preview and sharing

• User Management

  • User creation and role assignment
  • Permission management
  • Account status controls
  • Activity logging and audit trails

• Building and Residents Management

  • Building structure data with multi-building support
  • 96 residential and commercial units database
  • Resident profiles with comprehensive contact information
  • Owner vs. tenant designation
  • Primary resident tracking
  • Move-in/move-out date management
  • Unit occupancy status tracking
  • Language and communication preferences
  • Data import/export capabilities
  • Tab-based management interface
  • Search and filtering functionalities

• Package Management Components

  • Package registration with barcode scanning
  • QR code generation for package tracking
  • Notification preference settings
  • Package status tracking workflow

• Multilingual Support

  • English and French language options
  • Language toggle throughout interface
  • Localized content and notifications

• Theme System

  • Consistent light/dark mode across all admin pages
  • Theme-aware UI components
  • Smooth theme transitions
  • Admin-only theme controls

• Analytics Dashboard

  • Visitor metrics and reporting
  • Inquiry tracking statistics
  • System status monitoring
  • Visual data presentation

In Progress Features

• Resident portal authentication
• Profile management for residents
• Enhanced messaging system interface
• Board announcement system
• Real-time notification center
• Maintenance request system
• Building information repository

Technology Stack

{
  frontend: {
    framework: 'Next.js 14',
    language: 'TypeScript 5.0',
    state: 'Zustand',
    styling: 'Tailwind CSS',
    ui: 'Shadcn/ui',
    routing: 'App Router',
    auth: 'Supabase Auth',
    forms: 'react-hook-form + zod',
    query: 'TanStack Query v5'
  },
  backend: {
    database: 'Supabase',
    api: 'REST + WebSocket',
    analytics: 'Custom + Recharts',
    caching: 'Redis',
    search: 'PostgreSQL + PostGIS',
    ai: ['TensorFlow.js', 'OpenCV', 'DeepSeek', 'OpenAI']
  },
  infrastructure: {
    hosting: 'Replit',
    ci_cd: 'GitHub Actions',
    monitoring: 'Sentry',
    performance: 'Lighthouse',
    security: 'Supabase RLS + Custom RBAC',
    storage: 'Supabase Storage'
  }
}

Getting Started

Prerequisites

• Node.js 18.0 or later
• npm or yarn
• Supabase account
• Git

Installation

1. Clone the repository:

   git clone https://github.com/your-username/loftsdesarts.git
   cd loftsdesarts

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:

   cp .env.example .env.local

   Then edit .env.local to add your Supabase credentials and other configurations.

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser.

Database Setup

1. Initialize the Supabase project:

   npx supabase init

2. Run the database setup scripts:

   bash scripts/setup_lda_data.sh

This script will populate your database with the building structure for Lofts des Arts, including all floors and units, as well as sample resident data for testing.

Project Structure

├── public/              # Static assets
├── scripts/             # Setup and utility scripts
├── sql/                 # SQL scripts for database setup
│   ├── building_data_setup.sql    # Building and units data
│   ├── resident_data_setup.sql    # Resident sample data
│   └── ...
├── src/
│   ├── app/             # Next.js 14 App Router pages
│   │   ├── admin/       # Admin section pages
│   │   │   ├── residents/    # Residents management
│   │   │   ├── documents/    # Document management
│   │   │   ├── users/        # User management
│   │   │   └── ...
│   │   ├── auth/        # Authentication pages
│   │   └── ...
│   ├── components/      # React components
│   │   ├── admin/       # Admin-specific components
│   │   ├── auth/        # Authentication components
│   │   ├── documents/   # Document management components
│   │   ├── layout/      # Layout components
│   │   ├── residents/   # Resident management components
│   │   └── ui/          # Reusable UI components
│   ├── contexts/        # React contexts
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions and libraries
│   ├── middleware/      # Next.js middleware
│   ├── services/        # Service layer for API calls
│   ├── store/           # Zustand store configurations
│   ├── styles/          # Global styles
│   ├── types/           # TypeScript type definitions
│   └── utils/           # Utility functions
├── .env.example         # Example environment variables
├── next.config.js       # Next.js configuration
├── package.json         # Project dependencies
├── postcss.config.js    # PostCSS configuration
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Documentation

Our comprehensive documentation is organized into the following sections:

Project Management

• Project Roadmap - Development timeline and milestones
• Project Status - Current project status and progress tracking
• Statement of Work - Detailed project scope and deliverables
• Session 6 Resources - Current session resources

Technical Documentation

• Architecture - System architecture and design
• API Documentation - API endpoints and usage
• Component Documentation - React component library
• Design System - Design guidelines and UI principles

Database Documentation

• Database Schema - Main database structure
• Messaging System - Messaging database schema
• Package System - Package management database schema
• RBAC System - Role-based access control documentation

User Guides

• User Guides - End-user documentation
• Admin Guides - Administrator documentation
• Resident Guides - Resident portal documentation
• Feature Guides - Feature-specific documentation

Development

• Development Guidelines - Development standards and practices
• Setup Instructions - Project setup documentation
• Testing Guidelines - Testing strategies and procedures

Project Structure

• Documentation Index - Complete documentation index
• Project Structure - Generated project structure documentation (after running npm run generate-trees)

Changelog

• Changelog - Record of all notable changes to the project

Project Documentation

Project Structure Documentation

To help keep track of the project's structure, we've included a script that automatically generates directory tree documentation. This is especially useful for maintaining documentation as the project evolves.

To generate the project structure documentation:

npm run generate-trees

This will:

1. Create a /docs/project-structure/ directory if it doesn't exist
2. Generate Markdown files with tree representations of key project sections
3. Create an index file that links to all tree structure documentation

The generated documentation includes:

• App structure (Next.js routes and pages)
• Components structure
• Library structure (utilities and hooks)
• Documentation structure
• Overall project structure

Run this script at the end of each development session to keep the documentation up to date.

License

This project is proprietary and confidential. Unauthorized copying, distribution, or use is strictly prohibited.

© 2025 Anonymous Contractor - AKA Joel Yaffe. All rights reserved.