Frontend Invoice Management Portal

Last Updated: 2026-05-27 | Applies to: IK v1.2+ | Role: Administrator, Accountant, Campus Admin

Overview

The Frontend Invoices Manager provides a complete invoice management interface on the frontend of your website. Staff can view, filter, search invoices, record payments, and download PDFs without accessing wp-admin.

Setting Up the Invoices Page

Step 1: Create a WordPress Page

Page Title: Manage InvoicesSlug: manage-invoicesContent: [ik_frontend_invoices]Template: Full-widthVisibility: Private or Password Protected

Step 2: Restrict Access

This page contains financial data. Options:

• Password Protected: Share password with finance staff
• Membership Plugin: Restrict to accountant/campus admin roles
• Private: Only logged-in users with capabilities

Invoice List View

When staff visits the page, they see:

┌──────────────────────────────────────────────────────────┐│  Invoices                            [🖨️ Print List]    ││  View and manage all student invoices.                   │├──────────────────────────────────────────────────────────┤│  FILTERS:                                               ││  [All] [Unpaid] [Partial]                               ││  Class: [All Classes ▾]  Section: [All Sections ▾]      ││  Search: [___________] [Filter]                         │├──────────────────────────────────────────────────────────┤│  All Invoices                                           ││  ID │ Title │ Student │ Roll# │ Contact │ Total │ Paid │ Balance │ Status │├─────┼───────┼─────────┼───────┼─────────┼───────┼──────┼─────────┼────────┤│ 1045│Jun Fee│John Doe │ 1001  │0300...  │ 1,200 │ 600  │ 600     │ PARTIAL││ 1044│Jun Fee│Jane S.  │ 1002  │0300...  │ 1,200 │1,200 │ 0       │ PAID   ││ 1043│May Fee│Bob W.   │ 1003  │0300...  │ 1,100 │ 0    │ 1,100   │ UNPAID │└─────┴───────┴─────────┴───────┴─────────┴───────┴──────┴─────────┴────────┘

Filter Options

Status Quick Filters:

[All]  [Unpaid]  [Partial]

Color-coded buttons:

• All: Default view
• Unpaid: Red background when active
• Partial: Orange background when active

Dropdown Filters:

• Class: Filter by class (all classes in campus)
• Section: Filter by section (if taxonomy exists)

Search:Searches by:

• Student name (ik_student post title)
• Roll number (_ik_roll_number meta)

Single Invoice View

Click "View" on any invoice:

┌──────────────────────────────────────────────────────────┐│  [← Back]  [🖨️ Print Invoice]  [📄 Download PDF]        │├──────────────────────────────────────────────────────────┤│  ┌────────────────────────────────────────────────────┐  ││  │              FEE INVOICE #1045                     │  ││  │                                                    │  ││  │  Student: John Doe           Invoice: #1045       │  ││  │  Class: Grade 10             Title: June 2026 Fee │  ││  │  Roll #: 1001                Issued: Jun 1, 2026  │  ││  │  Guardian: Mr. Robert        Status: PARTIAL      │  ││  │                                                    │  ││  │  ITEM                    AMOUNT                    │  ││  │  June Tuition Fee        500                       │  ││  │  June Transport Fee      100                       │  ││  │  Outstanding May Fee     600                       │  ││  │  ─────────────────────────────────────             │  ││  │  TOTAL:                1,200                       │  ││  │  PAID:                   600                       │  ││  │  BALANCE:                600                       │  ││  │                                                    │  ││  │  PAYMENT HISTORY                                   │  ││  │  Date       │ Amount │ Method │ Notes │ Received By│  ││  │  Jun 5 9:30 │ 600    │ Cash   │ —     │ Ms. Khan   │  ││  └────────────────────────────────────────────────────┘  ││                                                          ││  ┌────────────────────────────────────────────────────┐  ││  │  RECORD PAYMENT                                    │  ││  │  Amount: [______]  Date: [______]                  │  ││  │  Method: [Cash ▾]  Notes: [______]                 │  ││  │  [Record Payment]                                  │  ││  └────────────────────────────────────────────────────┘  │└──────────────────────────────────────────────────────────┘

Payment Recording (AJAX)

Recording a payment uses AJAX for a smooth experience:

Form Submission:

1. User fills payment form2. AJAX validates amount ≤ balance due3. Updates invoice amount_paid and status4. Creates transaction record5. Updates UI without page refresh:   ├── New total paid displayed   ├── New balance calculated   ├── Payment history row added   └── If fully paid: Form hidden, "Fully Paid" shown

Validation Rules:

• Amount must be > 0
• Amount cannot exceed balance due
• All fields required
• Campus permission check

Print Functionality

Print Invoice Button:Uses @media print CSS for clean printouts:

css

@media print {    /* Hidden elements when printing */    header, footer, nav, .ik-main-header,     .ik-invoice-sidebar, #wpadminbar {        display: none !important;    }        /* Clean invoice layout */    body { font-size: 12pt; color: black; }    table { border-collapse: collapse; }        /* Watermark for status */    .ik-watermark-paid { /* Diagonal "PAID" */ }    .ik-watermark-unpaid { /* Diagonal "DUE" */ }}

Print Features:

• Professional A4 layout
• Watermark showing PAID/DUE status
• All financial details visible
• No website navigation/header/footer

PDF Download

Uses the same PDF generator as the backend:

• Calls IK_Invoices_Page::generate_invoice_pdf_raw()
• Same professional layout
• Campus permission verified before download

PDF Access: ?view=single&invoice_id=1045&ik_pdf=1

Campus Restriction

Non-admin users:

• Only see invoices for students in their campus
• Cannot view invoices from other campuses
• Campus determined from institutionkit_staff.primary_campus_id

Admin users:

• See all invoices across all campuses

Access Control