Project Overview
Description
DropShip Admin is a comprehensive multi-vendor dropshipping management panel. Administrators can manage users (agents, admins, super admins), products with category-based tier pricing, order processing with full status workflow, wallet/withdrawal management, and content via posts and sliders.
Tech Stack
Key Features
System Architecture
┌────────────────────────────────────────────────────────────────┐ │ CLIENT (Browser) │ │ ┌────────────────────────────────────────────────────────────────┐ │ │ │ Nuxt.js 3 (SSR / CSR) │ │ │ │ ┌─────────┐ ┌───────────┐ ┌───────────┐ ┌────────────┐ │ │ │ │ │ Pages │ │Components│ │Composables│ │Pinia Store│ │ │ │ │ └─────────┘ └───────────┘ └───────────┘ └────────────┘ │ │ │ │ └───────────────────────┘──────────────────┘ │ │ │ HTTP JSON + Sanctum Auth │ └─────────────────────────────────┘│─────────────────────────────────┘ │ ┌─────────────────────────────────┘│───────────────────────────────────┐ │ Laravel API Server │ │ ┌────────────────────────┘│─────────────────────────────────────┐ │ │ │ Routes (api.php) │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────────┐ │ │ │ │ │ Auth │ │ User │ │Product│ │ Order │ │ │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────────┘ │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────────┐ │ │ │ │ │ Wallet │ │ Post │ │Slider │ │ Store │ │ │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────────┘ │ │ │ │ Eloquent ORM │ │ │ │ └───────────────────────┘│─────────────────────────────────────┘ │ │ │ MySQL 8.0+ Database │ │ │ │ users | products | categories | orders | wallets │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────────────────┘
Laravel API Specification
Core Requirements
Folder Structure
app/ ├── Http/Controllers/ │ ├── AuthController.php │ ├── DashboardController.php │ ├── UserController.php │ ├── ProductController.php │ ├── CategoryController.php │ ├── OrderController.php │ ├── WalletController.php │ ├── PostController.php │ └── SliderController.php ├── Http/Requests/ ├── Http/Resources/ ├── Models/ ├── Services/ └── routes/api.php
Middleware & Auth Routes
// routes/api.php Route::post('/login', [AuthController::class, 'login']); Route::middleware('auth:sanctum')->group(function () { Route::post('/logout', [AuthController::class, 'logout']); Route::get('/dashboard', [DashboardController::class, 'index']); Route::middleware('role:super_admin,admin')->group(function () { Route::apiResource('users', UserController::class); Route::apiResource('products', ProductController::class); Route::apiResource('categories', CategoryController::class); Route::apiResource('orders', OrderController::class); Route::apiResource('posts', PostController::class); Route::apiResource('sliders', SliderController::class); Route::prefix('wallet')->group(function () { Route::get('/users', [WalletController::class, 'list']); Route::post('/adjust', [WalletController::class, 'adjust']); Route::get('/withdrawals', [WalletController::class, 'withdrawals']); Route::post('/withdrawals/{id}/approve', [WalletController::class, 'approve']); }); }); });
Nuxt.js 3 Frontend Specification
Core Configuration
Folder Structure
nuxt-dropship/ ├── pages/ │ ├── login.vue │ ├── dashboard.vue │ ├── users/ (index, agents, admins) │ ├── products/ (index, categories) │ ├── wallet/ (users, withdrawals) │ ├── posts/ (index, create) │ └── settings/ (sliders) ├── components/ ├── composables/ (useAuth, useApi) ├── stores/ (auth, dashboard) ├── layouts/ (admin.vue) ├── middleware/ (auth.ts) └── nuxt.config.ts
Composable: useApi.ts
export const useApi = () => { const config = useRuntimeConfig() const baseURL = config.public.apiBase as string const apiFetch = async <T>(url: string, opts: any = {}) => { return await $fetch<T>(url, { baseURL, credentials: 'include', ...opts, }) } return { apiFetch } }
MySQL Database Schema
-- Users & Roles CREATE TABLE users ( id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, password VARCHAR(255) NOT NULL, phone VARCHAR(20), role ENUM('super_admin','admin','agent','partner','user') DEFAULT 'user', status TINYINT DEFAULT 1, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Categories (hierarchical with commission %) CREATE TABLE categories ( id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, parent_id BIGINT UNSIGNED, commission_rate DECIMAL(5,2) DEFAULT 0, FOREIGN KEY (parent_id) REFERENCES categories(id) ); -- Products CREATE TABLE products ( id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, category_id BIGINT UNSIGNED NOT NULL, name VARCHAR(255) NOT NULL, sales_price DECIMAL(10,2) NOT NULL, buying_price DECIMAL(10,2) NOT NULL, profit DECIMAL(10,2) GENERATED ALWAYS AS (sales_price - buying_price) STORED, status ENUM('active','inactive') DEFAULT 'active' ); -- Orders CREATE TABLE orders ( id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, order_id VARCHAR(100) UNIQUE NOT NULL, user_id BIGINT UNSIGNED NOT NULL, product_id BIGINT UNSIGNED NOT NULL, selling_price DECIMAL(10,2), costing_price DECIMAL(10,2), profit DECIMAL(10,2), status ENUM('to_be_paid','to_be_confirmed','goods_to_be_received', 'platform_processed','to_be_shipped','complete') DEFAULT 'to_be_paid' ); -- Wallets CREATE TABLE wallets ( id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, user_id BIGINT UNSIGNED UNIQUE NOT NULL, amount_available DECIMAL(12,2) DEFAULT 0.00, frozen_amount DECIMAL(12,2) DEFAULT 0.00 ); -- Withdrawals CREATE TABLE withdrawals ( id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, user_id BIGINT UNSIGNED NOT NULL, amount DECIMAL(12,2) NOT NULL, transaction_fee DECIMAL(12,2) DEFAULT 0.00, payable_amount DECIMAL(12,2) NOT NULL, status ENUM('pending','approved','rejected','completed') DEFAULT 'pending' );
Module Screenshots
Click any image to open fullscreen lightbox with zoom. Use arrows to navigate between screenshots.
Dashboard
Main admin dashboard with stat cards: Total Deposit, Total Withdrawal, Total Users, Total Products.
Login Authentication
Captcha-protected login with email, password, and numeric captcha. Laravel Sanctum session-based auth.
Order Management
Full order lifecycle with status tabs, detail modal, and bulk update support.
Product & Category Management
Hierarchical categories by agency tier with product pricing and edit actions.
Wallet & Withdrawal
User wallets, withdrawal addresses, and withdrawal list with date filtering.
Post Management
WYSIWYG editor with title, categories, and thumbnail upload.
Store Management
Multi-store management with data synchronization.
Color System
Light Mode
#3B82F6
#22C55E
#F59E0B
#EF4444
#06B6D4
#F8FAFC
Dark Mode
#60A5FA
#4ADE80
#FACC15
#F87171
#22D3EE
#1E293B
API Endpoints
| Method | Endpoint | Description | Auth |
|---|---|---|---|
| POST | /api/login | Authenticate user | Public |
| POST | /api/logout | Destroy session | Auth |
| GET | /api/dashboard | Dashboard stats | Auth |
| GET | /api/users | List users (paginated) | Admin |
| POST | /api/users | Create user | Admin |
| PUT | /api/users/{id} | Update user | Admin |
| DEL | /api/users/{id} | Delete user | Admin |
| GET | /api/products | List products | Admin |
| POST | /api/products | Create product | Admin |
| GET | /api/categories | List categories | Admin |
| GET | /api/orders | List orders (status) | Admin |
| PUT | /api/orders/{id}/status | Update order status | Admin |
| GET | /api/wallet/users | List wallets | Admin |
| POST | /api/wallet/adjust | Manual adjustment | Admin |
| GET | /api/wallet/withdrawals | List withdrawals | Admin |
| POST | /api/wallet/withdrawals/{id}/approve | Approve withdrawal | Admin |
| GET | /api/posts | List posts | Admin |
| POST | /api/posts | Create post | Admin |
Setup & Deployment
Laravel Backend
# Clone and install git clone https://github.com/repo/dropship-api.git cd dropship-api composer install # Environment cp .env.example .env php artisan key:generate # Database php artisan migrate --seed # Run php artisan serve # Sanctum config (.env) SANCTUM_STATEFUL_DOMAINS=localhost:3000 SESSION_DRIVER=cookie
Nuxt 3 Frontend
# Clone and install git clone https://github.com/repo/dropship-admin.git cd dropship-admin npm install # nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { public: { apiBase: 'http://localhost:8000/api' } }, ssr: true, }) # Run npm run dev npm run build