Shadcn UI کا استعمال کرتے ہوئے React میں توسیع پذیر KYC آن بورڈنگ فلو کیسے بنایا جائے۔

تعمیل کی ضروریات کے ساتھ کوئی بھی B2B SaaS پروڈکٹ (مثلاً بینکنگ، قرض دینا، پے رول، یا کریپٹو کرنسی) ابتدائی طور پر ایک ہی دیوار سے ٹکراتا ہے۔ کسی کاروبار کو اپنا پلیٹ فارم استعمال کرنے کی اجازت دینے سے پہلے، آپ کو اس بات کی تصدیق کرنی ہوگی کہ وہ کاروبار کون ہے۔

اس کا مطلب یہ ہے کہ آن بورڈنگ کسی کسٹم فارم کی طرح محسوس نہیں ہوتی، صرف کاروبار کی قسم اکٹھا کرنا، رجسٹریشن کے دستاویزات کھینچنا، اور صارفین کو دکھانا کہ کہاں تصدیق کرنی ہے۔

یہ مضمون Shadcn UI کے ساتھ بنائے گئے تین قدمی Know Your Customer (KYC) بہاؤ کا تجزیہ کرتا ہے۔ یعنی، پیش رفت کے لیے ایک سٹیپر، اکاؤنٹ کی قسم کے لیے ایک ریڈیو گروپ، دستاویزات کے لیے فائل اپ لوڈ ایریا، اور تصدیق کی حیثیت کے لیے الرٹس۔ آپ ہر فیصلے کی وجوہات کے ساتھ، آسان متبادل کوڈ کے بجائے اصل جزو کوڈ دیکھ سکتے ہیں۔

آپ یہاں مکمل ہونے والے بہاؤ کو آزما سکتے ہیں: onboarding-kyc-flow.vercel.app. نیچے دیئے گئے کوڈ کی پیروی کرنا آسان ہے، لہذا پڑھنے سے پہلے اسے آزمائیں۔ اور ڈارک اور لائٹ موڈز بھی ہیں۔

انڈیکس

شرطیں

اس بہاؤ سے گزرنے سے پہلے، آپ کو خاص طور پر React فنکشن کے اجزاء اور ہکس سے واقف ہونا چاہیے۔ useState, useRefاور useEffect.

آپ کے پاس ہونا چاہیے:

• ایپ روٹر اور shadcn/ui کے ساتھ ایک Next.js پروجیکٹ پہلے ہی شروع کر دیا گیا ہے۔ اس کی وجہ یہ ہے کہ یہ مضمون اس ابتدائی سیٹ اپ کا احاطہ نہیں کرتا ہے۔

• v0 اکاؤنٹ اختیاری ہے۔ آپ Bolt یا Lovable بھی استعمال کر سکتے ہیں، جو اسی shadcn MCP پرامپٹ فعالیت کو سپورٹ کرتے ہیں۔

آپ کیا بنا رہے ہیں

بہاؤ میں تین مراحل ہیں:

1. اکاؤنٹ کی قسم: صارفین اسٹارٹ اپ، انٹرپرائز، یا گورنمنٹ کا انتخاب کرتے ہیں۔ یہ فیصلہ باقی تجربے کو آگے بڑھاتا ہے۔ یہ صارف کے لیے تصدیقی لائن کے طور پر دوبارہ ظاہر ہوتا ہے اور عام طور پر اس بات کا تعین کرتا ہے کہ کون سے ورک اسپیس ڈیفالٹس لاگو ہوں گے۔

2. دستاویز اپ لوڈ کریں: صارفین برآمدی کاروباری رجسٹریشن دستاویزات، ٹیکس ریٹرن یا کمپنی رجسٹریشن کو PDF یا CSV فارمیٹ میں گھسیٹتے ہیں۔

3. تصدیق کی حیثیت: صارفین ریئل ٹائم اسٹیٹس چیک کرتے ہیں۔ اس کا مطلب ہے کہ آپ کو کوئی بھی جاری چیک، تصدیق شدہ مسائل، یا ایسے مسائل نظر آئیں گے جن پر توجہ دینے کی ضرورت ہے۔

منصوبے کی ساخت

یہ پروجیکٹ ایک معیاری Next.js ایپ ہے۔ shadcn/ui اسے پہلے ہی شروع کیا جا چکا ہے۔ اعلی درجے کی ترتیب یہ ہے:

