update src/components/CustomSelectBox/index.js, src/components/RadioButton/index.js and src/components/Settingss/index.js

src/components/CustomSelectBox/index.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const CustomSelectBox = ({ options }) => {
   return (
-    <select className="customizeSelect rounded text-xs text-[#00253A] py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
+    <select className="customizeSelect w-full rounded text-xs text-[#00253A] py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
       {options.map((option, index) => (
         <option className="text-black" key={index}>
           {option.title}

src/components/RadioButton/index.js

@@ -2,14 +2,16 @@ import React from "react";
 
 const RadioButton = () => {
   return (
-    <div className="relative flex items-center justify-between rounded py-4 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse">
+    <div className="relative">
+      <div className="flex items-center justify-between rounded py-4 bg-[#FBFBFB] focus:bg-[#f5f5f5] border border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse">
         <div className="flex items-center justify-center flex-1 pl-5">
           <input
             id="default-radio-1"
             type="radio"
             value=""
             name="default-radio"
-          class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+            class="w-4 h-4 cursor-pointer"
+            checked="checked"
           />
           <label for="default-radio-1" class="mr-2 text-xs text-[#00253A]">
             بله
@@ -21,12 +23,13 @@ const RadioButton = () => {
             type="radio"
             value=""
             name="default-radio"
-          class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+            class="w-4 h-4 cursor-pointer"
           />
           <label for="default-radio-2" class="mr-2 text-xs text-[#00253A]">
             خیر
           </label>
         </div>
+      </div>
       <div class="absolute top-0 transform -translate-y-2.5 -translate-x-2 px-2 z-10 bg-white">
         <p className="text-xs text-[#00253A]">آیا قابلیت ارجاع دارد؟</p>
       </div>

src/components/Settingss/index.js

@@ -10,9 +10,8 @@ const Settingss = ({ status }) => {
   const { register, getValues } = useForm();
 
   return (
-    <div className="w-full flex flex-row items-start justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse">
+    <div className="w-full flex flex-row items-start justify-between mx-auto  divide-x-2 divide-[#E3E3E3] divide-x-reverse">
-      <div className="flex-grow flex-1 flex flex-col pl-5">
+      <div className="flex-grow flex-1 flex flex-col gap-y-7 pl-5">
-        <div className="flex flex-col gap-y-7">
         <CustomSelectBox
           options={[
             { title: "نام فرآیند" },
@@ -55,13 +54,62 @@ const Settingss = ({ status }) => {
           </div>
         </div>
         <RadioButton />
+        <CustomSelectBox
+          options={[
+            { title: "انتخاب نقش های قابل ارجاع" },
+            { title: "شماره 1" },
+            { title: "شماره 2" },
+            { title: "شماره 3" },
+          ]}
+        />
+        <CustomSelectBox
+          options={[
+            { title: "انتخاب نقش انجام دهنده" },
+            { title: "شماره 1" },
+            { title: "شماره 2" },
+            { title: "شماره 3" },
+          ]}
+        />
       </div>
+      <div className="flex-grow flex-1 flex flex-col pr-5 gap-y-7">
+        <CustomSelectBox
+          options={[
+            { title: "فرآیند مرجع" },
+            { title: "شماره 1" },
+            { title: "شماره 2" },
+            { title: "شماره 3" },
+          ]}
+        />
+        <CustomSelectBox
+          options={[
+            { title: "فرآیندهای لینک" },
+            { title: "شماره 1" },
+            { title: "شماره 2" },
+            { title: "شماره 3" },
+          ]}
+        />
+        <div className="w-full flex items-center gap-x-3">
+          <CustomSelectBox
+            options={[
+              { title: "زمان تاخیر" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <CustomSelectBox
+            options={[
+              { title: "مهلت انجام" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
         </div>
-      <div className="flex-grow flex-1 flex flex-col pr-5">
+        <div className="w-full flex items-center gap-x-3">
-        <div className="flex flex-col gap-y-7">
           <CustomSelectBox
             options={[
-              { title: "انتخاب سرویس" },
+              { title: "تایید خودکار" },
               { title: "شماره 1" },
               { title: "شماره 2" },
               { title: "شماره 3" },
@@ -69,7 +117,7 @@ const Settingss = ({ status }) => {
           />
           <CustomSelectBox
             options={[
-              { title: "انتخاب تابع" },
+              { title: "انقضا" },
               { title: "شماره 1" },
               { title: "شماره 2" },
               { title: "شماره 3" },