File size: 3,619 Bytes
bbaafe2 7c5a851 42b9ac9 bbaafe2 7c5a851 42b9ac9 bbaafe2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | // frontend/src/components/admin/PlansTable.jsx
import React from "react";
export default function PlansTable({ plans, isLoading, onEdit, onDelete }) {
if (isLoading) {
return (
<p className="text-sm text-stone-500">
Loading plans…
</p>
);
}
if (!plans || plans.length === 0) {
return (
<p className="text-sm text-stone-500">
No membership plans created yet. Click "New Plan" to add one.
</p>
);
}
return (
<div className="overflow-x-auto">
<table className="min-w-full text-left text-xs">
<thead>
<tr className="border-b border-stone-100 text-[11px] uppercase tracking-wide text-stone-500">
<th className="py-2 pr-4">Name</th>
<th className="py-2 pr-4">Billing</th>
<th className="py-2 pr-4">Price</th>
<th className="py-2 pr-4">Max Students</th>
<th className="py-2 pr-4">Default</th>
<th className="py-2 pr-4">Active</th>
<th className="py-2 pr-4 text-right">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-stone-100">
{plans.map((plan) => (
<tr key={plan.id} className="text-[13px] text-stone-800">
<td className="py-2 pr-4">{plan.name}</td>
<td className="py-2 pr-4 capitalize">
{plan.billing_period}
</td>
<td className="py-2 pr-4">
${Number(plan.price || 0).toFixed(2)}
</td>
<td className="py-2 pr-4">
<span className="inline-flex items-center gap-1">
{plan.max_students || 1}
<span className="text-stone-400">👤</span>
</span>
</td>
<td className="py-2 pr-4">
{plan.is_default ? (
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-red-50 text-red-700 border border-red-100">
Default
</span>
) : (
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-stone-50 text-stone-500 border border-stone-200">
No
</span>
)}
</td>
<td className="py-2 pr-4">
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium border ${
plan.is_active
? "bg-emerald-50 text-emerald-700 border-emerald-100"
: "bg-stone-50 text-stone-500 border-stone-200"
}`}
>
{plan.is_active ? "Active" : "Hidden"}
</span>
</td>
<td className="py-2 pr-4 text-right">
<div className="inline-flex items-center gap-2">
<button
type="button"
onClick={() => onEdit(plan)}
className="text-[11px] text-indigo-600 hover:underline"
>
Edit
</button>
<button
type="button"
onClick={() => onDelete(plan.id)}
className="text-[11px] text-rose-600 hover:underline"
>
Delete
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
|