Pages Reference

Clientra CRM includes 36 page modules plus 5 dynamically-loaded external modules. Each page is a JavaScript class that renders its own HTML, manages its state, and communicates with the backend via the ApiClient.

ℹ Page Class Pattern

Every page exports a PascalCase class (e.g., class LeadsPage) with a render() method. Pages are instantiated at the bottom of index.php and registered with the router in app.js.

Dashboard

File: assets/js/pages/Dashboard.js | Route: #/dashboard

The main landing page after login. Displays a high-level business overview with real-time KPI metrics, interactive charts powered by Chart.js 4.4.0, and a recent activity feed.

Features

KPI cards: total properties, active leads, pipeline deals, monthly revenue
Bar/line charts for deals closed per month and revenue trends
Pie chart for lead source distribution
Activity feed showing recent actions across the CRM
Quick navigation to most-used sections
Enhanced dashboard stats via dashboard_enhanced API endpoint

API Calls

javascript

api.call('dashboard_stats', 'GET')
api.call('dashboard_enhanced', 'GET')

Properties

File: assets/js/pages/Properties.js | Route: #/properties

Full property listing management with table and grid views. Supports advanced filtering, CSV import/export, and document attachments.

Features

Table view and grid/card view toggle
Advanced filters: location, community, type, status, beds, price range, purpose (sale/rent)
Cascading/linked filters: Location → Community → Project are interconnected — selecting a location shows only its communities, selecting a community shows only its projects
Bulk select all across pages: "Select All" selects ALL matching properties across all pages (not just the visible page), powered by dedicated list_property_ids API
Bulk update with smart dropdowns: Project Name field uses a dropdown populated from lookups (not free text)
Export to CSV
Import from CSV with field mapping
Cover image management (set primary listing photo)
Document attachments (brochures, floor plans, NOC, title deeds)
Quick view modal for inline property details
Reference number auto-generation

Property Fields

Field	Description	Required
`ref`	Auto-generated reference number (e.g., PROP-001)	Auto
`status`	Available / Reserved / Sold / Rented / Off Market	Yes
`purpose`	Sale or Rent	Yes
`type`	Apartment, Villa, Office, Townhouse, etc.	Yes
`location`	Emirate or area (lookup)	Yes
`community`	Sub-community or building (lookup)	No
`unit_number`	Unit/flat number	No
`bedrooms`	Number of bedrooms (0 = Studio)	No
`bathrooms`	Number of bathrooms	No
`size_sqft`	Built-up area in sq. ft.	No
`plot_area`	Plot/land area in sq. ft. (for villas)	No
`price`	Asking price in configured currency	No
`owner_id`	Link to owner record	No
`project_id`	Link to real estate project	No
`floor`	Floor number	No
`view`	Sea, Park, Community, Pool, etc.	No
`handover_date`	Off-plan handover date	No
`payment_plan`	Payment plan description	No

Leads

File: assets/js/pages/Leads.js | Route: #/leads

The primary lead pipeline management page. Tracks all inbound inquiries from first contact through to conversion, with rich filtering and assignment features.

Lead Status Pipeline

New → Contacted → Viewing → Offer → Won | Lost

Features

Lead list with sortable columns and advanced filters
Source tracking: Website, Walk-In, Referral, Meta Ads, Cold Call, etc.
Campaign attribution for marketing tracking
Priority levels: Low / Normal / High / Urgent
Budget range, preferred property type, location, and bedrooms
Agent assignment with round-robin automation support
Follow-up date scheduling with calendar integration
CSV import with field mapping wizard
Meta Ads lead queue integration (see Addons)
Convert lead to deal with one click
Communication history timeline per lead

Deals

File: assets/js/pages/Deals.js | Route: #/deals

Deal management with a kanban board view. Tracks the full sales journey from initial interest through to closing, with commission calculations and lead-to-deal conversion.

Deal Pipeline Stages

New Contacted Viewing Offer Negotiation Won Lost

Features

Kanban board view with drag-and-drop stage movement
List view with full sorting and filtering
Deal value and expected commission tracking
Convert lead to deal (preserves communication history)
Dashboard stats: total pipeline value, deals per stage, win rate
Links to property, contact, and agent

Contacts

