Integrated Solution CMS

# Integrated Solution — Corporate CMS + Employee Tracking Platform **A complete business website, admin CMS and mobile-app backend in one system.** | | | |---|---| | **Project type** | Full-stack web application (CMS + REST API) | | **Client industry** | Textile · Garments · Corporate Gifting · Agricultural Export | | **My role** | Full-stack development, database design, security hardening, QA | | **Stack** | PHP 8.4, MySQL / MariaDB, Vanilla JS (ES6), Leaflet + OpenStreetMap, HTML5 / CSS3 | | **Live** | https://insobd.com | | **Deliverables** | Public website · Admin panel · REST API for the Android app · Excel reporting | --- ## 1. Overview **Integrated Solution** is a Bangladesh-based business-services company offering fabric mending & claim settlement, customized corporate gifts, garments accessories supply and agricultural export. They needed far more than a brochure site: the website had to *be* their operational system — publish services and content, manage staff, track field employees' live location, record daily attendance, and feed a companion Android app. I designed and built the whole stack: a fast, SEO-ready public website, a role-based admin panel with 20+ modules, and a token-authenticated REST API that the mobile app consumes. > **One codebase, three products:** the marketing website, the internal operations > console, and the mobile-app backend. --- ## 2. The problem - Content lived in static files — every text or photo change needed a developer. - Staff attendance and field visits were tracked on paper and WhatsApp screenshots. - No way to know where field employees were during working hours, or whether they had actually visited a client site. - Management wanted a monthly Excel report for HR, produced by hand every month. - The team wanted an Android app but had no backend for it. ## 3. The solution A single PHP/MySQL application that covers all four gaps: 1. **Public website** — every headline, service, client, testimonial, gallery photo and blog post is database-driven and editable from the admin panel. 2. **Admin panel** — 20+ modules with a four-level role system (Admin / Manager / Moderator / Employee) and granular, server-enforced permissions. 3. **Live user tracking + attendance** — employees share their location from the app; the admin sees them on a live map, can request a refresh, and can mark check-in / check-out with a health-score system. 4. **Reporting** — a one-click Excel export that respects filters, dates and exactly the users selected. --- ## 4. Key features ### 4.1 Public website - Fully responsive dark/light theme with an accessible navigation and sticky header. - Database-driven **services** with dedicated “More View” detail pages. - **6-photo gallery per service** with an adaptive mosaic layout (1–6 images), full-screen lightbox with thumbnails, keyboard arrows, Esc and touch-swipe. - HTML rich-text descriptions (headings, lists, links, images, tables) authored safely from the admin panel. - Blog with clean URLs (`/blog/slug`), gallery, clients, testimonials and a contact form. - SEO built in: per-page titles/descriptions, Open Graph + Twitter cards, JSON-LD Organization & BlogPosting, canonical URLs, dynamic `sitemap.xml`, `robots.txt`. - PWA basics (`manifest`-style service worker) for installable, faster repeat visits. - All uploaded images are automatically converted to **WebP** for speed. ### 4.2 Admin panel (role-based CMS) | Module | What it does | |---|---| | Dashboard | Live KPI cards: services, clients, posts, users, attendance today | | Services | CRUD + HTML detail page + up to 6 images with cover flag | | Clients / Testimonials / Gallery | CRUD with drag-free sorting and image upload | | Blog | WYSIWYG-style HTML editor, draft/publish, slug control | | Messages | Contact-form inbox with read/unread state | | About / Appearance / Settings | Site identity, logo, social links, mail, timezone | | Users & Roles | Verify members, promote to employee, activate/deactivate, delete | | Employee IDs | Whitelist of allowed employee IDs for registration | | User Tracking | Live map, attendance filters, check-in/out, penalties, exports | | Account | Own profile and password | ### 4.3 Roles & permissions (server-enforced, defence in depth) - **Admin** — full access, including editing employee records (`admin/user_profile.php`). - **Manager & Moderator** — can open **Users** and use every action on that page (verify, role change with restrictions, activate/deactivate, delete), **but the “Edit Employee Info” entry is hidden and the endpoint itself rejects them** with a redirect — so a direct URL or a crafted POST cannot modify data. - **Employee** — no admin access; personal dashboard only. - **Member** — public user created by registration; can be verified into an employee. - Main admin account (ID 1) is protected from role/status/deletion changes. ### 4.4 Live tracking & attendance - Map view (Leaflet + OpenStreetMap, no API key, no per-request cost) with colour-coded markers per role, search, and role/attendance filters. - **Check-in / check-out** with coordinates, duration calculation, and status (`Fullfil`, `Partial`, `Absent`, `Flagged`). - **Profile health score** with a ring indicator; penalties reset on-time streaks. - Location-refresh requests with reminder intervals, overdue thresholds and auto-cancel. - **Disabled users are excluded everywhere** — list, counters, map, live polling JSON and exports. - Live polling endpoint (`?json=1`) so the dashboard updates without a full reload. ### 4.5 Reporting — Excel export - Choose users with checkboxes, pick **one date or a date range** from a calendar, and download a real `.xlsx` (UTF-8, frozen header row, sized columns). - Exports **only the selected users** — nothing else leaks into the file. - Quick ranges: Today, Yesterday, Last 7 days, This month, Last month. - Graceful **CSV fallback** if the server's PHP zip extension is unavailable. ### 4.6 REST API (for the Android app) `login`, `relogin` (rotating persistent token), `user`, `attendance` (check-in / out / today), `register_push_token` (Firebase Cloud Messaging), `site_settings`, `update_location` — all JSON, POST-only where appropriate, with clear 401/400 responses and token rotation on re-login (the old token is invalidated immediately). --- **Security** - Prepared statements everywhere (no string-concatenated SQL). - Password hashing with `password_hash()` (bcrypt). - Session hardening, secure headers (`X-Frame-Options`, `X-Content-Type-Options`, `Referrer-Policy`, `Permissions-Policy`). - `.htaccess` rules: directory listing off, sensitive extensions blocked, **PHP execution disabled inside `uploads/`**. - Upload validation by extension *and* real MIME type, 4 MB cap, random file names. - CSRF-aware forms, server-side permission checks on every mutating action, and whitelisted POST endpoints. - Output escaping (`htmlspecialchars`) on all user-supplied data. **Performance & UX** - Automatic WebP conversion of every uploaded image. - Lazy-loaded images, preloaded critical CSS, deferred non-blocking web fonts. - Debounced live search, client-side filtering, no page reloads for map interactions. - Fully responsive (320 px → 4K) with a mobile-friendly admin panel. **Quality assurance** - Every PHP file linted (`php -l`) — 100 % pass. - Automated browser + HTTP test pass over all public pages (200), 404 handling (404), all admin modules (200), the permission matrix per role, every API endpoint, XLSX contents verified by unzipping and parsing the generated file. - Fresh-install test from the shipped ZIP, and a separate **upgrade-path test**: original build → overlay the update package → verify schema auto-migration, uploads and reports. --- ## 6. Results - **Content is independent of developers** — the marketing team publishes services, photos and posts without touching code. - **Attendance and field visits are now digital**, with a live map replacing WhatsApp location sharing. - **Monthly HR reporting dropped from manual spreadsheet work to one click**, with per-user and per-range accuracy. - **The Android app ships on the same backend**, so no second system had to be built. - Zero data loss during upgrades thanks to additive-only schema migration. --- ## 8. Short portfolio blurbs **One line** > A corporate CMS, admin panel and mobile-app backend with role-based access, live employee > tracking and one-click Excel attendance reporting. **50 words** > Integrated Solution is a full-stack PHP/MySQL platform combining a corporate website, a > role-based admin CMS and a REST API for an Android app. It handles content publishing, > employee roles and permissions, live location tracking, daily attendance with health > scoring, and calendar-based Excel exports — all secured with prepared statements, > hardened uploads and server-enforced permissions. **120 words** > I built the complete digital platform for Integrated Solution, a Bangladeshi textile and > corporate-services company. The public website is fully editable from a custom admin > panel: services with HTML descriptions and six-image galleries, clients, testimonials, > blog, gallery and contact messages. Behind it sits a four-role permission system where > Admins, Managers and Moderators share the user-management screen while only Admins can > edit employee records — enforced on the server, not just hidden in the UI. Field > employees check in from a companion Android app; managers watch them live on an > OpenStreetMap view, track attendance status and profile health, and export exactly the > users and date range they need to Excel. Everything is prepared-statement secure, WebP > optimised and covered by an automated test pass. --- ## 9. Notes for using this in a portfolio - Use the PNGs (1920×1290, crisp on retina) or the JPGs (~150–310 KB, faster page loads). - Each image already carries a branded frame, a numbered badge and a one-line caption, so they work as a carousel or as a stacked case-study gallery. - Demo data and names shown in the admin screenshots are sample records, not client data. - Do not publish the admin credentials shown during development.