David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
WFDASH-WEBAPP/README.md
SJCoetz 363786ea36 feat: add UI components for separator, sheet, sonner, switch, table, tabs, textarea, tooltip 
- 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.
2026-05-24 16:31:01 +02:00

2.6 KiB
Raw Blame History

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

  1. Create an admin account in the PocketBase admin UI

  2. Set environment variables:

export PB_ADMIN_EMAIL=admin@example.com
export PB_ADMIN_PASSWORD=your_password
  1. 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