File: assets/js/pages/Contacts.js | Route: #/contacts

Central contact database for clients, agents, developers, and other stakeholders. Each contact maintains a full communication history timeline.

Contact Fields

Field	Description
Reference (ref)	Auto-generated (e.g., CON-001)
Full Name	Contact's full name
Phone(s)	Primary and secondary phone numbers
Email	Email address
Type	Agent / Client / Developer / Other
Status	Active / Inactive / VIP
Nationality	Country of nationality
Passport Number	Passport or ID number
Emirates ID	UAE Emirates ID (UAE Edition)
Date of Birth	DOB for age/compliance tracking
Language	Preferred communication language

Owners

File: assets/js/pages/Owners.js | Route: #/owners

Property owner/landlord management. Tracks all owners in the portfolio with their contact details, property listings, and communication history.

Features

Owner profile with phone, email, and WhatsApp contact
Community and unit number linking
Project/development linking
WhatsApp message sent tracking (last contacted date)
Multiple listings per owner
Communication history timeline

Units

File: assets/js/pages/Units.js | Route: #/units

Unit inventory management within off-plan projects. Tracks individual unit availability, specifications, and pricing.

Unit Fields

Field	Description
Reference (ref)	Auto-generated unit reference
Project	Link to real estate project
Unit Number	Alphanumeric unit identifier
Type	Apartment, Studio, Villa, Penthouse, etc.
Bedrooms	Number of bedrooms (0 = Studio)
Bathrooms	Number of bathrooms
Size (sqft)	Built-up area in square feet
Floor	Floor level number
View	Sea / Park / Community / Pool / City
Price	Asking price
Status	Available / Reserved / Sold / Rented
Furnished	Furnished / Unfurnished / Semi-furnished
Payment Plan	Payment structure description

Real Estate Projects

File: assets/js/pages/RealEstateProjects.js | Route: #/real-estate-projects

Off-plan development project management. Tracks full project details including unit inventory, pricing, amenities, and marketing materials.

Project Fields

Reference (auto-generated)
Project name and developer
Location and community
Property and unit types
Total and available unit count
Starting price range
Handover date
Payment plan structure

Amenities list
Brochure and floor plan URLs
Unit type breakdown (layouts)
Broker commission percentage
Parking availability
Elevator count
GPS coordinates (latitude/longitude)
Cover image management

Communications

File: assets/js/pages/Communications.js | Route: #/communications

The unified communication hub. All interactions — regardless of channel — are stored in a single communications table and linked to the relevant entity.

Communication Types

Email Call WhatsApp SMS Meeting Note

Features

Log any communication type against any entity (lead, deal, contact, property, owner)
Status tracking: draft / sent / delivered / read / failed / logged
Full timeline view per entity
Communication statistics and activity overview
Email template management
Use body field for message content (not comment)

⚠ Field Naming Convention

Always use the body field for communication content. Some legacy code may still reference comment, but all new code must use body.

Mail

File: assets/js/pages/Mail.js | Route: #/mail

A full email client built into the CRM. Supports multiple IMAP/SMTP accounts with per-user access permissions.

Features

IMAP folder navigation (Inbox, Sent, Drafts, Trash, custom folders)
Email composition with rich text and attachments
Send via SMTP with configurable accounts
Read/unread tracking and marking
Multi-account support with permission control per user
Email caching for performance
Move messages between folders
Delete messages

Tasks

File: assets/js/pages/Tasks.js | Route: #/tasks

Task and activity management for agents and admins. Tasks can be linked to any CRM entity and scheduled on the calendar.

Task Fields

Field	Options
Title	Short description of the task
Description	Detailed notes
Status	Pending / In Progress / Completed / Cancelled
Priority	Low / Normal / High / Urgent
Event Type	Task / Meeting / Call / Other
Due Date & Time	Scheduled completion datetime
Entity Link	Lead / Deal / Contact / Property / Owner
Assigned To	User assignment

Contracts

File: assets/js/pages/Contracts.js | Route: #/contracts

Contract lifecycle management with UAE-specific regulatory tracking fields.

Contract Types & Status

Types

Sale
Rent
Lease
Management

Status

Draft
Active
Expired
Renewed
Cancelled

