PayGuard is a secure, robust system for tracking and verifying payments. This application leverages modern web technologies to provide seamless user authentication, efficient payment management, and document verification.

Deadline: January 13th, 2025, 05:00 UTC
Tech Stack:

• Frontend: Next.js (TypeScript, Tailwind CSS, Shadcn UI)
• Backend: Supabase (Auth and Database)
• Core Features: User authentication, admin dashboard, document uploads, payment tracking

• Secure user authentication using Supabase.
• Role-based access control for users and admins.

• Create, track, and manage payments.
• Admins can approve or reject payments.

• Upload and verify documents with real-time status tracking.
• Admins manage and verify uploaded files.

• User Dashboard: Track payment status and manage uploads.
• Admin Dashboard: Monitor and control payments and documents.

1. Set up Next.js project with required configurations.
2. Installed and configured Supabase SSR (@supabase/ssr, @supabase/supabase-js).
3. Established basic project structure and middleware.
4. Developed frontend pages using Shadcn components and Tailwind CSS.
5. Built reusable components for the frontend.
6. Integrated APIs for Supabase authentication flow.
7. Data Validation with Zod
8. Connected the Supabase Database and Created User with Authetication
9. Created APIs for payment processing.
10. Store Payment information into Payment Tables.
11. Stripe Payment integrated succesfully with a flow.

• Admin Panel: Add functionality of Admin panel.
• Document Upload Functionality: Integrate Supabase Storage for file uploads.
• Dashboards: Build detailed user and admin dashboards.
• Deployment: Deploy the application to production.

payguard/
├── app/
│   ├── auth/            # Authentication Pages
│   ├── (dashboard)/     # User Dashboard Pages
│   ├── admin/           # Admin Dashboard Pages
│   ├── api/             # API Endpoints
│   ├── layout.tsx       # Root Layout
│   └── page.tsx         # Landing Page
├── components/          # Reusable Components
│   ├── auth/            # Authentication Components
│   ├── dashboard/       # Dashboard Components
│   ├── admin/           # Admin Components
│   ├── layout/          # Layout Components (Header, Footer, Sidebar)
│   ├── ui/              # UI Components (Button, Card, etc.)
│   └── shared/          # Shared Components (Loading Spinner, etc.)
├── lib/                 # Utilities and Configuration
│   ├── supabase/        # Supabase Client and Server
│   ├── utils/           # Helper Functions (Auth, Date Formatting)
│   └── validations/     # Data Validation Schemas (zod)
├── public/              # Public Assets (Images, Icons)
├── middleware.ts        # Middleware for Authentication
├── next.config.js       # Next.js Configuration
├── tailwind.config.ts   # Tailwind CSS Configuration
└── tsconfig.json        # TypeScript Configuration

CREATE TABLE profiles (
  id UUID REFERENCES auth.users NOT NULL PRIMARY KEY,
  first_name VARCHAR(50) NOT NULL,
  last_name VARCHAR(50) NOT NULL,
  email VARCHAR(255) NOT NULL,
  role VARCHAR(20) DEFAULT 'user' NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

alter table profiles enable row level security;

create policy "Profiles are viewable, editable, deletable by users who created them."
on profiles for all
using ( auth.uid() = id );

CREATE TABLE payments (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  amount NUMERIC(10,2) NOT NULL,
  status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'rejected')),
  user_id UUID REFERENCES auth.users NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  stripe_payment_intent_id TEXT;
);

alter table payments enable row level security;

create policy "Users can view their own payments"
on payments for select
using ( auth.uid() = user_id );

create policy "Users can create their own payments"
on payments for insert
with check ( auth.uid() = user_id );

create policy "Users can update their own pending payments"
on payments for update
using ( auth.uid() = user_id AND status = 'pending' );

create policy "Admins can view all payments"
on payments for select
using (
  auth.uid() IN (
    SELECT id FROM profiles WHERE role = 'admin'
  )
);

create policy "Admins can update any payment status"
on payments for update
using (
  auth.uid() IN (
    SELECT id FROM profiles WHERE role = 'admin'
  )
);

• POST /api/auth/signup: Register users.
• POST /api/auth/login: Login users.

• POST /api/create-payment: Create a payment request.
  • Validate input (title, amount).
  • Assign the logged-in user as user_id.
  • Default status: pending.
• GET /api/payment: Retrieve payment records.
  • Users: View their payments.
  • Admins: View all payments.
• PUT /api/payment/:id: Update payment status (admin only).
  • Approve or reject payments.
• DELETE /api/cancel-payment: Cancel a payment request.
  • Cancel the payment request according to the user_id.

• POST /api/documents: Upload a document.
  • Validate file type and size (max: 5 MB).
  • Store the file in Supabase Storage and save metadata in the Documents table.
  • Default status: pending.
• PUT /api/documents/:id: Update verification status (admin only).
  • Mark documents as approved or rejected.

• GET /api/dashboard/payments-summary: Retrieve payment summaries (total payments, breakdown by status).
• GET /api/dashboard/payments: Filter payments by status/date.

1. Clone the repository:

   git clone https://github.com/your-repo/payguard.git
   cd payguard

2. Install dependencies:

   npm install

3. Configure Supabase:

   • Add your Supabase credentials in .env:

     NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
     NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>
     

4. Start the development server:

   npm run dev

5. Access the application at http://localhost:3000.

• Use Vercel for deploying the frontend.
• Use Supabase for database and authentication.

1. Fork the repository.
2. Create a feature branch:

   git checkout -b feature-name

3. Commit changes:

   git commit -m "Add feature name"

4. Push to the branch:

   git push origin feature-name

5. Create a pull request.

This project is licensed under the MIT License.