Client Work Tracker

A Next.js dashboard for tracking clients and their associated projects. Monitor project status, access production sites and repositories, and manage client relationships all in one place.

Features

• Client Management: Track client contact information, company details, and notes
• Project Tracking: Monitor multiple projects per client with status indicators
• Status Management: Track projects as Active, Completed, On Hold, or Canceled
• Quick Access Links: Direct links to production sites and GitHub repositories
• Real-time Dashboard: Visual overview of all clients and active work
• Summary Stats: Track total clients, active projects, and completed work
• Database-Backed: PostgreSQL storage with Drizzle ORM for type-safe queries

Quick Start

Prerequisites

• Node.js 18+
• A Neon PostgreSQL database (or any PostgreSQL instance)

Setup

1. Clone the repository:

git clone https://github.com/patrickmitchellconsulting/client-work-tracker.git
cd client-work-tracker

2. Install dependencies:

npm install

3. Set up your environment:

cp .env.example .env

Edit .env and add your database connection string:

DATABASE_URL=postgresql://user:password@host:5432/database

4. Set up the database:

npm run db:push

5. Start the development server:

npm run dev

6. Open http://localhost:3000 in your browser

Usage

Adding Clients

The dashboard displays all clients with their associated projects. Each client card shows:

• Client name and company
• Contact information (email, phone)
• List of associated projects
• Active status indicator

Project Information

Each project displays:

• Project name and description
• Current status (color-coded badge)
• Links to production site and repository
• Start date and completion date
• Notes and additional details

Status Indicators

Projects are color-coded by status:

• Active (Blue): Currently in development
• Completed (Green): Successfully delivered
• On Hold (Yellow): Temporarily paused
• Canceled (Red): Discontinued

Database Management

View and manage your data using Drizzle Studio:

npm run db:studio

Access the visual database browser at http://localhost:4983

Tech Stack

• Next.js 16: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS 4: Utility-first styling
• Drizzle ORM: Type-safe database queries
• Neon PostgreSQL: Serverless database
• @paralleldrive/cuid2: Collision-resistant IDs

Database Schema

Clients Table

{
  id: string (CUID2)
  name: string
  email: string?
  phone: string?
  company: string?
  notes: text?
  isActive: boolean (default: true)
  createdAt: timestamp
  updatedAt: timestamp
}

Projects Table

{
  id: string (CUID2)
  clientId: string (foreign key -> clients.id)
  name: string
  description: text?
  status: string (default: "active")
  productionUrl: string?
  repositoryUrl: string?
  startDate: timestamp?
  completedDate: timestamp?
  notes: text?
  createdAt: timestamp
  updatedAt: timestamp
}

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run db:generate - Generate Drizzle migrations
• npm run db:migrate - Run migrations
• npm run db:push - Push schema changes to database
• npm run db:studio - Open Drizzle Studio

Development

This project uses:

• Server Components for optimal performance
• Server Actions for database mutations (when implemented)
• Drizzle ORM for type-safe database queries
• Responsive design with Tailwind CSS
• PostgreSQL for reliable data persistence

License

MIT