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

app/admin/page.tsx

Pages Router

pages/admin.tsx

Installation

1. Install dependencies

Using npm:

npm install

Using pnpm:

pnpm install

Using bun:

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:

app/admin/page.tsx

or:

pages/admin.tsx

4. Start the dev server

npm run dev

Then open:

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:

/lib/admin.ts
/components/admin/AdminDashboard.tsx
/app/admin/page.tsx

Example:

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

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:

const stats = await getAdminStats();
const users = await getRecentUsers();
const activities = await getSecurityEvents();

Suggested backend endpoints

You may want endpoints like:

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:

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.