UAE-Specific Fields

Field	Description
Ejari Number	Dubai rental registration number
Tawtheeq Number	Abu Dhabi tenancy contract number
Oqood Number	Off-plan property registration number
Title Deed Number	Property title deed reference
DLD Transaction	Dubai Land Department transaction number

Financial

File: assets/js/pages/Financial.js | Route: #/financial

Financial management including invoicing, payment recording, and financial summaries with VAT support.

Features

Invoice creation with line items and VAT (5% UAE default)
Payment recording against invoices
Financial dashboard: total invoiced, collected, outstanding
PDF invoice generation via PDF Builder
Link invoices to deals, contacts, and owners

Commissions

File: assets/js/pages/Commissions.js | Route: #/commissions

Commission tracking and payout management. Calculates agent and company share splits with an approval workflow.

Commission Workflow

Pending → Approved → Paid | Cancelled

Deal-based commission creation with auto-calculation
Agent vs company split configuration
DLD (Dubai Land Department) fee calculation (UAE Edition)
Approval and payment tracking
Export commissions to CSV
Agent commission summary reports

Reports

File: assets/js/pages/Reports.js | Route: #/reports

Available Reports

Report	Description
Team Performance	Agent activity, deals closed, revenue per agent
Sales Funnel	Lead-to-deal conversion rates per stage
Revenue Forecast	Projected revenue based on pipeline
Activity Overview	Communications, tasks, and actions by date range
Lead Sources	Breakdown of leads by source and campaign

Automation

File: assets/js/pages/Automation.js | Route: #/automation

Workflow automation engine. Create rules that automatically trigger actions when CRM events occur.

Trigger Events

Event	Description
`lead.created`	A new lead is added to the system
`lead.status_changed`	Lead status is updated
`deal.stage_changed`	Deal moves to a different pipeline stage
`deal.created`	A new deal is created
`task.due`	A task reaches its due date

Available Actions

Action	Description
`assign_round_robin`	Assign entity to next agent in rotation
`create_followup_task`	Automatically create a follow-up task
`notify_admins`	Send in-app notification to all admins
`schedule_email`	Queue an email to be sent
`create_deal_from_lead`	Automatically convert lead to deal

PDF Builder

File: assets/js/pages/PDFBuilder.js | Route: #/pdf-builder

Dynamic PDF document generator powered by DomPDF. Create custom templates with letterheads, generate professional documents, and build property sales offers with images.

Template Types

Invoice MOU Receipt Letter Contract Sales Offer

Features

Custom letterhead management (company logo, header, footer)
Field variable substitution (contact name, property details, prices)
Sales offer modal with property images and specifications
PDF preview before generation
Document folder organization
Download and share generated PDFs

Administration Pages

Users

File: assets/js/pages/Users.js | Route: #/users (admin only)

Create and manage CRM users. Each user is assigned a role that controls their access permissions.

Role	Description
admin	Full access to all features including settings, user management, and data wipe
agent	Standard access to sales and communication features
viewer	Read-only access to assigned modules

Permissions

File: assets/js/pages/Permissions.js | Route: #/permissions

Fine-grained RBAC system. Set permissions per role, override permissions per user, and control module visibility.

Settings

File: assets/js/pages/Settings.js | Route: #/settings

System-wide configuration. Includes branding, theme, timezone, currency, storage settings, and data management tools (backup, restore, wipe).

Lookups

File: assets/js/pages/LookupsPage.js | Route: #/lookups

Manage dynamic dropdown data used throughout the CRM: developers, locations, communities, projects, and phases.

External / Addon Modules

These modules are loaded dynamically from the /public/addons/ directory and inject themselves into the sidebar and routing.

Module	File	Description
HR	`HR.js`	Employee management, attendance tracking, leave management, and payroll processing
Trash	`Trash.js`	Soft-deleted record recovery. Browse, restore, or permanently delete trashed items.
Audit Log	`AuditLog.js`	Full change tracking. View all data modifications with before/after values. Accept or revert individual changes.
Teams	`Teams.js`	Team structure within departments. Assign team leads, members, and roles.
Cold Call DB	`ColdCallDB.js`	Cold calling database. Import contact lists, assign to agents, and track calling progress.