report fix

src/app/[name]/(Dialogs)/report/enum/Enum.ts

@@ -0,0 +1,4 @@
+export enum ContactScope {
+  APPLICATION = "application",
+  RESTAURANT = "restaurant",
+}

src/app/[name]/(Dialogs)/report/page.tsx

@@ -13,6 +13,8 @@ import * as Yup from 'yup';
 import { useCreateReport } from './hooks/useReportData';
 import { toast } from '@/components/Toast';
 import { extractErrorMessage } from '@/lib/func';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { ContactScope } from './enum/Enum';
 
 type Props = object;
 
@@ -28,10 +30,12 @@ function ReportIndex({ }: Props) {
         initialValues: {
             subject: '',
             content: '',
+            scope: ContactScope.RESTAURANT,
         },
         validationSchema: Yup.object({
             subject: Yup.string().required('این فیلد اجباری است'),
             content: Yup.string().required('این فیلد اجباری است'),
+            scope: Yup.string().oneOf([ContactScope.APPLICATION, ContactScope.RESTAURANT]).required('این فیلد اجباری است'),
         }),
         onSubmit: (values) => {
             createReport(values, {
@@ -62,7 +66,7 @@ function ReportIndex({ }: Props) {
             <div className="flex lg:justify-center lg:items-center flex-1 bg-inherit">
                 <div className="w-full lg:w-fit lg:h-fit lg:min-w-3/4 lg:min-h-3/4 flex flex-col-reverse lg:grid lg:gap-8 lg:bg-container lg:grid-cols-2 lg:p-8 lg:rounded-container lg:justify-around lg:items-center bg-inherit">
                     <form className='flex-1 bg-inherit flex flex-col justify-between items-end' onSubmit={formik.handleSubmit}>
-                        <div className='bg-inherit lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
+                        <div className='bg-inherit pb-4 lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
                             <div className="bg-inherit flex flex-col h-full">
                                 <div className='w-full px-4 mt-10'>
                                     <h2 className='text-sm2 font-medium'>{t('FormHeading')}</h2>
@@ -70,6 +74,7 @@ function ReportIndex({ }: Props) {
                                 </div>
                                 <InputField
                                     className='w-full mt-6 px-4 bg-inherit'
+                                    inputClassName='text-xs!'
                                     type='text'
                                     placeholder={t('InputTitle.Placeholder')}
                                     labelText={t('InputTitle.Label')}
@@ -82,9 +87,11 @@ function ReportIndex({ }: Props) {
                                     aria-errormessage={formik.touched.subject && formik.errors.subject ? formik.errors.subject : undefined}
                                 />
 
+
+
                                 <div className='relative bg-inherit mt-6 flex-1'>
                                     <textarea
-                                        className={`w-full px-4 py-2.5 text-sm2 leading-6 outline-0 border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0 ${formik.touched.content && formik.errors.content
+                                        className={`w-full text-xs! px-4 py-2.5 leading-6 outline-0 border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0 ${formik.touched.content && formik.errors.content
                                             ? 'border-invalid'
                                             : 'border-border'
                                             }`}
@@ -104,6 +111,30 @@ function ReportIndex({ }: Props) {
                                         </span>
                                     )}
                                 </div>
+
+                                <div className='w-full mt-4 px-4 bg-inherit'>
+                                    <h3 className='text-sm2 font-medium leading-5'>{t('InputScope.Label')}</h3>
+                                    <RadioGroup
+                                        value={formik.values.scope}
+                                        onValueChange={(value) => {
+                                            formik.setFieldValue('scope', value as ContactScope);
+                                        }}
+                                        className='flex flex-col gap-3 mt-2'
+                                    >
+                                        <div className='flex items-center justify-between'>
+                                            <RadioGroupItem value={ContactScope.RESTAURANT} id={`scope-${ContactScope.RESTAURANT}`} />
+                                            <label className='flex items-center gap-2 cursor-pointer' htmlFor={`scope-${ContactScope.RESTAURANT}`}>
+                                                <span className='text-xs mt-0.5'>{t('InputScope.Options.Restaurant')}</span>
+                                            </label>
+                                        </div>
+                                        <div className='flex items-center justify-between'>
+                                            <RadioGroupItem value={ContactScope.APPLICATION} id={`scope-${ContactScope.APPLICATION}`} />
+                                            <label className='flex items-center gap-2 cursor-pointer' htmlFor={`scope-${ContactScope.APPLICATION}`}>
+                                                <span className='text-xs mt-0.5'>{t('InputScope.Options.Application')}</span>
+                                            </label>
+                                        </div>
+                                    </RadioGroup>
+                                </div>
                             </div>
                             <Button
                                 className='w-full px-4 mt-6'

src/app/[name]/(Dialogs)/report/types/Types.ts

@@ -1,4 +1,7 @@
+import { ContactScope } from '../enum/Enum';
+
 export type CreateReportType = {
   subject: string;
   content: string;
+  scope: ContactScope;
 };

src/components/input/InputField.tsx

@@ -9,17 +9,18 @@ type Props = {
     labelText?: React.ReactNode;
     value?: string;
     valid?: boolean
+    inputClassName?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
 
 
 const InputField = React.forwardRef<HTMLInputElement, Props>(
-    ({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }, ref) => {
+    ({ onChange, htmlFor, labelText, children, valid = true, className, inputClassName, ...inputProps }, ref) => {
         return (
-            <div 
+            <div
-                spellCheck={false} 
+                spellCheck={false}
                 className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
                 <label
-                    className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
+                    className='absolute start-2 -top-2.5 px-2 text-[12px] text-foreground bg-white'
                     htmlFor={htmlFor}>
                     {labelText}
                 </label>
@@ -29,8 +30,9 @@ const InputField = React.forwardRef<HTMLInputElement, Props>(
                         ref={ref}
                         onChange={onChange}
                         className={clsx(
-                            inputProps['aria-errormessage'] && '!text-red-300',
+                            inputProps['aria-errormessage'] && 'text-red-300!',
-                            'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
+                            'py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!',
+                            inputClassName
                         )}
                         name={htmlFor}
                         {...inputProps} />

src/components/input/PasswordField.tsx

@@ -23,7 +23,7 @@ function PasswordField({ onChange, htmlFor, labelText, children, valid = true, c
             spellCheck={false}
             className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
             <label
-                className='absolute start-2 -top-2.5 px-2 bg-inherit text-[12px] text-foreground'
+                className='absolute start-2 bg-white -top-2.5 px-2 text-[12px] text-foreground'
                 htmlFor={htmlFor}>
                 {labelText}
             </label>
@@ -33,8 +33,8 @@ function PasswordField({ onChange, htmlFor, labelText, children, valid = true, c
                     type={state ? 'text' : 'password'}
                     onChange={onChange}
                     className={clsx(
-                        inputProps['aria-errormessage'] && '!text-red-300',
+                        inputProps['aria-errormessage'] && 'text-red-300!',
-                        'py-2.5 pt-3.5 text-sm2 w-full outline-0 !leading-6'
+                        'py-2.5 pt-3.5 text-sm2 w-full outline-0 leading-6!'
                     )}
                     name={htmlFor}
                     {...inputProps} />

src/locales/fa/parallels.json

@@ -11,6 +11,13 @@
       "Label": "توضیحات",
       "Placeholder": "توضیحات خود را وارد کنید"
     },
+    "InputScope": {
+      "Label": "حوزه",
+      "Options": {
+        "Restaurant": "رستوران",
+        "Application": "اپلیکیشن"
+      }
+    },
     "ButtonSubmit": "ثبت"
   },
   "Cart": {