PGIC - Internal Commune Management Platform

The Project

PGIC is an internal management platform designed to modernize the administration of Benin communes. The initial problem was the dispersion of administrative, financial, and real estate data across several unconnected systems, making decision-making and operation tracking difficult. Main users are municipal agents, elected officials, and local administrators. The business objective was to centralize all administrative processes in a single, secure, and offline-accessible application, while ensuring fine-grained permission management and real-time tracking of key indicators.

Technical Stack & Tools

• Frontend: Nuxt 3 with Vue 3 and TypeScript for a type-safe architecture and optimal developer experience. Using Tailwind CSS 4 with LightningCSS ensures maximum rendering performance and ultra-fast builds.
• UI Components: Shuriken UI (Tairo) and Reka UI to guarantee accessibility and visual consistency, avoiding reinventing the wheel on critical components like modals, dropdowns, and forms.
• State Management: Pinia with persistence plugin for reactive and persistent state management between sessions, complemented by TanStack Vue Query for cache, loading, and server data synchronization management.
• Validation & Forms: VeeValidate coupled with Zod for robust and typed form validation, reducing client and server-side errors.
• Rich Text Editor: Tiptap with custom extensions (character counter, image management, YouTube) for document and publication editing.
• Data Visualization: ApexCharts for financial and statistical dashboards, with Vue3 reactive integration.
• Authentication & Permissions: CASL (Code Access Security Library) for a granular role-based permission system, ensuring each user accesses only authorized features.
• PWA: Vite PWA to transform the application into an installable Progressive Web App, with offline support and automatic updates.
• Date/Time: Day.js with plugins (relativeTime, UTC, timezone) for multilingual date management (fr-FR, Africa/Cotonou).

Key Features

• Complete Administrative Management: Centralized module to manage employees, elected officials, permission requests, vacations, and utility bills (water/electricity) with integrated validation workflow.
• Real-time Financial Tracking: Interactive dashboard with revenue visualization, budget forecasts, and revenue account management, allowing decision-makers to drive the commune with up-to-date data.
• Advanced Real Estate Management: Complete system for managing land reserves (public domains, administrative reserves), building permits, compulsions, and customary certificates, with Excel import/export.
• Strategic Planning: Planning tools for CODIR, PDC (Communal Development Plan), PTA (Annual Work Plan), and PTI (Intermediate Work Plan), ensuring local development objective tracking.
• Publications Module: Creation and dissemination of news and documents with rich editor, media management, and instant publishing.
• Internal Chat: Messaging system to facilitate communication between municipal agents.

Technical Challenges & Solutions

• Performance with Massive Data: Managing tables containing thousands of entries (employees, revenues, permits) caused significant slowdowns. I implemented a custom DataTable with server-side pagination, row virtualization, and lazy loading. Additionally, using TanStack Query with intelligent cache and request deduplication reduced API calls by 60%, improving user experience.
• Offline/Online Synchronization: Municipal agents working in areas with unstable connectivity lost their changes. I implemented a PWA strategy with Service Worker using Cache-First pattern for static resources and Network-First for API data. The system automatically detects connection, queues offline operations, and synchronizes upon return to online, with UI clearly indicating synchronization status.
• Granular Permission System: With over 30 modules and different roles (administrator, agent, elected official), access management became complex and a source of security errors. I implemented CASL with rules defined by module and action (read, create, update, delete), coupled with UI that dynamically hides unauthorized elements. Permissions are loaded at login and cached, avoiding repeated server-side checks.
• Smart Excel Import Module: Communes had thousands of historical entries (building permits, administrative reserves, customary certificates) stored in disparate Excel files. Manual entry would have been impossible. I developed a 4-step import module using XLSX to parse files client-side, with dynamic column mapping from Excel to database fields. The system retrieves column metadata via API, automatically suggests mappings, and allows user validation before import. The stepper approach with real-time preview enabled importing over 10,000 records in minutes with an error rate below 1%.
• Complex Form Validation: Building permit or customary certificate creation forms contain up to 50 fields with conditional dependencies. I structured validation with composable Zod schemas and VeeValidate, creating reusable form components (InputPhone, InputDatePicker, InputChips) that manage their own local validation. The modular approach allows reusing validation schemas between creation and editing, reducing code by 40% and ensuring business rule consistency.