onboarding-kyc-flow/
├── .vercel/
├── app/
├── components/
├── lib/
├── public/
├── .env.development.local
├── .gitignore
├── components.json
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── tsconfig.json
└── tsconfig.tsbuildinfo

components.json shadcn فائل جسے CLI اس بات کا تعین کرنے کے لیے پڑھتا ہے کہ جزو کہاں واقع ہے اور یہ کون سے اسٹائل اور پرائمیٹیو استعمال کر رہا ہے۔ components/ مشترکہ UI حصوں (الرٹس، بیجز، بٹنز، کارڈز، پروگریس، ریڈیو گروپ، الگ کرنے والے) کو رکھتا ہے جس پر فلو بنایا جاتا ہے۔ lib/utils.ts پیشکش cn مشروط کلاس کے ناموں کو یکجا کرنے کے لیے پورے بہاؤ میں استعمال کیا جاتا مددگار۔ app/ یہ صفحہ خود رکھتا ہے، نیچے مکمل طور پر دکھایا گیا ہے۔

Radix UI اور بنیادی UI: اس بہاؤ میں استعمال ہونے والے بنیادی عناصر۔

Shadcn جزو یہ کسی ایک ڈیفالٹ مقامی لائبریری سے منسلک نہیں ہے۔ زیادہ تر ماحولیاتی نظام Radix UI کے لیے ڈیفالٹ ہوتے ہیں، لیکن Base UI ایک ٹھوس متبادل ہے اور اسی پر یہ بہاؤ بنایا گیا ہے۔

بنیادی بنیادی لائبریری اس بات کو متاثر کر سکتی ہے کہ ایک جزو کیسے کام کرتا ہے اور آپ اپنے پروجیکٹ میں اس جز کو کیسے استعمال کر سکتے ہیں۔ اگر آپ Shadcn UI جیسے سیٹ سے اجزاء نکال رہے ہیں تو مختلف ذرائع سے اجزاء کو ملانے سے پہلے چیک کریں کہ آپ کس بنیادی لائبریری کو نشانہ بنا رہے ہیں۔

ریڈکس پر مبنی اجزاء کو مقامی UI پر مبنی اجزاء کے ساتھ ملانا عام طور پر کام کرتا ہے، لیکن ایک ہی پروجیکٹ میں دو مختلف مقامی، غیر اسٹائل شدہ لائبریریوں کا استعمال کرنا ہے۔ آپ کر سکتے ہیں Radix UI اور Base UI کا یہاں موازنہ کریں۔.

v0 اور MCP سرورز کا استعمال کرتے ہوئے سہاروں کا بہاؤ

ماڈل سیاق و سباق پروٹوکول (MCP) سرورز اجزاء کی لائبریریوں کو AI کوڈنگ اسسٹنٹس کو کال ایبل ٹولز کے سیٹ کے طور پر ظاہر کرتے ہیں۔ آپ کے اسسٹنٹ کو آپ کے تربیتی ڈیٹا میں اجزاء کے ناموں اور پرپس کا اندازہ لگانے کے بجائے، یہ سرور سے اصل، اپ ٹو ڈیٹ API کے لیے استفسار کرتا ہے۔

یہ یہاں خاص طور پر اہم ہے کیونکہ ایک جیسے ناموں اور مختلف پرپس کے ساتھ shadcn طرز کے اجزاء کے کئی سیٹ ہیں۔

Shadcn جزو لائبریری ذیل میں v0 سے منسلک مفت سیٹ کے لیے ایک MCP سرور شائع کرتی ہے: شروع کرنا گائیڈ. نیچے دی گئی ویڈیو میں کنکشن کے مرحلہ وار مراحل کا احاطہ کیا گیا ہے۔ اسی تیار کردہ آؤٹ پٹ کو کاپی پرامپٹ فیچر کے ذریعے Lovable یا Bolt میں بھی کاپی کیا جا سکتا ہے، اس لیے آپ کا ورک فلو ایک AI بلڈر پر بند نہیں ہوتا ہے۔

اس بہاؤ کو بنیاد بنانے کے لیے استعمال کیے جانے والے اشارے یہ ہیں:

انٹرپرائز SaaS آن بورڈنگ اور KYC فلو بنائیں۔ shadcn spatial MCP سرور کے مفت اجزاء استعمال کریں: shadcn الرٹس، shadcn ریڈیو گروپس، shadcn steppers، اور shadcn فائل اپ لوڈز۔ صرف مفت اجزاء استعمال کریں، پرو اجزاء نہیں، اور فہرست بنائیں کہ ہر حصے کے لیے کون سے مفت اجزاء استعمال کیے جاتے ہیں۔

