Update frontend/src/components/admin/PlanForm.jsx

frontend/src/components/admin/PlanForm.jsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 const BILLING_OPTIONS = [
   { value: "monthly", label: "Monthly" },
   { value: "quarterly", label: "Quarterly" },
+  { value: "half_yearly", label: "Half Yearly" },
   { value: "annual", label: "Annual" },
 ];
 
@@ -51,108 +52,113 @@ export default function PlanForm({ plan, onSave, onCancel, isLoading }) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-stone-50 border border-stone-200 rounded-xl p-4"
+      className="bg-stone-50 border border-stone-200 rounded-xl p-4 space-y-4"
     >
-      <div className="space-y-2">
-        <div>
-          <label className="block text-xs font-medium text-stone-700 mb-1">
-            Plan name
-          </label>
-          <input
-            type="text"
-            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="Beginner Monthly"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </div>
+      {/* Top Row: Plan Name, Billing Period on left; Price, Max Students on right */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <div>
+            <label className="block text-xs font-medium text-stone-700 mb-1">
+              Plan name
+            </label>
+            <input
+              type="text"
+              className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="Beginner Monthly"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
 
-        <div>
-          <label className="block text-xs font-medium text-stone-700 mb-1">
-            Billing period
-          </label>
-          <select
-            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
-            value={billingPeriod}
-            onChange={(e) => setBillingPeriod(e.target.value)}
-          >
-            {BILLING_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
+          <div>
+            <label className="block text-xs font-medium text-stone-700 mb-1">
+              Billing period
+            </label>
+            <select
+              className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+              value={billingPeriod}
+              onChange={(e) => setBillingPeriod(e.target.value)}
+            >
+              {BILLING_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
 
-        <div>
-          <label className="block text-xs font-medium text-stone-700 mb-1">
-            Price (CAD)
-          </label>
-          <input
-            type="number"
-            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="99"
-            value={price}
-            onChange={(e) => setPrice(e.target.value)}
-            min="0"
-            step="0.01"
-          />
-        </div>
+        <div className="space-y-2">
+          <div>
+            <label className="block text-xs font-medium text-stone-700 mb-1">
+              Price (CAD)
+            </label>
+            <input
+              type="number"
+              className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="99"
+              value={price}
+              onChange={(e) => setPrice(e.target.value)}
+              min="0"
+              step="0.01"
+            />
+          </div>
 
-        <div>
-          <label className="block text-xs font-medium text-stone-700 mb-1">
-            Max Students
-          </label>
-          <input
-            type="number"
-            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
-            placeholder="1"
-            value={maxStudents}
-            onChange={(e) => setMaxStudents(e.target.value)}
-            min="1"
-          />
+          <div>
+            <label className="block text-xs font-medium text-stone-700 mb-1">
+              Max Students
+            </label>
+            <input
+              type="number"
+              className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="1"
+              value={maxStudents}
+              onChange={(e) => setMaxStudents(e.target.value)}
+              min="1"
+            />
+          </div>
         </div>
       </div>
 
-      <div className="space-y-2">
-        <div>
-          <label className="block text-xs font-medium text-stone-700 mb-1">
-            Description
-          </label>
-          <textarea
-            className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 min-h-[60px]"
-            placeholder="Beginner classes 2x per week."
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-          />
-        </div>
+      {/* Description - Full Width */}
+      <div>
+        <label className="block text-xs font-medium text-stone-700 mb-1">
+          Description
+        </label>
+        <textarea
+          className="w-full rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 min-h-[60px]"
+          placeholder="Beginner classes 2x per week."
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </div>
 
-        <div className="flex items-center justify-between pt-1">
-          <label className="inline-flex items-center gap-2 text-xs text-stone-700">
-            <input
-              type="checkbox"
-              className="rounded border-stone-300"
-              checked={isActive}
-              onChange={(e) => setIsActive(e.target.checked)}
-            />
-            Active / visible to students
-          </label>
-          <div className="flex gap-2">
-            <button
-              type="button"
-              onClick={onCancel}
-              className="px-3 py-1.5 rounded-lg border border-stone-200 text-xs font-medium text-stone-700 hover:bg-stone-100"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-medium hover:bg-indigo-700 disabled:opacity-60"
-            >
-              {isLoading ? "Saving…" : plan ? "Update plan" : "Create plan"}
-            </button>
-          </div>
+      {/* Bottom Row: Checkbox and Buttons */}
+      <div className="flex items-center justify-between pt-1">
+        <label className="inline-flex items-center gap-2 text-xs text-stone-700">
+          <input
+            type="checkbox"
+            className="rounded border-stone-300"
+            checked={isActive}
+            onChange={(e) => setIsActive(e.target.checked)}
+          />
+          Active / visible to students
+        </label>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-3 py-1.5 rounded-lg border border-stone-200 text-xs font-medium text-stone-700 hover:bg-stone-100"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-medium hover:bg-indigo-700 disabled:opacity-60"
+          >
+            {isLoading ? "Saving…" : plan ? "Update plan" : "Create plan"}
+          </button>
         </div>
       </div>
     </form>