Dubai Real Estate Dashboard

A. Installation Instructions

Step 1: Clone the Repository

Clone the repository to your local machine using Git:

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

Step 2: Install Dependencies

Install all required dependencies using npm:

npm install

Step 3: Configure Environment Variables

Create a .env file in the root directory with the following variables:

VITE_APP_TITLE=Dubai Real Estate Dashboard
VITE_API_URL=https://your-api-url.com

Step 4: Start the Development Server

Run the development server to start working with the dashboard:

npm run dev

The application will be available at http://localhost:5173 by default.

Step 5: Build for Production

When you're ready to deploy, build the production version:

npm run build

The built files will be in the dist directory, ready to be deployed to your hosting provider.

B. Demo Content Import

The dashboard comes with pre-configured demo content to help you get started quickly.

Using Demo Data

The demo data is automatically loaded when you start the application. It includes:

• Sample properties with images and details
• Mock clients with contact information
• Example payment plans and commission structures
• Off-plan construction projects with milestones
• User accounts with different permission levels

Importing Your Own Data

To replace the demo data with your own:

1. Navigate to the src/utils directory
2. Modify the following files with your data:
   • mockData.ts - General dashboard data
   • mockCommissionData.ts - Commission-related data
   • mockOffplanData.ts - Off-plan construction data

Default Login Credentials

Use these credentials to log in to the demo dashboard:

Email: ahmed@example.com
Password: password123

This will log you in as an admin user with full access to all features.

C. Customization Guide

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6366F1',
          light: '#818CF8'
        },
        secondary: '#1F2937',
        accent: {
          DEFAULT: '#F59E0B',
          light: '#FCD34D'
        }
      }
    },
  },
  plugins: [],
};

:root {
  --primary: #6366F1;
  --primary-light: #818CF8;
  --secondary: #1F2937;
  --accent: #F59E0B;
  --accent-light: #FCD34D;
  --success: #10B981;
  --warning: #F97316;
  --error: #EF4444;
  --background: #F8FAFC;
  --foreground: #1F2937;
  --card: #FFFFFF;
  --card-foreground: #374151;
  --border: #E2E8F0;
  --input: #F1F5F9;
  --ring: #94A3B8;
  --radius: 0.5rem;
}

const navigation = [
  { name: 'Dashboard', path: '/dashboard', icon: LayoutDashboard },
  { name: 'Properties', path: '/properties', icon: Building2 },
  // Add or remove navigation items here
];

D. Visual Elements - Key Pages

D.1 Dashboard Overview

1. Stats Cards: Display key metrics with change indicators
2. Sales Overview Chart: Interactive chart showing sales performance
3. Recent Properties: List of recently added properties
4. Recent Clients: List of recently added clients

D.2 Property Management

1. Search and Filter: Tools to find specific properties
2. View Toggles: Switch between grid and list views
3. Property Cards: Display property information with actions
4. Action: Add Property

D.3 Client Management

1. Client Filters: Filter clients by type and other criteria
2. Client Cards: Display client information with contact details
3. Client Action: Edit/delete/insert/filter by

D.4 Commission Management

1. Commission Calculator: Calculate commissions based on various factors
2. Form F Generator: Generate RERA Form F submissions
3. Form F Generator: Generate RERA Form F submissions
4. Commision rates
5. Legal Compliance

D.5 Off-Plan Construction

1. Project Cards: Display off-plan project information + view project details
2. Milestone Timeline: Track construction progress
3. Payments:

D.6 User ( Broker / Agent..etc) Management

1. Add New Users: Filter clients by type and other criteria
2. View : performance , deals , commisions...etc

E. File Structure

Understanding the file structure will help you navigate and customize the dashboard effectively:

/src
  /components         # Reusable UI components
    /auth            # Authentication components
    /clients         # Client management components
    /commission      # Commission calculation components
    /dashboard       # Dashboard overview components
    /layout          # Layout components (sidebar, header)
    /offplan         # Off-plan construction components
    /properties      # Property management components
    /reports         # PDF report generators
    /ui              # Generic UI components
  /contexts          # React context providers
  /hooks             # Custom React hooks
  /pages             # Page components
    /auth           # Authentication pages
  /services          # API services
  /store             # Redux store configuration
    /slices         # Redux slices for state management
  /types             # TypeScript type definitions
  /utils             # Utility functions and mock data
  App.css            # Global CSS styles
  App.tsx            # Main application component
  index.css          # Tailwind CSS imports
  main.tsx           # Application entry point

Key Files

F. How to Edit / Delete Content

G. Core Libraries

The Dubai Real Estate Dashboard is built using a carefully selected set of modern libraries and frameworks to ensure optimal performance, maintainability, and developer experience.

