WFDASH - Business CRM

A modern business CRM built with Next.js 16, shadcn/ui, Tailwind CSS 4, and PocketBase.

Tech Stack

• Frontend: Next.js 16 (App Router), React 19, TypeScript
• UI: shadcn/ui, Tailwind CSS 4, Lucide Icons
• Backend: PocketBase (database, auth, file storage, realtime)
• Notifications: Sonner

Getting Started

Prerequisites

• Node.js 18+
• PocketBase server running at http://127.0.0.1:8090

Installation

npm install

PocketBase Setup

1. Start PocketBase:

./pocketbase serve

2. Create an admin account in the PocketBase admin UI

3. Set environment variables:

export PB_ADMIN_EMAIL=admin@example.com
export PB_ADMIN_PASSWORD=your_password

4. Run the setup script to create collections:

npm run setup

Environment Variables

Create .env.local:

NEXT_PUBLIC_POCKETBASE_URL=http://127.0.0.1:8090

Development

npm run dev

Features

• Customers: Full CRUD with search, pagination, CSV export
• Companies: Full CRUD with detail pages
• Suppliers: Full CRUD with tag support
• Quotes: Line items with auto-calculations, status workflow
• Orders: PO generation, supplier grouping
• Dashboard: Real-time stats, recent activity
• Auth: Login, register, password reset
• Dark/Light Mode: Theme switching
• Mobile Responsive: Collapsible sidebar, card views on mobile

Collections

• customers - Customer database
• companies - Company database
• suppliers - Supplier network
• quotes - Quotes with line items
• orders - Orders with PO generation

Project Structure

src/
├── app/
│   ├── (auth)/          # Auth pages (login, register)
│   └── (app)/           # Protected app pages
│       ├── dashboard/   # Dashboard
│       ├── customers/   # Customer management
│       ├── companies/   # Company management
│       ├── suppliers/   # Supplier management
│       ├── quotes/      # Quote management
│       └── orders/      # Order management
├── components/
│   ├── ui/              # shadcn/ui components
│   ├── sidebar.tsx      # Navigation sidebar
│   ├── auth-provider.tsx # Auth context
│   ├── theme-provider.tsx # Theme context
│   └── ...              # Form and table components
└── lib/
    ├── pocketbase.ts    # PocketBase client
    ├── pb-helpers.ts    # Helper functions
    ├── types.ts         # TypeScript types
    └── utils.ts         # Utility functions