push

pushy

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/admin/pages/tiers/ViewPayment.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, House, CreditCard, BadgeCheck, User } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -7,7 +7,10 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Separator } from "@/components/ui/separator";
 import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
 import { useTiers } from "@/contexts/AdminTiersContext";
+import { useDateFormat } from "@/hooks/useDateFormat";
 import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
+import { resolveTierBadge } from "@/utils/tierBadge.util";
 
 const STATUS_BADGE = {
   pending:   "secondary",
@@ -17,7 +20,6 @@ const STATUS_BADGE = {
   expired:   "outline",
   refunded:  "outline",
 };
-const TIER_BADGE = { free: "secondary", premium: "default", exclusive: "destructive" };
 
 // ─── Provider label map (extend as you add more providers) ───────────────────
 const PROVIDER_LABELS = {
@@ -102,7 +104,7 @@ function ProviderReference({ payment }) {
         {/* Cancelled info — shown for any provider */}
         {payload.cancelled_at && (
           <InfoRow label="Cancelled At">
-            {new Date(payload.cancelled_at).toLocaleString()}
+            {fmtDateTime(payload.cancelled_at)}
           </InfoRow>
         )}
 
@@ -117,8 +119,15 @@ export default function ViewPayment() {
   const navigate = useNavigate();
   const { paymentId } = useParams();
   const { fetchPayment, payment, loading } = useTiers();
+  const { fmtDateTime } = useDateFormat();
 
-  useEffect(() => { fetchPayment(paymentId); }, [fetchPayment, paymentId]);
+  const [tierCategories, setTierCategories] = useState([]);
+  const tierMap = useMemo(() => Object.fromEntries(tierCategories.map((c) => [c.slug, c])), [tierCategories]);
+
+  useEffect(() => {
+    fetchPayment(paymentId);
+    api.get("/admin/tiers/categories").then(({ data }) => setTierCategories(data.data ?? [])).catch(() => {});
+  }, [paymentId]);
 
   return (
     <section className="bg-muted/60 min-h-full">
@@ -174,10 +183,10 @@ export default function ViewPayment() {
                     </InfoRow>
                   )}
                   <InfoRow label="Paid At">
-                    {payment.paid_at ? new Date(payment.paid_at).toLocaleString() : "—"}
+                    {payment.paid_at ? fmtDateTime(payment.paid_at) : "—"}
                   </InfoRow>
                   <InfoRow label="Created At">
-                    {payment.createdAt ? new Date(payment.createdAt).toLocaleString() : "—"}
+                    {payment.createdAt ? fmtDateTime(payment.createdAt) : "—"}
                   </InfoRow>
                 </div>
               </SectionCard>
@@ -196,9 +205,7 @@ export default function ViewPayment() {
                   <div className="grid grid-cols-2 gap-4">
                     <InfoRow label="Label">{payment.plan.label}</InfoRow>
                     <InfoRow label="Tier">
-                      <Badge variant={TIER_BADGE[payment.plan.tier] ?? "outline"} className="capitalize mt-0.5">
-                        {payment.plan.tier}
-                      </Badge>
+                      {(() => { const { cls, label } = resolveTierBadge(payment.plan.tier, tierMap); return <Badge className={`${cls} mt-0.5`}>{label}</Badge>; })()}
                     </InfoRow>
                     <InfoRow label="Duration">{payment.plan.duration_days} days</InfoRow>
                   </div>