Frontend Framework

• React 18.3.1 - Core UI library for building component-based interfaces
• TypeScript 5.5.3 - Strongly-typed JavaScript for improved code quality and developer experience
• Vite 5.4.2 - Next-generation frontend build tool with extremely fast HMR (Hot Module Replacement)

State Management

• Redux Toolkit 2.2.1 - Official, opinionated Redux toolset for efficient Redux development
• React Redux 9.1.0 - Official React bindings for Redux
• Redux Persist 6.0.0 - Persist and rehydrate Redux stores

Routing

• React Router Dom 6.22.3 - Declarative routing for React applications

UI Components

• Tailwind CSS 3.4.1 - Utility-first CSS framework for rapid UI development
• Lucide React 0.344.0 - Beautiful & consistent icon set as React components
• React Hot Toast 2.4.1 - Lightweight notification system for React applications

Data Visualization

• Recharts 2.12.3 - Composable charting library built on React components

Document Generation

• React PDF Renderer 3.4.0 - Create PDF documents using React components
• QRCode React 3.1.0 - QR code generator for React applications

Development Tools

• ESLint 9.9.1 - Pluggable JavaScript linter
• PostCSS 8.4.35 - Tool for transforming CSS with JavaScript
• Autoprefixer 10.4.18 - PostCSS plugin to parse CSS and add vendor prefixes

H. Algorithms & Calculations

The Dubai Real Estate Dashboard implements several sophisticated algorithms to provide accurate financial calculations and property valuations.

Commission Calculation Algorithm

The commission calculation system implements Dubai Land Department (DLD) regulations for real estate commissions:

// Commission calculation algorithm
export const calculateCommission = (
  unitPrice: number,
  developer: string,
  agentTier: 'standard' | 'gold' | 'platinum' = 'standard',
  isWaterfront: boolean = false,
  isBulkBuyer: boolean = false,
  isVipClient: boolean = false,
  resaleWithinYear: boolean = false
): CommissionCalculation => {
  // Find developer rates
  const developerRate = COMMISSION_RATES.find(rate => 
    rate.developer.toLowerCase() === developer.toLowerCase()
  );
  
  // Calculate base commission
  let baseRate = developerRate.baseCommission / 100;
  const bonuses = [];

  // Apply special conditions (waterfront, bulk buyer, VIP client)
  // Apply agent tier bonuses
  
  // Calculate gross commission
  const baseCommission = unitPrice * (developerRate.baseCommission / 100);
  const bonusAmount = bonuses.reduce((sum, bonus) => sum + bonus.amount, 0);
  const grossCommission = baseCommission + bonusAmount;

  // Apply anti-flipping rule (30% reduction if resold within 1 year)
  let antiFlippingReduction = 0;
  let finalGrossCommission = grossCommission;
  
  if (resaleWithinYear) {
    antiFlippingReduction = grossCommission * 0.3;
    finalGrossCommission = grossCommission - antiFlippingReduction;
  }

  // Calculate VAT (5%)
  const vat = finalGrossCommission * 0.05;
  const totalPayable = finalGrossCommission + vat;

  return {
    unitPrice,
    developer,
    agentTier,
    isWaterfront,
    isBulkBuyer,
    isVipClient,
    baseCommission,
    bonuses,
    grossCommission: finalGrossCommission,
    vat,
    totalPayable,
    antiFlippingReduction: resaleWithinYear ? antiFlippingReduction : undefined
  };
};

Property Valuation Algorithm

The property evaluator uses a sophisticated algorithm that considers multiple factors to determine property value:

// Property valuation algorithm
const calculateValuation = (state) => {
  // Base price calculation based on property type and area
  const baseRates = {
    'Apartment': 1200,
    'Villa': 1400,
    'Townhouse': 1300,
    'Penthouse': 1600
  };
  
  const baseRate = baseRates[state.propertyDetails.type] || 1200;
  const initialBasePrice = baseRate * state.propertyDetails.area;
  
  // Apply location multiplier
  const locationMultiplier = LOCATION_MULTIPLIERS[state.propertyDetails.location] || 1.0;
  
  // Apply condition multiplier
  const conditionMultiplier = CONDITION_MULTIPLIERS[state.propertyDetails.condition] || 1.0;
  
  // Apply view premium
  const viewMultiplier = VIEW_MULTIPLIERS[state.propertyDetails.view] || 1.0;
  
  // Apply age depreciation
  const ageImpact = Math.max(-20, -state.propertyDetails.age * 0.5);
  
  // Apply amenities bonus
  const amenitiesImpact = state.propertyDetails.amenities.length * 2;
  
  // Calculate final adjusted price with weighted factors
  // Calculate confidence score based on data quality
  
  return adjustedPrice;
};

