تأیید مدارک · بلوک‌های UI

document-upload-form.tsx

"use client"

import * as React from "react"
import { FileTextIcon, UploadIcon, XIcon } 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 {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"

function toFa(n: number) {
  return String(n).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)
}

export default function DocumentUploadForm() {
  const [docType, setDocType] = React.useState("national-card")
  const [fileName, setFileName] = React.useState<string | null>(null)
  const [preview, setPreview] = React.useState<string | null>(null)
  const [progress, setProgress] = React.useState(0)
  const [done, setDone] = React.useState(false)
  const inputRef = React.useRef<HTMLInputElement>(null)

  function onFile(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]
    if (!file) return
    setFileName(file.name)
    setDone(false)
    setProgress(0)
    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)
    setProgress(0)
    setDone(false)
    if (inputRef.current) inputRef.current.value = ""
  }

  function upload() {
    if (!fileName) return
    setProgress(0)
    let value = 0
    const id = window.setInterval(() => {
      value += 20
      setProgress(value)
      if (value >= 100) {
        window.clearInterval(id)
        setDone(true)
      }
    }, 180)
  }

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

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <CardTitle>بارگذاری مدرک</CardTitle>
        <CardDescription>
          نوع مدرک را انتخاب کنید و تصویر واضح بارگذاری کنید
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="doc-type">نوع مدرک</FieldLabel>
            <Select
              items={[
                { value: "national-card", label: "کارت ملی" },
                { value: "birth-cert", label: "شناسنامه" },
                { value: "passport", label: "گذرنامه" },
                { value: "license", label: "گواهینامه" },
              ]}
              value={docType}
              onValueChange={(value) =>
                setDocType((value as string) ?? "national-card")
              }
            >
              <SelectTrigger id="doc-type" className="w-full">
                <SelectValue placeholder="انتخاب کنید" />
              </SelectTrigger>
              <SelectContent dir="rtl">
                <SelectGroup>
                  <SelectItem value="national-card">کارت ملی</SelectItem>
                  <SelectItem value="birth-cert">شناسنامه</SelectItem>
                  <SelectItem value="passport">گذرنامه</SelectItem>
                  <SelectItem value="license">گواهینامه</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </Field>

          <Field>
            <FieldLabel>فایل مدرک</FieldLabel>
            <input
              ref={inputRef}
              type="file"
              accept="image/jpeg,image/png,application/pdf"
              className="sr-only"
              onChange={onFile}
            />
            <button
              type="button"
              onClick={() => inputRef.current?.click()}
              className="flex min-h-32 w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed bg-muted/40 px-4 py-6 text-center transition-colors hover:bg-muted/70"
            >
              {preview ? (
                 
                <img
                  src={preview}
                  alt="پیش‌نمایش مدرک"
                  className="max-h-28 rounded-md object-contain"
                />
              ) : (
                <>
                  <UploadIcon className="size-8 text-muted-foreground" />
                  <span className="text-sm text-muted-foreground">
                    برای انتخاب فایل کلیک کنید یا تصویر را اینجا رها کنید
                  </span>
                </>
              )}
            </button>
            {fileName ? (
              <div className="mt-2 flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm">
                <span className="flex min-w-0 items-center gap-2">
                  <FileTextIcon className="size-4 shrink-0 text-muted-foreground" />
                  <span className="truncate" dir="ltr">
                    {fileName}
                  </span>
                </span>
                <Button type="button" variant="ghost" size="icon" onClick={clearFile}>
                  <XIcon className="size-4" />
                </Button>
              </div>
            ) : null}
            <FieldDescription>
              JPG، PNG یا PDF تا ۵ مگابایت
            </FieldDescription>
          </Field>

          {progress > 0 ? (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>{done ? "بارگذاری کامل شد" : "در حال بارگذاری…"}</span>
                <span className="tabular-nums">{toFa(progress)}٪</span>
              </div>
              <Progress value={progress} />
            </div>
          ) : null}

          <Button
            type="button"
            className="w-full"
            disabled={!fileName || (progress > 0 && !done)}
            onClick={upload}
          >
            {done ? "ارسال برای بررسی" : "شروع بارگذاری"}
          </Button>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}

document-checklist.tsx

"use client"

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

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"

type DocStatus = "todo" | "uploaded"

