From 1a66c46389b1b5f54d8fd851b710daf22aae0865 Mon Sep 17 00:00:00 2001
From: streaper2 <streaper2@gmail.com>
Date: Thu, 23 Apr 2026 14:50:33 +0200
Subject: [PATCH] feat: add admin interface to manage and edit pricing plans

---
 admin/src/app/plans/page.tsx           |  1 +
 admin/src/components/PlanEditModal.tsx | 83 +++++++++++++++-----------
 2 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/admin/src/app/plans/page.tsx b/admin/src/app/plans/page.tsx
index 12bef3e..a51b69c 100644
--- a/admin/src/app/plans/page.tsx
+++ b/admin/src/app/plans/page.tsx
@@ -126,6 +126,7 @@ export default function PlansPage() {
           isOpen={!!editingPlan} 
           onClose={() => setEditingPlan(null)} 
           plan={editingPlan} 
+          currentCycle={billingCycle}
         />
       )}
     </div>
diff --git a/admin/src/components/PlanEditModal.tsx b/admin/src/components/PlanEditModal.tsx
index bc81493..d19cca1 100644
--- a/admin/src/components/PlanEditModal.tsx
+++ b/admin/src/components/PlanEditModal.tsx
@@ -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">