UI Redesign Brief — ESPI Visa Entry CRM (website)Legacy format

ESPI Eduvoyage helps students get admitted to universities abroad and earns a commission from universities /

associates on the tuition fee each student pays. Part of that commission goes to the agent who brought the student.

The CRM tracks every student application (entry) through five stages and the money at each step:

Pending → Memo → Proforma → Final Invoice → Success, then the agent's share: Agent Pending → Agent Memo → Paid.

People who use it:

| Persona | Side | Device | Wants |

|---|---|---|---|

| Admin / Super Admin (Head Office) | Staff | Laptop, sometimes phone | Whole picture, fix anything, approve money steps, manage users |

| HO Accountant | Staff | Laptop | Invoices, payments, reports, exports |

| Back Office | Staff | Laptop | Enter students, fees and commission, generate memos |

| Branch User (e.g. Anand branch) | Staff | Laptop / phone | Their own branch's students and status only |

| Agent | Agent | Phone first, also laptop | "How are my students doing, what am I owed, have I been paid?" |

The current UI works but is dense: very wide tables, many tabs, inconsistent buttons, little guidance, and it is hard

to use on a phone. The redesign should make the next action obvious, the **status of every student visible at a

glance, and money figures easy to trust**.

---

1. Clarity of status. Every entry shows its stage as the same coloured badge everywhere; a progress line shows

where it is in the 5 stages.

2. One primary action per screen. E.g. Pending Memo → "Generate Memo"; Proforma → "Approve". Secondary actions in

a row menu (⋯).

3. Responsive by design, not by shrinking. Tables become cards on phones (§5).

4. Trustworthy money. Amounts right-aligned, currency always shown (GBP 5,000.00), INR conversions labelled,

totals in a sticky footer / summary bar.

5. Forgiving forms. Inline validation, clear required markers, dependent dropdowns explained, confirmation before

anything irreversible, with a summary of what will happen.

6. Fast for daily users. Keyboard-friendly, search everywhere (Ctrl + /), filters remembered per page, no full-page

reloads for grid actions.

7. Accessible. WCAG 2.1 AA contrast, focus states, labels on every input, not colour-only status (badge has text).

---

| Token | Current value | Use |

|---|---|---|

| Primary (ESPI red) | #ef4444 / dark #dc2626 | Primary buttons, active nav, key highlights (logo is red) |

| Ink | #0f172a | Headings and main text |

| Ink soft | #334155 | Secondary text |

| Muted | #64748b | Labels, help text |

| Border | #e2e8f0 | Card and table lines |

| Surface | #ffffff on page #f1f5f9 | Cards on a light grey page |

| Document teal | #0f766e | Used on the printed documents and the agent portal accent; fine as a secondary accent |

| Dark mode | exists today (--vc-* tokens redefined) | Keep a dark theme |

• Logo: ESPI_MVC/assets/images/CCC_Logo.png (red ESPI logo, "ESPI Eduvoyage Limited — Flying towards dreams").

Browser icon: Content/img/espi-favicon-*.png.

• Icons: Remix Icon is loaded (ri-* classes). Keep one icon family.

• Typography: a clean sans-serif (current: system / Segoe UI). Numbers in tabular figures.

• Feel: modern, calm, professional (an education-finance tool, not a marketing site). Rounded cards (12–16 px), soft

shadows, generous spacing.

Stage colours (use everywhere, always with the text label):

| Stage | Suggested colour |

|---|---|

| Pending | Slate / blue-grey |

| Memo | Purple |

| Proforma | Sky blue |

| Final Invoice | Amber |

| Success | Green |

| Inactive | Red, muted |

| No Commission | Grey |

| Over Due (flag) | Red outline |

| Partial Payment (flag) | Amber outline |

---

• Server: ASP.NET MVC 5, Razor views (`.cshtml`), .NET Framework 4.8. Deliver Razor views / partials + CSS + JS that

drop into ESPI_MVC/Views/... — or a component library / static prototype that a developer can port into Razor.

• Already loaded site-wide: Bootstrap 5.1.3, jQuery 3.6, DataTables 1.11, SweetAlert2, Toastify,

SumoSelect (multi-selects), Remix Icon. You may replace DataTables / SumoSelect, but grids must keep server-side

paging where it exists today (Student List, Student Master, Pending Memo, Agent Pending, No Commission).

• Shared layout: Views/Shared/_Layout.cshtml (header, top menu, footer). Agent portal has its own page with no staff

menus (Views/AgentPortal/Index.cshtml).

• JSON from MVC: dates arrive as "/Date(1730000000000)/" in many responses (convert in the UI); some endpoints return

