# Build Prompt: Shelter Cluster Interactive GIS Dashboard & Data Management Platform Copy everything below into your vibe-coding agent (Bolt, Lovable, v0, Cursor, Replit Agent, etc.) as the project brief. --- ## 1. Project Overview Build a full-stack web application that replicates and extends the functionality of an existing **ArcGIS Dashboard** used by a humanitarian Shelter Cluster coordination team. The current ArcGIS dashboard shows shelter/NFI (Non-Food Item) response activities as points and indicators on a map with filters. This new platform must do everything the ArcGIS dashboard does, but with **more flexibility, more customization, and a proper content management workflow**, split into two experiences: - **Public/User View** — a read-only, interactive map + indicator dashboard for anyone who needs to explore the data (partners, donors, coordination staff). - **Admin Portal** — a secure, authenticated back office where cluster data managers can add data sources, configure layers, set symbology, and manage users. The product should feel like a lightweight, purpose-built alternative to ArcGIS Dashboards/Hub — not a generic admin template. --- --- ## 3. User Roles & Auth | Role | Permissions | |---|---| | **Admin** | Full access: manage layers, data sources, symbology, users, filters, indicators, publish/unpublish dashboards | | **Editor** | Can add/edit layers and data sources but cannot manage users or delete the whole workspace | | **Viewer (logged-in user)** | Can view the dashboard, apply filters, export views — no edit rights | | **Public (optional)** | If some dashboards should be publicly shareable without login, support a "public view" toggle per dashboard — otherwise require login for everyone | Requirements: - Login screen with email/password (and optionally SSO/Microsoft login, since the data source is Excel Online / likely Microsoft 365 shop) - Role-based route protection (admin routes fully inaccessible to non-admins, not just hidden in UI) - Session persistence, password reset flow - Basic audit log: who changed what layer/data source and when (important for a coordination platform — data trust matters) --- ## 4. Admin Portal Features ### 4.1 Data Source & Layer Manager - "Add Layer" workflow supporting multiple source types: - **From a link**: GeoJSON, KML, Shapefile (zipped), or ArcGIS Feature Service REST URL - **From Excel Online**: paste a shared Excel Online link; the system parses the sheet (specify which columns hold latitude/longitude, or an address/location field to geocode) and converts rows into map points on a refresh schedule (manual "Sync now" button + optional auto-refresh interval) - **Manual entry**: a simple table/form UI to add or edit individual points/polygons directly in the admin portal - Layer type support: **points** and **polygons** (and ideally lines, for completeness) - Each layer has: name, description, source type, last-synced timestamp, visibility toggle (default show/hide), and a z-order/layer priority setting ### 4.2 Symbology / Style Editor - Per-layer default symbol style: color, icon/marker shape, size, opacity, stroke/outline for polygons - **Per-point/category override**: allow rules like "if `status = completed` show green marker; if `status = pending` show orange marker" — i.e., data-driven styling by attribute value (categorical or graduated/quantitative, like ArcGIS's "Unique values" and "Counts and Amounts" renderers) - Icon library or custom icon upload per category - Live preview of symbology changes on a mini-map before publishing ### 4.3 Filter & Indicator Configuration - Define which columns/fields are filterable (dropdown/multi-select, date range, numeric range) - Define KPI/indicator cards (e.g., total beneficiaries, total items distributed, count of active partners) computed from the underlying data with aggregation rules (sum, count, average, distinct count) - Configure **joins between layers** — e.g., join a "Governorate" polygon layer to a "5W activities" point layer by a shared admin-boundary field, so filtering by governorate cross-filters both ### 4.4 User Management - Invite/remove users, assign roles, reset passwords, view last login --- ## 5. Public/User View — Map Dashboard Features ### 5.1 Map - This must be a **real, fully interactive geographic map** — real basemap tiles with actual streets, place names, boundaries, and imagery, not a stylized/abstract or low-detail placeholder. Users should be able to zoom in to street/building-level detail and pan freely, exactly like Google Maps/ArcGIS/Mapbox - Base map switcher (light/dark/satellite/streets) using the real tile provider chosen in the tech stack - Support point layers and polygon layers simultaneously, each with its own show/hide toggle in a layer legend panel - **Clustering**: nearby points cluster at low zoom levels and expand/uncluster smoothly as the user zooms in, with a cluster count badge - **Hover popups**: hovering (desktop) or tapping (mobile) a point/polygon shows a compact tooltip with key details (not a full click-to-open panel — should feel lightweight, matching the ArcGIS "pop-up on hover" behavior); clicking can open a fuller detail panel/sidebar with all attributes - Smooth zoom-to-selection when a filter or search narrows results - Legend that reflects current active symbology rules ### 5.2 Filters - A filter panel (sidebar or top bar) with all admin-configured filters - **Cross-filtering**: selecting a filter value updates the map, the indicator/KPI cards, AND any charts simultaneously — same "linked views" behavior as ArcGIS Dashboards/Power BI - Filters should work as an AND-join across categories but OR within a multi-select category (standard BI filter logic) — confirm this matches the source dashboard's behavior - Clear-all-filters button, and a way to save/bookmark a filter combination as a shareable URL (query params) ### 5.3 Indicators & Charts - KPI cards row at the top (big numbers with labels) - Optional supporting charts (bar/donut/trend line) below or beside the map, all responsive to the same filters - Export current filtered view as CSV/image (nice-to-have) ### 5.4 Search - A location/attribute search box to jump to a specific point or filter by name --- ## 6. Design & Branding - Overall aesthetic: **modern, clean, "classy"** — generous white space, subtle shadows/elevation, rounded-but-not-bubbly corners, restrained animation on hover/filter transitions - Typography: one strong sans-serif for headers, a readable body font — avoid default system fonts, pick something intentional - **Follow the Shelter Cluster brand guideline and logo** — [logo/brand file to be provided separately; placeholder blue/white humanitarian-sector color palette until then — do not guess exact brand hex codes] - Dashboard layout: persistent top nav/header with logo + dashboard title, collapsible left sidebar for filters/layers, main map canvas taking most of the viewport, KPI strip either above the map or in a dockable side panel - Fully responsive: usable on tablet for field teams, not just desktop - Dark mode is a nice-to-have, not required --- ## 7. Nice-to-Have / Stretch Features - Time-slider to animate activities/data over time (if data has dates — the source dashboard tracks activity over months) - Draw/measure tools on the map - Print/export dashboard as PDF snapshot - Notification/email digest to admins when a data sync fails - Versioning/rollback for layer configurations - Multi-dashboard support (so the admin can spin up more than one dashboard workspace under one platform, e.g., per governorate or per cluster) --- ## 8. Build Order (suggested milestones) 1. Scaffold app, auth, and role-based routing 2. Set up PostGIS-backed data model for layers/features (points + polygons) and a basic admin "add layer from link" flow (GeoJSON first, simplest) 3. Build the map view with layer show/hide + basic popups 4. Add Excel Online ingestion + sync 5. Add symbology editor (default styles, then attribute-driven rules) 6. Add filters + cross-filtering + KPI cards 7. Add clustering, hover popups, search 8. Apply brand styling/theming pass 9. Polish: audit log, saved filter URLs, responsive pass, empty/error/loading states --- ## 9. Notes for the Agent - Prioritize a working end-to-end vertical slice (one layer, one filter, login, map render) before building out every feature — iterate. - Keep symbology and filter configuration data-driven (stored in the DB as JSON rules), not hardcoded, so the admin portal can actually change behavior without a redeploy. - Treat this as a data trust tool for humanitarian coordination — favor clarity, accuracy, and simplicity in the UI over flashy effects.