Skip to content

Muhammad-Talha33/ecommerce-platform-admin

Repository files navigation

Admin Dashboard

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.


Key Features

  • 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, and Success.
    • Expand orders to view detailed customer and cart item information.
  • Status Update:

    • Admins can change the status of orders to Pending, Dispatch, or Completed.
  • Order Deletion:

    • Delete orders with confirmation dialogs to avoid accidental deletion.
  • Elegant User Alerts:

    • Powered by SweetAlert2 for smooth popups and confirmations.

Folder Structure

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  

Setup Instructions

1. Clone the Repository

git clone <repository-link>
cd admin-dashboard

2. Install Dependencies

npm install

3. Configure Environment Variables

Create 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>

4. Run the Development Server

npm run dev

Visit http://localhost:3000 to access the application.

5. Admin Credentials

Admin credentials have been securely provided through the official form submission. Please refer to the form for accessing the admin dashboard.

6. Project Features

  • Secure admin login with protected routes.
  • View, filter, and manage orders.
  • Update order status and delete orders with confirmation.

Technologies Used

  • 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

Contributing

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.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open 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.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

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.

Releases

No releases published

Packages

No packages published