No description
565b1a6e2b
Introduce a new SupplierMap component and page to visualize suppliers on a Leaflet map (client-side, dynamic import). Wire the feature into the app by importing Leaflet CSS in the global layout and adding a Supplier Map entry to the sidebar. The map fetches suppliers, parses coordinates, groups nearby suppliers into proximity clusters, and shows markers, tooltips, and lists of missing coordinates. Update package.json to include leaflet, react-leaflet and types; remove a Windows-specific lightningcss package. Also normalize Dockerfile ENV formatting (no behavior change). |
||
|---|---|---|
| .vscode | ||
| docs | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| AGENTS.md | ||
| CLAUDE.md | ||
| components.json | ||
| Dockerfile | ||
| eslint.config.mjs | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| README.md | ||
| tsconfig.json | ||
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
- Start PocketBase:
./pocketbase serve
-
Create an admin account in the PocketBase admin UI
-
Set environment variables:
export PB_ADMIN_EMAIL=admin@example.com
export PB_ADMIN_PASSWORD=your_password
- 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 databasecompanies- Company databasesuppliers- Supplier networkquotes- Quotes with line itemsorders- 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