Supabase Admin Panel - v0 by Vercel

Perfect! Now that you have the ADMIN_CREATION_KEY environment variable set up, you can create your first admin user. Here's how to get started with your venue management admin panel:

Creating Your First Admin User

You have a few options to create the first admin user:

Option 1: Using the API Endpoint

You can make a POST request to the /api/create-admin endpoint with the following JSON payload:

{
  "email": "your-admin@example.com",
  "password": "your-secure-password",
  "adminKey": "your-admin-creation-key-value"
}

You can use tools like Postman, cURL, or a simple fetch request to do this.

Option 2: Using the Node.js Script

Make sure your environment variables are set (SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY)
Run the script from your project root:
node scripts/create-first-admin.js
Follow the prompts to enter your admin email and password

Getting Started with the Admin Panel

Once you've created your admin user:

Log in to the admin panel:
- Navigate to the /login page
- Enter your admin credentials
Create your first venue:
- Go to Venues → Add Venue
- Fill in the venue details across all tabs
- Upload images, set location, add timeslots, and select amenities/categories
Manage your venues:
- View all venues on the main Venues page
- Edit or delete venues as needed
- Toggle venue status between active and inactive

Features Available

Your admin panel includes:

Complete venue management with all the fields you requested
Location selection via map (note: you'll need to add your Google Maps API key)
Multiple image uploads with cover image selection
Timeslot management with day, time, and price range settings
Amenities and categories selection from predefined lists
User authentication with login and password reset functionality

Next Steps

You might want to:

Add your Google Maps API key in the venue-location-map.tsx component
Customize the predefined amenities and categories in the database
Add additional admin users as needed
Implement any additional features specific to your business needs

Let me know if you need help with any of these steps or have any questions about using the admin panel!

458d ago

create an admin user for me with email :salisbinsalman0@gmail.com and pw: 11221122

458d ago

I'll guide you through creating an admin user with the credentials you provided. Since I don't have direct access to your Supabase instance, you'll need to use the API endpoint we created.

Here's how to create the admin user:

Using the API Endpoint

You can make a POST request to your /api/create-admin endpoint. Here's how to do it:

Option 1: Using cURL

curl -X POST https://your-vercel-deployment-url/api/create-admin \
  -H "Content-Type: application/json" \
  -d '{
    "email": "salisbinsalman0@gmail.com",
    "password": "11221122",
    "adminKey": "YOUR_ADMIN_CREATION_KEY_VALUE"
  }'

Replace YOUR_ADMIN_CREATION_KEY_VALUE with the value you set for the ADMIN_CREATION_KEY environment variable.

Option 2: Using the Browser Console

If you're already on your deployed site, you can open the browser console (F12) and run:

fetch('/api/create-admin', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: 'salisbinsalman0@gmail.com',
    password: '11221122',
    adminKey: 'YOUR_ADMIN_CREATION_KEY_VALUE'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Option 3: Create a Simple Admin Creation Page

If you prefer a UI approach, you can temporarily create a simple page to create the admin user:

Create a new file at app/create-admin-page/page.tsx:

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertCircle, Loader2 } from 'lucide-react';

export default function CreateAdminPage() {
  const [adminKey, setAdminKey] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const handleCreateAdmin = async () => {
    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/create-admin', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'salisbinsalman0@gmail.com',
          password: '11221122',
          adminKey
        })
      });

      const data = await response.json();
      
      if (!response.ok) {
        throw new Error(data.error || 'Failed to create admin user');
      }
      
      setSuccess('Admin user created successfully! You can now log in.');
    } catch (err: any) {
      setError(err.message || 'An error occurred');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-muted/40">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Create Admin User</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
          
          {success && (
            <Alert className="bg-green-50 text-green-800 border-green-200">
              <AlertDescription>{success}</AlertDescription>
            </Alert>
          )}
          
          <div className="space-y-2">
            <Label htmlFor="adminKey">Admin Creation Key</Label>
            <Input
              id="adminKey"
              type="password"
              value={adminKey}
              onChange={(e) => setAdminKey(e.target.value)}
              placeholder="Enter your admin creation key"
            />
            <p className="text-sm text-muted-foreground">
              This will create an admin user with:<br />
              Email: salisbinsalman0@gmail.com<br />
              Password: 11221122
            </p>
          </div>
        </CardContent>
        <CardFooter>
          <Button 
            className="w-full" 
            onClick={handleCreateAdmin}
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Creating Admin...
              </>
            ) : (
              'Create Admin User'
            )}
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

Visit /create-admin-page on your deployed site
Enter your admin creation key and click the button
After successful creation, you can delete this page

After creating the admin user, you can log in at /login with:

Email: salisbinsalman0@gmail.com
Password: 11221122

Would you like me to implement any of these options for you?

458d ago

i wanted to create signup with login, but i don't want any confirmation link thing, just simple signup

