Dashboard Overview

The Keshless Admin Dashboard is a web-based administration interface for managing the Keshless payment ecosystem.

Purpose

The dashboard enables administrators to:

• Monitor system health and transactions
• Manage users and vendors
• Review KYC verifications
• Configure fees and limits
• Handle AML compliance
• Manage cards and operations

Technology Stack

Component	Technology
Frontend	React + TypeScript
Styling	Tailwind CSS
State	React Query
Routing	React Router
Charts	Recharts
UI Components	Custom + Headless UI

Architecture

src/
├── components/         # Reusable UI components
│   ├── common/        # Buttons, inputs, cards
│   ├── layout/        # Header, sidebar, layout
│   └── charts/        # Chart components
├── pages/             # Route pages
│   ├── dashboard/
│   ├── users/
│   ├── vendors/
│   ├── transactions/
│   ├── verifications/
│   ├── aml/
│   ├── cards/
│   └── settings/
├── services/          # API service layer
├── hooks/             # Custom React hooks
├── types/             # TypeScript interfaces
├── utils/             # Helper functions
└── App.tsx            # Main app component

Navigation Structure

┌─────────────────────────────────────────────────────────┐
│  ┌─────────┐                                            │
│  │  Logo   │  Keshless Admin Dashboard    [Search] [👤] │
│  └─────────┘                                            │
├─────────────┬───────────────────────────────────────────┤
│             │                                           │
│  Dashboard  │                                           │
│  ─────────  │                                           │
│  Users      │            Main Content Area              │
│  Vendors    │                                           │
│  Transact.  │                                           │
│  Verific.   │                                           │
│  AML        │                                           │
│  Cards      │                                           │
│  ─────────  │                                           │
│  Settings   │                                           │
│             │                                           │
└─────────────┴───────────────────────────────────────────┘

Features at a Glance

Section	Description	Route
Analytics	Dashboard metrics, charts	/
Users	User management	/users
Vendors	Vendor management	/vendors
Transactions	Transaction monitoring	/transactions
Verifications	KYC review	/verifications
AML	Compliance monitoring	/aml
Cards	Card management	/cards
Configuration	System settings	/settings

Authentication

Login Flow

1. Admin enters credentials
2. System validates and returns JWT
3. Protected routes check authentication
4. Unauthenticated users redirect to login

Role-Based Access

Role	Access Level
Super Admin	Full access
Admin	All except settings
Support	Users, transactions, verifications
Compliance	AML, verifications
Viewer	Read-only access

API Integration

Query Configuration

Setting	Value	Description
Stale Time	5 minutes	Cache duration
Refetch on Focus	Yes	Refresh when tab gains focus
Retry	3 times	Retry failed requests

Service Pattern

All API calls follow a consistent service pattern:

• getList(filters) - Paginated list queries
• getById(id) - Single item fetch
• create(data) - Create new records
• update(id, data) - Update existing records
• delete(id) - Remove records

Environment Configuration

Variable	Description
VITE_API_URL	Production API URL
VITE_DEV_API_URL	Development API URL

Code Location

Item	Path
Repository	frontend/keshless-dashboard/
Entry	src/main.tsx
App	src/App.tsx
Routes	src/routes.tsx
API Client	src/services/api.ts

Screenshots

Dashboard Overview