# Admin Dashboard Frontend
A clean, sleek admin dashboard frontend built for a SaaS auth system. This UI is meant to be dropped into a Next.js + React + Tailwind app and then connected to your existing auth/admin logic.
## What this includes
- Responsive admin dashboard page
- Sidebar navigation
- Top search/filter bar
- KPI stat cards
- Recent users table
- Security activity feed
- Quick action buttons
- System safeguard status cards
## Recommended stack
- Next.js 14 or newer
- React 18 or newer
- Tailwind CSS 3.4 or newer
- TypeScript 5 or newer
## File structure
Place the admin page in one of these locations depending on your setup:
### App Router
```bash
app/admin/page.tsx
```
### Pages Router
```bash
pages/admin.tsx
```
## Installation
### 1. Install dependencies
Using npm:
```bash
npm install
```
Using pnpm:
```bash
pnpm install
```
Using bun:
```bash
bun install
```
### 2. Make sure Tailwind is configured
Your project should already have Tailwind configured. If not, set up Tailwind in your Next.js project first.
### 3. Add the admin page
Copy the provided frontend code into:
```bash
app/admin/page.tsx
```
or:
```bash
pages/admin.tsx
```
### 4. Start the dev server
```bash
npm run dev
```
Then open:
```bash
http://localhost:3000/admin
```
## How to connect with your auth system
This UI is only the frontend layer. You need to connect the buttons, table actions, and stats to your backend logic.
## Connect these actions
### Top actions
- `Add user` → create new team member or admin
- `Export` → export users, logs, or reports
- `Filter` → open filter controls or query params
### User table
- `Manage` → open user details
- Change roles
- Suspend or activate users
- Revoke sessions
- View login activity
### Quick actions
- `Create admin user`
- `Review failed logins`
- `Revoke active sessions`
- `Suspend flagged account`
## Recommended integration pattern
Keep the UI separate from your auth logic.
Example structure:
```tsx
/lib/admin.ts
/components/admin/AdminDashboard.tsx
/app/admin/page.tsx
```
Example:
```ts
export async function getAdminStats() {}
export async function getRecentUsers() {}
export async function getSecurityEvents() {}
export async function suspendUser(userId: string) {}
export async function revokeSessions(userId: string) {}
```
Then call those functions from your page or API layer.
## Protect the admin route
Do not rely only on frontend checks.
You should protect `/admin` using:
- server-side session validation
- admin role check
- redirect non-admin users away from the page
- logging for sensitive admin actions
## Example admin gate
```tsx
import { redirect } from "next/navigation";
export default async function AdminPageWrapper() {
const session = await getServerSession();
if (!session || session.user.role !== "admin") {
redirect("/login");
}
return <AdminPage />;
}
```
Replace `getServerSession()` with your own auth method.
## Styling notes
This UI uses:
- dark premium dashboard styling
- zinc neutral palette
- teal accent color
- rounded 2xl cards
- subtle borders and blur
- responsive grid layout
If you want to restyle it:
- change `bg-[#0a0a0b]` and zinc classes for overall theme
- replace teal utility classes with your brand color
- update sidebar labels to match your SaaS
- swap dummy data for live API data
## Replace mock data
The sample code includes static arrays like:
- `stats`
- `users`
- `activities`
Replace those with fetched data from your backend.
Example:
```tsx
const stats = await getAdminStats();
const users = await getRecentUsers();
const activities = await getSecurityEvents();
```
## Suggested backend endpoints
You may want endpoints like:
```bash
GET /api/admin/stats
GET /api/admin/users
GET /api/admin/security-events
POST /api/admin/users/create
POST /api/admin/users/:id/suspend
POST /api/admin/users/:id/revoke-sessions
```
## Production checklist
Before shipping:
- protect the route server-side
- verify admin-only actions are blocked for normal users
- connect real data instead of static arrays
- add loading states
- add empty states
- add error handling
- log sensitive actions
- paginate large tables
- test mobile layout
- test dark theme contrast
## Recommended additions
You can extend this admin dashboard with:
- analytics charts
- audit log page
- user detail drawer
- organization management
- billing controls
- API key management
- feature flag controls
- role and permission editor
## Scripts
Use the included package manifest scripts:
```bash
npm run dev
npm run build
npm run start
npm run lint
```
## Troubleshooting
### Styles not showing
Make sure Tailwind is installed and your `content` paths include `app/**/*` or `pages/**/*`.
### Admin page opens but actions do nothing
That is expected until you connect your backend handlers.
### Route is visible to everyone
Add a server-side role check before rendering the page.
### Build fails on unused imports
Remove unused imports or enable only the packages you actually use.
## License / usage
This frontend is intended to be bundled with your auth/admin product. Buyers can copy, paste, modify, and connect it to their own SaaS.