733 lines
29 KiB
TypeScript
733 lines
29 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Textarea } from '@/components/ui/textarea'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Switch } from '@/components/ui/switch'
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||
import {
|
||
Settings,
|
||
DollarSign,
|
||
Users,
|
||
Package,
|
||
Mail,
|
||
Shield,
|
||
Database,
|
||
Plus,
|
||
Edit,
|
||
Trash2,
|
||
Save,
|
||
RefreshCw
|
||
} from 'lucide-react'
|
||
import { motion } from 'framer-motion'
|
||
import { toast } from 'sonner'
|
||
|
||
interface CommissionSetting {
|
||
id: string
|
||
level: number
|
||
percentage: number
|
||
isActive: boolean
|
||
}
|
||
|
||
interface Category {
|
||
id: string
|
||
name: string
|
||
description: string | null
|
||
image: string | null
|
||
isActive: boolean
|
||
productCount: number
|
||
}
|
||
|
||
interface SystemSettings {
|
||
siteName: string
|
||
siteDescription: string
|
||
supportEmail: string
|
||
minimumPayout: number
|
||
enableReferrals: boolean
|
||
enableCommissions: boolean
|
||
maintenanceMode: boolean
|
||
allowRegistration: boolean
|
||
}
|
||
|
||
export default function AdminSettingsPage() {
|
||
const [commissionSettings, setCommissionSettings] = useState<CommissionSetting[]>([])
|
||
const [categories, setCategories] = useState<Category[]>([])
|
||
const [systemSettings, setSystemSettings] = useState<SystemSettings>({
|
||
siteName: 'Padmaaja Rasooi',
|
||
siteDescription: 'Premium quality rice products and grains. Experience the finest rice sourced directly from local farmers.',
|
||
supportEmail: 'info@padmajarice.com',
|
||
minimumPayout: 1000,
|
||
enableReferrals: true,
|
||
enableCommissions: true,
|
||
maintenanceMode: false,
|
||
allowRegistration: true
|
||
})
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [editingCommission, setEditingCommission] = useState<CommissionSetting | null>(null)
|
||
const [editingCategory, setEditingCategory] = useState<Category | null>(null)
|
||
const [newCommission, setNewCommission] = useState({ level: 1, percentage: 10, isActive: true })
|
||
const [newCategory, setNewCategory] = useState({ name: '', description: '', image: '' })
|
||
|
||
useEffect(() => {
|
||
fetchSettings()
|
||
}, [])
|
||
|
||
const fetchSettings = async () => {
|
||
try {
|
||
setLoading(true)
|
||
const [commissionsRes, categoriesRes, systemRes] = await Promise.all([
|
||
fetch('/api/admin/settings/commissions'),
|
||
fetch('/api/admin/settings/categories'),
|
||
fetch('/api/admin/settings/system')
|
||
])
|
||
|
||
const [commissionsData, categoriesData, systemData] = await Promise.all([
|
||
commissionsRes.json(),
|
||
categoriesRes.json(),
|
||
systemRes.json()
|
||
])
|
||
|
||
setCommissionSettings(commissionsData.settings || [])
|
||
setCategories(categoriesData.categories || [])
|
||
setSystemSettings(prev => ({ ...prev, ...systemData }))
|
||
} catch (error) {
|
||
console.error('Error fetching settings:', error)
|
||
toast.error('Failed to load settings')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const saveSystemSettings = async () => {
|
||
try {
|
||
setSaving(true)
|
||
const response = await fetch('/api/admin/settings/system', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(systemSettings)
|
||
})
|
||
|
||
if (!response.ok) throw new Error('Failed to save settings')
|
||
|
||
toast.success('System settings saved successfully')
|
||
|
||
// Show warning if maintenance mode was enabled
|
||
if (systemSettings.maintenanceMode) {
|
||
toast.warning('⚠️ Maintenance mode enabled! Public site is now offline.')
|
||
} else {
|
||
toast.success('✅ Maintenance mode disabled. Public site is now online.')
|
||
}
|
||
} catch (error) {
|
||
console.error('Error saving system settings:', error)
|
||
toast.error('Failed to save system settings')
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const saveCommissionSetting = async (setting: CommissionSetting) => {
|
||
try {
|
||
const response = await fetch(`/api/admin/settings/commissions/${setting.id}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(setting)
|
||
})
|
||
|
||
if (!response.ok) throw new Error('Failed to save commission setting')
|
||
|
||
toast.success('Commission setting saved successfully')
|
||
fetchSettings()
|
||
setEditingCommission(null)
|
||
} catch (error) {
|
||
console.error('Error saving commission setting:', error)
|
||
toast.error('Failed to save commission setting')
|
||
}
|
||
}
|
||
|
||
const addCommissionSetting = async () => {
|
||
try {
|
||
const response = await fetch('/api/admin/settings/commissions', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(newCommission)
|
||
})
|
||
|
||
if (!response.ok) throw new Error('Failed to add commission setting')
|
||
|
||
toast.success('Commission setting added successfully')
|
||
setNewCommission({ level: 1, percentage: 10, isActive: true })
|
||
fetchSettings()
|
||
} catch (error) {
|
||
console.error('Error adding commission setting:', error)
|
||
toast.error('Failed to add commission setting')
|
||
}
|
||
}
|
||
|
||
const deleteCommissionSetting = async (id: string) => {
|
||
try {
|
||
const response = await fetch(`/api/admin/settings/commissions/${id}`, {
|
||
method: 'DELETE'
|
||
})
|
||
|
||
if (!response.ok) throw new Error('Failed to delete commission setting')
|
||
|
||
toast.success('Commission setting deleted successfully')
|
||
fetchSettings()
|
||
} catch (error) {
|
||
console.error('Error deleting commission setting:', error)
|
||
toast.error('Failed to delete commission setting')
|
||
}
|
||
}
|
||
|
||
const saveCategory = async (category: Category) => {
|
||
try {
|
||
const url = category.id.startsWith('new')
|
||
? '/api/admin/settings/categories'
|
||
: `/api/admin/settings/categories/${category.id}`
|
||
|
||
const response = await fetch(url, {
|
||
method: category.id.startsWith('new') ? 'POST' : 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
name: category.name,
|
||
description: category.description,
|
||
image: category.image,
|
||
isActive: category.isActive
|
||
})
|
||
})
|
||
|
||
if (!response.ok) throw new Error('Failed to save category')
|
||
|
||
toast.success('Category saved successfully')
|
||
fetchSettings()
|
||
setEditingCategory(null)
|
||
setNewCategory({ name: '', description: '', image: '' })
|
||
} catch (error) {
|
||
console.error('Error saving category:', error)
|
||
toast.error('Failed to save category')
|
||
}
|
||
}
|
||
|
||
const deleteCategory = async (id: string) => {
|
||
try {
|
||
const response = await fetch(`/api/admin/settings/categories/${id}`, {
|
||
method: 'DELETE'
|
||
})
|
||
|
||
if (!response.ok) throw new Error('Failed to delete category')
|
||
|
||
toast.success('Category deleted successfully')
|
||
fetchSettings()
|
||
} catch (error) {
|
||
console.error('Error deleting category:', error)
|
||
toast.error('Failed to delete category')
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
|
||
<div className="w-16 h-16 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 p-6">
|
||
<div className="max-w-7xl mx-auto space-y-8">
|
||
{/* Header with maintenance warning */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="space-y-4"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
|
||
System Settings
|
||
</h1>
|
||
<p className="text-gray-600 mt-2">Manage your platform configuration and settings</p>
|
||
</div>
|
||
<Button onClick={() => fetchSettings()} variant="outline">
|
||
<RefreshCw className="h-4 w-4 mr-2" />
|
||
Refresh
|
||
</Button>
|
||
</div>
|
||
|
||
{systemSettings.maintenanceMode && (
|
||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||
<div className="flex items-center space-x-2">
|
||
<Settings className="h-5 w-5 text-red-600" />
|
||
<h3 className="font-medium text-red-900">Maintenance Mode Active</h3>
|
||
</div>
|
||
<div className="mt-2 space-y-1">
|
||
<p className="text-sm text-red-700">
|
||
The public website is currently offline for regular users.
|
||
</p>
|
||
<p className="text-sm text-red-600 font-medium">
|
||
✅ Admin users (like you) can still access all pages normally.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
|
||
<Tabs defaultValue="system" className="space-y-6">
|
||
<TabsList className="grid w-full grid-cols-4">
|
||
<TabsTrigger value="system" className="flex items-center space-x-2">
|
||
<Settings className="h-4 w-4" />
|
||
<span>System</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="commissions" className="flex items-center space-x-2">
|
||
<DollarSign className="h-4 w-4" />
|
||
<span>Commissions</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="categories" className="flex items-center space-x-2">
|
||
<Package className="h-4 w-4" />
|
||
<span>Categories</span>
|
||
</TabsTrigger>
|
||
<TabsTrigger value="security" className="flex items-center space-x-2">
|
||
<Shield className="h-4 w-4" />
|
||
<span>Security</span>
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* System Settings */}
|
||
<TabsContent value="system">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="space-y-6"
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center space-x-2">
|
||
<Settings className="h-5 w-5" />
|
||
<span>General Settings</span>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<Label htmlFor="siteName">Site Name</Label>
|
||
<Input
|
||
id="siteName"
|
||
value={systemSettings.siteName}
|
||
onChange={(e) => setSystemSettings(prev => ({ ...prev, siteName: e.target.value }))}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="supportEmail">Support Email</Label>
|
||
<Input
|
||
id="supportEmail"
|
||
type="email"
|
||
value={systemSettings.supportEmail}
|
||
onChange={(e) => setSystemSettings(prev => ({ ...prev, supportEmail: e.target.value }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Label htmlFor="siteDescription">Site Description</Label>
|
||
<Textarea
|
||
id="siteDescription"
|
||
value={systemSettings.siteDescription}
|
||
onChange={(e) => setSystemSettings(prev => ({ ...prev, siteDescription: e.target.value }))}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<Label htmlFor="minimumPayout">Minimum Payout Amount (₹)</Label>
|
||
<Input
|
||
id="minimumPayout"
|
||
type="number"
|
||
value={systemSettings.minimumPayout}
|
||
onChange={(e) => setSystemSettings(prev => ({ ...prev, minimumPayout: parseFloat(e.target.value) }))}
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<Label>Enable Referral System</Label>
|
||
<p className="text-sm text-gray-500">Allow users to refer others</p>
|
||
</div>
|
||
<Switch
|
||
checked={systemSettings.enableReferrals}
|
||
onCheckedChange={(checked) => setSystemSettings(prev => ({ ...prev, enableReferrals: checked }))}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<Label>Enable Commissions</Label>
|
||
<p className="text-sm text-gray-500">Enable commission calculations</p>
|
||
</div>
|
||
<Switch
|
||
checked={systemSettings.enableCommissions}
|
||
onCheckedChange={(checked) => setSystemSettings(prev => ({ ...prev, enableCommissions: checked }))}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<Label>Allow Registration</Label>
|
||
<p className="text-sm text-gray-500">Allow new user registrations</p>
|
||
</div>
|
||
<Switch
|
||
checked={systemSettings.allowRegistration}
|
||
onCheckedChange={(checked) => setSystemSettings(prev => ({ ...prev, allowRegistration: checked }))}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between p-4 border rounded-lg bg-red-50 border-red-200">
|
||
<div>
|
||
<Label className="text-red-900 font-medium">Maintenance Mode</Label>
|
||
<p className="text-sm text-red-700 mt-1">Put site in maintenance mode</p>
|
||
<p className="text-xs text-red-600 font-medium">
|
||
⚠️ This will take the public site offline for regular users. Admin users will still have full access.
|
||
</p>
|
||
</div>
|
||
<Switch
|
||
checked={systemSettings.maintenanceMode}
|
||
onCheckedChange={(checked) => setSystemSettings(prev => ({ ...prev, maintenanceMode: checked }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Button onClick={saveSystemSettings} disabled={saving}>
|
||
<Save className="h-4 w-4 mr-2" />
|
||
{saving ? 'Saving...' : 'Save Settings'}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</TabsContent>
|
||
|
||
{/* Commission Settings */}
|
||
<TabsContent value="commissions">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="space-y-6"
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="flex items-center space-x-2">
|
||
<DollarSign className="h-5 w-5" />
|
||
<span>Commission Structure</span>
|
||
</CardTitle>
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Add Level
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Add Commission Level</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label>Level</Label>
|
||
<Input
|
||
type="number"
|
||
value={newCommission.level}
|
||
onChange={(e) => setNewCommission(prev => ({ ...prev, level: parseInt(e.target.value) }))}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Percentage (%)</Label>
|
||
<Input
|
||
type="number"
|
||
step="0.1"
|
||
value={newCommission.percentage}
|
||
onChange={(e) => setNewCommission(prev => ({ ...prev, percentage: parseFloat(e.target.value) }))}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch
|
||
checked={newCommission.isActive}
|
||
onCheckedChange={(checked) => setNewCommission(prev => ({ ...prev, isActive: checked }))}
|
||
/>
|
||
<Label>Active</Label>
|
||
</div>
|
||
<Button onClick={addCommissionSetting} className="w-full">
|
||
Add Commission Level
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{commissionSettings.map((setting) => (
|
||
<div key={setting.id} className="flex items-center justify-between p-4 border rounded-lg">
|
||
<div>
|
||
<p className="font-medium">Level {setting.level}</p>
|
||
<p className="text-sm text-gray-500">{setting.percentage}% commission</p>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Badge variant={setting.isActive ? 'default' : 'secondary'}>
|
||
{setting.isActive ? 'Active' : 'Inactive'}
|
||
</Badge>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setEditingCommission(setting)}
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => deleteCommissionSetting(setting.id)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</TabsContent>
|
||
|
||
{/* Categories */}
|
||
<TabsContent value="categories">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="space-y-6"
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="flex items-center space-x-2">
|
||
<Package className="h-5 w-5" />
|
||
<span>Product Categories</span>
|
||
</CardTitle>
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Add Category
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Add Category</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label>Name</Label>
|
||
<Input
|
||
value={newCategory.name}
|
||
onChange={(e) => setNewCategory(prev => ({ ...prev, name: e.target.value }))}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Description</Label>
|
||
<Textarea
|
||
value={newCategory.description}
|
||
onChange={(e) => setNewCategory(prev => ({ ...prev, description: e.target.value }))}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Image URL</Label>
|
||
<Input
|
||
value={newCategory.image}
|
||
onChange={(e) => setNewCategory(prev => ({ ...prev, image: e.target.value }))}
|
||
/>
|
||
</div>
|
||
<Button
|
||
onClick={() => saveCategory({
|
||
id: 'new-category',
|
||
name: newCategory.name,
|
||
description: newCategory.description,
|
||
image: newCategory.image,
|
||
isActive: true,
|
||
productCount: 0
|
||
})}
|
||
className="w-full"
|
||
>
|
||
Add Category
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{categories.map((category) => (
|
||
<div key={category.id} className="border rounded-lg p-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<h3 className="font-medium">{category.name}</h3>
|
||
<Badge variant={category.isActive ? 'default' : 'secondary'}>
|
||
{category.isActive ? 'Active' : 'Inactive'}
|
||
</Badge>
|
||
</div>
|
||
<p className="text-sm text-gray-500 mb-2">{category.description}</p>
|
||
<p className="text-xs text-gray-400 mb-3">{category.productCount} products</p>
|
||
<div className="flex space-x-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setEditingCategory(category)}
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => deleteCategory(category.id)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</TabsContent>
|
||
|
||
{/* Security */}
|
||
<TabsContent value="security">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="space-y-6"
|
||
>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center space-x-2">
|
||
<Shield className="h-5 w-5" />
|
||
<span>Security Settings</span>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-6">
|
||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||
<h3 className="font-medium text-blue-900 mb-2">Database Status</h3>
|
||
<p className="text-sm text-blue-700">Database connection is healthy</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||
<h3 className="font-medium text-yellow-900 mb-2">Environment Variables</h3>
|
||
<p className="text-sm text-yellow-700">All required environment variables are configured</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||
<h3 className="font-medium text-green-900 mb-2">SSL Certificate</h3>
|
||
<p className="text-sm text-green-700">SSL certificate is valid and up to date</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* Edit Dialogs */}
|
||
{editingCommission && (
|
||
<Dialog open={!!editingCommission} onOpenChange={() => setEditingCommission(null)}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Edit Commission Setting</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label>Level</Label>
|
||
<Input
|
||
type="number"
|
||
value={editingCommission.level}
|
||
onChange={(e) => setEditingCommission(prev => prev ? { ...prev, level: parseInt(e.target.value) } : null)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Percentage (%)</Label>
|
||
<Input
|
||
type="number"
|
||
step="0.1"
|
||
value={editingCommission.percentage}
|
||
onChange={(e) => setEditingCommission(prev => prev ? { ...prev, percentage: parseFloat(e.target.value) } : null)}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch
|
||
checked={editingCommission.isActive}
|
||
onCheckedChange={(checked) => setEditingCommission(prev => prev ? { ...prev, isActive: checked } : null)}
|
||
/>
|
||
<Label>Active</Label>
|
||
</div>
|
||
<Button onClick={() => saveCommissionSetting(editingCommission)} className="w-full">
|
||
Save Changes
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)}
|
||
|
||
{editingCategory && (
|
||
<Dialog open={!!editingCategory} onOpenChange={() => setEditingCategory(null)}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Edit Category</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label>Name</Label>
|
||
<Input
|
||
value={editingCategory.name}
|
||
onChange={(e) => setEditingCategory(prev => prev ? { ...prev, name: e.target.value } : null)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Description</Label>
|
||
<Textarea
|
||
value={editingCategory.description || ''}
|
||
onChange={(e) => setEditingCategory(prev => prev ? { ...prev, description: e.target.value } : null)}
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label>Image URL</Label>
|
||
<Input
|
||
value={editingCategory.image || ''}
|
||
onChange={(e) => setEditingCategory(prev => prev ? { ...prev, image: e.target.value } : null)}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch
|
||
checked={editingCategory.isActive}
|
||
onCheckedChange={(checked) => setEditingCategory(prev => prev ? { ...prev, isActive: checked } : null)}
|
||
/>
|
||
<Label>Active</Label>
|
||
</div>
|
||
<Button onClick={() => saveCategory(editingCategory)} className="w-full">
|
||
Save Changes
|
||
</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|