احراز هویت · بلوک‌های UI

identity-info-form.tsx

"use client"

import NationalIdInput from "@/components/national-id-input"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export default function IdentityInfoForm() {
  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <CardTitle>فرم اطلاعات هویتی</CardTitle>
        <CardDescription>
          مشخصات را دقیقاً مطابق کارت ملی وارد کنید
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form
          className="space-y-6"
          onSubmit={(event) => {
            event.preventDefault()
          }}
        >
          <FieldGroup>
            <Field className="grid gap-4 sm:grid-cols-2">
              <Field>
                <FieldLabel htmlFor="first-name">نام</FieldLabel>
                <Input id="first-name" placeholder="سارا" required />
              </Field>
              <Field>
                <FieldLabel htmlFor="last-name">نام خانوادگی</FieldLabel>
                <Input id="last-name" placeholder="محمدی" required />
              </Field>
            </Field>
            <Field>
              <FieldLabel htmlFor="national-id">کد ملی</FieldLabel>
              <NationalIdInput id="national-id" name="nationalId" />
            </Field>
            <Field>
              <FieldLabel htmlFor="birthdate">تاریخ تولد</FieldLabel>
              <Input
                id="birthdate"
                inputMode="numeric"
                placeholder="۱۳۷۲/۰۶/۱۵"
                dir="ltr"
                className="text-start"
                required
              />
              <FieldDescription>به صورت شمسی، مطابق کارت ملی</FieldDescription>
            </Field>
            <Field>
              <FieldLabel htmlFor="mobile">شماره موبایل</FieldLabel>
              <Input
                id="mobile"
                type="tel"
                inputMode="tel"
                placeholder="۰۹۱۲۱۲۳۴۵۶۷"
                dir="ltr"
                className="text-start"
                required
              />
            </Field>
            <Field>
              <Button type="submit" className="w-full">
                ادامه احراز هویت
              </Button>
            </Field>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
  )
}

national-card-upload.tsx

"use client"

