Zeropoint Studio

All-in-one client management tool for web agencies

Zeropoint Studio is an internal and client-facing platform designed to streamline how web agency projects are managed, from lead capture to onboarding, project execution, and ongoing client website management.

✨ Features

Admin Panel (Internal Use)

• 📊 Dashboard - Overview of leads, clients, and revenue metrics
• 🎯 Leads CRM - Complete lead management with filtering, search, and status tracking
• 👥 Clients CRM - Client management with project tracking and revenue insights
• 📝 Project Management - Track project status and deliverables
• 🤖 AI-Powered PRD Generation (Coming Soon)
• 💰 Pricing Calculator (Coming Soon)

Client Portal (Coming Soon)

• 📈 Analytics Dashboard - Website traffic and performance metrics
• 📬 Form Submissions - View and respond to website inquiries
• 📝 Content Management - Manage products, listings, and blog posts
• 📊 Project Overview - Track project progress and milestones

🛠 Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui + Magic UI
• Animations: Framer Motion
• Database: PostgreSQL (Planned: Supabase)
• Authentication: Supabase Auth (Coming Soon)
• AI: OpenAI GPT API (Coming Soon)

🚀 Getting Started

1. Clone the repository

   git clone <repository-url>
   cd zeropoint-studio

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Visit the admin panel

   • Dashboard: http://localhost:3001/admin - Main dashboard with metrics and activity
   • Leads Management: http://localhost:3001/admin/leads - 5 specialized lead tables with tabs
   • Lead Detail Pages: Click any row to see detailed views:
     • AI Bot Leads: /admin/leads/ai-bot/[id]
     • Website Leads: /admin/leads/website/[id]
     • Social Leads: /admin/leads/social/[id]
     • Custom Leads: /admin/leads/custom/[id] (editable)
     • Cold Outreach: /admin/leads/cold-outreach/[id] (editable)
   • Clients Management: http://localhost:3001/admin/clients - Client management interface
   • Navigate seamlessly between pages using the Magic UI dock navigation

📱 Navigation

Magic UI Dock (Universal)

• Fixed Bottom Dock - Professional dock navigation inspired by macOS
• Magnification Effects - Icons smoothly scale on hover with spring animations
• Route-based Navigation - Seamlessly navigate between /admin, /admin/leads, /admin/clients
• Active State Indicators - Orange highlight for current page
• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Dark Theme Integration - Matches the overall dark aesthetic

🎨 UI Components

Data Tables

• Sorting & Filtering - Sort by any column, filter by status
• Search - Real-time search across all lead/client data
• Actions - View, edit, and delete operations
• Responsive Design - Mobile-optimized with progressive disclosure

Status Management

• Visual Status Badges - Color-coded status indicators
• Status Filtering - Quick filtering by lead/client status
• Progress Tracking - Visual indicators for project progress

📁 Project Structure

src/
├── app/
│   ├── admin/           # Admin section with layout
│   │   ├── layout.tsx   # Admin layout with dock navigation
│   │   ├── page.tsx     # Dashboard page (/admin)
│   │   ├── leads/       # Leads management system
│   │   │   ├── page.tsx # Main leads tables (/admin/leads)
│   │   │   ├── ai-bot/[id]/page.tsx      # AI Bot lead details
│   │   │   ├── website/[id]/page.tsx     # Website lead details
│   │   │   ├── social/[id]/page.tsx      # Social media lead details
│   │   │   ├── custom/[id]/page.tsx      # Custom lead details (editable)
│   │   │   └── cold-outreach/[id]/page.tsx # Cold outreach details (editable)
│   │   └── clients/     # Clients management
│   │       └── page.tsx # Clients page (/admin/clients)
│   └── layout.tsx       # Root layout
├── components/
│   ├── admin/           # Admin-specific components
│   │   ├── AdminNavigation.tsx   # Dock navigation
│   │   ├── Dashboard.tsx         # Dashboard component
│   │   ├── LeadsManagement.tsx   # 5-table leads system
│   │   └── ClientsManagement.tsx # Client management UI
│   ├── magicui/         # Magic UI components
│   │   └── dock.tsx     # Updated dock component
│   └── ui/              # shadcn/ui components
├── lib/
│   └── utils.ts         # Utility functions
├── types/
│   └── admin.ts         # TypeScript type definitions
└── docs-prd.md          # Product Requirements Document

📊 Current Status

✅ Completed

• Next.js setup with TypeScript & Tailwind CSS
• shadcn/ui component library integration
• Magic UI Dock Navigation - Professional macOS-style dock with:
  • Route-based navigation (/admin, /admin/leads, /admin/clients)
  • Smooth magnification effects with spring animations
  • Active state indicators with orange highlights
  • Fixed bottom positioning for universal access
  • Dark theme integration
• Modular Admin Architecture with separate pages and components
• Admin Dashboard (/admin) with live metrics cards and recent activity
• Professional Leads CRM System (/admin/leads):
  • 5 Specialized Tables with Tab Navigation:
    • 🤖 AI Chatbot Leads - Conversation tracking, AI scoring, intent analysis (Read-only)
    • 🌐 Website Contact Forms - Inquiry messages, services, budget ranges (Read-only)
    • 📱 Social Media Leads - Platform tracking, engagement analysis, profile links (Read-only)
    • 📝 Custom Leads - Manual entry for conferences, networking, partnerships (Editable)
    • ❄️ Cold Outreach Leads - Campaign tracking, templates, lead temperature (Editable)
  • Advanced Table Features:
    • Column sorting with visual indicators
    • Source-specific filtering (status, platform, priority, temperature)
    • Real-time search across all data
    • Pagination with customizable page sizes
    • Responsive design with progressive disclosure
  • Dedicated Detail Pages:
    • Full-page lead details instead of cramped modals
    • Source-specific layouts optimized for each lead type
    • Inline editing for Custom and Cold Outreach leads
    • Quick action buttons and status management
    • Clickable table rows for instant navigation
  • Professional UX:
    • Color-coded themes for each lead source
    • Smart navigation with breadcrumbs
    • Action button prevention on row clicks
    • Loading states and form validation
• Clients Management (/admin/clients) with search and filtering
• Full Dark Theme with orange accents throughout
• Responsive design for all screen sizes
• TypeScript interfaces and type safety

🚧 In Progress

• Database integration
• Authentication system

📋 Planned

• AI-powered PRD generation
• Client portal
• Email integration
• File upload and management
• Invoice generation
• Analytics integration

🎯 Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run ESLint
npm run lint

# Run tests (when added)
npm test

📖 Documentation

• Product Requirements Document - Comprehensive project specifications
• Next.js Documentation
• shadcn/ui Documentation
• Magic UI Documentation

🤝 Contributing

This is an internal project for web agency management. For questions or suggestions, please reach out to the development team.

📄 License

Private project - All rights reserved.