{"id":50862687,"url":"https://github.com/smmariquit/comsci-128","last_synced_at":"2026-06-14T22:05:50.798Z","repository":{"id":341788540,"uuid":"1149791147","full_name":"smmariquit/comsci-128","owner":"smmariquit","description":"UPLB CASA — a Next.js + Supabase centralized accommodation management system that replaces manual forms and spreadsheets with a unified portal for student housing applications, room assignment, billing, and audit logs. Built for CMSC 128 (Software Engineering).","archived":false,"fork":false,"pushed_at":"2026-05-22T03:15:41.000Z","size":7592,"stargazers_count":4,"open_issues_count":24,"forks_count":0,"subscribers_count":0,"default_branch":"staging","last_synced_at":"2026-05-22T07:51:54.348Z","etag":null,"topics":["accommodation-management","biome","cmsc-128","nextjs","software-engineering","supabase","tailwindcss","typescript","uplb","vercel"],"latest_commit_sha":null,"homepage":"https://uplb.casa","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smmariquit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-04T14:25:54.000Z","updated_at":"2026-05-22T03:15:45.000Z","dependencies_parsed_at":"2026-04-28T11:04:39.921Z","dependency_job_id":null,"html_url":"https://github.com/smmariquit/comsci-128","commit_stats":null,"previous_names":["smmariquit/comsci-128"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/smmariquit/comsci-128","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smmariquit%2Fcomsci-128","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smmariquit%2Fcomsci-128/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smmariquit%2Fcomsci-128/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smmariquit%2Fcomsci-128/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smmariquit","download_url":"https://codeload.github.com/smmariquit/comsci-128/tar.gz/refs/heads/staging","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smmariquit%2Fcomsci-128/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34339267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accommodation-management","biome","cmsc-128","nextjs","software-engineering","supabase","tailwindcss","typescript","uplb","vercel"],"created_at":"2026-06-14T22:05:49.084Z","updated_at":"2026-06-14T22:05:50.793Z","avatar_url":"https://github.com/smmariquit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UPLB CASA\n\nUPLB CASA is a centralized accommodation management system for the [University of the Philippines Los Baños][uplb]. Designed to replace manual forms, fragmented email exchanges, and spreadsheets, UPLB CASA provides a unified digital platform that manages the entire lifecycle of student housing, assignments, occupancy, and billing.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://uplb.casa\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Live-uplb.casa-maroon?style=for-the-badge\u0026logo=vercel\u0026logoColor=white\" alt=\"CASA Live\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/smmariquit/comsci-128/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/smmariquit/comsci-128?style=for-the-badge\u0026color=gold\" alt=\"Stars\" /\u003e\n  \u003cimg src=\"https://img.shields.io/github/last-commit/smmariquit/comsci-128?style=for-the-badge\" alt=\"Last Commit\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PWA-Ready-orange?style=for-the-badge\u0026logo=progressive-web-apps\u0026logoColor=white\" alt=\"PWA Ready\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Offline%20DB-PGlite-blue?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white\" alt=\"Offline DB\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/3D%20Maps-MapLibre-red?style=for-the-badge\u0026logo=maplibre\u0026logoColor=white\" alt=\"3D Maps\" /\u003e\n\u003c/p\u003e\n\n#### Tech Stack\n![Next.js][next-badge] ![Supabase][supabase-badge] ![Tailwind][tailwind-badge] ![TypeScript][ts-badge] ![Biome][biome-badge] ![Lucide][lucide-badge] ![Swagger][swagger-badge]\n\n---\n\n## 3D Interactive Spatial Mapping\n\nUPLB CASA features a fully interactive 3D spatial viewer built using **MapLibre GL**. The viewer constructs real-time 3D building models on-the-fly directly from OpenStreetMap building footprints via fill-extrusion layers.\n\n---\n\n## Core System Architecture\n\n### Offline-First Housing Engine (PWA)\nUPLB CASA is designed to work reliably in low-connectivity areas around UPLB.\n1. **Service Worker (Serwist)**: Implements offline assets caching and fallback page routes (`/offline`).\n2. **In-Browser PostgreSQL (PGlite)**: Mounts an IndexedDB-backed (`idb://housing-offline-db`) PostgreSQL instance directly inside the student's browser.\n3. **Canvas Compression API**: When online, the system automatically fetches all housing databases, converts heavy cover images into low-res JPEG base64 strings client-side, and stores them in the local PGlite instance to avoid offline network overhead.\n\n```mermaid\nsequenceDiagram\n    autonumber\n    actor User as Student/User\n    participant App as Next.js PWA Client\n    participant SW as Serwist Service Worker\n    participant PGlite as In-Browser PGlite (IndexedDB)\n    participant API as Supabase API (Backend)\n\n    alt Device is Online\n        App-\u003e\u003eAPI: Fetch latest housing \u0026 room data\n        API--\u003e\u003eApp: Return JSON payload\n        App-\u003e\u003eApp: Generate low-res base64 thumbnails (canvas API)\n        App-\u003e\u003ePGlite: Sync data (INSERT ON CONFLICT / DELETE obsolete)\n        Note over PGlite: Data serialized to IndexedDB idb://housing-offline-db\n    else Device is Offline\n        User-\u003e\u003eApp: Open Housing Browser\n        App-\u003e\u003eSW: Intercept fetch requests\n        SW--\u003e\u003eApp: Serve static assets \u0026 cached scripts\n        App-\u003e\u003ePGlite: Query local PostgreSQL tables (housing \u0026 room)\n        PGlite--\u003e\u003eApp: Return local offline data (with base64 images)\n        App--\u003e\u003eUser: Display offline UI with full features\n    end\n```\n\n### Multi-Role Application \u0026 Approval Flow\nAccommodations are managed through a two-tiered screening process to ensure full accountability and compliance with university policies.\n\n```mermaid\ngraph TD\n    %% Define Styles\n    classDef init fill:#f5f3ef,stroke:#c9642a,stroke-width:2px,color:#2c1b0c;\n    classDef state fill:#ffffff,stroke:#666666,stroke-width:1px,stroke-dasharray: 5 5,color:#111111;\n    classDef success fill:#e6f4ea,stroke:#137333,stroke-width:2px,color:#137333;\n    classDef danger fill:#fce8e6,stroke:#c5221f,stroke-width:2px,color:#c5221f;\n    classDef process fill:#f1f3f4,stroke:#5f6368,stroke-width:1px,color:#202124;\n\n    Start([Student submits application]) --\u003e P1[Pending Manager Approval]\n    \n    P1 --\u003e|Manager Rejects| R1[Rejected]\n    P1 --\u003e|Manager Reviews Docs Form 5, Payment, etc.| P2[Pending Admin Approval]\n    \n    P2 --\u003e|Admin Rejects| R2[Rejected]\n    P2 --\u003e|Admin Grants Final Approval| Appr[Approved]\n    \n    Appr --\u003e Assign[Manager / Admin assigns room unit]\n    Assign --\u003e Occupy[Occupancy tracking begins]\n    \n    class Start init;\n    class P1,P2 state;\n    class Appr,Occupy success;\n    class R1,R2 danger;\n    class Assign process;\n```\n\n\n---\n\n## Features\n\n### Core Infrastructure\n- **Authentication**: Role-based access control, secure signups, email OTP verification, and PKCE-based Google/UP Mail OAuth 2.0 flow via Supabase.\n- **Immutable Audit Logs**: Comprehensive ledger tracking user activities (logins, application actions, approvals). Logs cannot be edited or deleted by any level of administration.\n- **Reporting**: Analytical tools to generate system-wide occupancy, financial, and applicant metrics exported directly to custom brand-styled PDF and CSV formats.\n- **Notifications**: Transactional emails powered by Resend via custom SMTP integration.\n\n### Role Capabilities \u0026 Portals\n\n| Role | Route | Primary Responsibilities |\n| :--- | :--- | :--- |\n| **Student** | `/student` | Browse housing listings (online/offline), submit applications, upload required docs (Form 5, Waiver, Contract, Receipt), and review Statement of Accounts (SOA). |\n| **Manager** | `/manage` | Screen initial housing applications, review student documents, manage room occupancy/tenant assignments, and verify payment slips. |\n| **Admin / Landlord** | `/admin` | Perform final application approval, manage dorm/room CRUD databases, define pricing rates, sign-off on verified payments, and export analytics reports. |\n| **System Admin** | `/sys` | User administration, role overrides, system configuration modifications, and audit log analysis. |\n\n---\n\n## Screenshots \u0026 Portal Walkthrough\n\n### Landing \u0026 Login\n- **Landing Page**: Entry point displaying marketing overview and primary CTA.\n- **Login Page**: Secured credentials validation portal.\n\n| Landing Page | Login Page |\n| :---: | :---: |\n| ![Landing Page](public/screenshots/landing.png) | ![Login Page](public/mrh_3d_map_popup.png) |\n\n### Student Portal (`/student`)\nStudent portal features dynamic offline DB synchronization status, housing catalogs, and local form complaints submission.\n\n| Student Dashboard | Housing Browser | Complaints Panel |\n| :---: | :---: | :---: |\n| ![Student Dashboard](public/screenshots/student_dashboard.png) | ![Housing Browser](public/screenshots/student_accommodations.png) | ![Complaints Panel](public/screenshots/student_complaints.png) |\n\n### Manager Portal (`/manage`)\nManagers review active listings, screen initial tenant applications, handle local complaint requests, and track staff/manager actions.\n\n| Manager Dashboard | Accommodations Overview | Application Reviews |\n| :---: | :---: | :---: |\n| ![Manager Dashboard](public/screenshots/manager_dashboard.png) | ![Accommodations](public/screenshots/manager_accommodations.png) | ![Application Reviews](public/screenshots/manager_applications.png) |\n\n| Complaints Logs | Manager Activity Logs |\n| :---: | :---: |\n| ![Complaints Logs](public/screenshots/manager_complaints.png) | ![Activity Logs](public/screenshots/manager_logs.png) |\n\n### Admin / Landlord Portal (`/admin`)\nHousing Administrators handle final tenant sign-off, room assignments, payments billing collections, database entries, and generate analytical reports.\n\n| Admin Dashboard | Accommodations CRUD | Billings Management |\n| :---: | :---: | :---: |\n| ![Admin Dashboard](public/screenshots/admin_dashboard.png) | ![Accommodations CRUD](public/screenshots/admin_accommodations.png) | ![Billings](public/screenshots/admin_billing.png) |\n\n| Admin Audit Logs | PDF/CSV Analytics Reports | Room Layouts | Users Directory |\n| :---: | :---: | :---: | :---: |\n| ![Audit Logs](public/screenshots/admin_logs.png) | ![Reports](public/screenshots/admin_reports.png) | ![Rooms](public/screenshots/admin_rooms.png) | ![Users](public/screenshots/admin_users.png) |\n\n### System Admin Portal (`/sys`)\nSysadmins manage user roles, overwrite system-wide variables, create property records, and evaluate immutable audit logs.\n\n| SysAdmin Dashboard | System Config | Properties \u0026 Dorms |\n| :---: | :---: | :---: |\n| ![SysAdmin Dashboard](public/screenshots/sysadmin_dashboard.png) | ![System Config](public/screenshots/sysadmin_config.png) | ![Dorms Management](public/screenshots/sysadmin_dorms.png) |\n\n| Immutable Audit Logs | User Management |\n| :---: | :---: |\n| ![System Audit Logs](public/screenshots/sysadmin_logs.png) | ![User Directory](public/screenshots/sysadmin_users.png) |\n\n---\n\n## Technical Stack\n\n| Category | Technology |\n| :--- | :--- |\n| **Framework** | Next.js 16 (App Router, React 19) |\n| **Language** | TypeScript |\n| **Database** | Supabase (PostgreSQL) + Client-side PGlite (IndexedDB) |\n| **PWA** | Serwist (Service Worker) |\n| **Styling** | Tailwind CSS v4 |\n| **Code Quality** | Biome (Linter \u0026 Formatter) |\n| **Deployment** | Vercel |\n\n---\n\n## Getting Started\n\n### Project Structure\n\n```text\nsrc/app\n├── (auth)/             # Auth-related routes (login, register)\n├── (main)/             # Main application modules\n│   ├── admin/          # Admin \u0026 Landlord dashboards\n│   ├── manage/         # Manager (Dorm screening) tools\n│   ├── student/        # Student portal \u0026 housing browser\n│   └── sys/            # System Admin (Audit logs, roles)\n├── api/                # Backend API route handlers\n├── components/         # Shared UI components\n├── lib/                # Core business logic\n│   ├── data/           # Database fetchers \u0026 queries\n│   ├── models/         # TypeScript types \u0026 schemas\n│   └── services/       # Logic for applications, billing, etc.\n├── globals.css         # Global Tailwind styles\n├── layout.tsx          # Root application layout\n└── page.tsx            # Landing page entry\npublic/             # Static assets (images, fonts, logos, map style)\nscripts/            # Database seed and mock data scripts\ndocs/               # Technical documentation \u0026 OpenAPI specifications\nsrs.md              # Software Requirements Specification\nbiome.json          # Linter \u0026 formatter configuration\n```\n\n### Installation\n\nClone the repository and install dependencies:\n```bash\ngit clone https://github.com/smmariquit/comsci-128\ncd comsci-128\nnpm install\n```\n\n### Environment Setup\n\nCreate a `.env.local` file in the root directory:\n```env\nNEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key\n```\n\n### Database Seeding\n\n1. Run the sql script in the Supabase SQL editor:\n   ```text\n   scripts/mock-seed.sql\n   ```\n2. Build the matching mock authentication credentials:\n   ```bash\n   npx tsx scripts/seed-auth-users.ts\n   ```\n\n### Running Locally\n\nStart the Next.js development server:\n```bash\nnpm run dev\n```\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n---\n\n## Acknowledgements\n\nThis project was developed in partial fulfillment of the requirements for CMSC 128 (Introduction to Software Engineering) at the [University of the Philippines Los Baños][uplb], Second Semester AY 2025–2026.\n\n[next-badge]: https://img.shields.io/badge/Next.js-black?logo=next.js\n[supabase-badge]: https://img.shields.io/badge/Supabase-3FCF8E?logo=supabase\u0026logoColor=white\n[tailwind-badge]: https://img.shields.io/badge/Tailwind-06B6D4?logo=tailwindcss\u0026logoColor=white\n[ts-badge]: https://img.shields.io/badge/TypeScript-3178C6?logo=typescript\u0026logoColor=white\n[biome-badge]: https://img.shields.io/badge/Biome-60A5FA?logo=biome\u0026logoColor=white\n[lucide-badge]: https://img.shields.io/badge/Lucide-F43F5E?logo=lucide\u0026logoColor=white\n[swagger-badge]: https://img.shields.io/badge/Swagger-85EA2D?logo=swagger\u0026logoColor=black\n[uplb]: https://uplb.edu.ph/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmmariquit%2Fcomsci-128","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmmariquit%2Fcomsci-128","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmmariquit%2Fcomsci-128/lists"}