const DOCS = [
  { id: "national", title: "تصویر روی کارت ملی", hint: "JPG یا PNG" },
  { id: "birth", title: "صفحه اول شناسنامه", hint: "همه اطلاعات خوانا باشد" },
  { id: "residence", title: "مدرک محل سکونت", hint: "قبض یا اجاره‌نامه" },
] as const

function toFa(n: number) {
  return String(n).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)
}

export default function DocumentChecklist() {
  const [status, setStatus] = React.useState<Record<string, DocStatus>>({
    national: "todo",
    birth: "todo",
    residence: "todo",
  })

  const doneCount = Object.values(status).filter((s) => s === "uploaded").length
  const allDone = doneCount === DOCS.length

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle>مدارک موردنیاز</CardTitle>
            <CardDescription>
              برای تکمیل پرونده، این مدارک را بارگذاری کنید
            </CardDescription>
          </div>
          <Badge variant={allDone ? "default" : "secondary"}>
            {toFa(doneCount)} از {toFa(DOCS.length)}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-0">
        {DOCS.map((doc, index) => {
          const uploaded = status[doc.id] === "uploaded"
          return (
            <div key={doc.id}>
              {index > 0 ? <Separator className="my-3" /> : null}
              <div className="flex items-start gap-3">
                <div
                  className={cn(
                    "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border",
                    uploaded
                      ? "border-primary bg-primary text-primary-foreground"
                      : "text-muted-foreground"
                  )}
                >
                  {uploaded ? (
                    <CheckIcon className="size-4" />
                  ) : (
                    <FileTextIcon className="size-4" />
                  )}
                </div>
                <div className="min-w-0 flex-1 space-y-2">
                  <div>
                    <p className="text-sm font-medium">{doc.title}</p>
                    <p className="text-xs text-muted-foreground">{doc.hint}</p>
                  </div>
                  <Button
                    type="button"
                    size="sm"
                    variant={uploaded ? "secondary" : "outline"}
                    onClick={() =>
                      setStatus((prev) => ({
                        ...prev,
                        [doc.id]: uploaded ? "todo" : "uploaded",
                      }))
                    }
                  >
                    <UploadIcon />
                    {uploaded ? "بارگذاری شد" : "انتخاب فایل"}
                  </Button>
                </div>
              </div>
            </div>
          )
        })}
        <Button className="mt-6 w-full" disabled={!allDone}>
          ارسال مدارک برای بررسی
        </Button>
      </CardContent>
    </Card>
  )
}

document-preferences.tsx

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"

export default function DocumentPreferences() {
  const [publicDocs, setPublicDocs] = React.useState(false)
  const [notifySms, setNotifySms] = React.useState(true)
  const [autoResubmit, setAutoResubmit] = React.useState(false)
  const [saved, setSaved] = React.useState(false)

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <CardTitle>تنظیمات تأیید مدارک</CardTitle>
        <CardDescription>
          نحوهٔ نمایش و اطلاع‌رسانی مدارک بارگذاری‌شده را مشخص کنید
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-0">
        <div className="flex items-center justify-between gap-4 py-3">
          <div className="space-y-0.5">
            <Label htmlFor="public-docs">نمایش عمومی مدارک</Label>
            <p className="text-sm text-muted-foreground">
              فقط وضعیت تأیید دیده شود؛ فایل‌ها عمومی نشوند
            </p>
          </div>
          <Switch
            id="public-docs"
            checked={publicDocs}
            onCheckedChange={setPublicDocs}
          />
        </div>
        <Separator />
        <div className="flex items-center justify-between gap-4 py-3">
          <div className="space-y-0.5">
            <Label htmlFor="notify-sms">اطلاع‌رسانی پیامکی</Label>
            <p className="text-sm text-muted-foreground">
              نتیجهٔ بررسی مدارک با پیامک اعلام شود
            </p>
          </div>
          <Switch
            id="notify-sms"
            checked={notifySms}
            onCheckedChange={setNotifySms}
          />
        </div>
        <Separator />
        <div className="flex items-center justify-between gap-4 py-3">
          <div className="space-y-0.5">
            <Label htmlFor="auto-resubmit">ارسال خودکار اصلاحیه</Label>
            <p className="text-sm text-muted-foreground">
              پس از رفع ایراد، مدرک دوباره برای بررسی ارسال شود
            </p>
          </div>
          <Switch
            id="auto-resubmit"
            checked={autoResubmit}
            onCheckedChange={setAutoResubmit}
          />
        </div>
      </CardContent>
      <CardFooter className="justify-between gap-2 border-t">
        <p className="text-xs text-muted-foreground">
          {saved ? "تنظیمات ذخیره شد" : "تغییرات هنوز ذخیره نشده"}
        </p>
        <Button
          type="button"
          onClick={() => {
            setSaved(true)
            window.setTimeout(() => setSaved(false), 2000)
          }}
        >
          ذخیره تنظیمات
        </Button>
      </CardFooter>
    </Card>
  )
}