ROI Calculator Algorithm

The property calculator implements investment analysis calculations:

// ROI calculation algorithm
const calculateROI = () => {
  // Calculate loan amount
  const calculatedLoanAmount = propertyPrice * (1 - downPayment / 100);
  
  // Calculate monthly mortgage payment
  const monthlyInterestRate = interestRate / 100 / 12;
  const numberOfPayments = loanTerm * 12;
  const calculatedMonthlyMortgage = 
    calculatedLoanAmount * 
    (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) / 
    (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1);
  
  // Calculate monthly expenses
  const monthlyPropertyTax = (propertyPrice * propertyTax / 100) / 12;
  const monthlyInsurance = insurance / 12;
  const monthlyMaintenance = (propertyPrice * maintenance / 100) / 12;
  const totalMonthlyExpenses = monthlyPropertyTax + monthlyInsurance + monthlyMaintenance + utilities;
  
  // Calculate monthly cash flow
  const effectiveRent = monthlyRent * (1 - vacancyRate / 100);
  const managementFee = effectiveRent * (propertyManagement / 100);
  const calculatedMonthlyCashFlow = effectiveRent - managementFee - calculatedMonthlyMortgage - totalMonthlyExpenses;
  
  // Calculate annual cash flow
  const calculatedAnnualCashFlow = calculatedMonthlyCashFlow * 12;
  
  // Calculate cash on cash return
  const totalInvestment = (propertyPrice * (downPayment / 100)) + (propertyPrice * 0.03);
  const calculatedCashOnCashReturn = (calculatedAnnualCashFlow / totalInvestment) * 100;
  
  // Calculate cap rate
  const netOperatingIncome = (effectiveRent - managementFee - totalMonthlyExpenses) * 12;
  const calculatedCapRate = (netOperatingIncome / propertyPrice) * 100;
  
  return {
    loanAmount: calculatedLoanAmount,
    monthlyMortgage: calculatedMonthlyMortgage,
    monthlyExpenses: totalMonthlyExpenses,
    monthlyCashFlow: calculatedMonthlyCashFlow,
    annualCashFlow: calculatedAnnualCashFlow,
    cashOnCashReturn: calculatedCashOnCashReturn,
    capRate: calculatedCapRate
  };
};

Payment Plan Calculation

The payment plan module calculates installment amounts and schedules:

// Payment plan calculation
const calculateMonthlyPayment = (plan) => {
  const principal = plan.totalAmount - plan.downPayment;
  const monthlyRate = plan.interestRate / 100 / 12;
  const monthlyPayment = (principal * monthlyRate * Math.pow(1 + monthlyRate, plan.installments)) / 
                        (Math.pow(1 + monthlyRate, plan.installments) - 1);
  return monthlyPayment;
};

I. Deployment Guide

This section provides instructions for deploying the Dubai Real Estate Dashboard to production environments.

Deployment with Vercel

Vercel is recommended for deploying this React application due to its simplicity and performance optimizations.

Prerequisites

• A Vercel account
• Git repository with your project (GitHub, GitLab, or Bitbucket)

Deployment Steps

1. Prepare Your Project:
   • Ensure all environment variables are properly set in your .env files
   • Run npm run build locally to verify the build process works correctly
   • Commit all changes to your repository
2. Import Project to Vercel:
   • Log in to your Vercel account
   • Click "Add New" > "Project"
   • Import your Git repository
   • Select the repository containing your dashboard
3. Configure Project:
   • Framework Preset: Select "Vite"
   • Build Command: npm run build (default)
   • Output Directory: dist (default)
   • Environment Variables: Add any required environment variables
4. Deploy:
   • Click "Deploy"
   • Vercel will build and deploy your application
   • Once complete, you'll receive a deployment URL
5. Verify Deployment:
   • Visit the provided URL to ensure your dashboard is working correctly
   • Test all major features including authentication, property management, and reports

Continuous Deployment

Vercel automatically sets up continuous deployment from your Git repository:

• Every push to the main branch will trigger a new production deployment
• Pull requests will generate preview deployments for testing changes
• You can configure branch deployments in the Vercel project settings

Custom Domain Setup

1. In your Vercel project, go to "Settings" > "Domains"
2. Add your custom domain (e.g., dashboard.yourcompany.com)
3. Follow Vercel's instructions to configure DNS settings
4. Optionally, enable HTTPS with a free SSL certificate

Environment Variables in Production

For production deployments, set the following environment variables in Vercel:

• VITE_APP_TITLE - Application title
• VITE_API_URL - Backend API URL (if applicable)
• Any other environment-specific variables your application needs