JKSB e-Invoice System - Admin Dashboard

Admin dashboard for JKSB staff to manage invoice requests, users, and system configuration.

Overview

This is the admin dashboard application for the GSSB e-Invoice System. It allows admin staff to:

• View KPI dashboard with charts and statistics
• Approve/reject invoice requests
• Manage users (public and admin)
• Monitor system health
• View system logs
• Configure SMTP and system settings
• Export reports to CSV

Tech Stack

• Framework: Next.js 16.0.1 (App Router + Turbopack)
• Language: TypeScript
• UI Library: shadcn/ui (Radix UI + TailwindCSS)
• Charts: Recharts
• Forms: React-Hook-Form + Zod
• State: Context API + Zustand
• HTTP Client: Axios

Quick Start

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

# Install dependencies
npm install

# Run development server (port 3001)
npm run dev

# Build for production
npm run build

# Start production server (port 3001)
npm start

Development Server

The application will run on http://localhost:3001

Note: The admin dashboard runs on port 3001 to avoid conflicts with the client portal (port 3000).

Test Accounts

Admin Staff (Demo Mode):

• Finance Admin: finance.admin@gssb.com | OTP: 123456
• IT Admin: it.admin@gssb.com | OTP: 123456
• Super Admin: super.admin@gssb.com | OTP: 123456

Environment Variables

Create a .env.local file in the root:

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:8000/api
NEXT_PUBLIC_API_TIMEOUT=30000

# Application Settings
NEXT_PUBLIC_APP_NAME=GSSB e-Invoice Admin
NEXT_PUBLIC_APP_ENV=development

# Demo Mode (remove for production)
NEXT_PUBLIC_ENABLE_MOCK_API=true
NEXT_PUBLIC_DEMO_MODE=true

Project Structure

jksb-einvoicing-admin/
├── app/                    # Next.js App Router pages
│   ├── login/             # Admin login page
│   ├── page.tsx           # Main dashboard
│   ├── submissions/       # Request management
│   ├── users/             # User management
│   ├── config/            # System configuration
│   ├── health/            # System health monitoring
│   ├── logs/              # System logs viewer
│   └── layout.tsx         # Admin layout with sidebar
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── admin/             # Admin-specific components
│   ├── charts/            # Chart components
│   ├── tables/            # Table components
│   └── shared/            # Shared components
├── contexts/              # React contexts (auth, etc.)
├── lib/                   # Utilities, API client, schemas
├── types/                 # TypeScript types
└── public/                # Static assets

Features

Dashboard

• KPI cards with trend indicators
• Request trend line chart (7-day default)
• Status distribution (Bar & Pie charts)
• Recent submissions table
• Auto-refresh every 30 seconds
• Date range selector for charts
• Export statistics to CSV
• Keyboard shortcuts (Ctrl+R refresh, Ctrl+E export)

Request Management

• View all invoice requests
• Filter by status (Pending, Approved, Rejected, Queued)
• Search by Request ID, Name, or TIN
• Approve/reject requests
• View request details
• Bulk operations support

User Management

• List all public users
• List all admin users
• Create new users (admin only)
• Edit user details
• Deactivate/activate users
• Role assignment

System Health

• API server status
• Database connectivity
• Email service status
• Real-time monitoring
• Alert indicators

System Logs

• View application logs
• Filter by level (Error, Warning, Info, Debug)
• Search log messages
• Date range filtering
• Export logs to CSV

System Configuration (Super Admin Only)

• SMTP settings configuration
• Certificate upload
• Maintenance mode toggle
• System-wide settings

Available Scripts

npm run dev          # Start development server (port 3001)
npm run dev:turbo    # Start with Turbopack (port 3001)
npm run build        # Create production build
npm run start        # Start production server (port 3001)
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors
npm run format       # Format code with Prettier
npm run format:check # Check code formatting

Adding shadcn/ui Components

# Add specific components
npx shadcn@latest add button
npx shadcn@latest add table
npx shadcn@latest add dialog

# Add multiple at once
npx shadcn@latest add button input form card table dialog

Keyboard Shortcuts

Shortcut	Action
Ctrl + R	Refresh dashboard data
Ctrl + E	Export statistics
Ctrl + S	Focus search input

Security Notes

Authentication

• OTP-based login for admin staff
• HTTP-only cookie-based JWT tokens
• Role-based access control (RBAC)
• Automatic session expiration
• Redirect-after-login support

Authorization

• Route-level role checking
• Component-level permission checks
• API-level role validation (backend)
• Super Admin for sensitive operations

Production Security Checklist

• Disable mock API
• Enable HTTPS only
• Configure CSRF protection
• Implement rate limiting
• Add server-side middleware auth
• Enable audit logging
• Configure content security policy

Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Environment Variables (Production)

Ensure these are set in your deployment platform:

• NEXT_PUBLIC_API_URL - Production API URL
• Remove NEXT_PUBLIC_ENABLE_MOCK_API or set to false
• Remove NEXT_PUBLIC_DEMO_MODE or set to false

Port Configuration

By default, the admin app runs on port 3001. To change:

// package.json
{
  "scripts": {
    "dev": "next dev -p YOUR_PORT",
    "start": "next start -p YOUR_PORT"
  }
}

Performance

Optimizations Enabled

• Package import optimization (lucide-react, recharts, date-fns)
• Webpack filesystem cache
• Image optimization (AVIF/WebP)
• React Suspense boundaries
• Auto-refresh with countdown timer
• Lazy loading for heavy components

Monitoring

• Auto-refresh every 30 seconds
• Real-time system health checks
• Performance tracking (Web Vitals)

License

ISC