Web Crypto Admin

Overview

A full-featured admin management interface for a centralized crypto wallet platform. Built with React 18, TypeScript, Vite, and Tailwind CSS v4. This SPA provides comprehensive administrative controls for user management, wallet operations, financial reporting, and system configuration across a multi-network blockchain infrastructure.

Features

• Multi-Module Architecture — 15+ feature modules (Dashboard, User Management, Wallet Ops, Finance, Reward Mall, NCT Token, Exchange, Locked Assets, Airdrop, Email Manager, Admin Access, Logs, and more)
• Role-Based Access Control (RBAC) — Super admin and sub-admin permission levels with server-enforced authorization
• JWT Authentication — Secure session management with automatic token refresh on 401
• Bilingual Support — English and Korean language switching via React Context
• Hot Wallet Management — Multi-network wallet operations, withdrawals, staking admin, and sweep functionality
• User Database Tools — Bulk user management, export, freeze/unfreeze, referral tree visualization
• Financial Reporting — Company sales reports, shareholder management, dividend tracking
• Reward & Commerce — Product CRUD with multi-image upload, order tracking, shipping management
• Email & Push Notifications — Compose, broadcast, campaign management with history tracking
• Admin Activity Logging — Audit trail with localStorage-backed persistence
• IP Restriction Management — Security controls for sub-admin access
• Responsive UI — Glass-morphism design with Tailwind CSS v4, Lucide React icons

Tech Stack

Layer	Technology
Framework	React 18 + TypeScript 5
Build Tool	Vite 5
Styling	Tailwind CSS v4 (@tailwindcss/vite)
Icons	Lucide React
Authentication	JWT Bearer tokens via AuthContext
API Client	Centralized HTTP service layer with automatic token injection
State Management	React hooks (useState/useEffect)
Persistence	localStorage via lib/localDb.ts and lib/activityLog.ts
i18n	Custom React Context (EN/KO)
Linting	ESLint + TypeScript ESLint

Setup & Usage

Prerequisites

• Node.js 18+
• npm 9+

Local Development

# Install dependencies
npm install

# Copy environment template
cp .env.example .env

# Configure required variables (see Environment Variables section)
# Edit .env with your Supabase credentials

# Start dev server with HMR
npm run dev
# → http://localhost:5173
# Vite proxy automatically forwards /api/admin → backend

Production Build

# Build optimized bundle
npm run build
# Output: dist/

# Deploy dist/ folder to your web server
# Configure Nginx (see Nginx Configuration section below)

Environment Variables

Variable	Required	Description
VITE_SUPABASE_URL	✅ Yes	Supabase project URL (Dashboard → Settings → API)
VITE_SUPABASE_ANON_KEY	✅ Yes	Supabase anonymous public API key
VITE_ADMIN_API_URL	⬜ Optional	Backend API base URL. Defaults to /api/admin (Vite-proxied in dev). Set in production to your backend host.

Demo Mode: If VITE_ADMIN_API_URL is not set, the app runs in demo mode without a real backend. Access with credentials: admin@example.com / admin1234

All variables are validated at startup via src/config/env.ts — missing required vars throw descriptive errors.

Project Structure

src/
├── main.tsx                    ← App entry point
├── App.tsx                     ← Routing + module loader
├── index.ts                    ← Unified re-export entry point
├── index.css                   ← Tailwind v4 + custom styles
├── config/env.ts               ← Typed, validated environment access
├── contexts/AuthContext.tsx    ← JWT auth, RBAC, session management
├── i18n/                       ← Language switching (EN/KO)
├── services/                   ← API service layer (one per domain)
│   ├── api.ts                  ← HTTP client (JWT Bearer, error handling)
│   ├── authService.ts
│   ├── userService.ts
│   ├── walletService.ts
│   ├── transactionService.ts
│   ├── stakingService.ts
│   ├── dashboardService.ts
│   └── [15+ more domain services]
├── types/                      ← Shared TypeScript interfaces
├── lib/                        ← Utilities
│   ├── activityLog.ts          ← Admin activity logging
│   ├── localDb.ts              ← Settings persistence
│   └── referralDb.ts           ← Referral data storage
└── components/
    ├── Auth/LoginScreen.tsx    ← JWT login form
    ├── Layout/                 ← Header, Sidebar (RBAC-filtered)
    ├── UI/                     ← Reusable primitives (DataTable, Modal, etc.)
    └── Modules/                ← Feature modules (lazy-loaded)
        ├── Dashboard/
        ├── UserManagement/
        ├── WalletOps/
        ├── Finance/
        ├── RewardMall/
        ├── NCTToken/
        ├── Exchange/
        ├── LockedAssets/
        ├── Airdrop/
        ├── EmailManager/
        ├── AdminAccess/
        ├── Logs/
        └── Profile/

Admin Modules

Module	Purpose
Dashboard	KPIs, hot wallet overview, community stats, system health
User Management	User list, referral tree, manual referral rewards
User Database	Bulk operations, export, freeze/unfreeze accounts
Wallet Ops	Hot wallet management, withdrawals, staking, sweeps
Mining & Ads	Video ad management, reward settings, mining intervals
Finance	Sales reports, shareholder management, dividends
Reward Mall	Product CRUD (multi-image), order tracking, shipping
NCT Token	Price/supply config, operational toggles
Exchange	Points-to-token settings, transaction history
Locked Assets	Asset lock/unlock, user ledger search
Airdrop	Token distribution campaigns
Email & Notifications	Compose, broadcast, campaigns, history
Admin Access	Sub-admin accounts, RBAC, IP restrictions
Logs	Admin activity audit trail
Profile	Admin account settings

Architecture

Browser (Admin)
    ↓ HTTPS (443)
┌─────────────────────────────────┐
│ Nginx Web Server                │
│ ├── / → Static SPA (dist/)      │
│ └── /api/admin/* → Backend      │
│ SSL: Let's Encrypt              │
└─────────────────────────────────┘
    ↓
Backend API Server
    ↓
Wallet Server (internal)

Nginx Configuration (Production)

server {
    listen 443 ssl;
    server_name admin.your-domain.com;

    ssl_certificate     /etc/letsencrypt/live/admin.your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/admin.your-domain.com/privkey.pem;

    gzip on;
    gzip_types text/plain text/css application/javascript application/json;

    root /var/www/admin/dist;
    index index.html;

    # SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API proxy
    location /api/admin/ {
        proxy_pass http://backend-server:3000/api/admin/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Authorization $http_authorization;
    }
}

server {
    listen 80;
    server_name admin.your-domain.com;
    return 301 https://$host$request_uri;
}

Key Design Patterns

Typed Environment Access

All env vars validated at startup via src/config/env.ts — throws descriptive errors if required vars are missing.

Unified Import Entry Point

src/index.ts re-exports all public modules for single-source imports:

import { useAuth, localDb, activityLog, DataTable } from '../index';

Service Layer

Each domain has a dedicated service file using the shared api.ts HTTP client, which handles JWT injection, token refresh, and error normalization.

RBAC

AuthContext stores menu_access from login response. Sidebar filters navigation items against this list. Server-side enforcement is the source of truth.

Security

• JWT-based authentication with session expiry handling
• Server-enforced RBAC (UI filtering is secondary)
• IP restriction management for sub-admin accounts
• Backend not directly exposed — all API calls proxied through Nginx
• No secrets embedded in frontend bundle