This Admin Dashboard is a secure and user-friendly interface for managing customer orders in an e-commerce system. Built with Next.js, Sanity.io, and Tailwind CSS, the dashboard provides powerful order management features, including order filtering, status updates, and deletion.
-
Secure Admin Login:
- Admin authentication with protected routes.
- Unauthorized users are redirected to the login page.
-
Order Management:
- View and manage customer orders fetched from Sanity.io.
- Filter orders by status:
All,Pending,Dispatch, andSuccess. - Expand orders to view detailed customer and cart item information.
-
Status Update:
- Admins can change the status of orders to
Pending,Dispatch, orCompleted.
- Admins can change the status of orders to
-
Order Deletion:
- Delete orders with confirmation dialogs to avoid accidental deletion.
-
Elegant User Alerts:
- Powered by SweetAlert2 for smooth popups and confirmations.
ADMIN-DASHBOARD/
├── .next/ # Build directory generated by Next.js
├── node_modules/ # Installed dependencies
├── src/
├── app/ # Application pages and components
│ ├── admin/
│ │ ├── dashboard/ # Dashboard page to manage orders
│ │ │ └── page.tsx # Dashboard logic and order display
│ │ └── page.tsx # Admin login page
│ ├── components/ # Reusable components
│ │ └── ProtectedRoute.tsx # Protects admin routes from unauthorized access
│ └── layout.tsx # Page layout component
├── fonts/ # Custom fonts (if any)
├── sanity/ # Sanity.io configuration
├── globals.css # Global styles
├── package.json # Project dependencies and scripts
├── README.md # Project setup and usage instructions
└── tailwind.config.js # Tailwind CSS configuration
git clone <repository-link>
cd admin-dashboardnpm installCreate a .env.local file and set up the following environment variables:
NEXT_PUBLIC_SANITY_PROJECT_ID=<your_project_id>
NEXT_PUBLIC_SANITY_DATASET=<your_dataset>npm run devVisit http://localhost:3000 to access the application.
Admin credentials have been securely provided through the official form submission. Please refer to the form for accessing the admin dashboard.
- Secure admin login with protected routes.
- View, filter, and manage orders.
- Update order status and delete orders with confirmation.
- Next.js: React framework for building web applications
- Sanity.io: Headless CMS for managing data
- Tailwind CSS: Utility-first CSS framework
- SweetAlert2: Elegant alerts and confirmation popups
Feel free to open issues and submit pull requests for improvements or bug fixes.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.