document-split-upload.tsx

"use client"

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

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export default function DocumentSplitUpload() {
  const [fileName, setFileName] = React.useState<string | null>(null)
  const [done, setDone] = React.useState(false)
  const inputRef = React.useRef<HTMLInputElement>(null)

  return (
    <Card dir="rtl" lang="fa" className="overflow-hidden p-0">
      <CardContent className="grid p-0 md:grid-cols-2">
        <div className="p-6 md:p-8">
          {done ? (
            <div className="flex h-full flex-col justify-center gap-4">
              <div className="space-y-2 text-center md:text-start">
                <h1 className="text-2xl font-bold">مدرک ارسال شد</h1>
                <p className="text-muted-foreground">
                  {fileName
                    ? `فایل «${fileName}» در صف بررسی قرار گرفت.`
                    : "مدرک شما دریافت شد."}
                </p>
              </div>
              <Button
                variant="outline"
                onClick={() => {
                  setDone(false)
                  setFileName(null)
                }}
              >
                بارگذاری مدرک دیگر
              </Button>
            </div>
          ) : (
            <form
              onSubmit={(event) => {
                event.preventDefault()
                if (fileName) setDone(true)
              }}
            >
              <FieldGroup>
                <div className="flex flex-col items-center gap-2 text-center md:items-start md:text-start">
                  <h1 className="text-2xl font-bold">تأیید مدارک</h1>
                  <p className="text-balance text-muted-foreground">
                    تصویر کارت ملی یا شناسنامه را بارگذاری کنید
                  </p>
                </div>
                <Field>
                  <FieldLabel htmlFor="doc-title">عنوان مدرک</FieldLabel>
                  <Input id="doc-title" placeholder="روی کارت ملی" required />
                </Field>
                <Field>
                  <FieldLabel>فایل</FieldLabel>
                  <input
                    ref={inputRef}
                    type="file"
                    accept="image/*,application/pdf"
                    className="sr-only"
                    onChange={(event) =>
                      setFileName(event.target.files?.[0]?.name ?? null)
                    }
                  />
                  <Button
                    type="button"
                    variant="outline"
                    className="w-full"
                    onClick={() => inputRef.current?.click()}
                  >
                    <UploadIcon />
                    {fileName ? fileName : "انتخاب فایل"}
                  </Button>
                  <FieldDescription>
                    حداکثر ۵ مگابایت؛ گوشه‌های مدرک مشخص باشد
                  </FieldDescription>
                </Field>
                <Button type="submit" className="w-full" disabled={!fileName}>
                  ارسال برای بررسی
                </Button>
              </FieldGroup>
            </form>
          )}
        </div>
        <div className="relative hidden bg-muted md:block">
          <img
            src="/farsiui/parsian.jpg"
            alt="Parsian"
            className="absolute inset-0 h-full w-full object-cover"
          />
        </div>
      </CardContent>
    </Card>
  )
}

document-status-gallery.tsx

"use client"

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

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 DocumentStatusGallery() {
  const [status, setStatus] = React.useState<StatusKey>("pending")

  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">
              <Card className="mx-auto max-w-xl">
                <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>
                  <p className="mt-4 text-xs text-muted-foreground">
                    شماره پیگیری:{" "}
                    <span dir="ltr" className="font-medium tabular-nums text-foreground">
                      DV-۱۴۰۵-۰۹۱۲
                    </span>
                  </p>
                </CardContent>
                {item.action ? (
                  <CardFooter>
                    <Button
                      className="w-full"
                      variant={key === "rejected" ? "outline" : "default"}
                    >
                      {item.action}
                    </Button>
                  </CardFooter>
                ) : null}
              </Card>
            </TabsContent>
          )
        })}
      </Tabs>
    </div>
  )
}

document-upload-form.tsx

"use client"

