streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
streaper2
2026-04-23 14:50:33 +02:00
parent e6310f30de
commit 1a66c46389
2 changed files with 48 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
admin/src/components/PlanEditModal.tsx
View File

@@ -9,9 +9,10 @@ interface PlanEditModalProps {
isOpen: boolean;
onClose: () => void;
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 [formData, setFormData] = useState({
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>
<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>
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
<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"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Mensuel)</label>
<input
value={formData.priceXOF}
onChange={(e) => setFormData({...formData, priceXOF: 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>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Annuel)</label>
<input
value={formData.yearlyPriceXOF}
onChange={(e) => setFormData({...formData, yearlyPriceXOF: e.target.value})}
placeholder="ex: 45 000 FCFA"
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 className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Mensuel)</label>
<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>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Annuel)</label>
<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"
/>
</div>
{currentCycle === 'monthly' ? (
<>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Mensuel)</label>
<input
value={formData.priceXOF}
onChange={(e) => setFormData({...formData, priceXOF: 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>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Mensuel)</label>
<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>
</>
) : (
<>
<div className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Annuel)</label>
<input
value={formData.yearlyPriceXOF}
onChange={(e) => setFormData({...formData, yearlyPriceXOF: e.target.value})}
placeholder="ex: 45 000 FCFA"
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 className="space-y-2">
<label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Annuel)</label>
<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 className="space-y-2">