Security Officers Monitoring and Distribution System

Orinokia Mall — Consultores H&G

Version: 1.0.0
Date: September 2026
Stack: React 18, Vite 5, Supabase (PostgreSQL), html2canvas, jsPDF

---

1. Executive Summary & Problem Statement

The Security Officers Monitoring and Distribution System for the Orinokia Mall Shopping Center (operated by Consultores H&G) is a Single Page Application (SPA) designed to manage, visualize, and report security personnel deployment in real time.

Historically, personnel assignment was performed manually via paper rosters and localized spreadsheets, causing:

1. Lack of a Centralized Repository: Hindering historical audits, attendance tracking, and reporting.
2. Absence of Real-Time Geospatial Visualization: No unified overview of officer locations on the shopping center layout.
3. Inefficient Report Generation: Time-consuming manual transcription prone to human error when producing the formal Daily Personnel Attendance report.
4. No Automated Deficit Tracking: Absence of real-time gap detection against the mandatory 24 operational posts.
5. Lack of Automated Scheduled Alerts: No reminders for critical mall opening times (Monday-Saturday 9:50 AM, Sunday 11:50 AM).

---

2. System Architecture

The project implements a serverless client-database pattern:

• Frontend SPA: React 18 + Vite 5, deployable to static hosting or CDN.
• Database & Persistence: Managed PostgreSQL via Supabase using auto-generated REST APIs (@supabase/supabase-js) and Row Level Security (RLS).
• Intelligent Auto-Save: State change detection with 1500ms debounce and loading protection (skipNextSave) to prevent ghost overwrites.
• Client-Side Export: High-resolution PDF generation and PNG rendering directly in the browser via html2canvas and jsPDF.

---

3. Project Structure

orinokia-mall-control/
├── index.html                    # Root HTML mounting React
├── package.json                  # Dependencies and scripts
├── vite.config.js                # Vite build configuration
├── .env.example                  # Supabase environment variable template
├── README.md                     # Project overview and instructions
├── AGENTS.md                     # Agent rules and development policies
├── CONTEXT.md                    # Domain glossary and architecture context
├── docs/
│   ├── agents/                   # Engineering skills scaffolding
│   │   ├── domain.md             # Domain doc layout & consumption rules
│   │   ├── issue-tracker.md      # Forgejo issue tracker configuration
│   │   └── triage-labels.md      # Canonical triage label mappings
│   └── adr/                      # Architecture Decision Records
├── public/
│   ├── mapa.jpg                  # Mall master floor plan
│   ├── diurno.jpg                # Daytime shift layout preview
│   └── nocturno.jpg              # Nighttime shift layout preview
├── src/
│   ├── main.jsx                  # Application entry point
│   ├── App.jsx                   # Root component, global state, persistence
│   ├── index.css                 # Clean modern CSS stylesheet
│   ├── components/
│   │   ├── Sidebar.jsx           # Input forms, shift picker, assignment
│   │   ├── MapContainer.jsx      # Interactive map and draggable pins
│   │   ├── SummaryCards.jsx      # Distribution cards and deficit progress
│   │   ├── ReportGenerator.jsx   # Pop-up official report (PDF/WhatsApp)
│   │   ├── AuditCalendar.jsx     # Monthly calendar with audit dots
│   │   └── NotificationOverlay.jsx # Audio-visual mall opening alert
│   └── lib/
│       ├── constants.js          # Mall zones, command fields, defaults
│       ├── supabaseClient.js     # Initialized Supabase client
│       └── reportApi.js          # CRUD operations with Supabase
└── supabase/
    └── migrations/
        └── 20260917000027_create_daily_reports_table.sql # Schema, indexes, RLS

---

4. Database Schema & RLS Policies

Table daily_reports

• id (UUID, Primary Key)
• report_date (DATE, NOT NULL)
• shift (TEXT, NOT NULL, CHECK DIURNO | NOCTURNO)
• mando (JSONB, NOT NULL)
• gamas (JSONB, NOT NULL)
• rojos (JSONB, NOT NULL)
• parkings (JSONB, NOT NULL)
• pins (JSONB, NOT NULL)
• created_at / updated_at (TIMESTAMPTZ)
• Unique Index: idx_daily_reports_date_shift on (report_date, shift)
• RLS: Full CRUD enabled for anon and authenticated roles for intranet operational access.

Table officers (P-01 / P-02)

• Master personnel directory storing id, full_name, cedula, phone, status, preferred_zones, experience_level, and shifts_this_week for automated roster generation.

---

5. Security Posts & Required Staffing (Total Required: 24)

1. Gamas / Levels (9 Posts): Gama 1 through Gama 9 (Purple Pin).
2. Red Points / Critical Couplings (5 Posts): Rojo 1 through Rojo 5 (Red Pin).
3. Parking Lots (10 Posts): PK 1 through PK 10 (Green Pin).
4. Command Leadership (8 Roles): Operations Manager, Operations Chief 1 & 2, Technical Chief, Systems Tech, Master Operator, Parking Operator, Duty Supervisor.

---

6. Local Setup and Development

Prerequisites

• Node.js 18+ or 22+
• pnpm (or npm)

Setup Commands

# 1. Clone repository
git clone git@git.gaboggamer.online:gabogg/orinokia-mall-control.git
cd orinokia-mall-control

# 2. Configure environment
cp .env.example .env
# Edit .env with your Supabase URL and Anon Key

# 3. Install dependencies
pnpm install

# 4. Start local development server
pnpm dev

# 5. Build for production
pnpm build

---

7. Remote Repository

• Forgejo Server: https://git.gaboggamer.online
• Repository: gabogg/orinokia-mall-control
• Web URL: https://git.gaboggamer.online/gabogg/orinokia-mall-control