import * as React from "react"
import { cn } from "cn"
import {
  CheckIcon,
  IdCardIcon,
  ImageIcon,
  UploadIcon,
  XIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"
const EN_DIGITS = "0123456789"

function toFaDigits(value: string) {
  return value.replace(/\d/g, (digit) => FA_DIGITS[Number(digit)] ?? digit)
}

function toEnDigits(value: string) {
  return value.replace(/[۰-۹]/g, (digit) => {
    const index = FA_DIGITS.indexOf(digit)
    return index >= 0 ? EN_DIGITS[index] : digit
  })
}

function normalizeNationalId(value: string) {
  return toEnDigits(value).replace(/\D/g, "").slice(0, 10)
}

function formatNationalId(digits: string) {
  const d = normalizeNationalId(digits)
  const a = d.slice(0, 3)
  const b = d.slice(3, 9)
  const c = d.slice(9, 10)
  let out = a
  if (b) out += `-${b}`
  if (c) out += `-${c}`
  return toFaDigits(out)
}

function isNationalId(digits: string) {
  const d = normalizeNationalId(digits)
  if (!/^\d{10}$/.test(d)) return false
  if (/^(\d)\1{9}$/.test(d)) return false

  let sum = 0
  for (let i = 0; i < 9; i++) {
    sum += Number(d[i]) * (10 - i)
  }
  const rem = sum % 11
  const check = Number(d[9])
  return rem < 2 ? check === rem : check === 11 - rem
}

function NationalIdInput({
  id,
  name,
}: {
  id?: string
  name?: string
}) {
  const [digits, setDigits] = React.useState("")
  const complete = digits.length === 10
  const valid = isNationalId(digits)
  const invalid = complete && !valid

  return (
    <div className="space-y-1.5">
      <div
        className={cn(
          "flex h-10 items-center gap-2 rounded-lg border bg-background px-3 shadow-xs transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50",
          invalid ? "border-destructive" : "border-input"
        )}
        dir="ltr"
      >
        <IdCardIcon className="size-4 shrink-0 text-muted-foreground" />
        <input
          id={id}
          name={name}
          inputMode="numeric"
          autoComplete="off"
          value={formatNationalId(digits)}
          onChange={(event) => setDigits(normalizeNationalId(event.target.value))}
          placeholder="۰۰۱-۲۳۴۵۶۷-۸"
          maxLength={12}
          className="h-full min-w-0 flex-1 bg-transparent text-sm tabular-nums outline-none placeholder:text-muted-foreground/50"
          aria-invalid={invalid ? true : undefined}
        />
        {valid ? (
          <CheckIcon className="size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
        ) : null}
      </div>
      <p className="text-[11px] text-muted-foreground">
        {valid ? (
          "کد ملی معتبر است"
        ) : invalid ? (
          <span className="text-destructive">
            کد ملی معتبر نیست؛ رقم‌ها را دوباره بررسی کنید
          </span>
        ) : (
          "ده رقم، همان‌طور که روی کارت ملی چاپ شده"
        )}
      </p>
    </div>
  )
}

export default function NationalCardUpload() {
  const [preview, setPreview] = React.useState<string | null>(null)
  const [fileName, setFileName] = React.useState<string | null>(null)
  const inputRef = React.useRef<HTMLInputElement>(null)

  function onFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]
    if (!file) return
    setFileName(file.name)
    const url = URL.createObjectURL(file)
    setPreview((prev) => {
      if (prev) URL.revokeObjectURL(prev)
      return url
    })
  }

  function clearFile() {
    if (preview) URL.revokeObjectURL(preview)
    setPreview(null)
    setFileName(null)
    if (inputRef.current) inputRef.current.value = ""
  }

  React.useEffect(() => {
    return () => {
      if (preview) URL.revokeObjectURL(preview)
    }
  }, [preview])

  return (
    <div dir="rtl" lang="fa" className="grid gap-6 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>احراز هویت با کارت ملی</CardTitle>
          <CardDescription>
            اطلاعات اولیه را وارد کنید و تصویر واضح از روی کارت ملی بارگذاری کنید
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form
            className="space-y-5"
            onSubmit={(event) => event.preventDefault()}
          >
            <FieldGroup>
              <Field className="grid gap-4 sm:grid-cols-2">
                <Field>
                  <FieldLabel htmlFor="card-first-name">نام</FieldLabel>
                  <Input id="card-first-name" placeholder="علی" required />
                </Field>
                <Field>
                  <FieldLabel htmlFor="card-last-name">نام خانوادگی</FieldLabel>
                  <Input id="card-last-name" placeholder="رضایی" required />
                </Field>
              </Field>
              <Field>
                <FieldLabel htmlFor="card-national-id">کد ملی</FieldLabel>
                <NationalIdInput id="card-national-id" name="nationalId" />
              </Field>
              <Field>
                <FieldLabel htmlFor="card-mobile">شماره موبایل</FieldLabel>
                <Input
                  id="card-mobile"
                  type="tel"
                  inputMode="tel"
                  placeholder="۰۹۳۵۱۲۳۴۵۶۷"
                  dir="ltr"
                  className="text-start"
                  required
                />
              </Field>
              <Separator />
              <Field>
                <FieldLabel>تصویر روی کارت ملی</FieldLabel>
                <input
                  ref={inputRef}
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  className="sr-only"
                  onChange={onFileChange}
                />
                <div className="flex flex-wrap gap-2">
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => inputRef.current?.click()}
                  >
                    <UploadIcon />
                    انتخاب فایل
                  </Button>
                  {fileName ? (
                    <Button type="button" variant="ghost" onClick={clearFile}>
                      <XIcon />
                      حذف
                    </Button>
                  ) : null}
                </div>
                <p className="text-xs text-muted-foreground">
                  JPG یا PNG، حداکثر ۵ مگابایت. گوشه‌های کارت مشخص باشد.
                </p>
              </Field>
              <Button type="submit" className="w-full" disabled={!preview}>
                ارسال برای بررسی
              </Button>
            </FieldGroup>
          </form>
        </CardContent>
      </Card>

      <Card className="overflow-hidden">
        <CardHeader>
          <CardTitle className="text-base">پیش‌نمایش مدرک</CardTitle>
          <CardDescription>
            {fileName ? fileName : "هنوز تصویری انتخاب نشده است"}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex aspect-[3/2] items-center justify-center overflow-hidden rounded-xl border border-dashed bg-muted/40">
            {preview ? (
               
              <img
                src={preview}
                alt="پیش‌نمایش کارت ملی"
                className="h-full w-full object-contain"
              />
            ) : (
              <div className="flex flex-col items-center gap-2 px-6 text-center text-muted-foreground">
                <ImageIcon className="size-10 opacity-50" />
                <p className="text-sm">
                  تصویر کارت ملی اینجا نمایش داده می‌شود
                </p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

identity-civil-check.tsx

"use client"

import * as React from "react"
import { cn } from "cn"
import { CheckIcon, IdCardIcon, ShieldCheckIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"

type Step = "info" | "otp" | "done"

const STEPS: Array<{ id: Step; label: string }> = [
  { id: "info", label: "اطلاعات" },
  { id: "otp", label: "تأیید" },
  { id: "done", label: "نتیجه" },
]

const FA = "۰۱۲۳۴۵۶۷۸۹"
const EN = "0123456789"

function toFa(value: string) {
  return value.replace(/\d/g, (d) => FA[Number(d)] ?? d)
}

function toEn(value: string) {
  return value.replace(/[۰-۹]/g, (d) => {
    const i = FA.indexOf(d)
    return i >= 0 ? EN[i]! : d
  })
}

function normalize(value: string) {
  return toEn(value).replace(/\D/g, "").slice(0, 10)
}

function format(digits: string) {
  const d = normalize(digits)
  const a = d.slice(0, 3)
  const b = d.slice(3, 9)
  const c = d.slice(9, 10)
  let out = a
  if (b) out += `-${b}`
  if (c) out += `-${c}`
  return toFa(out)
}

function isValid(digits: string) {
  const d = normalize(digits)
  if (!/^\d{10}$/.test(d) || /^(\d)\1{9}$/.test(d)) return false
  let sum = 0
  for (let i = 0; i < 9; i++) sum += Number(d[i]) * (10 - i)
  const rem = sum % 11
  const check = Number(d[9])
  return rem < 2 ? check === rem : check === 11 - rem
}

function NationalIdField({
  id,
  value,
  onChange,
}: {
  id: string
  value: string
  onChange: (digits: string) => void
}) {
  const complete = value.length === 10
  const valid = isValid(value)
  const invalid = complete && !valid

  return (
    <div className="space-y-1.5">
      <div
        className={cn(
          "flex h-10 items-center gap-2 rounded-lg border bg-background px-3 shadow-xs focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50",
          invalid ? "border-destructive" : "border-input"
        )}
        dir="ltr"
      >
        <IdCardIcon className="size-4 shrink-0 text-muted-foreground" />
        <input
          id={id}
          inputMode="numeric"
          value={format(value)}
          onChange={(e) => onChange(normalize(e.target.value))}
          placeholder="۰۰۱-۲۳۴۵۶۷-۸"
          maxLength={12}
          className="h-full min-w-0 flex-1 bg-transparent text-sm tabular-nums outline-none placeholder:text-muted-foreground/50"
        />
        {valid ? (
          <CheckIcon className="size-4 shrink-0 text-emerald-600" />
        ) : null}
      </div>
      <p className="text-[11px] text-muted-foreground">
        {valid
          ? "کد ملی معتبر است"
          : invalid
            ? "کد ملی معتبر نیست"
            : "ده رقم مطابق کارت ملی"}
      </p>
    </div>
  )
}

export default function IdentityCivilCheck() {
  const [step, setStep] = React.useState<Step>("info")
  const [digits, setDigits] = React.useState("")
  const [mobile, setMobile] = React.useState("09121234567")
  const [otp, setOtp] = React.useState("")
  const stepIndex = STEPS.findIndex((item) => item.id === step)
  const canContinue = isValid(digits) && mobile.replace(/\D/g, "").length >= 10

  return (
    <Card>
      <CardHeader>
        <CardTitle>بررسی با ثبت‌احوال</CardTitle>
        <CardDescription>
          کد ملی و موبایل را وارد کنید؛ پس از تأیید OTP نتیجه اعلام می‌شود
        </CardDescription>
        <ol className="mt-4 flex items-center gap-2">
          {STEPS.map((item, index) => {
            const done = index < stepIndex
            const current = index === stepIndex
            return (
              <li key={item.id} className="flex flex-1 items-center gap-2">
                <span
                  className={cn(
                    "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-medium",
                    done && "bg-primary text-primary-foreground",
                    current && "bg-foreground text-background",
                    !done &&
                      !current &&
                      "bg-muted-foreground/15 text-muted-foreground"
                  )}
                >
                  {done ? (
                    <CheckIcon className="size-3.5" />
                  ) : (
                    toFa(String(index + 1))
                  )}
                </span>
                <span
                  className={cn(
                    "text-xs",
                    current
                      ? "font-medium text-foreground"
                      : "text-muted-foreground"
                  )}
                >
                  {item.label}
                </span>
                {index < STEPS.length - 1 ? (
                  <span className="ms-auto h-px flex-1 bg-border" />
                ) : null}
              </li>
            )
          })}
        </ol>
      </CardHeader>
      <CardContent>
        {step === "info" ? (
          <form
            onSubmit={(event) => {
              event.preventDefault()
              if (canContinue) {
                setOtp("")
                setStep("otp")
              }
            }}
          >
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="civil-nid">کد ملی</FieldLabel>
                <NationalIdField
                  id="civil-nid"
                  value={digits}
                  onChange={setDigits}
                />
              </Field>
              <Field>
                <FieldLabel htmlFor="civil-mobile">شماره موبایل</FieldLabel>
                <Input
                  id="civil-mobile"
                  type="tel"
                  inputMode="tel"
                  value={mobile}
                  onChange={(event) => setMobile(event.target.value)}
                  placeholder="۰۹۱۲۱۲۳۴۵۶۷"
                  dir="ltr"
                  className="text-start"
                  required
                />
                <FieldDescription>
                  کد تأیید به این شماره ارسال می‌شود
                </FieldDescription>
              </Field>
              <Button type="submit" className="w-full" disabled={!canContinue}>
                ارسال کد تأیید
              </Button>
            </FieldGroup>
          </form>
        ) : null}

        {step === "otp" ? (
          <div className="space-y-5">
            <p className="text-center text-sm text-muted-foreground">
              کد ۵ رقمی به{" "}
              <span dir="ltr" className="font-medium tabular-nums text-foreground">
                {toFa(mobile.replace(/\D/g, ""))}
              </span>{" "}
              ارسال شد
            </p>
            <div className="flex justify-center" dir="ltr">
              <InputOTP maxLength={5} value={otp} onChange={setOtp}>
                <InputOTPGroup>
                  <InputOTPSlot index={0} className="size-11 text-base" />
                  <InputOTPSlot index={1} className="size-11 text-base" />
                  <InputOTPSlot index={2} className="size-11 text-base" />
                  <InputOTPSlot index={3} className="size-11 text-base" />
                  <InputOTPSlot index={4} className="size-11 text-base" />
                </InputOTPGroup>
              </InputOTP>
            </div>
            <Button
              className="w-full"
              disabled={otp.length !== 5}
              onClick={() => setStep("done")}
            >
              تأیید و ادامه
            </Button>
            <Button
              variant="ghost"
              className="w-full"
              onClick={() => setStep("info")}
            >
              بازگشت
            </Button>
          </div>
        ) : null}

        {step === "done" ? (
          <div className="flex flex-col items-center gap-3 py-4 text-center">
            <div className="flex size-12 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600">
              <ShieldCheckIcon className="size-6" />
            </div>
            <div className="space-y-1">
              <p className="font-medium">هویت شما تأیید شد</p>
              <p className="text-sm text-muted-foreground">
                اطلاعات با سامانهٔ ثبت‌احوال مطابقت دارد
              </p>
            </div>
            <Button
              variant="outline"
              className="mt-2 w-full"
              onClick={() => {
                setStep("info")
                setOtp("")
              }}
            >
              بررسی مجدد
            </Button>
          </div>
        ) : null}
      </CardContent>
    </Card>
  )
}

multi-step-identity.tsx

"use client"

import * as React from "react"
import { CheckIcon, UploadIcon } from "lucide-react"

import NationalIdInput from "@/components/national-id-input"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

const STEPS = [
  { id: 1, title: "اطلاعات شخصی" },
  { id: 2, title: "شماره موبایل" },
  { id: 3, title: "مدرک هویتی" },
  { id: 4, title: "تأیید نهایی" },
] as const

export default function MultiStepIdentity() {
  const [step, setStep] = React.useState(1)
  const [data, setData] = React.useState({
    firstName: "مریم",
    lastName: "حسینی",
    nationalId: "۰۰۱۳۵۴۷۰۸۹",
    mobile: "۰۹۱۹۸۷۶۵۴۳۲",
    hasDoc: false,
  })

  const progress = (step / STEPS.length) * 100

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader className="space-y-4">
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle>احراز هویت چندمرحله‌ای</CardTitle>
            <CardDescription>
              مرحله {String(step).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)} از{" "}
              {String(STEPS.length).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)}
            </CardDescription>
          </div>
          <Badge variant="secondary">{STEPS[step - 1]?.title}</Badge>
        </div>
        <div className="h-2 overflow-hidden rounded-full bg-muted">
          <div
            className="h-full rounded-full bg-primary transition-all duration-300"
            style={{ width: `${progress}%` }}
          />
        </div>
        <ol className="grid grid-cols-4 gap-2">
          {STEPS.map((item) => {
            const done = item.id < step
            const current = item.id === step
            return (
              <li
                key={item.id}
                className={cn(
                  "flex flex-col items-center gap-1 text-center text-xs",
                  current
                    ? "text-foreground"
                    : done
                      ? "text-primary"
                      : "text-muted-foreground"
                )}
              >
                <span
                  className={cn(
                    "flex size-7 items-center justify-center rounded-full border text-[11px] font-medium",
                    current && "border-primary bg-primary text-primary-foreground",
                    done && "border-primary bg-primary/10 text-primary",
                    !current && !done && "border-border bg-background"
                  )}
                >
                  {done ? (
                    <CheckIcon className="size-3.5" />
                  ) : (
                    String(item.id).replace(
                      /\d/g,
                      (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!
                    )
                  )}
                </span>
                <span className="hidden sm:block">{item.title}</span>
              </li>
            )
          })}
        </ol>
      </CardHeader>
      <CardContent>
        {step === 1 ? (
          <FieldGroup>
            <Field className="grid gap-4 sm:grid-cols-2">
              <Field>
                <FieldLabel htmlFor="ms-first">نام</FieldLabel>
                <Input
                  id="ms-first"
                  value={data.firstName}
                  onChange={(e) =>
                    setData((d) => ({ ...d, firstName: e.target.value }))
                  }
                />
              </Field>
              <Field>
                <FieldLabel htmlFor="ms-last">نام خانوادگی</FieldLabel>
                <Input
                  id="ms-last"
                  value={data.lastName}
                  onChange={(e) =>
                    setData((d) => ({ ...d, lastName: e.target.value }))
                  }
                />
              </Field>
            </Field>
            <Field>
              <FieldLabel htmlFor="ms-nid">کد ملی</FieldLabel>
              <NationalIdInput id="ms-nid" name="nationalId" />
            </Field>
          </FieldGroup>
        ) : null}

        {step === 2 ? (
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="ms-mobile">شماره موبایل</FieldLabel>
              <Input
                id="ms-mobile"
                type="tel"
                value={data.mobile}
                onChange={(e) =>
                  setData((d) => ({ ...d, mobile: e.target.value }))
                }
                dir="ltr"
                className="text-start"
              />
            </Field>
            <p className="text-sm text-muted-foreground">
              در مرحله بعد کد تأیید به این شماره ارسال می‌شود. برای این نمونه
              فرض می‌کنیم شماره قبلاً تأیید شده است.
            </p>
          </FieldGroup>
        ) : null}

        {step === 3 ? (
          <div className="space-y-4">
            <p className="text-sm text-muted-foreground">
              تصویر واضح از روی کارت ملی یا شناسنامه جدید بارگذاری کنید.
            </p>
            <Button
              type="button"
              variant={data.hasDoc ? "secondary" : "outline"}
              className="w-full"
              onClick={() => setData((d) => ({ ...d, hasDoc: true }))}
            >
              <UploadIcon />
              {data.hasDoc ? "مدرک انتخاب شد ✓" : "انتخاب تصویر مدرک"}
            </Button>
          </div>
        ) : null}

        {step === 4 ? (
          <div className="space-y-3 rounded-xl border bg-muted/30 p-4 text-sm">
            <Row label="نام و نام خانوادگی" value={`${data.firstName} ${data.lastName}`} />
            <Row label="کد ملی" value={data.nationalId} ltr />
            <Row label="موبایل" value={data.mobile} ltr />
            <Row label="مدرک" value={data.hasDoc ? "بارگذاری شده" : "ثبت نشده"} />
          </div>
        ) : null}
      </CardContent>
      <CardFooter className="flex justify-between gap-2">
        <Button
          type="button"
          variant="outline"
          disabled={step === 1}
          onClick={() => setStep((s) => Math.max(1, s - 1))}
        >
          قبلی
        </Button>
        {step < STEPS.length ? (
          <Button
            type="button"
            onClick={() => setStep((s) => Math.min(STEPS.length, s + 1))}
            disabled={step === 3 && !data.hasDoc}
          >
            مرحله بعد
          </Button>
        ) : (
          <Button type="button">ثبت درخواست</Button>
        )}
      </CardFooter>
    </Card>
  )
}

function Row({
  label,
  value,
  ltr,
}: {
  label: string
  value: string
  ltr?: boolean
}) {
  return (
    <div className="flex items-center justify-between gap-4">
      <span className="text-muted-foreground">{label}</span>
      <span
        className="font-medium"
        dir={ltr ? "ltr" : undefined}
      >
        {value}
      </span>
    </div>
  )
}

identity-review.tsx

"use client"

import * as React from "react"
import { PencilIcon } from "lucide-react"

import NationalIdInput from "@/components/national-id-input"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

type Section = "personal" | "contact" | "document" | null

const initial = {
  firstName: "رضا",
  lastName: "کریمی",
  nationalId: "۰۰۸۴۵۷۱۲۳۶",
  birthdate: "۱۳۶۸/۰۲/۲۰",
  mobile: "۰۹۱۰۵۵۵۱۲۱۲",
  email: "reza.karimi@example.com",
  document: "کارت ملی — روی کارت",
}

export default function IdentityReview() {
  const [data, setData] = React.useState(initial)
  const [editing, setEditing] = React.useState<Section>(null)
  const [submitted, setSubmitted] = React.useState(false)

  if (submitted) {
    return (
      <Card dir="rtl" lang="fa">
        <CardHeader className="text-center">
          <CardTitle>درخواست ثبت شد</CardTitle>
          <CardDescription>
            اطلاعات شما برای بررسی ارسال شد. نتیجه از طریق پیامک اعلام می‌شود.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button
            className="w-full"
            variant="outline"
            onClick={() => setSubmitted(false)}
          >
            بازگشت به بررسی
          </Button>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <CardTitle>بررسی اطلاعات</CardTitle>
        <CardDescription>
          قبل از تأیید نهایی، هر بخش را بازبینی یا ویرایش کنید
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-0">
        <SectionBlock
          title="اطلاعات شخصی"
          editing={editing === "personal"}
          onEdit={() => setEditing("personal")}
          onCancel={() => setEditing(null)}
          onSave={() => setEditing(null)}
          summary={
            <>
              <SummaryRow label="نام و نام خانوادگی" value={`${data.firstName} ${data.lastName}`} />
              <SummaryRow label="کد ملی" value={data.nationalId} ltr />
              <SummaryRow label="تاریخ تولد" value={data.birthdate} ltr />
            </>
          }
          form={
            <FieldGroup>
              <Field className="grid gap-3 sm:grid-cols-2">
                <Field>
                  <FieldLabel>نام</FieldLabel>
                  <Input
                    value={data.firstName}
                    onChange={(e) =>
                      setData((d) => ({ ...d, firstName: e.target.value }))
                    }
                  />
                </Field>
                <Field>
                  <FieldLabel>نام خانوادگی</FieldLabel>
                  <Input
                    value={data.lastName}
                    onChange={(e) =>
                      setData((d) => ({ ...d, lastName: e.target.value }))
                    }
                  />
                </Field>
              </Field>
              <Field>
                <FieldLabel>کد ملی</FieldLabel>
                <NationalIdInput name="nationalId" />
              </Field>
              <Field>
                <FieldLabel>تاریخ تولد</FieldLabel>
                <Input
                  value={data.birthdate}
                  onChange={(e) =>
                    setData((d) => ({ ...d, birthdate: e.target.value }))
                  }
                  dir="ltr"
                  className="text-start"
                />
              </Field>
            </FieldGroup>
          }
        />
        <Separator />
        <SectionBlock
          title="اطلاعات تماس"
          editing={editing === "contact"}
          onEdit={() => setEditing("contact")}
          onCancel={() => setEditing(null)}
          onSave={() => setEditing(null)}
          summary={
            <>
              <SummaryRow label="موبایل" value={data.mobile} ltr />
              <SummaryRow label="ایمیل" value={data.email} ltr />
            </>
          }
          form={
            <FieldGroup>
              <Field>
                <FieldLabel>موبایل</FieldLabel>
                <Input
                  value={data.mobile}
                  onChange={(e) =>
                    setData((d) => ({ ...d, mobile: e.target.value }))
                  }
                  dir="ltr"
                  className="text-start"
                />
              </Field>
              <Field>
                <FieldLabel>ایمیل</FieldLabel>
                <Input
                  type="email"
                  value={data.email}
                  onChange={(e) =>
                    setData((d) => ({ ...d, email: e.target.value }))
                  }
                  dir="ltr"
                  className="text-start"
                />
              </Field>
            </FieldGroup>
          }
        />
        <Separator />
        <SectionBlock
          title="مدرک هویتی"
          editing={editing === "document"}
          onEdit={() => setEditing("document")}
          onCancel={() => setEditing(null)}
          onSave={() => setEditing(null)}
          summary={<SummaryRow label="فایل" value={data.document} />}
          form={
            <Field>
              <FieldLabel>عنوان مدرک</FieldLabel>
              <Input
                value={data.document}
                onChange={(e) =>
                  setData((d) => ({ ...d, document: e.target.value }))
                }
              />
            </Field>
          }
        />
      </CardContent>
      <CardFooter>
        <Button
          className="w-full"
          disabled={editing !== null}
          onClick={() => setSubmitted(true)}
        >
          تأیید و ارسال نهایی
        </Button>
      </CardFooter>
    </Card>
  )
}

function SectionBlock({
  title,
  editing,
  onEdit,
  onCancel,
  onSave,
  summary,
  form,
}: {
  title: string
  editing: boolean
  onEdit: () => void
  onCancel: () => void
  onSave: () => void
  summary: React.ReactNode
  form: React.ReactNode
}) {
  return (
    <div className="py-4">
      <div className="mb-3 flex items-center justify-between gap-2">
        <h3 className="text-sm font-medium">{title}</h3>
        {!editing ? (
          <Button type="button" variant="ghost" size="sm" onClick={onEdit}>
            <PencilIcon />
            ویرایش
          </Button>
        ) : null}
      </div>
      {editing ? (
        <div className="space-y-4">
          {form}
          <div className="flex gap-2">
            <Button type="button" size="sm" onClick={onSave}>
              ذخیره
            </Button>
            <Button type="button" size="sm" variant="outline" onClick={onCancel}>
              انصراف
            </Button>
          </div>
        </div>
      ) : (
        <div className="space-y-2">{summary}</div>
      )}
    </div>
  )
}

function SummaryRow({
  label,
  value,
  ltr,
}: {
  label: string
  value: string
  ltr?: boolean
}) {
  return (
    <div className="flex items-center justify-between gap-3 text-sm">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-medium" dir={ltr ? "ltr" : undefined}>
        {value}
      </span>
    </div>
  )
}

identity-status-gallery.tsx

"use client"

import * as React from "react"
import {
  AlertCircleIcon,
  CheckCircle2Icon,
  ClockIcon,
  XCircleIcon,
} from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

type StatusKey = "pending" | "approved" | "needs_fix" | "rejected"

const STATUSES: Record<
  StatusKey,
  {
    label: string
    badge: "secondary" | "default" | "outline" | "destructive"
    icon: React.ReactNode
    title: string
    description: string
    detail: string
    action?: string
  }
> = {
  pending: {
    label: "در حال بررسی",
    badge: "secondary",
    icon: <ClockIcon className="size-5 text-amber-600" />,
    title: "درخواست شما در صف بررسی است",
    description: "معمولاً تا ۲۴ ساعت کاری نتیجه اعلام می‌شود.",
    detail:
      "مدارک شما دریافت شده و توسط تیم احراز هویت در حال بررسی است. نیازی به اقدام دیگری نیست.",
  },
  approved: {
    label: "تأیید شد",
    badge: "default",
    icon: <CheckCircle2Icon className="size-5 text-emerald-600" />,
    title: "احراز هویت با موفقیت انجام شد",
    description: "حساب شما سطح تأیید هویت کامل دارد.",
    detail:
      "از این پس می‌توانید از تمام امکانات وابسته به احراز هویت استفاده کنید.",
    action: "رفتن به داشبورد",
  },
  needs_fix: {
    label: "نیاز به اصلاح",
    badge: "outline",
    icon: <AlertCircleIcon className="size-5 text-orange-600" />,
    title: "تصویر کارت ملی ناخوانا است",
    description: "لطفاً تصویر واضح‌تری از روی کارت ملی بارگذاری کنید.",
    detail:
      "گوشه‌های کارت مشخص نیست و تاریخ تولد خوانا نیست. فایل جدید را حداکثر تا ۷۲ ساعت ارسال کنید.",
    action: "اصلاح و ارسال مجدد",
  },
  rejected: {
    label: "رد شد",
    badge: "destructive",
    icon: <XCircleIcon className="size-5 text-destructive" />,
    title: "درخواست احراز هویت رد شد",
    description: "اطلاعات واردشده با مدرک ارسالی مطابقت ندارد.",
    detail:
      "در صورت نیاز می‌توانید پس از ۲۴ ساعت درخواست جدید ثبت کنید یا با پشتیبانی تماس بگیرید.",
    action: "ثبت درخواست جدید",
  },
}

export default function IdentityStatusGallery() {
  const [status, setStatus] = React.useState<StatusKey>("pending")
  const current = STATUSES[status]

  return (
    <div dir="rtl" lang="fa" className="space-y-6">
      <div className="text-center">
        <h1 className="text-xl font-semibold tracking-tight">وضعیت احراز هویت</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          نمونه‌های مختلف وضعیت را با تب‌ها جابه‌جا کنید
        </p>
      </div>

      <Tabs
        value={status}
        onValueChange={(value) => setStatus(value as StatusKey)}
        className="w-full"
      >
        <TabsList className="grid h-auto w-full grid-cols-2 gap-1 sm:grid-cols-4">
          {(Object.keys(STATUSES) as StatusKey[]).map((key) => (
            <TabsTrigger key={key} value={key} className="text-xs sm:text-sm">
              {STATUSES[key].label}
            </TabsTrigger>
          ))}
        </TabsList>

        {(Object.keys(STATUSES) as StatusKey[]).map((key) => {
          const item = STATUSES[key]
          return (
            <TabsContent key={key} value={key} className="mt-6">
              <div className="mx-auto grid max-w-3xl gap-4 md:grid-cols-[1.2fr_0.8fr]">
                <Card>
                  <CardHeader>
                    <div className="flex items-start justify-between gap-3">
                      <div className="space-y-1">
                        <div className="flex items-center gap-2">
                          {item.icon}
                          <CardTitle className="text-base">
                            {item.title}
                          </CardTitle>
                        </div>
                        <CardDescription>{item.description}</CardDescription>
                      </div>
                      <Badge variant={item.badge}>{item.label}</Badge>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm leading-relaxed text-muted-foreground">
                      {item.detail}
                    </p>
                  </CardContent>
                  {item.action ? (
                    <CardFooter>
                      <Button
                        className="w-full"
                        variant={key === "rejected" ? "outline" : "default"}
                      >
                        {item.action}
                      </Button>
                    </CardFooter>
                  ) : null}
                </Card>

                <Alert>
                  <AlertTitle>شماره پیگیری</AlertTitle>
                  <AlertDescription className="space-y-2">
                    <p dir="ltr" className="text-sm font-medium tracking-normal [letter-spacing:0]">
                      IV-۱۴۰۵-۰۸۴۲۱
                    </p>
                    <p className="text-xs">
                      آخرین به‌روزرسانی: ۲ مهر ۱۴۰۵ — ۱۴:۳۰
                    </p>
                  </AlertDescription>
                </Alert>
              </div>
            </TabsContent>
          )
        })}
      </Tabs>

      <p className="text-center text-xs text-muted-foreground">
        وضعیت فعلی انتخاب‌شده: {current.label}
      </p>
    </div>
  )
}

account-identity-dashboard.tsx

"use client"

import * as React from "react"
import {
  CheckIcon,
  CircleIcon,
  FileTextIcon,
  PhoneIcon,
  ShieldCheckIcon,
  UserIcon,
} from "lucide-react"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { cn } from "@/lib/utils"

type StepState = "done" | "current" | "todo"

const STEPS: {
  id: string
  title: string
  description: string
  icon: React.ReactNode
  state: StepState
}[] = [
  {
    id: "profile",
    title: "اطلاعات شخصی",
    description: "نام، کد ملی و تاریخ تولد ثبت شد",
    icon: <UserIcon className="size-4" />,
    state: "done",
  },
  {
    id: "mobile",
    title: "تأیید موبایل",
    description: "شماره ۰۹۱۲۱۲۳۴۵۶۷ تأیید شد",
    icon: <PhoneIcon className="size-4" />,
    state: "done",
  },
  {
    id: "document",
    title: "بارگذاری مدرک",
    description: "تصویر کارت ملی را ارسال کنید",
    icon: <FileTextIcon className="size-4" />,
    state: "current",
  },
  {
    id: "review",
    title: "بررسی نهایی",
    description: "پس از ارسال مدرک آغاز می‌شود",
    icon: <ShieldCheckIcon className="size-4" />,
    state: "todo",
  },
]

export default function AccountIdentityDashboard() {
  const [docUploaded, setDocUploaded] = React.useState(false)
  const completed = STEPS.filter((s) => s.state === "done").length + (docUploaded ? 1 : 0)
  const total = STEPS.length
  const percent = Math.round((completed / total) * 100)

  return (
    <div dir="rtl" lang="fa" className="space-y-6">
      <Card>
        <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex items-center gap-3">
            <Avatar className="size-12">
              <AvatarFallback>ن‌پ</AvatarFallback>
            </Avatar>
            <div>
              <CardTitle className="text-lg">نیما پناهی</CardTitle>
              <CardDescription>حساب کاربری · سطح پایه</CardDescription>
            </div>
          </div>
          <Badge variant="secondary" className="w-fit">
            احراز هویت ناقص
          </Badge>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-end justify-between gap-3">
            <div>
              <p className="text-sm text-muted-foreground">پیشرفت احراز هویت</p>
              <p className="text-2xl font-semibold tabular-nums">
                {String(percent).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)}٪
              </p>
            </div>
            <p className="text-sm text-muted-foreground">
              {String(completed).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)} از{" "}
              {String(total).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)} مرحله
            </p>
          </div>
          <div className="h-2.5 overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-primary transition-all"
              style={{ width: `${percent}%` }}
            />
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-6 lg:grid-cols-[1.4fr_1fr]">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">مراحل باقی‌مانده</CardTitle>
            <CardDescription>
              برای فعال‌سازی کامل حساب، مراحل زیر را تکمیل کنید
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-0">
            {STEPS.map((step, index) => {
              const state: StepState =
                step.id === "document" && docUploaded
                  ? "done"
                  : step.id === "review" && docUploaded
                    ? "current"
                    : step.state
              return (
                <div key={step.id}>
                  {index > 0 ? <Separator className="my-3" /> : null}
                  <div className="flex gap-3">
                    <div
                      className={cn(
                        "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border",
                        state === "done" &&
                          "border-primary bg-primary text-primary-foreground",
                        state === "current" &&
                          "border-primary bg-primary/10 text-primary",
                        state === "todo" && "text-muted-foreground"
                      )}
                    >
                      {state === "done" ? (
                        <CheckIcon className="size-4" />
                      ) : state === "current" ? (
                        step.icon
                      ) : (
                        <CircleIcon className="size-3.5" />
                      )}
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="flex flex-wrap items-center gap-2">
                        <p className="text-sm font-medium">{step.title}</p>
                        {state === "done" ? (
                          <Badge variant="secondary" className="text-[10px]">
                            انجام شد
                          </Badge>
                        ) : null}
                        {state === "current" ? (
                          <Badge className="text-[10px]">اقدام بعدی</Badge>
                        ) : null}
                      </div>
                      <p className="mt-0.5 text-sm text-muted-foreground">
                        {step.id === "document" && docUploaded
                          ? "مدرک ارسال شد و در صف بررسی است"
                          : step.description}
                      </p>
                    </div>
                  </div>
                </div>
              )
            })}
          </CardContent>
        </Card>

        <Card className="h-fit">
          <CardHeader>
            <CardTitle className="text-base">اقدام بعدی</CardTitle>
            <CardDescription>
              {docUploaded
                ? "منتظر نتیجه بررسی بمانید"
                : "بارگذاری تصویر کارت ملی"}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <ul className="list-inside list-disc space-y-1 text-sm text-muted-foreground">
              <li>نور کافی و بدون انعکاس</li>
              <li>تمام گوشه‌های کارت مشخص باشد</li>
              <li>فایل JPG یا PNG تا ۵ مگابایت</li>
            </ul>
            <Button
              className="w-full"
              disabled={docUploaded}
              onClick={() => setDocUploaded(true)}
            >
              {docUploaded ? "مدرک ارسال شد" : "ادامه احراز هویت"}
            </Button>
            {docUploaded ? (
              <p className="text-center text-xs text-muted-foreground">
                نتیجه معمولاً تا ۲۴ ساعت اعلام می‌شود
              </p>
            ) : null}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}