209 lines
12 KiB
JavaScript
209 lines
12 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, router } from '@inertiajs/react';
|
|
import AdminLayout from '@/Layouts/AdminLayout';
|
|
import {
|
|
Plus,
|
|
Edit2,
|
|
Trash2,
|
|
Check,
|
|
X,
|
|
Info,
|
|
MoreVertical,
|
|
DollarSign,
|
|
Clock,
|
|
Zap,
|
|
Shield,
|
|
Trophy,
|
|
Search
|
|
} from 'lucide-react';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
|
|
export default function SubscriptionsIndex({ plans: initialPlans }) {
|
|
const [plans, setPlans] = useState(initialPlans || [
|
|
{ id: 'basic', name: 'Basic Search', price: 99, duration: 'Monthly', features: ['Browse 500+ workers', '10 Shortlists'], status: 'Active' },
|
|
{ id: 'premium', name: 'Premium Pass', price: 199, duration: 'Monthly', features: ['Unlimited shortlisting', 'Direct messaging'], status: 'Active' },
|
|
{ id: 'vip', name: 'VIP Concierge', price: 499, duration: 'Monthly', features: ['Dedicated Manager', '30-day replacement'], status: 'Active' },
|
|
]);
|
|
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [editingPlan, setEditingPlan] = useState(null);
|
|
|
|
const handleEdit = (plan) => {
|
|
setEditingPlan(plan);
|
|
setIsDialogOpen(true);
|
|
};
|
|
|
|
const handleDelete = (id) => {
|
|
if (confirm('Are you sure you want to delete this plan?')) {
|
|
// router.delete(`/admin/subscriptions/plans/${id}`);
|
|
setPlans(plans.filter(p => p.id !== id));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AdminLayout title="Subscription Management">
|
|
<Head title="Plans Management" />
|
|
|
|
<div className="space-y-6">
|
|
{/* Header Actions */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search plans..."
|
|
className="w-full pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-teal-500/10 focus:border-teal-500 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => { setEditingPlan(null); setIsDialogOpen(true); }}
|
|
className="bg-[#0F6E56] text-white px-4 py-2 rounded-lg text-sm font-semibold flex items-center justify-center space-x-2 hover:bg-[#085041] transition-colors shadow-sm"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>Create New Plan</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Plans Table */}
|
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-12">Plan Name</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-12">Pricing (AED)</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-12">Duration</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-12">Key Features</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-12">Status</TableHead>
|
|
<TableHead className="font-semibold text-slate-600 text-xs h-12 text-right pr-6">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{plans.map((plan) => (
|
|
<TableRow key={plan.id} className="hover:bg-slate-50/50 transition-colors">
|
|
<TableCell className="py-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
|
plan.id === 'basic' ? 'bg-blue-50 text-blue-600' :
|
|
plan.id === 'premium' ? 'bg-teal-50 text-[#0F6E56]' :
|
|
'bg-amber-50 text-amber-600'
|
|
}`}>
|
|
{plan.id === 'basic' ? <Zap className="w-4 h-4" /> :
|
|
plan.id === 'premium' ? <Shield className="w-4 h-4" /> :
|
|
<Trophy className="w-4 h-4" />}
|
|
</div>
|
|
<span className="font-bold text-slate-900 text-sm">{plan.name}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="font-bold text-slate-900">{plan.price}</TableCell>
|
|
<TableCell className="text-sm text-slate-500 font-medium">{plan.duration}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{plan.features.map((f, i) => (
|
|
<span key={i} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase tracking-tight">
|
|
{f}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
|
|
plan.status === 'Active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
{plan.status}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-right pr-6">
|
|
<div className="flex items-center justify-end space-x-2">
|
|
<button
|
|
onClick={() => handleEdit(plan)}
|
|
className="p-2 text-slate-400 hover:text-[#0F6E56] hover:bg-teal-50 rounded-lg transition-all"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(plan.id)}
|
|
className="p-2 text-slate-400 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Plan Modal (Placeholder UI) */}
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogContent className="sm:max-w-[500px] rounded-[24px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-black text-slate-900 tracking-tight">
|
|
{editingPlan ? 'Edit Subscription Plan' : 'Create New Plan'}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs font-medium text-slate-500 uppercase tracking-widest">
|
|
Configure pricing and limits for employers
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid gap-6 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Plan Name</label>
|
|
<input className="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none" placeholder="e.g. Pro Search" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Price (AED)</label>
|
|
<input type="number" className="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none" placeholder="299" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Duration</label>
|
|
<select className="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none">
|
|
<option>Monthly</option>
|
|
<option>Quarterly</option>
|
|
<option>Yearly</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Features (one per line)</label>
|
|
<textarea className="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold focus:ring-4 focus:ring-teal-500/10 outline-none min-h-[100px]" placeholder="Unlimited search Verified badges" />
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="sm:justify-end gap-3">
|
|
<button
|
|
onClick={() => setIsDialogOpen(false)}
|
|
className="px-6 py-2.5 rounded-xl text-sm font-bold text-slate-400 uppercase tracking-widest hover:bg-slate-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="bg-[#0F6E56] text-white px-8 py-2.5 rounded-xl text-sm font-bold uppercase tracking-widest shadow-lg shadow-teal-500/20 active:scale-95 transition-all"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AdminLayout>
|
|
);
|
|
}
|