already formatted strings (LastUpdatedOn: "22-10-2026 11:56 PM").

• Grid extras already in place: FY and Last Updated columns are injected by Scripts/vc-grid-meta.js, and the

server sorts by Last Updated, newest first. Keep both columns and that default sort.

• Permissions: the server returns pages and buttons only for allowed actions (Add / Edit / View / Delete /

Approve / Download / Print per module). In Razor, check PermissionHelper.HasPermission(module, action) before

showing a button; never show an action the role cannot do.

• Prints (memo, proforma, invoice on the letterhead) are generated by the server as HTML. Out of scope — do not

restyle them; just keep the "Print" entry points.

• Header branch filter (§6.2) must appear on every staff page.

• Do not change URLs, form field names, or the antiforgery token on the login form.

---

| Breakpoint | Width | Layout |

|---|---|---|

| Phone | < 576 px | Single column. Top bar with logo, search icon, branch chip, menu (☰) drawer. Tables become cards (student name + stage badge + 2–3 key figures + ⋯). Sticky bottom action bar for the primary action when items are selected. Filters in a bottom sheet. |

| Tablet | 576–991 px | Two columns for forms and dashboard; tables show 5–6 key columns, the rest in an expandable row. |

| Laptop | 992–1399 px | Full top navigation; tables with all key columns; filters in a collapsible bar. |

| Large | ≥ 1400 px | Max content width ~1440 px centred; side panel details (e.g. student details opens in a right drawer instead of a page change). |

• No horizontal page scroll at any width. Wide grids scroll inside their own card with the first column (student)

sticky.

• Touch targets ≥ 44 px on phones. Dropdown / row menus must never be clipped by a scroll container.

• Test every screen at 360, 390, 768, 1024, 1366 and 1920 px wide.

---

For each screen: purpose, what it shows, actions, rules, endpoints. Keep all of them.

### 7.1 Login — /Login/Index

• Purpose: sign in staff and agents. Username, password, show/hide password, "Forgot password?".

• Rules: agents are redirected to their portal; an agent login without a linked agent sees "This agent login is not

linked to an agent yet…".

• Endpoint: POST /Login/Index (form fields Username, Password, antiforgery token). Keep the field ids.

### 7.2 Dashboard — /Home/Index

• Purpose: the health of the whole pipeline at a glance and today's follow-ups.

• Shows: stat cards (Collection Entries, Offer Letter Pending, Over Due, Memo gen/cancelled, Proforma gen/cancelled,

Final gen/success, success rate, universities, countries, average processing days), charts (entries per month for the

financial year, students by country (map + list), by intake), students-status donut (Pending / In process /

Success / Inactive), alert cards (Memo, Proforma, Final Invoice follow-ups → "View all").

• Endpoints: GET /Home/GetDashboardCounts, GET /Home/GetDashboardData, GET /Home/GetDashboardAlertList?type=,

GET /Home/ChartCountry?Year=, /Home/ChartInTakeVise?Year=, /Home/GetEntryDateWiseChart?Year=.

### 7.3 New Student (quick add) — header button, modal / drawer

• Purpose: register a student and their first application from anywhere.

• Fields: student name, reference, DOB, mobile, passport, country → university → course (cascade), course description,

intake month / year, branch → agent (cascade), associate, Financial Year (editable only for Admin / Super Admin).

• Endpoints: POST /Student/SubmitQuickStudentEntry; lookups /Manage/GetAllUniversityByCountry,

/Manage/GetCourseDetailsByUniversityId, /Manage/GetQuickCourseDetailsByUniversityId,

/Manage/GetAgentDetailsByBranchId, /Manage/GetAssociateDetailsByCountryId, /Manage/GetUniversityDetailsByAssociateId.

### 7.4 Student Master — /Student/Index

• Purpose: one row per student; confirm the final offer letter; documents; student-level history.

• Tabs: Active Offer Letter · Offer Letter Pending · Inactive (with counts).

• Row: student, code, agent, country, branch, university, associate, offer-letter badge, FY, Last Updated, ⋯.

• Actions: Edit Student (drawer), Initial Entry (commission), Documents (upload / view), View History, Inactivate /

Activate, export.

• Rules: "Final Letter Received" can only be ticked after an offer-letter document is uploaded (+ Email Received Date).

• Endpoints: GET /Student/GetAllStudentFromMaster (server paging, IsFinalLetterReceived, isActive),

POST /Student/LoadStudentFromMasterDetails, POST /Student/AddEditStudentFromMaster,

GET /Student/GetStudentFieldHistory, POST /Student/ActiveInActiveStudent, GET /Student/ViewDocument,

