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