General Admin Dashboard

A modern and reusable Admin Dashboard built with React and Tailwind CSS. This dashboard offers various administrative functionalities, including user management, system stats, reports, and more. The project leverages React Router for navigation and is designed to be scalable, flexible, and easy to integrate into any project.

Every page is fully dynamic — all data (users, orders, products, messages, reports, revenue, audit logs, profile, settings) is fetched from a REST API at runtime and supports create / update / delete operations. A bundled json-server mock backend lets you run the whole thing locally with zero setup, and it can be swapped for a real API by changing a single environment variable.

---

Features

1. User Management

• Add, edit, and delete users.
• View user details and perform CRUD operations.
• Role-based access control (Admin, Manager, User).
• Search, filter, and paginate through user lists.

2. System Stats & KPIs

• Display KPIs like total users, active users, and revenue.
• Real-time data updates for system stats.
• Interactive charts and graphs for data visualization.

3. Reports

• View various reports related to users, orders, revenue, etc.
• Export and download reports as needed.

4. Messages & Notifications

• View and manage system messages.
• Message details and conversation threads.
• Support for real-time notifications.

5. Audit Logs

• Track and display user activities, such as logins, actions taken, and errors.
• View and filter audit logs by user, action type, or date range.

6. Profile Management

• View and edit user profiles.
• Profile settings for admins, users, and managers.
• Ability to update profile information.

7. Content Management

• Manage content such as posts, articles, and other media.
• View content details and edit as needed.

8. Revenue & Orders Cost Dashboard

• View real-time revenue statistics.
• Analyze and track orders cost.

9. Settings & Support

• Configure application settings (site name, theme, etc.).
• Access support resources for troubleshooting.

---

Tech Stack

• Frontend:
  • React (component-based UI)
  • Tailwind CSS (responsive, customizable styling)
  • React Router (navigation)
  • Axios (HTTP client)
  • Chart.js / react-chartjs-2 (data visualization)
• Mock Backend:
  • json-server — a zero-config REST API served from frontend/db.json. Used for local development; replace it with a real API by setting VITE_API_URL.
• Deployment:
  • The frontend can be deployed to Vercel, Netlify, or any static host. The mock backend is for development only — point the app at a production API for deployment.

---

Architecture: How Data Flows

React pages ──▶ src/services/api.js (axios, baseURL = /api)
                        │
                        ▼
        Vite dev proxy  /api/*  ──▶  http://localhost:5000/*
                        │
                        ▼
                  json-server  (reads/writes frontend/db.json)

• src/services/api.js — a single shared axios instance. Its base URL is /api by default, or whatever VITE_API_URL is set to.
• vite.config.js — proxies /api/* requests to the json-server backend on port 5000 in development.
• db.json — the mock database. Every collection (users, orders, products, messages, posts, auditLogs, reports, ordersCost, revenue, profile, settings, …) is a REST resource supporting GET, POST, PUT, PATCH, and DELETE.

To use a real backend instead, create frontend/.env with:

VITE_API_URL=https://your-api.example.com

---

Setup Instructions

1. Clone the repository:

git clone https://github.com/Njoxpy/dashboard
cd dashboard/frontend

2. Install dependencies:

npm install

3. Start the mock backend (terminal 1):

npm run server

This starts json-server on http://localhost:5000, serving the data in db.json.

4. Start the development server (terminal 2):

npm run dev

Vite starts the app (default http://localhost:5173) and proxies API calls to the backend. Open the dashboard at http://localhost:5173/admin.

Note: Run both commands — the app fetches its data from the backend, so without npm run server running, pages will show loading/error states.

---

Routing Structure (React Router)

The dashboard utilizes React Router to manage navigation within the admin interface. Below is the routing setup:

Routes:

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path="admin/*" element={<DashboardLayout />}>
        <Route index element={<DashboardOverview />} />
        <Route path="users">
          <Route index element={<UsersPage />} />
          <Route path=":id" element={<UserDetailsPage />} />
          <Route path="create" element={<AddUserPage />} />
        </Route>
        <Route path="dashboard" element={<DashboardOverview />} />
        <Route path="reports" element={<ReportsPage />} />
        <Route path="revenue" element={<RevenueDashboard />} />
        <Route path="contents" element={<ContentDashboard />} />
        <Route path="contents/:id" element={<ContentDetails />} />
        <Route path="messages" element={<Messages />} />
        <Route path="messages/:id" element={<MessageDetail />} />
        <Route path="orders" element={<OrdersPage />} />
        <Route path="orders/:id" element={<OrderDetailsPage />} />
        <Route path="products" element={<ProductsPage />} />
        <Route path="products/add" element={<AddProduct />} />
        <Route path="products/:id/edit" element={<EditProduct />} />
        <Route path="settings" element={<Settings />} />
        <Route path="support" element={<Support />} />
        <Route path="logs" element={<AuditLogs />} />
        <Route path="profile" element={<ProfilePage />} />
        <Route path="profile/edit" element={<EditProfilePage />} />
        <Route path="orders-cost" element={<OrdersCostDashboard />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Route>,
  ),
);

Explanation of the Routes

• DashboardLayout: The main layout for the dashboard that contains the sidebar, top bar, and dynamic content area.
• DashboardHome, UsersPage, ReportsPage, etc.: These are individual pages/components representing sections of the admin dashboard.
• AddUserPage, UserDetailsPage, EditProfilePage, etc.: Pages for adding/editing users, viewing user details, and updating user profiles.
• Dynamic Routes: The routes like users/:id and messages/:id handle dynamic user or message details.
• 404 Route (NotFound): A fallback route for when a user navigates to a non-existent page.

---

How to Contribute

If you'd like to contribute to this project, follow these steps:

1. Fork the repository.
2. Clone your fork to your local machine.
3. Create a new branch for your feature or fix.
4. Implement your changes.
5. Commit your changes with descriptive messages.
6. Push your branch to your forked repository.
7. Open a pull request.

---

Future Improvements

• Real Backend: Swap the json-server mock for a production API (an Express + MongoDB structure is sketched in docs/backend.md).
• Authentication: Implement user authentication and protected routes for admin access.
• Advanced Analytics: Add more complex charts, data filters, and user statistics.
• Multilingual Support: Add support for multiple languages to serve a global audience.

---

Acknowledgements

This dashboard was created with the help of React and Tailwind CSS, along with React Router for navigation. The goal was to create a highly reusable, flexible admin dashboard that can easily be customized and deployed.

---

Project Screenshots

Here are some images of the dashboard in action:

1. Add User Page

2. Loading Screen

3. Main Dashboard

4. Messages Section

5. Reports Page

6. Support Page

7. Users Page

---