"use client";
import React from "react";
import { FiGift, FiCheckCircle, FiXCircle, FiTag, FiToggleLeft, FiToggleRight } from "react-icons/fi";
import type { AdminBillingStatus } from "@/lib/api/billingAdminApi";
export type RowStatus = AdminBillingStatus | "loading" | null;
function money(a: number | null, c: string | null) {
return a ? `${(a / 100).toFixed(2)} ${(c || "AED").toUpperCase()}` : "—";
}
const badge = (color: string, bg: string): React.CSSProperties => ({
display: "inline-block",
padding: "3px 10px",
borderRadius: 999,
fontSize: 12,
fontWeight: 700,
color,
background: bg,
whiteSpace: "nowrap",
});
// check `active` FIRST — a revoked/canceled comp still has plan='comp' (is_free)
function StatusBadge({ s }: { s: RowStatus }) {
if (s === "loading") return Loading…;
if (!s) return Error;
if (!s.active) {
if (s.status === "past_due") return Past due;
if (s.status === "canceled") return Canceled;
if (s.status === "expired") return Expired;
return No subscription;
}
if (s.is_free) return Free (comp);
return Active;
}
// ✅ compact square ICON buttons in ONE row (fixes tall rows)
const iconBtn = (bg: string): React.CSSProperties => ({
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
borderRadius: 7,
border: "none",
background: bg,
color: "#fff",
cursor: "pointer",
flexShrink: 0,
});
interface Props {
company: { id: number; name: string };
status: RowStatus;
busy: boolean;
onGrantFree: () => void;
onMarkPaid: () => void;
onRevoke: () => void;
onSetPrice: () => void;
onToggleEnabled: () => void;
}
export default function BillingRow({
company,
status,
busy,
onGrantFree,
onMarkPaid,
onRevoke,
onSetPrice,
onToggleEnabled,
}: Props) {
const s = status && status !== "loading" ? status : null;
return (
| #{company.id} |
{company.name} |
|
{s?.plan ?? "—"} |
{s
? s.price_amount
? `${money(s.price_amount, s.price_currency)} / ${s.price_interval || "year"}`
: "default"
: "—"}
|
|
);
}