import * as React from "react"
import { FileTextIcon, UploadIcon, XIcon } 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 {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"

function toFa(n: number) {
  return String(n).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)
}

export default function DocumentUploadForm() {
  const [docType, setDocType] = React.useState("national-card")
  const [fileName, setFileName] = React.useState<string | null>(null)
  const [preview, setPreview] = React.useState<string | null>(null)
  const [progress, setProgress] = React.useState(0)
  const [done, setDone] = React.useState(false)
  const inputRef = React.useRef<HTMLInputElement>(null)

  function onFile(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]
    if (!file) return
    setFileName(file.name)
    setDone(false)
    setProgress(0)
    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)
    setProgress(0)
    setDone(false)
    if (inputRef.current) inputRef.current.value = ""
  }

  function upload() {
    if (!fileName) return
    setProgress(0)
    let value = 0
    const id = window.setInterval(() => {
      value += 20
      setProgress(value)
      if (value >= 100) {
        window.clearInterval(id)
        setDone(true)
      }
    }, 180)
  }

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

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <CardTitle>بارگذاری مدرک</CardTitle>
        <CardDescription>
          نوع مدرک را انتخاب کنید و تصویر واضح بارگذاری کنید
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="doc-type">نوع مدرک</FieldLabel>
            <Select
              items={[
                { value: "national-card", label: "کارت ملی" },
                { value: "birth-cert", label: "شناسنامه" },
                { value: "passport", label: "گذرنامه" },
                { value: "license", label: "گواهینامه" },
              ]}
              value={docType}
              onValueChange={(value) =>
                setDocType((value as string) ?? "national-card")
              }
            >
              <SelectTrigger id="doc-type" className="w-full">
                <SelectValue placeholder="انتخاب کنید" />
              </SelectTrigger>
              <SelectContent dir="rtl">
                <SelectGroup>
                  <SelectItem value="national-card">کارت ملی</SelectItem>
                  <SelectItem value="birth-cert">شناسنامه</SelectItem>
                  <SelectItem value="passport">گذرنامه</SelectItem>
                  <SelectItem value="license">گواهینامه</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </Field>

          <Field>
            <FieldLabel>فایل مدرک</FieldLabel>
            <input
              ref={inputRef}
              type="file"
              accept="image/jpeg,image/png,application/pdf"
              className="sr-only"
              onChange={onFile}
            />
            <button
              type="button"
              onClick={() => inputRef.current?.click()}
              className="flex min-h-32 w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed bg-muted/40 px-4 py-6 text-center transition-colors hover:bg-muted/70"
            >
              {preview ? (
                 
                <img
                  src={preview}
                  alt="پیش‌نمایش مدرک"
                  className="max-h-28 rounded-md object-contain"
                />
              ) : (
                <>
                  <UploadIcon className="size-8 text-muted-foreground" />
                  <span className="text-sm text-muted-foreground">
                    برای انتخاب فایل کلیک کنید یا تصویر را اینجا رها کنید
                  </span>
                </>
              )}
            </button>
            {fileName ? (
              <div className="mt-2 flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm">
                <span className="flex min-w-0 items-center gap-2">
                  <FileTextIcon className="size-4 shrink-0 text-muted-foreground" />
                  <span className="truncate" dir="ltr">
                    {fileName}
                  </span>
                </span>
                <Button type="button" variant="ghost" size="icon" onClick={clearFile}>
                  <XIcon className="size-4" />
                </Button>
              </div>
            ) : null}
            <FieldDescription>
              JPG، PNG یا PDF تا ۵ مگابایت
            </FieldDescription>
          </Field>

          {progress > 0 ? (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>{done ? "بارگذاری کامل شد" : "در حال بارگذاری…"}</span>
                <span className="tabular-nums">{toFa(progress)}٪</span>
              </div>
              <Progress value={progress} />
            </div>
          ) : null}

          <Button
            type="button"
            className="w-full"
            disabled={!fileName || (progress > 0 && !done)}
            onClick={upload}
          >
            {done ? "ارسال برای بررسی" : "شروع بارگذاری"}
          </Button>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}

document-checklist.tsx

"use client"

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

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"

type DocStatus = "todo" | "uploaded"

const DOCS = [
  { id: "national", title: "تصویر روی کارت ملی", hint: "JPG یا PNG" },
  { id: "birth", title: "صفحه اول شناسنامه", hint: "همه اطلاعات خوانا باشد" },
  { id: "residence", title: "مدرک محل سکونت", hint: "قبض یا اجاره‌نامه" },
] as const

