80 lines
3.4 KiB
JavaScript
80 lines
3.4 KiB
JavaScript
import { useState } from 'react'
|
|
import { Save, CheckCircle, Loader2 } from 'lucide-react'
|
|
|
|
export default function AdminSettings() {
|
|
const [saving, setSaving] = useState(false)
|
|
const [saved, setSaved] = useState(false)
|
|
|
|
const handleSave = async (e) => {
|
|
e.preventDefault()
|
|
setSaving(true)
|
|
setSaved(false)
|
|
// Simulate API call
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
setSaving(false)
|
|
setSaved(true)
|
|
setTimeout(() => setSaved(false), 3000)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8 max-w-[800px]">
|
|
<div>
|
|
<h2 className="text-2xl font-black text-text-primary tracking-tight m-0 mb-1">Platform Settings</h2>
|
|
<p className="text-text-secondary text-sm font-semibold m-0">
|
|
Configure business rules, global limits, and pricing structures.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSave} className="neu-raised rounded-2xl p-6 md:p-8 flex flex-col gap-8">
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<h3 className="text-base font-black text-text-primary border-b border-white/5 pb-2">Global Defaults</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs font-black uppercase tracking-wider text-text-secondary px-1">Free Trial Credits</label>
|
|
<input type="number" defaultValue={10} className="neu-input" />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs font-black uppercase tracking-wider text-text-secondary px-1">Max OTP Length limit</label>
|
|
<div className="neu-inset rounded-lg overflow-hidden flex bg-base">
|
|
<select className="w-full bg-transparent border-none outline-none text-sm font-bold text-text-primary px-3 py-2 cursor-pointer appearance-none">
|
|
<option>6 Digits</option>
|
|
<option>8 Digits</option>
|
|
<option>10 Digits</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<h3 className="text-base font-black text-text-primary border-b border-white/5 pb-2">Pricing Baseline</h3>
|
|
|
|
<div className="flex flex-col gap-2 max-w-[250px]">
|
|
<label className="text-xs font-black uppercase tracking-wider text-text-secondary px-1">Cost per OTP (INR)</label>
|
|
<div className="neu-input flex items-center gap-2 px-4 py-0">
|
|
<span className="font-black text-text-muted shrink-0">₹</span>
|
|
<input type="number" step="0.01" defaultValue={0.20} className="flex-1 bg-transparent border-none outline-none py-2.5 text-sm font-semibold text-text-primary" />
|
|
</div>
|
|
<p className="text-[10px] font-bold text-text-muted mt-1 px-1">Used to calculate bulk package discounts.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className={`neu-btn-accent px-8 py-3 gap-2 flex items-center min-w-[220px] justify-center ${saved ? 'bg-green-500/10 text-green-600' : ''}`}
|
|
>
|
|
{saving ? <Loader2 size={18} className="animate-spin" /> : saved ? <><CheckCircle size={18} /> Settings Updated</> : <><Save size={18} /> Update Platform Config</>}
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|