CHRIS TECH PayFlow

A premium, production-ready internal payment management platform for CHRIS TECH.

Overview

CHRIS TECH PayFlow is a comprehensive payment management system designed exclusively for internal use by CHRIS TECH administrators. The platform allows you to create payment links, manage transactions, generate invoices and receipts, and monitor all payment activity from a single, beautiful dashboard.

Features

• Admin-Only Access: Secure authentication with Supabase Auth - only CHRIS TECH administrators can access the dashboard
• Payment Links: Create unlimited payment links with customizable options, QR codes, and usage tracking
• Checkout Pages: Beautiful, responsive checkout pages powered by Paystack
• Payment Processing: Full Paystack integration with webhook handling and payment verification
• Customer Management: Automatic customer profile creation with payment history tracking
• Transaction Tracking: Search, filter, and export transactions with CSV/Excel support
• Invoice Generation: Create professional invoices with PDF download, print, and email capabilities
• Receipt Generation: Automatic receipt generation for all successful payments
• Email Notifications: Resend-powered email notifications for payments, invoices, and summaries
• QR Code Generation: Automatic QR code generation for all payment links
• Real-time Analytics: Dashboard with revenue metrics, payment status, and customer activity
• Premium Design: Beautiful UI inspired by Stripe, Mercury, and Linear
• Security: Row-level security, audit logs, rate limiting, and CSRF protection

Tech Stack

• Framework: Next.js 15 App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Components: shadcn/ui
• Animations: Framer Motion
• Database: Supabase PostgreSQL
• Authentication: Supabase Auth
• Storage: Supabase Storage
• Payment: Paystack API
• Email: Resend
• Forms: React Hook Form + Zod
• Data Fetching: TanStack Query
• Charts: Recharts
• PDF Generation: jsPDF + jsPDF-AutoTable
• QR Codes: qrcode

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account
• Paystack account
• Resend account

Installation

1. Clone the repository:

git clone <repository-url>
cd chris-tech-payflow

2. Install dependencies:

npm install

3. Set up environment variables:

cp env.example .env.local

Edit .env.local with your credentials:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Paystack
PAYSTACK_SECRET_KEY=your_paystack_secret_key
PAYSTACK_PUBLIC_KEY=your_paystack_public_key

# Resend
RESEND_API_KEY=your_resend_api_key

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_NAME=CHRIS TECH PayFlow

# Email
NEXT_PUBLIC_FROM_EMAIL=noreply@christech.com
NEXT_PUBLIC_SUPPORT_EMAIL=support@christech.com

Database Setup

1. Create a new Supabase project

2. Run the SQL migrations in order:

   • supabase/migrations/001_initial_schema.sql
   • supabase/migrations/002_rls_policies.sql
   • supabase/migrations/003_storage_buckets.sql

3. Create storage buckets:

   • logos (public)
   • receipts (private)
   • invoices (private)
   • attachments (private)

Create Admin User

1. Go to Supabase Dashboard > Authentication
2. Create a new user with your admin email
3. Insert the user into the admin_users table:

INSERT INTO admin_users (user_id, email, full_name, role, is_active)
VALUES ('your-user-id', 'admin@christech.com', 'Admin User', 'admin', true);

Run Development Server

npm run dev

Open http://localhost:3000 to see the application.

Project Structure

src/
├── app/
│   ├── api/              # API routes
│   │   ├── payments/     # Payment initialization and verification
│   │   └── webhooks/     # Paystack webhook handlers
│   ├── auth/             # Authentication pages
│   ├── dashboard/        # Main dashboard
│   ├── payment-links/    # Payment link management
│   ├── customers/        # Customer management
│   ├── transactions/     # Transaction tracking
│   ├── invoices/         # Invoice management
│   ├── receipts/         # Receipt management
│   ├── settings/         # Settings page
│   ├── pay/              # Public checkout pages
│   └── page.tsx          # Landing page
├── components/
│   ├── ui/               # shadcn/ui components
│   ├── dashboard-layout.tsx
│   ├── dashboard-sidebar.tsx
│   └── dashboard-header.tsx
├── lib/
│   ├── supabase/         # Supabase client and helpers
│   ├── email/            # Email templates
│   ├── qr-code.ts        # QR code generation
│   ├── security/         # Security utilities
│   └── utils.ts          # Utility functions
└── types/
    └── supabase.ts       # TypeScript types

Deployment

Vercel

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• AWS Amplify
• Digital Ocean App Platform

Security Features

• Row Level Security (RLS): Database-level access control
• Authentication: Supabase Auth with email/password
• Audit Logs: Track all admin actions
• Rate Limiting: Prevent API abuse
• CSRF Protection: Cross-site request forgery protection
• Webhook Verification: Paystack webhook signature verification
• Encrypted Secrets: Environment variables for sensitive data

Support

For support, contact:

• Email: support@christech.com
• Phone: +234 800 000 0000

License

Copyright © 2024 CHRIS TECH. All rights reserved.