feat: add admin interface to manage and edit pricing plans
Some checks failed
Build and Push App / build (push) Failing after 46s

This commit is contained in:
2026-04-23 14:50:33 +02:00
parent e6310f30de
commit 1a66c46389
2 changed files with 48 additions and 36 deletions

View File

@@ -126,6 +126,7 @@ export default function PlansPage() {
isOpen={!!editingPlan} isOpen={!!editingPlan}
onClose={() => setEditingPlan(null)} onClose={() => setEditingPlan(null)}
plan={editingPlan} plan={editingPlan}
currentCycle={billingCycle}
/> />
)} )}
</div> </div>

View File

@@ -9,9 +9,10 @@ interface PlanEditModalProps {
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
plan: any; plan: any;
currentCycle: 'monthly' | 'yearly';
} }
export default function PlanEditModal({ isOpen, onClose, plan }: PlanEditModalProps) { export default function PlanEditModal({ isOpen, onClose, plan, currentCycle }: PlanEditModalProps) {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: plan.name, name: plan.name,
@@ -73,7 +74,9 @@ export default function PlanEditModal({ isOpen, onClose, plan }: PlanEditModalPr
<div className="p-6 border-b border-slate-700 flex justify-between items-center bg-slate-800/50"> <div className="p-6 border-b border-slate-700 flex justify-between items-center bg-slate-800/50">
<div> <div>
<h2 className="text-xl font-bold text-white font-serif">Modifier le plan {plan.tier}</h2> <h2 className="text-xl font-bold text-white font-serif">Modifier le plan {plan.tier}</h2>
<p className="text-sm text-slate-400">Configurez l'affichage et les limites de ce forfait.</p> <p className="text-sm text-slate-400">
Édition du mode <span className="text-indigo-400 font-bold uppercase">{currentCycle === 'yearly' ? 'Annuel' : 'Mensuel'}</span>
</p>
</div> </div>
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors"> <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
<X className="w-6 h-6" /> <X className="w-6 h-6" />
@@ -101,40 +104,48 @@ export default function PlanEditModal({ isOpen, onClose, plan }: PlanEditModalPr
className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors" className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
/> />
</div> </div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Mensuel)</label> {currentCycle === 'monthly' ? (
<input <>
value={formData.priceXOF} <div className="space-y-2">
onChange={(e) => setFormData({...formData, priceXOF: e.target.value})} <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Mensuel)</label>
className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors" <input
/> value={formData.priceXOF}
</div> onChange={(e) => setFormData({...formData, priceXOF: e.target.value})}
<div className="space-y-2"> className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Annuel)</label> />
<input </div>
value={formData.yearlyPriceXOF} <div className="space-y-2">
onChange={(e) => setFormData({...formData, yearlyPriceXOF: e.target.value})} <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Mensuel)</label>
placeholder="ex: 45 000 FCFA" <input
className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors" value={formData.priceEUR}
/> onChange={(e) => setFormData({...formData, priceEUR: e.target.value})}
</div> className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
<div className="space-y-2"> />
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Mensuel)</label> </div>
<input </>
value={formData.priceEUR} ) : (
onChange={(e) => setFormData({...formData, priceEUR: e.target.value})} <>
className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors" <div className="space-y-2">
/> <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Annuel)</label>
</div> <input
<div className="space-y-2"> value={formData.yearlyPriceXOF}
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Annuel)</label> onChange={(e) => setFormData({...formData, yearlyPriceXOF: e.target.value})}
<input placeholder="ex: 45 000 FCFA"
value={formData.yearlyPriceEUR} className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors shadow-[0_0_10px_rgba(16,185,129,0.1)] border-emerald-500/30"
onChange={(e) => setFormData({...formData, yearlyPriceEUR: e.target.value})} />
placeholder="ex: 69 €" </div>
className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors" <div className="space-y-2">
/> <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Annuel)</label>
</div> <input
value={formData.yearlyPriceEUR}
onChange={(e) => setFormData({...formData, yearlyPriceEUR: e.target.value})}
placeholder="ex: 69 €"
className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors shadow-[0_0_10px_rgba(16,185,129,0.1)] border-emerald-500/30"
/>
</div>
</>
)}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">