function toFa(n: number) {
  return String(n).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[Number(d)]!)
}

export default function DocumentChecklist() {
  const [status, setStatus] = React.useState<Record<string, DocStatus>>({
    national: "todo",
    birth: "todo",
    residence: "todo",
  })

  const doneCount = Object.values(status).filter((s) => s === "uploaded").length
  const allDone = doneCount === DOCS.length

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <div className="flex items-start justify-between gap-3">
          <div>
            <CardTitle>مدارک موردنیاز</CardTitle>
            <CardDescription>
              برای تکمیل پرونده، این مدارک را بارگذاری کنید
            </CardDescription>
          </div>
          <Badge variant={allDone ? "default" : "secondary"}>
            {toFa(doneCount)} از {toFa(DOCS.length)}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-0">
        {DOCS.map((doc, index) => {
          const uploaded = status[doc.id] === "uploaded"
          return (
            <div key={doc.id}>
              {index > 0 ? <Separator className="my-3" /> : null}
              <div className="flex items-start gap-3">
                <div
                  className={cn(
                    "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border",
                    uploaded
                      ? "border-primary bg-primary text-primary-foreground"
                      : "text-muted-foreground"
                  )}
                >
                  {uploaded ? (
                    <CheckIcon className="size-4" />
                  ) : (
                    <FileTextIcon className="size-4" />
                  )}
                </div>
                <div className="min-w-0 flex-1 space-y-2">
                  <div>
                    <p className="text-sm font-medium">{doc.title}</p>
                    <p className="text-xs text-muted-foreground">{doc.hint}</p>
                  </div>
                  <Button
                    type="button"
                    size="sm"
                    variant={uploaded ? "secondary" : "outline"}
                    onClick={() =>
                      setStatus((prev) => ({
                        ...prev,
                        [doc.id]: uploaded ? "todo" : "uploaded",
                      }))
                    }
                  >
                    <UploadIcon />
                    {uploaded ? "بارگذاری شد" : "انتخاب فایل"}
                  </Button>
                </div>
              </div>
            </div>
          )
        })}
        <Button className="mt-6 w-full" disabled={!allDone}>
          ارسال مدارک برای بررسی
        </Button>
      </CardContent>
    </Card>
  )
}

document-preferences.tsx

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"

export default function DocumentPreferences() {
  const [publicDocs, setPublicDocs] = React.useState(false)
  const [notifySms, setNotifySms] = React.useState(true)
  const [autoResubmit, setAutoResubmit] = React.useState(false)
  const [saved, setSaved] = React.useState(false)

  return (
    <Card dir="rtl" lang="fa">
      <CardHeader>
        <CardTitle>تنظیمات تأیید مدارک</CardTitle>
        <CardDescription>
          نحوهٔ نمایش و اطلاع‌رسانی مدارک بارگذاری‌شده را مشخص کنید
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-0">
        <div className="flex items-center justify-between gap-4 py-3">
          <div className="space-y-0.5">
            <Label htmlFor="public-docs">نمایش عمومی مدارک</Label>
            <p className="text-sm text-muted-foreground">
              فقط وضعیت تأیید دیده شود؛ فایل‌ها عمومی نشوند
            </p>
          </div>
          <Switch
            id="public-docs"
            checked={publicDocs}
            onCheckedChange={setPublicDocs}
          />
        </div>
        <Separator />
        <div className="flex items-center justify-between gap-4 py-3">
          <div className="space-y-0.5">
            <Label htmlFor="notify-sms">اطلاع‌رسانی پیامکی</Label>
            <p className="text-sm text-muted-foreground">
              نتیجهٔ بررسی مدارک با پیامک اعلام شود
            </p>
          </div>
          <Switch
            id="notify-sms"
            checked={notifySms}
            onCheckedChange={setNotifySms}
          />
        </div>
        <Separator />
        <div className="flex items-center justify-between gap-4 py-3">
          <div className="space-y-0.5">
            <Label htmlFor="auto-resubmit">ارسال خودکار اصلاحیه</Label>
            <p className="text-sm text-muted-foreground">
              پس از رفع ایراد، مدرک دوباره برای بررسی ارسال شود
            </p>
          </div>
          <Switch
            id="auto-resubmit"
            checked={autoResubmit}
            onCheckedChange={setAutoResubmit}
          />
        </div>
      </CardContent>
      <CardFooter className="justify-between gap-2 border-t">
        <p className="text-xs text-muted-foreground">
          {saved ? "تنظیمات ذخیره شد" : "تغییرات هنوز ذخیره نشده"}
        </p>
        <Button
          type="button"
          onClick={() => {
            setSaved(true)
            window.setTimeout(() => setSaved(false), 2000)
          }}
        >
          ذخیره تنظیمات
        </Button>
      </CardFooter>
    </Card>
  )
}