مرحلہ 1: اکاؤنٹ کی قسم (اسٹیپر) – اسٹارٹ اپ، کاروباری اداروں یا حکومتوں کے لیے ریڈیو گروپ

مرحلہ 2: دستاویز اپ لوڈ کریں (سٹیپر) – بزنس رجسٹریشن سرٹیفکیٹ فائل اپ لوڈ کریں۔

مرحلہ 3: تصدیق (سٹیپر) – تصدیق کی حیثیت کی نشاندہی کرنے والی اطلاع

یہ تیزی سے کام کرنے والا پہلا مسودہ تیار کرے گا۔ ڈرافٹ کو صاف کرنے کے بعد نتیجہ یہ ہے۔ یہ وہ ریاستیں ہیں جن کا اصل ریاستی انتظام، اصل تصدیق، اور تیار کردہ مسودے نظر انداز ہوتے ہیں۔

مرحلہ 1: ریڈیو گروپ کے ساتھ اکاؤنٹ کی قسم

اکاؤنٹ کی قسم بہاؤ میں پہلا فیصلہ ہے۔ اس کی وجہ یہ ہے کہ اس کے بعد کے فیصلوں پر اثر انداز ہونے کا زیادہ امکان ہے۔ قبل از وقت درخواست کرنا صارف کی جانب سے کیے گئے انتخاب سے متعلق بقیہ بہاؤ کو برقرار رکھتا ہے۔

const tiers: { id: Tier; name: string; description: string; tag: string }[] = [
  { id: 'startup', name: 'Startup', description: 'For teams building and scaling fast', tag: 'Up to 25 seats' },
  { id: 'enterprise', name: 'Enterprise', description: 'For established teams with advanced needs', tag: 'Unlimited seats' },
  { id: 'government', name: 'Government', description: 'For public sector and regulated teams', tag: 'FedRAMP-ready' },
]

 setTier(value as Tier)} className="grid gap-3">
  

    
Account type
    {tiers.map((item) => (
      
        
        
          
            {item.name}
            {item.id === 'enterprise' && Recommended}
          
          {item.description}
          {item.tag}
        
      
    ))}
  

یہاں دو باتیں قابل توجہ ہیں۔ پرت کا ڈیٹا جزو کے باہر ایک باقاعدہ صف میں ہے، لہذا بعد میں چوتھی پرت کو شامل کرنا ایک لائن کی تبدیلی ہے، مارک اپ کی تبدیلی نہیں۔ اور fieldset بصری طور پر پوشیدہ (sr-only) لیجنڈ اسکرین ریڈر کے تین اختیارات کو ایک متعلقہ انتخاب میں گروپ کرتا ہے۔ اوپر والے کارڈ کا عنوان پہلے سے ہی بصری طور پر "اکاؤنٹ کی قسم کو منتخب کریں” کو بیان کرتا ہے، اس لیے دیکھنے والے صارفین اسے نہیں دیکھ پائیں گے۔

اس مرحلے پر shadcn ریڈیو گروپ یہ کوئی انتخاب یا چیک باکس نہیں ہے کیونکہ اکاؤنٹ کی قسم ایک واحد، باہمی طور پر خصوصی انتخاب ہے، اور ریڈیو گروپ ان تینوں میں سے واحد گروپ ہے جو آپ کو اپنے اختیارات اور موجودہ انتخاب کو ایک نظر میں دیکھنے کی اجازت دیتا ہے۔

لائیو پیش نظارہ:

---

مرحلہ 2: ڈریگ اینڈ ڈراپ کے ذریعے دستاویزات اپ لوڈ کریں۔

اپ لوڈ ایریا کو واضح طور پر تین حالتوں کو ہینڈل کرنا چاہیے: ابھی تک کوئی آئٹم منتخب نہیں کیا گیا، فائلیں منتخب اور تیار، اور فائلیں کسی خاص وجہ سے مسترد کر دی گئیں۔

