🌿 Hemp Dashboard

A comprehensive business management dashboard for hemp companies, built with Next.js 14 and modern web technologies. This application provides customer management, email marketing, analytics, and data visualization tools specifically designed for the hemp industry.

✨ Features

📊 Dashboard Analytics

• Real-time Metrics: Customer count, loyalty rates, average age, and popular products
• Demographic Charts: Age groups, gender distribution, income levels, and education breakdowns
• Product Analytics: Most popular hemp products and customer preferences
• Interactive Visualizations: Built with Recharts for responsive data display

👥 Customer Management

• Customer Profiles: Comprehensive customer data collection and management
• Demographic Tracking: Age, gender, income, education, and location data
• Product Preferences: Track customer interest in different hemp products
• Loyalty Program: Member status and engagement tracking

📧 Email Marketing System

• Automated Email Generation: Welcome, follow-up, and promotional emails
• Email Templates: Personalized content based on customer preferences
• Status Tracking: Monitor email delivery and engagement
• Bulk Operations: Send emails to multiple customers efficiently

🎯 Business Intelligence

• Customer Insights: Detailed analytics on customer behavior and preferences
• Market Analysis: Understanding of hemp product popularity and trends
• Engagement Metrics: Track customer loyalty and retention rates
• Data Export: Generate reports for business analysis

🛠️ Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Heroicons - Beautiful SVG icons
• Headless UI - Accessible UI components
• Recharts - Data visualization library

Backend

• Next.js API Routes - Serverless API endpoints
• Prisma - Type-safe database ORM
• SQLite - Lightweight database (development)
• Faker.js - Mock data generation

Development Tools

• Node.js - Runtime environment
• npm - Package management
• Git - Version control

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/yourusername/hemp-dashboard.git
   cd hemp-dashboard

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up the database

   npx prisma generate
   npx prisma db push

4. Start the development server

   npm run dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

hemp-dashboard/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── customers/     # Customer management endpoints
│   │   ├── emails/        # Email system endpoints
│   │   ├── stats/         # Analytics endpoints
│   │   └── mock-data/     # Mock data generation
│   ├── components/        # Reusable UI components
│   │   ├── AddCustomerModal.tsx
│   │   ├── DashboardCard.tsx
│   │   ├── DemographicCharts.tsx
│   │   ├── EmailPreview.tsx
│   │   ├── EmailStatus.tsx
│   │   ├── GenerateMockDataModal.tsx
│   │   └── Navbar.tsx
│   ├── customers/         # Customer management page
│   ├── dashboard/         # Main dashboard
│   ├── emails/           # Email management page
│   ├── landing/          # Landing page
│   └── globals.css       # Global styles
├── prisma/
│   └── schema.prisma     # Database schema
├── public/
│   └── images/           # Static assets
├── tailwind.config.ts    # Tailwind configuration
└── package.json          # Dependencies and scripts

🎨 Key Components

Dashboard

• Metrics Cards: Display key business metrics
• Demographic Charts: Visualize customer data
• Mock Data Generator: Create test data for development

Customer Management

• Customer List: View and manage all customers
• Add Customer Form: Comprehensive customer data collection
• Customer Details: View individual customer profiles

Email System

• Email List: View all sent emails
• Email Preview: Preview email content
• Status Tracking: Monitor email delivery status
• Bulk Operations: Send emails to multiple customers

🗄️ Database Schema

Customer Model

model Customer {
  id                      String   @id @default(cuid())
  firstName               String
  lastName                String
  zipCode                 String
  phoneNumber             String
  email                   String   @unique
  age                     Int
  gender                  String
  preferredProducts       String
  primaryReason          String
  frequencyOfUse          String
  preferredShoppingMethod String
  discoveryMethod         String
  incomeRange             String
  occupation              String
  educationLevel          String
  preferredCommunication  String
  interestsHobbies        String
  loyaltyProgramMember    Boolean
  createdAt               DateTime @default(now())
  updatedAt               DateTime @updatedAt
  emails                  Email[]
}

Email Model

model Email {
  id         String   @id @default(cuid())
  customerId String
  customer   Customer @relation(fields: [customerId], references: [id])
  emailType  String
  subject    String
  body       String
  status     String
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
}

🔧 Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Database
npx prisma generate  # Generate Prisma client
npx prisma db push   # Push schema to database
npx prisma studio    # Open Prisma Studio

🌐 API Endpoints

Customers

• GET /api/customers - Get all customers
• POST /api/customers - Create new customer

Emails

• GET /api/emails - Get all emails with pagination
• POST /api/emails/generate - Generate emails for customers
• POST /api/emails/send - Send emails

Analytics

• GET /api/stats - Get dashboard statistics and demographics

Mock Data

• POST /api/mock-data - Generate mock customer and email data

🎯 Usage Examples

Adding a Customer

const customerData = {
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]",
  zipCode: "12345",
  // ... other fields
};

const response = await fetch('/api/customers', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(customerData)
});

Generating Mock Data

const response = await fetch('/api/mock-data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ count: 50 })
});

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with zero configuration

Other Platforms

• Netlify: Compatible with Next.js
• Railway: Easy deployment with database
• DigitalOcean: VPS deployment option

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind CSS for styling
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js for the amazing framework
• Prisma for the excellent ORM
• Tailwind CSS for the utility-first CSS
• Recharts for beautiful charts
• Heroicons for the icon library

📞 Support

If you have any questions or need help:

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

---

Built with ❤️ for the hemp industry