Admin Dashboard

straitPay Admin Dashboard

Protected Next.js operations dashboard for OTC onboarding, deal slips, transactions, fees, financial rules, CRM, and audit logs.

My role

Frontend/web engineer working on protected admin routes, OTC workflows, typed API services, React Query data flows, table-heavy UI, forms, exports, and operational dashboard states.

Overview

straitPay Admin Dashboard is a Next.js App Router web application for fintech operations and over-the-counter workflows. The app separates public login from protected dashboard routes, uses a sidebar-driven admin layout, and exposes operational areas for OTC users, OTC transactions, CRM, financial rules, fees, management, services, transaction review, system settings, and audit logs.

The OTC area includes searchable and date-filterable user lists, onboarding user creation, export to spreadsheet, detail tabs for user profile data, business documents, deal slips, and user transactions. Deal-slip workflows include creating a new slip for an OTC user, selecting currencies, fetching rate/fee context, validating form inputs with Zod and React Hook Form, generating slips, listing slip history, filtering by date/search, and downloading slip images. Transaction surfaces include broad transaction lists, transaction detail pages, status update foundations, note forms, receipt links, wallet/manual-banking/airtime/bill/stock transaction categories, and downloadable transaction views.

The application uses React Query for server state, a typed Axios API client for service modules, cookie-backed auth tokens, session-stored current-user context, Tailwind CSS, Radix/shadcn-style UI primitives, pagination, skeletons, reusable empty/error states, date-range filtering, debounced search, and export/download helpers. Several sidebar sections are implemented deeply, while a few navigation groups still contain placeholder or early-stage pages, so the strongest completed work is in protected layout, OTC operations, transaction review, CRM lists, audit logs, financial-rule/fee route structure, and reusable dashboard infrastructure.

Key Features

Authentication and Protected Layout

Public login form with React Hook Form, Zod validation, React Query mutation, toast feedback, and redirect handling.
Protected route group checks for an auth token and redirects unauthenticated users to login with the original path preserved.
Sidebar dashboard layout with management, audit log, CRM, OTC, financial rules, transactions, services, and fees navigation groups.

OTC User Operations

Searchable, paginated, date-filterable OTC user list with export-to-spreadsheet support.
OTC user detail tabs for user details, deal slips, and user transactions.
Business profile and document display with downloadable/viewable document actions.
OTC onboarding forms and business-entity routes for adding profiles/entities are present in the route structure.

Deal Slip Workflows

Deal-slip list with search, date filtering, pagination, skeletons, empty states, error retry, and downloadable slip rendering.
Create-deal-slip form with customer context, transaction type, source channel, currency selectors, amount, validity period, rate/fee lookup, and manual-bank context.
Success and failure toasts plus route transitions after slip generation.

Transactions and Reporting

Transaction list views for all, B2C, B2B, stock, manual banking, airtime, bill, wallet, and inconclusive transaction categories.
Transaction detail page with structured operational fields, sender/receiver sections, receipt links, add-note form, and status update modal foundation.
Downloadable transaction/deal-slip receipt views generated from rendered UI.

Admin Infrastructure

Audit log page with search, date filtering, pagination, skeletons, empty states, and retryable errors.
CRM route groups for all users, B2C/B2B users, unverified users, ratings/feedback, and push-notification history.
Financial-rule and fee route groups for currencies, countries, payout/collection methods, transaction limits, manual banking accounts, stock, FX, bills, airtime, and service fee management.
Reusable dashboard components for headers, sidebars, forms, tables, dialogs, filters, download helpers, and state-specific UI.

Technical Highlights

Next.js App Router route groups separate public login from protected dashboard modules.
Cookie-backed auth token storage and session-stored current user context support protected dashboard access.
Typed service modules wrap a shared Axios API client for CRM, transactions, deal slips, audit logs, fees, countries, currencies, rates, manual banking, and system settings.
React Query powers server-state fetching, query keys, loading states, error retries, pagination, debounced search, date filters, and mutations.
Reusable table, pagination, skeleton, empty, error, date-range picker, toast, dialog, sheet, form, select, and sidebar components keep admin workflows consistent.
Export/download utilities generate spreadsheet downloads and image-based receipts/deal-slip downloads from rendered UI.
Transaction detail pages expose structured operational review data, status update foundation, admin notes, and receipt/document links.

Tech Stack

Next.js App Router
React
TypeScript
Tailwind CSS
Radix UI
shadcn-style components
TanStack React Query
Axios
React Hook Form
Zod
cookies-next
date-fns
react-day-picker
html2canvas
AWS S3 SDK
Lucide React
ESLint
Prettier

Architecture

The app uses Next.js App Router with public and protected route groups, a client-side protected layout, shared sidebar navigation, React Query for server state, typed service modules around a shared Axios client, cookie/session auth helpers, Tailwind/Radix UI primitives, and domain-organized dashboard pages for OTC, CRM, transactions, fees, financial rules, audit logs, and management.

Challenges and Solutions

Managing dense fintech operations without losing navigability.

Solution: Grouped operational areas into a sidebar layout and split workflows into route groups, tabs, tables, detail pages, dialogs, and reusable state components.

Keeping admin lists usable across search, filters, exports, and pagination.

Solution: Used React Query with debounced search, date-range filters, pagination components, skeletons, empty states, retryable errors, and export/download helpers.

Building reliable form-heavy OTC workflows.

Solution: Used React Hook Form and Zod validation with query-backed currency/rate/manual-bank data and mutation feedback for deal-slip generation.

Impact

Reduced repeated dashboard API code through typed service modules and a shared authenticated Axios client.
Improved operator clarity by standardizing loading, empty, filtered-empty, and error states across table-heavy workflows.
Made OTC workflows easier to extend by separating user lists, detail tabs, deal-slip generation, transaction review, and exports into focused modules.