/Student/ExportToExcelStudentMasterReport.

### 7.5 Student List (entries) — /Student/StudentList

• Purpose: the daily working list of all applications.

• Tabs: All · Pending · No Commission · Success · Inactive (counts on tabs).

• Filters (multi-select): country, branch, university, associate, agent, intake year, intake month, entry no., status.

• Row: student + code, university / course, intake, fees (total / paid), commission, stage badge (+ memo / proforma /

invoice number as a link to that stage), FY, Last Updated, ⋯ (Edit entry, Student Master, History, Comments,

Add New Entry, Delete).

• Edit entry drawer: fees, scholarship, paid, commission type (% / fixed) and value, credit days → due date,

No Commission + reason, intake, course start date, Financial Year + "Update FY" (Admin only, any stage).

Commission fields are locked (read-only with an explanation "Change it from Edit Memo") once the entry is on a

memo / proforma / final invoice; a Success entry is view-only except FY.

• Student History (drawer or page): header with status, fees and commission totals, progress line; tabs

Lifecycle (one card per stage: date, reference, paid, commission of that stage, user) and Value changes

(field, old → new, date, user).

• Endpoints: GET /Student/LoadStudents (server paging; FilterType 1–5 + filters), POST /Student/LoadStudentDetails,

POST /Student/AddUpdateStudent, POST /Student/UpdateEntryFinancialYear, GET /Student/GetStudentCompleteJourney,

/Student/ExportToExcelStudentList.

### 7.6 Pending Memo — /Student/PendingMemo

• Purpose: choose the entries to claim from one associate and generate a Collection Memo.

• Shows entries with a commission not yet on a memo; Due status filter (Over Due default / not due / both).

• Flow: tick students → associate auto-selected from the first one (one memo = one associate) → "Review & Generate"

(preview with totals) → "Generate memo".

• Phone: selecting rows shows a sticky bar "3 selected · GBP 2,250 · Generate".

• Endpoints: GET /Student/GetPendingMemoData, GET /ManageEntry/BindAssociateForMemo,

POST /ManageEntry/GenerateStudentMemo.

### 7.7 Collection Memo — /ManageEntry/Index

• Purpose: memos sent to associates; move them to proforma.

• Tabs: Students on memos · Generated memos · Cancelled. Expand a memo to see its students.

• Actions: Print memo (format choice), Edit memo (incl. commission, add / move / remove students), Discussion, Email,

Apply for Proforma (primary), Cancel memo (reason required).

• Endpoints: GET /ManageEntry/GetGeneratedMemoList, GET /ManageEntry/GetGeneratedDetailMemoList,

POST /ManageEntry/EditDeleteStudentFromGeneratedMemo, GET /ManageEntry/GetPendingStudentsForMemo,

POST /ManageEntry/AddStudentToMemo, GET /ManageEntry/GetOpenMemosForAssociate, POST /ManageEntry/MoveStudentToMemo,

POST /ManageEntry/ApproveCancelledStudentMemoEntry (apply / cancel), GET /ManageEntry/PrintStudentEntryMemo,

/ManageEntry/SendMemoViaEmail.

### 7.8 Proforma Invoice — /ManageEntry/PerfomaInvoice

• Purpose: check the invoice before it becomes final.

• Tabs: Students · Generated proformas · Cancelled.

• Actions: Print (format, with / without GST), Edit proforma (commission, currency rate), Approve (invoice number +

date → Final Invoice), Cancel (reason).

• Endpoints: GET /ManageEntry/GetGeneratedPerfomaList, GET /ManageEntry/GetStudentPerfomaDetailList,

POST /ManageEntry/EditDeleteStudentFromGeneratedPErfoma, POST /ManageEntry/UpdateCurrencyRate,

POST /ManageEntry/ApproveCancelledStudentPerfomaEntry, GET /ManageEntry/PrintStudentEntryPerfoma.

### 7.9 Final Invoice — /ManageEntry/FinalInvoice

• Purpose: record the associate's payment.

• Tabs: Students · Pending final invoices · Cancelled.

• Actions: Record payment (amount + date; below the total → partial payment with a required pending reason;

equal to total → closes the invoice), commission allocation over the students (GBP | INR), print.

• Show partial payments clearly (badge + paid so far / remaining + reason).

• Endpoints: GET /ManageEntry/LoadFinalInvoiceStudentCollecations, POST /ManageEntry/ApproveCancelledStudentFinalInvoiceEntry,

POST /ManageEntry/SaveInvoicePartialPayment, GET /ManageEntry/CommissionAllocation?invoiceId=,