document-split-upload.tsx

"use client"

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

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export default function DocumentSplitUpload() {
  const [fileName, setFileName] = React.useState<string | null>(null)
  const [done, setDone] = React.useState(false)
  const inputRef = React.useRef<HTMLInputElement>(null)

  return (
    <Card dir="rtl" lang="fa" className="overflow-hidden p-0">
      <CardContent className="grid p-0 md:grid-cols-2">
        <div className="p-6 md:p-8">
          {done ? (
            <div className="flex h-full flex-col justify-center gap-4">
              <div className="space-y-2 text-center md:text-start">
                <h1 className="text-2xl font-bold">مدرک ارسال شد</h1>
                <p className="text-muted-foreground">
                  {fileName
                    ? `فایل «${fileName}» در صف بررسی قرار گرفت.`
                    : "مدرک شما دریافت شد."}
                </p>
              </div>
              <Button
                variant="outline"
                onClick={() => {
                  setDone(false)
                  setFileName(null)
                }}
              >
                بارگذاری مدرک دیگر
              </Button>
            </div>
          ) : (
            <form
              onSubmit={(event) => {
                event.preventDefault()
                if (fileName) setDone(true)
              }}
            >
              <FieldGroup>
                <div className="flex flex-col items-center gap-2 text-center md:items-start md:text-start">
                  <h1 className="text-2xl font-bold">تأیید مدارک</h1>
                  <p className="text-balance text-muted-foreground">
                    تصویر کارت ملی یا شناسنامه را بارگذاری کنید
                  </p>
                </div>
                <Field>
                  <FieldLabel htmlFor="doc-title">عنوان مدرک</FieldLabel>
                  <Input id="doc-title" placeholder="روی کارت ملی" required />
                </Field>
                <Field>
                  <FieldLabel>فایل</FieldLabel>
                  <input
                    ref={inputRef}
                    type="file"
                    accept="image/*,application/pdf"
                    className="sr-only"
                    onChange={(event) =>
                      setFileName(event.target.files?.[0]?.name ?? null)
                    }
                  />
                  <Button
                    type="button"
                    variant="outline"
                    className="w-full"
                    onClick={() => inputRef.current?.click()}
                  >
                    <UploadIcon />
                    {fileName ? fileName : "انتخاب فایل"}
                  </Button>
                  <FieldDescription>
                    حداکثر ۵ مگابایت؛ گوشه‌های مدرک مشخص باشد
                  </FieldDescription>
                </Field>
                <Button type="submit" className="w-full" disabled={!fileName}>
                  ارسال برای بررسی
                </Button>
              </FieldGroup>
            </form>
          )}
        </div>
        <div className="relative hidden bg-muted md:block">
          <img
            src="/farsiui/parsian.jpg"
            alt="Parsian"
            className="absolute inset-0 h-full w-full object-cover"
          />
        </div>
      </CardContent>
    </Card>
  )
}

document-status-gallery.tsx

"use client"

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

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 DocumentStatusGallery() {
  const [status, setStatus] = React.useState<StatusKey>("pending")

  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">
              <Card className="mx-auto max-w-xl">
                <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>
                  <p className="mt-4 text-xs text-muted-foreground">
                    شماره پیگیری:{" "}
                    <span dir="ltr" className="font-medium tabular-nums text-foreground">
                      DV-۱۴۰۵-۰۹۱۲
                    </span>
                  </p>
                </CardContent>
                {item.action ? (
                  <CardFooter>
                    <Button
                      className="w-full"
                      variant={key === "rejected" ? "outline" : "default"}
                    >
                      {item.action}
                    </Button>
                  </CardFooter>
                ) : null}
              </Card>
            </TabsContent>
          )
        })}
      </Tabs>
    </div>
  )
}