103 lines
2.6 KiB
Markdown
103 lines
2.6 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### PocketBase Setup
|
||
|
|
|
||
|
|
1. Start PocketBase:
|
||
|
|
```bash
|
||
|
|
./pocketbase serve
|
||
|
|
```
|
||
|
|
|
||
|
|
2. Create an admin account in the PocketBase admin UI
|
||
|
|
|
||
|
|
3. Set environment variables:
|
||
|
|
```bash
|
||
|
|
export PB_ADMIN_EMAIL=admin@example.com
|
||
|
|
export PB_ADMIN_PASSWORD=your_password
|
||
|
|
```
|
||
|
|
|
||
|
|
4. Run the setup script to create collections:
|
||
|
|
```bash
|
||
|
|
npm run setup
|
||
|
|
```
|
||
|
|
|
||
|
|
### Environment Variables
|
||
|
|
|
||
|
|
Create `.env.local`:
|
||
|
|
```
|
||
|
|
NEXT_PUBLIC_POCKETBASE_URL=http://127.0.0.1:8090
|
||
|
|
```
|
||
|
|
|
||
|
|
### Development
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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
|
||
|
|
```
|