363786ea36
- Introduced a new Separator component for visual separation in UI. - Added Sheet component for modal-like functionality with triggers and overlays. - Implemented Toaster component for notifications using Sonner library. - Created Switch component for toggle functionality. - Developed Table component with headers, body, footer, and rows for structured data display. - Added Tabs component for organizing content into tabbed interfaces. - Implemented Textarea component for multi-line text input. - Created Tooltip component for displaying additional information on hover. feat: add PocketBase helpers and types - Implemented various helper functions for interacting with PocketBase collections (customers, companies, suppliers, quotes, orders). - Added type definitions for entities such as Customer, Company, Supplier, Quote, Order, and their respective items. - Included utility functions for generating unique identifiers for quotes, orders, and purchase orders. - Added functions for calculating totals and formatting currency and dates. chore: add TypeScript configuration - Added tsconfig.json for TypeScript support with strict type checking and module resolution.
102 lines
2.6 KiB
Markdown
102 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
|
|
```
|