From 9b53a8c6465d54c8fa1614540bb1e98a6d79f7b4 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Thu, 1 Oct 2026 15:20:39 +0330
Subject: [PATCH] style(registration): compact identifier display

---
 src/components/OutcomePage.tsx     | 3 ++-
 src/lib/utils.ts                   | 6 ++++++
 src/views/AdminEventDetail.tsx     | 8 ++++----
 src/views/EventRegistrationHub.tsx | 6 +++---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/OutcomePage.tsx b/src/components/OutcomePage.tsx
index 30dd91b..07b0f7a 100644
--- a/src/components/OutcomePage.tsx
+++ b/src/components/OutcomePage.tsx
@@ -18,6 +18,7 @@ import {
 } from "lucide-react";
 import { Link } from "@/lib/router";
 import { Button } from "@/components/ui/button";
+import { displayIdentifier } from "@/lib/utils";
 
 export type OutcomeTone = "success" | "pending" | "failed" | "canceled" | "unknown" | "checking";
 
@@ -239,7 +240,7 @@ export default function OutcomePage({
             <section data-receipt-reference className="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border px-4 py-3">
               <div className="min-w-0">
                 <p className="text-xs text-muted-foreground">{referenceLabel}</p>
-                <code dir="ltr" className="mt-1 block break-all text-left font-mono text-sm font-semibold text-foreground">{reference}</code>
+                <code dir="ltr" className="mt-1 block break-all text-left font-mono text-sm font-semibold text-foreground">{displayIdentifier(reference)}</code>
               </div>
               <Button type="button" variant="outline" size="sm" onClick={copyReference} className="registration-copy-reference gap-2" aria-label={`${referenceLabel} را کپی کنید`}>
                 {copied ? <BadgeCheck className="size-4" /> : <Copy className="size-4" />}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 53aa2a5..c7b1d8a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -6,6 +6,12 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+const UUID_PATTERN = /^[\da-f]{8}(?:-[\da-f]{4}){3}-[\da-f]{12}$/i;
+
+export function displayIdentifier(value: string): string {
+  return UUID_PATTERN.test(value) ? value.slice(0, 8) : value;
+}
+
 export function formatJalali(iso?: string, withTime: boolean = true): string {
   if (!iso) return '—';
   try {
diff --git a/src/views/AdminEventDetail.tsx b/src/views/AdminEventDetail.tsx
index 8de99cc..333d7d8 100644
--- a/src/views/AdminEventDetail.tsx
+++ b/src/views/AdminEventDetail.tsx
@@ -16,7 +16,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Link, Navigate, useParams } from "@/lib/router";
 import type { RegistrationAdminSchema } from "@/lib/types";
 import { api } from "@/lib/api";
-import { formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
+import { displayIdentifier, formatJalali, formatToman, getEventCardImageUrl, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 import { useAuth } from "@/contexts/AuthContext";
 import { useToast } from "@/hooks/use-toast";
 
@@ -75,7 +75,7 @@ function RegistrationDialog({
               <Info label="دانشگاه" value={registration.user.university} />
               <Info label="رشته" value={registration.user.major} />
               <Info label="شماره دانشجویی" value={registration.user.student_id} />
-              <Info label="کد بلیت" value={registration.ticket_id} />
+              <Info label="کد بلیت" value={<code dir="ltr" className="font-mono">{displayIdentifier(registration.ticket_id)}</code>} />
               <Info label="تاریخ ثبت‌نام" value={formatJalali(registration.registered_at)} />
               <Info label="مبلغ نهایی" value={formatToman(registration.final_price ?? 0)} />
               <Info label="تخفیف" value={formatToman(registration.discount_amount ?? 0)} />
@@ -87,8 +87,8 @@ function RegistrationDialog({
                   <div className="grid gap-2 md:grid-cols-2">
                     <Info label="وضعیت" value={payment.status_label} />
                     <Info label="مبلغ" value={formatToman(payment.amount)} />
-                    <Info label="کد رهگیری" value={payment.ref_id} />
-                    <Info label="Authority" value={payment.authority} />
+                    <Info label="کد رهگیری" value={payment.ref_id ? <code dir="ltr" className="font-mono">{payment.ref_id}</code> : undefined} />
+                    <Info label="Authority" value={payment.authority ? <code dir="ltr" className="font-mono">{payment.authority}</code> : undefined} />
                     <Info label="کارت" value={payment.card_pan} />
                     <Info label="کد تخفیف" value={payment.discount_code} />
                   </div>
diff --git a/src/views/EventRegistrationHub.tsx b/src/views/EventRegistrationHub.tsx
index 0391f66..f6bf122 100644
--- a/src/views/EventRegistrationHub.tsx
+++ b/src/views/EventRegistrationHub.tsx
@@ -20,7 +20,7 @@ import {
   normalizeCouponAmounts,
 } from "@/lib/registration-hub-display";
 import type { RegistrationHubSchema, RegistrationHubState } from "@/lib/types";
-import { formatJalali, formatNumberPersian, formatToman, resolveErrorMessage } from "@/lib/utils";
+import { displayIdentifier, formatJalali, formatNumberPersian, formatToman, resolveErrorMessage } from "@/lib/utils";
 import { siteUrl } from "@/lib/site";
 
 type Props = {
@@ -443,9 +443,9 @@ export default function EventRegistrationHub({ slug, registrationId, paymentId }
         ...(data.payment ? [
           { label: "وضعیت پرداخت", value: data.payment.status === "paid" ? "پرداخت تأییدشده" : data.payment.status === "failed" ? "ناموفق" : data.payment.status === "canceled" ? "لغوشده" : "در انتظار تأیید" },
           { label: "مبلغ پرداخت", value: money(data.payment.amount) },
-          ...(data.payment.ref_id ? [{ label: "کد پیگیری درگاه", value: data.payment.ref_id }] : []),
+          ...(data.payment.ref_id ? [{ label: "کد پیگیری درگاه", value: <code dir="ltr" className="font-mono">{data.payment.ref_id}</code> }] : []),
         ] : []),
-        ...(data.registration ? [{ label: "کد ثبت‌نام", value: data.registration.ticket_id }] : []),
+        ...(data.registration ? [{ label: "کد ثبت‌نام", value: <code dir="ltr" className="font-mono">{displayIdentifier(data.registration.ticket_id)}</code> }] : []),
         ...(data.registration?.registered_at ? [{ label: "تاریخ درخواست", value: formatJalali(data.registration.registered_at) }] : []),
       ]
     : [];