Sentral Admin Panel

A comprehensive, modular admin dashboard for managing users, wallets, transactions, commissions, referrals, payouts, disputes, and system settings. Built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.

• Live Preview: https://id-preview--858a48b0-c1c9-4bfe-aae1-b912edf81b5a.lovable.app
• Published: https://sentral-admin-panel.lovable.app
• Lovable Project: https://lovable.dev/projects/858a48b0-c1c9-4bfe-aae1-b912edf81b5a

---

✨ Features

Dashboard

• Centralized overview of key system metrics and performance indicators.

User Management

• User List — create, search, update, and manage user accounts.
• Roles & Permissions — granular access control configuration.

Financial Module

• Transactions — full transaction ledger with details and status tracking.
• Transaction Management — advanced filtering, search, and bulk actions on transactions.
• Wallets — manage user wallets, currencies, exchange rates, and reconciliation.
• Commissions — detailed commission table with payment gateway, SMS charges, adjustments, and edit/history dialogs.
• Payouts — review, approve, reject, and settle payout requests; refund management included.

Referrals

• Referral List (linear) — flat list view of referrals with profile, messaging, and commission history dialogs.
• Referral Settings — configure referral program rules and payouts.

Disputes

• Manage user-submitted disputes with status workflows.

Reports

• Analytics — visual charts powered by Recharts.
• Activity Logs — audit trail of admin and user actions.
• Export Reports — generate exportable reports.

System

• Settings — configurable application settings via tabbed interface.
• Backup & Restore — database backup utilities.

---

🛠 Tech Stack

Layer	Technology
Framework	React 18 + Vite 5
Language	TypeScript 5
Styling	Tailwind CSS + semantic design tokens
UI Components	shadcn/ui (Radix UI primitives)
Routing	React Router v6
Data Fetching	TanStack React Query
Forms	React Hook Form + Zod
Charts	Recharts
Icons	Lucide React
Notifications	Sonner / Radix Toast

---

📁 Project Structure

src/
├── App.tsx                      # Root app + route definitions
├── main.tsx                     # React entry point
├── index.css                    # Global styles + design tokens
├── components/
│   ├── layout/                  # AdminLayout, AdminHeader, AdminSidebar
│   ├── commission/              # Commission filters, edit, adjustments
│   ├── payout/                  # Payout list, filters, refunds
│   ├── referral/                # Referral dialogs (profile, messaging, history)
│   ├── transactions/            # Transaction table, filters, actions
│   ├── wallet/                  # Wallets, currencies, exchange rates
│   └── ui/                      # shadcn/ui primitives
├── pages/
│   ├── Index.tsx                # Public landing page
│   ├── NotFound.tsx
│   └── admin/
│       ├── Dashboard.tsx
│       ├── UserManagement.tsx
│       ├── RoleManagement.tsx
│       ├── WalletManagement.tsx
│       ├── CommissionManagement.tsx
│       ├── PayoutManagement.tsx
│       ├── ReferralTree.tsx
│       ├── ReferralSettings.tsx
│       ├── DisputeManagement.tsx
│       ├── transactions/        # TransactionList, TransactionManagement
│       ├── reports/             # Analytics, ActivityLogs, ExportReports
│       └── system/              # Settings, BackupRestore
├── hooks/                       # use-toast, use-mobile
├── lib/                         # utilities (cn, etc.)
└── types/                       # transactions, wallet, payout types

---

🗺 Routes

Path	Page
/	Landing page
/admin	Dashboard
/admin/users	User list
/admin/users/roles	Roles & permissions
/admin/financial/transactions	Transactions
/admin/transactions/manage	Transaction management
/admin/financial/wallets	Wallet management
/admin/financial/commissions	Commission management
/admin/financial/payouts	Payouts
/admin/referrals	Referral list
/admin/referrals/settings	Referral settings
/admin/disputes	Disputes
/admin/reports/analytics	Analytics
/admin/reports/activity	Activity logs
/admin/reports/export	Export reports
/admin/system/settings	System settings
/admin/system/backup	Backup & restore

---

🚀 Getting Started

Prerequisites: Node.js 18+ and npm (or bun).

# 1. Clone
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>

# 2. Install dependencies
npm install

# 3. Start the dev server
npm run dev

App runs at http://localhost:5173.

Available Scripts

Command	Description
npm run dev	Start Vite dev server with HMR
npm run build	Production build
npm run build:dev	Development-mode build
npm run preview	Preview the production build
npm run lint	Run ESLint

---

🎨 Design System

The project uses semantic design tokens defined in src/index.css and tailwind.config.ts. All colors are HSL-based and theme-aware (light/dark mode supported).

• Use tokens like bg-primary, text-foreground, bg-muted — never raw colors.
• Customize component variants via class-variance-authority.
• All shadcn/ui primitives live in src/components/ui/.

---

✏️ Editing the Project

Use Lovable (recommended): Visit the Lovable Project and start prompting. Changes commit automatically.

Use your IDE: Clone, edit, and push — changes sync back to Lovable.

GitHub web editor / Codespaces: Edit directly in the GitHub UI or in a Codespace.

---

🚢 Deployment

Open Lovable → Share → Publish.

To attach a custom domain: Project → Settings → Domains → Connect Domain. See the custom domain guide.

---

📄 License

Proprietary — internal admin tooling.