# JSOW unified admin portal migration

## Objective
Migrate every live legacy admin content page onto the existing no-sidebar management portal. Create one reusable, permission-aware admin shell and retain all working database/form logic. The result must feel like one coherent application, not old pages restyled individually.

## Audience
Superadmins, admins, head pastor, pastors, finance staff, and department/ministry heads using desktop and mobile. Navigation and visible actions must respect their actual permissions.

## Output and scope
Real PHP application at `C:\xampp\htdocs\jsowbkm`.

Build reusable admin includes/assets and migrate these legacy pages:
- `admin/welcome.php`
- `admin/member_view.php`
- `admin/member_add.php`
- `admin/profile.php`
- `admin/children_view.php`
- `admin/children_add.php`
- `admin/visitor_view.php`
- `admin/visitors.php`
- `admin/manage_ministry.php`
- `admin/add_ministry.php`
- `admin/service_days.php`

Also update the already-new pages for visual consistency where needed:
- `admin/portal.php`
- `admin/permissions.php`
- `admin/location_settings.php`
- `admin/change_password.php`

Create shared files such as `admin/includes/admin_shell.php` and, if useful, an admin-specific CSS/JS asset. Prefer one include with well-named render helpers over repetitive markup. Do not modify vendor libraries or template HTML examples.

## Functional and security requirements
- Use `app/bootstrap.php`, `appRequireStaff()`, and `appRequirePermission()`/`appStaffCan()` on every migrated view. Do not use raw `session_start()` + `admin_username` as the only guard.
- Permission mapping: members list/profile `members.view`; member creation `members.create`; children list `children.view`; children create `children.manage`; visitor list `visitors.view`; visitor create `visitors.manage`; ministries list `departments.view`; ministry create `departments.manage_all`; services page `services.view`, with mutation controls shown only for `services.manage`; dashboard `dashboard.view`.
- Preserve every valid query, field, multipart upload, processor route, and record link. Hide creation/edit/delete actions when permission is absent.
- Do not silently merge `tblministry` with `tbldepartments`; keep legacy ministry data behavior intact while using RBAC permissions for access.
- Replace legacy sidebar/header/preloader/vendor layout dependencies. No sidebar.
- Replace DataTables dependency with usable native tables: page search/filter via JavaScript, responsive mobile cards/rows, empty states, and accessible labels.
- Do not invent links to missing child/visitor PDF files. Remove or disable dead actions clearly.
- Do not introduce new destructive behavior. Existing GET-delete links may remain only if changing backend safely is out of scope, but must use a confirmation dialog and permission gating. Prefer CSRF-safe existing routes where available.
- Escape output with `appEscape()` and sanitize image filenames/URLs; use church-logo fallback.
- Session success/error messages must appear as toast notifications, not inline Bootstrap alerts.
- Correct visible mojibake/encoding corruption in migrated pages.
- Preserve existing one-main-portal permission logic and module filtering.

## Aesthetic direction
Apple-inspired ecclesiastical operations desk: the same church photograph used by the check-in page fills the fixed background. Apply a substantially stronger deep forest/black overlay than the public check-in page so admin data remains calm and highly legible. Use layered translucent surfaces with restrained frosted glass—especially the large app icons, top bar, action chips, mobile navigation, and summary cards. Avoid generic Bootstrap, excessive pills, neon cyber styling, dull beige/orange, and a sidebar.

## Color direction
- Primary: deep forest ink and near-black green.
- Secondary/accent: fresh lemon green (`#CBEF43` family), replacing every dull orange/gold/brass accent in the admin portal.
- Surfaces: translucent white/ivory glass with dark text in light mode; deep translucent forest glass in dark mode.
- Semantic success/warning/error colors remain distinct; do not use lemon green for errors or warnings.
- Ensure WCAG-readable text on lemon green (dark ink text).

## Typography
Apple/system sans stack. Crisp editorial hierarchy: compact eyebrow, confident page title, quiet metadata, dense but readable operational tables. No external font dependency.

## Content structure
- Shared sticky glass top bar: logo/home, page title/context, role badge, profile/change password, logout.
- Page intro: back/home affordance, eyebrow, title, short operational description, relevant primary action.
- Page content: summary metrics where useful, toolbar/search/filter, glass data panel or form panel.
- Permission-filtered mobile bottom navigation: Home, Members, Attendance/Services, Visitors, More/Profile. Active destination must be clear.
- Portal home app grid remains the main navigation. App icons should be prominent glass objects with subtle internal highlight/refraction and lemon-green active details.

## Memorable detail
The app grid should resemble a set of luminous glass ministry instruments floating above the darkened church photograph: tactile, calm, and recognizably tied to the real church background.

## Responsive and accessibility
- Design for 1440px, 768px, and 375px without horizontal page overflow.
- Tables become readable stacked records or controlled horizontal regions on phones; key identity/action information cannot disappear.
- Bottom nav respects safe areas and does not cover content.
- Touch targets at least 44px; strong focus indicators; semantic headings/labels; accessible dialog behavior; `prefers-reduced-motion`.
- No hover-only controls.

## Image needs
Reuse `/jsowbkm/assets/imgs/ECWA-Gospel-1-Church-in-Jos-where-bombs-were-planted.-Morning-Star-News.jpg` as the fixed admin background and `admin/assets/images/jsow.png` as logo/fallback. Do not fetch or generate imagery.

## Existing design references
- Existing new portal: `admin/portal.php`
- Existing portal styling: `assets/portal/css/portal.css`
- Shared behavior: `assets/portal/js/portal.js`
- Permission helpers: `app/auth.php`, `app/permissions.php`
- Research inventory supplied in the task context.

## Verification
- PHP syntax-check every changed PHP file using `C:\xampp\php\php.exe -n -l`.
- Verify migrated pages no longer reference `includes/sidebar.php`, legacy `css/style.css`, or the legacy preloader.
- Verify representative routes return expected authorization/login behavior rather than fatal errors.
- Inspect desktop/tablet/mobile layouts if browser tooling is available.
