# Internal Admin Panel — Vibe Coding Prompt

Copy this entire prompt into Cursor, Claude, or your AI tool of choice.

---

Build me an internal admin panel with the following specifications:

## Tech Stack
- Next.js 14 with App Router
- Prisma with SQLite (easy to swap to Postgres later)
- Tailwind CSS for styling
- shadcn/ui components

## Core Features

### 1. Dashboard Home
- Summary cards showing key metrics (total users, recent activity, etc.)
- Quick actions section
- Recent activity feed

### 2. Data Table Component
- Sortable columns
- Search/filter functionality
- Pagination
- Row actions (edit, delete, view)
- Bulk selection and actions
- Export to CSV

### 3. CRUD Operations
- Create new records with form validation
- Edit existing records in a modal or side panel
- Delete with confirmation
- View record details

### 4. Example Entity: Users
- Fields: id, name, email, role, status, createdAt, updatedAt
- Roles: admin, manager, user
- Status: active, inactive, pending

### 5. Authentication
- Simple email/password login
- Protected routes
- Session management
- Logout functionality

### 6. UI Requirements
- Clean, minimal design
- Responsive (works on tablet)
- Loading states
- Error handling with toast notifications
- Dark mode support (optional)

## File Structure
```
/app
  /api
    /users
      route.ts (GET, POST)
      [id]/route.ts (GET, PUT, DELETE)
    /auth
      route.ts
  /(dashboard)
    /layout.tsx
    /page.tsx (dashboard home)
    /users
      /page.tsx (user list)
      /[id]/page.tsx (user detail)
      /new/page.tsx (create user)
  /login
    /page.tsx
/components
  /ui (shadcn components)
  /data-table.tsx
  /sidebar.tsx
  /header.tsx
/lib
  /prisma.ts
  /auth.ts
/prisma
  /schema.prisma
```

## Database Schema
```prisma
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  password  String
  role      String   @default("user")
  status    String   @default("active")
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
```

## Additional Requirements
- Use React Hook Form for form handling
- Use Zod for validation
- Include seed script to populate sample data
- Add proper TypeScript types throughout
- Include a README with setup instructions

Please generate all the files needed to get this running. Start with the core files first, then I'll ask for additional features.

---

## Follow-Up Prompts

### Add More Entities
```
Add a new entity called "Orders" with:
- Fields: id, userId, amount, status (pending/completed/cancelled), items (JSON), createdAt
- Full CRUD like the Users table
- Relationship to User (belongs to)
- Filter by status on the list page
```

### Add Bulk Actions
```
Add bulk actions to the data table:
- Select multiple rows with checkboxes
- Bulk delete selected
- Bulk update status (e.g., activate/deactivate users)
- Show count of selected items
- Confirmation modal before bulk actions
```

### Add Activity Logging
```
Add an activity log that tracks:
- Who made changes (user ID)
- What changed (entity, field, old value, new value)
- When it happened
- Display in a timeline format on the dashboard
- Filter by entity type and user
```

### Add Role-Based Access
```
Implement role-based access control:
- Admin: full access to everything
- Manager: can view and edit, but not delete
- User: read-only access
- Hide UI elements based on role
- Protect API routes by role
- Show "Access Denied" page for unauthorized routes
```

---

Source: BuildOrBuy.dev — Free prompts for vibe coding