Skip to main content

Admin Setup

Configure admin access and start managing your Gully Sports application. This guide covers everything from initial setup to accessing the admin dashboard.

Overview​

The admin panel provides comprehensive business management tools:

Core Features​

  • 📦 Inventory Management - Products, stock levels, pricing
  • 🏏 Lane Management - Cricket lanes, pricing tiers, availability
  • 📅 Bookings Management - View and manage customer bookings
  • 🛍️ Orders Management - Track purchases and order history
  • 📊 Dashboard - Overview stats and recent activity
  • 💳 Payment Integration - Intuit QuickBooks OAuth management

Quick Setup​

The easiest way to set up admin access:

  1. Get Your Supabase User ID

    • Sign up/sign in to your application
    • Open browser developer tools → Console
    • Run: localStorage.getItem('supabase.auth.token')
    • Find your user.id in the JWT

  2. Add to Environment Variables

# .env.local
ADMIN_USER_IDS="user-id-1,user-id-2,user-id-3"

Multiple admin IDs should be comma-separated.

  1. Restart Development Server
npm run dev
  1. Access Admin Panel
    • Navigate to /admin
    • You should now have admin access!
Finding Your User ID

Navigate to /api/admin/intuit/status while logged in - it will show your user ID in the response.

Method 2: Database Update (Alternative)​

If you prefer database-level control:

  1. Connect to CockroachDB

    • Use Prisma Studio: npx prisma studio
    • Or connect directly via SQL client

  2. Update User Role

UPDATE "User"
SET role = 'ADMIN'
WHERE email = 'your-email@example.com';
  1. Verify
SELECT id, email, role, name
FROM "User"
WHERE role = 'ADMIN';

Admin Panel Structure​

/admin
├── / (Dashboard)
│   ├── Overview statistics
│   ├── Quick actions
│   └── Recent activity
│
├── /inventory
│   ├── Product list with images
│   ├── Add/Edit/Delete products
│   ├── Stock management
│   └── Product image uploads
│
├── /bookings
│   ├── View all bookings
│   ├── Booking details
│   └── Customer information
│
├── /orders
│   ├── View all orders
│   ├── Order details
│   └── Payment status
│
└── /lanes
    ├── View all cricket lanes
    ├── Add/Edit/Delete lanes
    ├── Pricing management
    └── Availability settings

First Login​

Step 1: Sign In​

  1. Navigate to /login
  2. Sign in with your configured admin account
  3. Use Google OAuth or email/password

Step 2: Verify Access​

  1. Check navigation header for admin links
  2. Navigate to /admin
  3. You should see the admin dashboard

Step 3: Initial Configuration​

Add Products (if using shop features):

  1. Go to Admin → Inventory
  2. Click "Add Product"
  3. Fill in product details
  4. Upload product images
  5. Set stock levels

Add Cricket Lanes (if using lane rental):

  1. Go to Admin → Lane Management
  2. Click "Add Lane"
  3. Configure pricing tiers
  4. Set availability

Configure Payments:

  1. See Payment Integration Guide
  2. Choose Intuit or Square
  3. Complete OAuth setup (for Intuit)

Security Features​

Authentication​

  • Supabase Auth - Enterprise-grade authentication
  • Session Management - Secure session handling
  • OAuth Support - Google, GitHub, and more

Authorization​

  • Role-Based Access - Only ADMIN role can access admin routes
  • Server-Side Checks - All admin API routes verify authorization
  • Client-Side Protection - Admin UI hidden for non-admin users
  • Middleware Protection - Next.js middleware guards admin routes

Best Practices​

  • ✅ Use unique, strong passwords
  • ✅ Enable 2FA in Supabase dashboard
  • ✅ Regularly audit admin users
  • ✅ Use separate accounts for dev/prod
  • ✅ Never share admin credentials
  • ✅ Rotate access tokens periodically

API Endpoints​

All admin endpoints require authentication and admin role.

Products​

GET / api / admin / products; // List all products
POST / api / admin / products; // Create product
GET / api / admin / products / [id]; // Get single product
PUT / api / admin / products / [id]; // Update product
DELETE / api / admin / products / [id]; // Delete product

Product Images​

GET / api / admin / products / [id] / images; // List product images
POST / api / admin / products / [id] / images; // Add image
PATCH / api / admin / products / [id] / images / [imageId]; // Update image
DELETE / api / admin / products / [id] / images / [imageId]; // Delete image

Lanes​

GET / api / admin / lanes; // List all lanes
POST / api / admin / lanes; // Create lane
GET / api / admin / lanes / [id]; // Get single lane
PUT / api / admin / lanes / [id]; // Update lane
DELETE / api / admin / lanes / [id]; // Delete lane

Upload​

POST / api / admin / upload; // Get signed upload URL

Troubleshooting​

Cannot Access Admin Panel​

Issue: 403 Forbidden or redirected to home

Solutions:

  1. Verify user ID is in ADMIN_USER_IDS
  2. Check that you're logged in
  3. Restart dev server after changing env vars
  4. Clear browser cache and cookies
  5. Check browser console for errors

Admin Nav Not Showing​

Issue: Logged in but no admin links in navigation

Solutions:

  1. Refresh the page
  2. Sign out and sign back in
  3. Verify ADMIN_USER_IDS format (comma-separated, no spaces)
  4. Check that auth session is valid

Database Connection Issues​

Issue: Admin operations fail with database errors

Solutions:

  1. Verify DATABASE_URL in .env.local
  2. Ensure CockroachDB cluster is running
  3. Run npx prisma generate to refresh client
  4. Check database migrations are applied

Image Upload Fails​

Issue: Cannot upload product images

Solutions:

  1. Verify BLOB_READ_WRITE_TOKEN is set
  2. Check Vercel Blob storage is configured
  3. Ensure file size is under 4.5MB
  4. Check browser console for errors

Advanced Configuration​

Custom Admin Roles​

Extend the role system for fine-grained permissions:

// prisma/schema.prisma
enum UserRole {
  USER
  ADMIN
  SUPER_ADMIN  // Full access
  MANAGER      // Limited admin access
}

Audit Logging​

Track admin actions for compliance:

// utils/adminAudit.ts
export async function logAdminAction(
  userId: string,
  action: string,
  details: object
) {
  await prisma.auditLog.create({
    data: {
      userId,
      action,
      details,
      timestamp: new Date(),
    },
  });
}

Custom Dashboard Widgets​

Add business-specific metrics to the dashboard:

// app/admin/AdminDashboardClient.tsx
const customMetrics = {
  todayRevenue: await calculateRevenue("today"),
  activeBookings: await countActiveBookings(),
  topProducts: await getTopSellingProducts(5),
};

Next Steps​

Need help? Check the Admin Authentication Guide or create an issue on GitHub.