POST /ManageEntry/SaveCommissionAllocation, GET /ManageEntry/GetFinalInvoiceSummary.

### 7.10 Final Success — /ManageEntry/FinalSuccessInvoice

• Purpose: every fully paid invoice (ESPI's commission received).

• Tabs: Students · Successful invoices. Row shows the chain Memo → Proforma → Final invoice, consultant, amounts,

dates, received.

• Actions: Print final invoice (format, GST), Discussion, Revert to Proforma (Admin / Super Admin only; hidden when

any student is on an agent memo; confirmation lists every student and totals), export.

• Endpoints: GET /ManageEntry/LoadFinalInvoiceStudentCollecations (success mode), GET /ManageEntry/GetCompletedInvoiceList,

GET /ManageEntry/PrintStudentEntrySuccessInvoice, POST /ManageEntry/RevertFinalSuccessToPerforma,

/ManageEntry/ExportFinalSuccessListExcel.

### 7.11 No Commission — /ManageEntry/NoCommissionList

• Purpose: entries that earn ESPI nothing, kept out of the pipeline.

• Actions: view, revert to the normal flow (note: revert is currently broken on the server, QA-036 — design it, but

flag it).

• Endpoints: GET /ManageEntry/LoadNoCommissionStudent, POST /ManageEntry/RevertFromNoCommission, export.

### 7.12 Agent Pending Memo — /Agent/Index

• Purpose: students whose ESPI invoice is paid and whose agent is not paid yet.

• Filters: agent (only agents with students waiting), search.

• Flow: tick students of one agent → Generate: choose Regular (agent % of ESPI's commission) or Split

(part of the fee %; type amount for fixed-commission students), invoice branch, GST (None / Including / Excluding;

GST type from the agent's GST number) → live totals → "Confirm & generate" (opens PDF).

• Rules: agent amount never above ESPI's amount — show the limit and disable the button with a reason when exceeded.

Refunds (negative) go to the wallet ("Move to wallet").

• Endpoints: GET /Agent/GetAgentPendingMemoList, GET /Agent/GetInvoiceBranches, POST /Agent/ConfirmGenerate,

POST /Agent/MoveRefundToWallet, GET /Agent/GetWalletBalance.

### 7.13 Agent Generated / Paid memos, Wallet — /Agent/GeneratedMemo, /Agent/PaidMemo, /Agent/WalletLedger

• Purpose: track agent payments.

• Generated: memo no., agent, date, amount, Regular / Split, Paid / Unpaid; actions view PDF, Mark paid (amount,

date, mode, reference). Paid: read-only. Wallet: refunds ledger per agent.

• Endpoints: GET /Agent/GetAgentGeneratedMemoList, GET /Agent/ViewGeneratedMemo, POST /Agent/MarkAgentMemoPaid,

GET /Agent/GetAgentPaidMemoList, GET /Agent/GetWalletLedgerData.

### 7.14 Reports — /Common/...

• Purpose: read-only, exportable views for management and accounts.

• One consistent report layout: filter panel (country, branch, associate, university, intake, date range, FY,

active / test students as applicable) → summary tiles (counts, totals) → table → Excel export. Grouped reports show

group headers with subtotals.

• Reports and endpoints: Over Due LoadStudentOverDueDetails (+ LoadStudentOverDueSummaryReport), Without Over Due

LoadStudentWOOverDueDetails, Memo LoadStudentMemoDetails (+ StudentMemoProfomaSummaryReport), Proforma

LoadStudentProfomaDetails, Final Invoice LoadStudentFinalInvoiceDetails, Final Success

LoadStudentFinalSuccessDetails (+ LoadStudentFinalSummaryReport), Student Stage LoadStudentStageReport,

University / Agent / Country GetUniversitySummaryReportData, GetCountryAssociateReportData,

GetCountryAgentReportData, GetAgentReportData, GetCountryReportData, Pending Entry

LoadStudentPendngEntryReport (row actions: Add new entry / Raise adjustment / Transfer to scholarship via

ActionOnPendingEntrySelection, /ManageEntry/CreateAdjustment). Each has an ExportToExcel… twin.

### 7.15 Masters — /Manage/..., /Master/..., /Branch/...

• Purpose: reference data behind every dropdown.

• One consistent pattern for all: list (search, active / inactive toggle, Last Updated) + add / edit drawer + activate.

Agent: branch, commission %, GST number, contact. Associate: commission per university / course. Branch: invoicing

flag, bank account, counselors.

• Endpoints: /Manage/GetAllAgentList, /Manage/GetAllAssociateList, /Manage/GetAllUniversityList,

/Manage/GetAllCourseList, /Master/GetAllBranches, /Master/GetAllCountryList,

/Branch/GetAllCancellationReasonList, /Branch/GetAllFileUploadTypeList (+ their Load… / AddEdit… actions).

### 7.16 Users, roles, permissions, agent logins

• Users (/Employee/Index): list, add / edit user, reset password, Assign role (role + branch + countries,

existing assignments listed and editable). Endpoints: /Employee/GetEmployeeList, /Employee/AddEditEmployeeDetails,

/Employee/ReAssignPassword, /Employee/BindUserRole, /Employee/AddEditUserRole.

• Roles & permissions (/RolesAndPermission/Index): role picker + matrix of modules × Add / Edit / View / Delete /

Approve / Download / Print. Make the matrix readable on a laptop and usable on a tablet (sticky module column).

• Agent logins (/AgentLogins, Admin only): create login (agent, username, name, email, password), list with agent

link, change agent, remove link, reset password. Endpoints: GET /AgentLogins/List, POST /AgentLogins/Create,

/Save, /Remove, /ResetPassword.

### 7.17 Settings — /Settings/Index

• Profile, change password (POST /Settings/ChangePassword), Super Admin: Branch Wise Records on / off

(POST /Settings/SetBranchWiseRecords). Link to the User Guide.

### 7.18 Bulk upload — /Student/StudentBulkUpload, /Common/BulkUniversityUpload

• Purpose: load many records from Excel. Steps: download template → upload → review staging rows (errors per row,

fix / delete) → confirm → result. Make it a clear 4-step wizard.

---

Design phone-first. Agents are external partners; this is ESPI's face to them. Simple, reassuring, no jargon.

• Header: ESPI logo, agent name, Sign out. No staff menus, ever.

• Summary cards: Students (and entries), In progress, Success, Commission due (₹), Memos (paid / unpaid amount),

Wallet.

• Tabs:

• My Students — filter All / In progress / Success / Inactive, search. Card per entry: student name + code,

university, course, intake, stage badge + progress line, fees total / paid, added date.

• Commission Due — per student: paid fees, the agent's %, the agent's amount (currency + ₹), total at the top.

• Memos — memo no., date, amount, Paid / Not paid, paid on, reference.

• Nice to have (only if data exists in the endpoints): "what's next" hint per stage, simple filters by intake.

• Never show ESPI's own commission, other agents, other students, staff navigation.

• Endpoints: GET /AgentPortal/Summary, GET /AgentPortal/Students?tab=1..4&search=, GET /AgentPortal/Pending?search=,

GET /AgentPortal/Memos?search=. All are already restricted to the signed-in agent on the server.

---

• Use the business words users know: **Collection Memo, Proforma Invoice, Final Invoice, Final Success, Commission,

Associate, Agent, Intake, Financial Year (FY)**. ("Perfoma" is a legacy spelling in URLs — show "Proforma" in the UI.)

• Buttons say what they do: "Generate memo", "Approve proforma", "Record payment", "Mark as paid".

• Explain locks and rules where they apply (e.g. a lock icon with "Commission is locked because this entry is on Memo

MM26-27/00134. Change it in Edit Memo.").

• Dates dd-MM-yyyy, times hh:mm AM/PM; money with thousands separators and two decimals; INR in Indian grouping

(₹1,47,669.75).

---

1. Design system: colour tokens (light + dark), typography scale, spacing, components (buttons, inputs, selects /

multi-selects, badges, tabs, cards, data table + phone card variant, drawer, modal, toast, empty / loading / error

states, filter panel, stat card, progress line, money cell).

2. Screens: every screen in §7 and §8 at phone (390 px), tablet (768 px) and laptop (1366 px), including empty,

loading and error states and the main dialogs (Generate memo, Approve proforma, Record payment, Revert to proforma,

Generate agent memo, Create agent login).

3. Implementation: Razor-ready HTML/CSS/JS (or components a developer can port), using the existing endpoints in

this brief. One shared stylesheet + small JS helpers; no per-page copies of the same styles.

4. Hand-over notes: any data you needed that the endpoints do not provide, and any flow you would change (as a

proposal, not built).

Acceptance checks (the project's QA will run them):

• Every staff page and the agent portal: no horizontal page scroll at 360–1920 px; no clipped menus; no script errors.

• Every action still works end to end (QA test 100-full-flow-stage: student → memo → proforma → final invoice →

success → agent memo → paid).

• Role and branch rules unchanged (QA test 123-audit-branch-prints-stage), agent portal guard unchanged

(qa-agent-login.js).

• Contrast AA, keyboard navigation through every form and grid.