function FileUpload({ file, onFile, onRemove, error }: {
  file: File | null
  onFile: (file: File) => void
  onRemove: () => void
  error: string
}) {
  const inputRef = useRef(null)
  const [dragging, setDragging] = useState(false)

  const accept = (candidate: File) => {
    if (candidate.type !== 'application/pdf' && candidate.type !== 'text/csv' && !candidate.name.toLowerCase().endsWith('.csv')) {
      return 'Upload a PDF or CSV file only.'
    }
    if (candidate.size > 10 * 1024 * 1024) {
      return 'Files must be smaller than 10 MB.'
    }
    onFile(candidate)
    return ''
  }

  return (
    
  )
}

کہ accept فنکشن پوری توثیق کی پرت ہے اور دو مختلف جگہوں پر چلتا ہے: پوشیدہ فائل ان پٹ کے لیے تبدیلی ہینڈلر اور ڈریگ ایریا کے لیے ڈراپ ہینڈلر۔

دونوں راستے ایک ہی فنکشن کو کال کرتے ہیں، لہذا ڈریگ فائل کو وہی توثیق حاصل ہوتی ہے جس فائل کو آپ براؤز پر کلک کرکے منتخب کرتے ہیں۔ یہ صرف ہے PDF یا CSV فائل اس کی اجازت ہے قطع نظر اس کے کہ آپ فائل کیسے شامل کرتے ہیں۔

یہ جگہ shadcn فائل اپ لوڈ کریں۔ میدان میں آباد ہو جاؤ : ڈریگ ریجن، سلیکشن سٹیٹ، اور ریجیکشن سٹیٹ تین الگ الگ ٹکڑوں کو ہاتھ سے جوڑنے کے بجائے ایک جزو کے طور پر سنبھالے جاتے ہیں۔

لائیو پیش نظارہ:

مرحلہ 3: اطلاعات کے ساتھ تصدیق کی حیثیت

تصدیق فوری نہیں ہوتی، اس لیے بغیر وضاحت کے اسپنر دکھانے کے بجائے، انٹرفیس کو یہ واضح کرنا چاہیے کہ کیا ہو رہا ہے اور آگے کیا ہوتا ہے۔

{verified ? (
  
    
    Verification complete
    
      Your {selectedTier.name.toLowerCase()} workspace is ready to configure.
    
  
) : (
  <>
    
      
      Verification in progress
      
        This usually takes a few moments. You can keep this tab open while we finish.
      
    
    

      

        Checking business registry
        {checking ? '68%' : '100%'}
      
      
      

         Matching company details and tax identifiers
      
    
  >
)}

جوڑا بنانا shadcn وارننگ ایک پروگریس بار آپ کو ایک ساتھ دو کام کرنے کی اجازت دیتا ہے۔ انتباہات موجودہ حیثیت کو زبانی طور پر بیان کرتے ہیں، جبکہ پیشرفت کی سلاخوں سے اس بات کا اندازہ ہوتا ہے کہ کسی مخصوص وقت کا ارتکاب کیے بغیر کتنا بچا ہے۔ کوئی بھی پوری کہانی نہیں بتاتا، تنبیہات ہی جامد محسوس ہوتی ہیں، اور اکیلے پروگریس بار اس بات کی وضاحت نہیں کرتے کہ آپ اصل میں کیا دیکھ رہے ہیں۔

یہ یہاں شامل کرنے کے قابل ہے، اور جب ڈیمو صرف کامیابی کا راستہ دکھاتا ہے تو اسے چھوڑنا آسان ہے۔ غیر مماثل حیثیت جہاں کسی دستاویز پر موجود ٹیکس ID آپ کی کمپنی کی رجسٹریشن سے مماثل نہیں ہے واضح اگلے اقدامات (سپورٹ سے رابطہ کرنا یا درست شدہ دستاویز کو دوبارہ اپ لوڈ کرنا) کے ساتھ اس کی اپنی وارننگ کا مستحق ہے۔ اگرچہ اوپر نہیں دکھایا گیا ہے، اس بہاؤ کا پروڈکشن ورژن وہ حالت ہے جس پر سب سے زیادہ اثر پڑتا ہے کیونکہ بہاؤ فی الحال ٹھیک ہے یا ٹھیک ہے۔

لائیو پیش نظارہ:

---

بہاؤ میں سٹیپر شامل کریں۔

سٹیپر مجموعی بہاؤ کا بصری اینکر ہے۔ یہ وہ حصہ ہے جو تصدیق اور اکاؤنٹ کی قسم کا انتخاب مکمل ہونے سے پہلے صارف کو بقیہ رقم کی اطلاع دیتا ہے۔

function Stepper({ current }: { current: Step }) {
  return (