458d ago

Perfect! Now that you have the ADMIN_CREATION_KEY environment variable set up, you can create your first admin user. Here's how to get started with your venue management admin panel:

Creating Your First Admin User

You have a few options to create the first admin user:

Option 1: Using the API Endpoint

You can make a POST request to the /api/create-admin endpoint with the following JSON payload:

{
  "email": "your-admin@example.com",
  "password": "your-secure-password",
  "adminKey": "your-admin-creation-key-value"
}

You can use tools like Postman, cURL, or a simple fetch request to do this.

Option 2: Using the Node.js Script

Make sure your environment variables are set (SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY)
Run the script from your project root:
node scripts/create-first-admin.js
Follow the prompts to enter your admin email and password

Getting Started with the Admin Panel

Once you've created your admin user:

Log in to the admin panel:
- Navigate to the /login page
- Enter your admin credentials
Create your first venue:
- Go to Venues → Add Venue
- Fill in the venue details across all tabs
- Upload images, set location, add timeslots, and select amenities/categories
Manage your venues:
- View all venues on the main Venues page
- Edit or delete venues as needed
- Toggle venue status between active and inactive

Features Available

Your admin panel includes:

Complete venue management with all the fields you requested
Location selection via map (note: you'll need to add your Google Maps API key)
Multiple image uploads with cover image selection
Timeslot management with day, time, and price range settings
Amenities and categories selection from predefined lists
User authentication with login and password reset functionality

Next Steps

You might want to:

Add your Google Maps API key in the venue-location-map.tsx component
Customize the predefined amenities and categories in the database
Add additional admin users as needed
Implement any additional features specific to your business needs

Let me know if you need help with any of these steps or have any questions about using the admin panel!

458d ago

create an admin user for me with email :salisbinsalman0@gmail.com and pw: 11221122

458d ago

I'll guide you through creating an admin user with the credentials you provided. Since I don't have direct access to your Supabase instance, you'll need to use the API endpoint we created.

Here's how to create the admin user:

Using the API Endpoint

You can make a POST request to your /api/create-admin endpoint. Here's how to do it:

Option 1: Using cURL

curl -X POST https://your-vercel-deployment-url/api/create-admin \
  -H "Content-Type: application/json" \
  -d '{
    "email": "salisbinsalman0@gmail.com",
    "password": "11221122",
    "adminKey": "YOUR_ADMIN_CREATION_KEY_VALUE"
  }'

Replace YOUR_ADMIN_CREATION_KEY_VALUE with the value you set for the ADMIN_CREATION_KEY environment variable.

Option 2: Using the Browser Console

If you're already on your deployed site, you can open the browser console (F12) and run:

fetch('/api/create-admin', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: 'salisbinsalman0@gmail.com',
    password: '11221122',
    adminKey: 'YOUR_ADMIN_CREATION_KEY_VALUE'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Option 3: Create a Simple Admin Creation Page

If you prefer a UI approach, you can temporarily create a simple page to create the admin user:

Create a new file at app/create-admin-page/page.tsx:

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { AlertCircle, Loader2 } from 'lucide-react';

export default function CreateAdminPage() {
  const [adminKey, setAdminKey] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const handleCreateAdmin = async () => {
    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/create-admin', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: 'salisbinsalman0@gmail.com',
          password: '11221122',
          adminKey
        })
      });

      const data = await response.json();
      
      if (!response.ok) {
        throw new Error(data.error || 'Failed to create admin user');
      }
      
      setSuccess('Admin user created successfully! You can now log in.');
    } catch (err: any) {
      setError(err.message || 'An error occurred');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-muted/40">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Create Admin User</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}
          
          {success && (
            <Alert className="bg-green-50 text-green-800 border-green-200">
              <AlertDescription>{success}</AlertDescription>
            </Alert>
          )}
          
          <div className="space-y-2">
            <Label htmlFor="adminKey">Admin Creation Key</Label>
            <Input
              id="adminKey"
              type="password"
              value={adminKey}
              onChange={(e) => setAdminKey(e.target.value)}
              placeholder="Enter your admin creation key"
            />
            <p className="text-sm text-muted-foreground">
              This will create an admin user with:<br />
              Email: salisbinsalman0@gmail.com<br />
              Password: 11221122
            </p>
          </div>
        </CardContent>
        <CardFooter>
          <Button 
            className="w-full" 
            onClick={handleCreateAdmin}
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Creating Admin...
              </>
            ) : (
              'Create Admin User'
            )}
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}

Visit /create-admin-page on your deployed site
Enter your admin creation key and click the button
After successful creation, you can delete this page

After creating the admin user, you can log in at /login with:

Email: salisbinsalman0@gmail.com
Password: 11221122

Would you like me to implement any of these options for you?

i wanted to create signup with login, but i don't want any confirmation link thing, just simple signup

458d ago