Merge branch 'main' of https://git.point-dev.net/moaz_dw/mns-front

src/Components/ValidationField/ValidationField.tsx

@@ -1,46 +1,55 @@
 import React from "react";
-import "./utils/ValidationField.scss";
+import "./ValidationField.scss";
-import {
+import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
-  Date,
-  Time,
-  File,
-  DataRange,
-  SelectField,
-  CheckboxField,
-  MaltyFile,
-  SearchField,
-  TextField,
-  DropFile,
-  Default,
-} from "./View";
-import { ValidationFieldProps, ValidationFieldType } from "./utils/types";
-import LocalSearchField from "./View/LocalSearch";
-import NumberFormate from "./View/NumberFormate";
 
-const components: { [key: string]: React.FC<any> } = {
+export interface ValidationFieldProps {
-  Select: SelectField,
+  name: string;
-  Search: SearchField,
+  type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
-  LocalSearch: LocalSearchField,
+  placeholder?: string;
-  DataRange: DataRange,
+  label?: string;
-  TextArea: TextField,
+  className?: string;
-  Date: Date,
+  option?: any[];
-  Time: Time,
+  isMulti?: boolean;
-  File: File,
+  isDisabled?: boolean;
-  DropFile: DropFile,
+  picker?: "data" | "week" | "month" | "quarter" | "year";
-  MaltyFile: MaltyFile,
+  Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
-  Checkbox: CheckboxField,
+  accept?: any
-  NumberFormate: NumberFormate,
+  onChange?: (value: any) => void;
+  Group?: boolean
+  dir?: 'ltr' | "rtl"
+}
+
+const ValidationField = (props: ValidationFieldProps) => {
+  switch (props?.type) {
+    case 'Select':
+      return <SelectField {...props} />;
+    case "DataRange":
+      return <DataRange {...props} />;
+    case "Date":
+      return <Date {...props} />;
+    case "Time":
+      return <Time {...props} />;
+    case "File":
+      return <File {...props} />;
+    case "Checkbox":
+      return <CheckboxField {...props} />;
+    default:
+      return <Default {...props} />;
+  }
 };
 
-const ValidationField: React.FC<ValidationFieldProps> = React.memo(
+ValidationField.defaultProps = {
-  ({ type = "text", ...otherProps }) => {
+  type: "text",
-    const Component = components[type ?? ("text" as ValidationFieldType)];
+  className: 'default-class',
+  option: [],
+  isMulti: false,
+  isDisabled: false,
+  picker: "date",
+  Format: "YYYY/MM/DD",
+  onChange: undefined,
+  Group: false,
+  dir: "ltr",
 
-    if (!Component) {
+};
-      return <Default {...otherProps} />;
-    }
-    return <Component {...otherProps} />;
-  },
-);
 
 export default ValidationField;

src/Components/ValidationField/View/CheckboxField.tsx

@@ -1,35 +1,29 @@
-import React from "react";
+import React from 'react'
-import useFormField from "../../../Hooks/useFormField";
+import useFormField from '../../../Hooks/useFormField';
-import { Checkbox } from "antd";
+import { Checkbox } from 'antd';
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+
-const CheckboxField = ({
+const CheckboxField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange,Group, props }: any) => {
-  name,
+
-  label,
+  const { t, formik } = useFormField(name, props)
-  isDisabled,
+  const CheckboxhandleChange = (value:any) => {
-  onChange,
+    console.log(value.target.checked);
-  Group,
+    
-  className,
+    formik.setFieldValue(name, value.target.checked)
-  props,
+
-}: any) => {
-  const { t, formik, isError, errorMsg } = useFormField(name, props);
-  const CheckboxhandleChange = (value: any) => {
-    formik.setFieldValue(name, value?.target?.checked);
   };
-
   return (
-    <div className={Group ? "d-inline mt-3 Checkbox" : ``}>
+    <div className={Group ? "d-inline mt-3 Checkboxs" :``}>
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+      <Checkbox
-        <Checkbox
+        onChange={onChange || CheckboxhandleChange}
-          onChange={onChange || CheckboxhandleChange}
+        disabled={isDisabled}
-          disabled={isDisabled}
+        checked={formik.getFieldProps(name).value}
-          checked={formik.values?.[name] ?? false}
-          className={className}
-        >
-          {t(`input.${label ? label : name}`)}
-        </Checkbox>
-      </ValidationFieldContainer>
-    </div>
-  );
-};
 
-export default CheckboxField;
+      >
+        {t(label)}
+      </Checkbox>
+
+    </div>
+  )
+}
+
+export default CheckboxField

src/Components/ValidationField/View/DataRange.tsx

@@ -1,55 +1,40 @@
-import { Form, DatePicker } from "antd";
+import { Form, DatePicker } from 'antd'
 
-import React from "react";
+import React from 'react'
-import useFormField from "../../../Hooks/useFormField";
+import useFormField from '../../../Hooks/useFormField';
-import { MdOutlineEdit } from "react-icons/md";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
 
 const { RangePicker } = DatePicker;
 
-const DataRange = ({
+const DataRange = ({ name, label, isDisabled, option, isMulti, Format, props }: any) => {
-  name,
+
-  label,
+  const { errorMsg, isError, t, formik } = useFormField(name, props)
-  Format,
-  props,
-  onChange,
-  isDisabled,
-  placeholder,
-  className,
-  no_label,
-  label_icon,
-}: any) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
   const onCalendarChange = (value: any) => {
-    formik.setFieldValue(name, value);
+
+    formik.setFieldValue(name, value)
+
   };
   return (
-    <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+    <div className='ValidationField'>
+      <label htmlFor={name} className="text">
+        {t(`${label}`)}
+      </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <RangePicker
-          placeholder={placeholder}
-          size="large"
           allowClear
-          className={`${className} w-100`}
+          className='w-100'
           format={Format}
-          onChange={onChange || onCalendarChange}
+          onCalendarChange={onCalendarChange}
-          disabled={isDisabled}
-          defaultValue={formik.values[name]}
-          id={name}
         />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
 
-export default DataRange;
+
+      </Form.Item>
+    </div>
+  )
+}
+
+export default DataRange

src/Components/ValidationField/View/Date.tsx

@@ -1,57 +1,40 @@
-import { Form, DatePicker } from "antd";
+import { Form, DatePicker } from 'antd'
-import React from "react";
+import React from 'react'
-import useFormField from "../../../Hooks/useFormField";
+import useFormField from '../../../Hooks/useFormField';
-import { MdOutlineEdit } from "react-icons/md";
+import dayjs from 'dayjs';
-import dayjs from "dayjs";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
 
-const Date = ({
+const Date = ({ name, label, isDisabled, option, isMulti, picker = "date", props }: any) => {
-  name,
-  label,
-  picker = "date",
-  isDisabled,
-  props,
-  onChange,
-  placeholder,
-  className,
-  no_label,
-  label_icon,
-}: any) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
 
-  const FormikValue = formik.values[name];
+  const { errorMsg, isError, t, formik } = useFormField(name, props)
   const onCalendarChange = (value: any) => {
-    formik.setFieldValue(name, value);
+
+    formik.setFieldValue(name, value)
+
   };
-
   return (
-    <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
 
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
+    <div className='ValidationField'>
+      <label htmlFor={name} className="text">
+        {t(`${label}`)}
+      </label>
+      <Form.Item
+        hasFeedback
+        validateStatus={isError ? "error" : ""}
+        help={isError ? errorMsg : ""}
+      >
         <DatePicker
           picker={picker}
-          placeholder={t(`input.${placeholder}`)}
           allowClear
-          className={`${className} w-100`}
+          className='w-100'
-          value={FormikValue ? FormikValue : null}
+          // defaultValue={formik.values[name]}
-          size="large"
-          onChange={onChange || onCalendarChange}
-          disabled={isDisabled}
-          id={name}
-        />
-        {/* <DatePicker onChange={onChange} /> */}
-      </ValidationFieldContainer>
-    </div>
-  );
-};
 
-export default Date;
+          onChange={onCalendarChange} />
+
+
+
+      </Form.Item>
+    </div>
+  )
+}
+
+export default Date

src/Components/ValidationField/View/Default.tsx

@@ -1,50 +1,32 @@
-import { Input } from "antd";
+import { Form, Input } from 'antd'
-import React from "react";
+import React from 'react'
-import useFormField from "../../../Hooks/useFormField";
+import useFormField from '../../../Hooks/useFormField';
-import { Field } from "formik";
+
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+const Default = ({ name, label, placeholder, isDisabled, onChange, props }: any) => {
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+  const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
-import { FieldProps } from "../utils/types";
 
-const Default = ({
-  name,
-  label,
-  placeholder,
-  isDisabled,
-  onChange,
-  type,
-  no_label,
-  label_icon,
-  ...props
-}: any) => {
-  const { errorMsg, isError, t } = useFormField(name, props);
 
   return (
-    <div className="ValidationField w-100">
+    <div className="ValidationField">
-      <ValidationFieldLabel
+      <label htmlFor={name} className="text">
-        name={name}
+        {t(`${label ? label : name}`)}
-        label={label}
+      </label>
-        label_icon={label_icon}
+      <Form.Item
-        no_label={no_label}
+        hasFeedback
-        placeholder={placeholder}
+        validateStatus={isError ? 'error' : ''}
-        t={t}
+        help={isError ? errorMsg : ''}
-      />
+      >
-
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
         <Field
           as={Input}
-          type={type ?? "text"}
+          type="text"
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(`${placeholder ? placeholder : name}`)}
           name={name}
-          id={name}
           disabled={isDisabled}
-          size="large"
+        //  onChange={onChange ? onChange : handleChange}
-          {...(type === "number" && { min: 0 })}
-          {...props}
         />
-      </ValidationFieldContainer>
+      </Form.Item>
     </div>
   );
 };
 
-export default React.memo(Default);
+export default Default;

src/Components/ValidationField/View/DropFile.tsx.tsx

@@ -1,93 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
-import { message, Upload } from "antd";
-import type { GetProp, UploadProps } from "antd";
-import useFormField from "../../../Hooks/useFormField";
-
-type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
-
-const DropFile = ({
-  name,
-  label,
-  onChange,
-  isDisabled,
-  placeholder,
-  className,
-  props,
-  no_label,
-  label_icon,
-}: any) => {
-  const { formik, t, isError } = useFormField(name, props);
-  let FormikName = formik?.values[name];
-
-  const FormikValue =
-    typeof FormikName === "string"
-      ? FormikName
-      : FormikName instanceof File
-        ? URL.createObjectURL(FormikName)
-        : "";
-
-  const [imageUrl, setImageUrl] = useState<any>(FormikValue ?? "");
-
-  useEffect(() => {
-    setImageUrl(FormikName);
-  }, [FormikName]);
-
-  const getBase64 = (img: FileType, callback: (url: string) => void) => {
-    const reader = new FileReader();
-    reader.addEventListener("load", () => callback(reader.result as string));
-    reader.readAsDataURL(img);
-  };
-
-  const handleChange: UploadProps["onChange"] = (info) => {
-    if (info.file.status === "done") {
-      getBase64(info.file.originFileObj as FileType, (url) => {
-        setImageUrl(url);
-      });
-    }
-    formik.setFieldValue(name, info.file.originFileObj);
-  };
-  const customRequest = async ({ onSuccess }: any) => {
-    onSuccess();
-  };
-  const uploadButton = (
-    <button style={{ border: 0, background: "none" }} type="button">
-      <div className={`CustomFile  ${isError ? "uploader_error" : ""} `}>
-        {t("input.drag_and_drop_or_click_here_to_select_the_file")}
-      </div>
-    </button>
-  );
-
-  return (
-    <div className="ValidationField w-100">
-      <label htmlFor={name} className="text">
-        {t(`input.${label || name}`)}
-      </label>
-      <Upload
-        name="avatar"
-        listType="picture-card"
-        className={`avatar-uploader ${isError ? "uploader_error" : ""} ${className}`}
-        showUploadList={false}
-        customRequest={customRequest}
-        onChange={onChange || handleChange}
-        id={name}
-      >
-        {imageUrl ? (
-          <img
-            src={
-              imageUrl instanceof File
-                ? URL.createObjectURL(imageUrl)
-                : imageUrl
-            }
-            alt=""
-            style={{ width: "100%" }}
-          />
-        ) : (
-          uploadButton
-        )}
-      </Upload>
-    </div>
-  );
-};
-
-export default DropFile;

src/Components/ValidationField/View/File.tsx

@@ -1,66 +1,57 @@
+<<<<<<< HEAD
+import { Button, Upload, UploadFile } from 'antd'
+import useFormField from '../../../Hooks/useFormField';
+import { UploadOutlined } from '@ant-design/icons';
+import { BaseURL, BaseURL_IMAGE } from '../../../api/config';
+import { useTranslation } from 'react-i18next';
+import { ErrorMessage } from 'formik';
+=======
 import { Button, Upload, UploadFile } from "antd";
 import useFormField from "../../../Hooks/useFormField";
 import React, { useMemo } from "react";
 import { FaUpload } from "react-icons/fa";
+>>>>>>> c6ee1f60784e6dd9e87132499ccbeb09ece51f63
 
-const File = ({
-  name,
-  label,
-  onChange,
-  isDisabled,
-  placeholder,
-  className,
-  props,
-}: any) => {
-  const { formik, t, isError, errorMsg } = useFormField(name, props);
-  let imageUrl = formik?.values?.[name] ?? null;
 
-  const fileList: UploadFile[] = useMemo(() => {
+const File = ({ name, label, onChange, isDisabled, accept, props }: any) => {
-    if (!imageUrl) {
+  const { formik, t } = useFormField(name, props)
-      return [];
+  const imageUrl = formik.values[name] ? BaseURL_IMAGE + formik.values[name] : '';
+
+  const fileList: UploadFile[] = [
+
+    {
+      uid: '-1',
+      name: '',
+      status: 'done',
+      url: imageUrl,
+      thumbUrl: imageUrl,
     }
-
+  ];
-    return [
-      typeof imageUrl === "string"
-        ? {
-            uid: "-1",
-            name: "",
-            status: "done",
-            url: imageUrl,
-            thumbUrl: imageUrl,
-          }
-        : {
-            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || "",
-            status: "done",
-            originFileObj: imageUrl,
-          },
-    ];
-  }, [imageUrl]);
-
   const FilehandleChange = (value: any) => {
-    if (value.fileList.length === 0) {
+
-      formik.setFieldValue(name, null);
+    formik.setFieldValue(name, value.file.originFileObj)
-    } else {
+
-      formik.setFieldValue(name, value?.file?.originFileObj);
-    }
   };
-  const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
+  const customRequest = async ({ onSuccess }: any) => {
     onSuccess();
   };
   return (
-    <div className={`ValidationField upload_image_button ${className ?? ""} `}>
+    <div className="ValidationField">
       <label htmlFor={name} className="text">
-        {t(`input.${label || name}`)}
+        {t(`${label || name}`)}
       </label>
 
       <Upload
+        accept={accept ?? undefined}
         disabled={isDisabled}
         listType="picture"
         maxCount={1}
-        fileList={[...fileList]}
+        className='w-100'
+        defaultFileList={[...fileList]}
         onChange={onChange || FilehandleChange}
         customRequest={customRequest}
+<<<<<<< HEAD
+=======
         className={` w-100`}
         id={name}
       >
@@ -78,5 +69,18 @@ const File = ({
     </div>
   );
 };
+>>>>>>> c6ee1f60784e6dd9e87132499ccbeb09ece51f63
 
-export default React.memo(File);
+      >
+        <Button className='w-100' icon={<UploadOutlined />}>{t("upload_image")}</Button>
+        <ErrorMessage name={name}>{msg => <div className='error'>{t(msg)}</div>}</ErrorMessage>
+
+      </Upload>
+
+
+
+    </div>
+  )
+}
+
+export default File

src/Components/ValidationField/View/LocalSearch.tsx

@@ -1,76 +0,0 @@
-import { Select } from "antd";
-import React, { useState } from "react";
-import useFormField from "../../../Hooks/useFormField";
-import { translateOptions } from "../utils/translatedOptions";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
-
-const LocalSelectField = ({
-  name,
-  label,
-  placeholder,
-  isDisabled,
-  option,
-  isMulti,
-  onChange,
-  className,
-  no_label,
-  label_icon,
-  ...props
-}: any) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
-
-  // State to manage the search input value
-  const [searchValue, setSearchValue] = useState("");
-
-  const handleSearch = (
-    input: string,
-    option: { value: string; label: React.ReactNode | undefined },
-  ) =>
-    option?.label?.toString().toLowerCase().includes(input.toLowerCase()) ||
-    option?.value?.toString().toLowerCase().includes(input.toLowerCase());
-
-  const handleSelectChange = (value: any) => {
-    formik.setFieldValue(name, value);
-    if (onChange) onChange(value);
-  };
-
-  const handleSearchChange = (input: string) => {
-    setSearchValue(input); // Update the search input value
-  };
-
-  return (
-    <div className="ValidationField w-100">
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
-        <Select
-          placeholder={t(`input.${placeholder || label || name}`)}
-          disabled={isDisabled}
-          options={translateOptions(option, t)}
-          size="large"
-          className={`${className} ${isError ? "SelectError" : ""} w-100`}
-          value={formik.values[name]}
-          allowClear
-          {...(isMulti && { mode: "multiple" })}
-          onChange={handleSelectChange}
-          showSearch
-          filterOption={handleSearch} // Custom filter function
-          searchValue={searchValue} // Control the search input value
-          onSearch={handleSearchChange} // Update search input value on change
-          id={name}
-          fieldNames={{ label: "name", value: "id" }}
-          {...props}
-        />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
-
-export default React.memo(LocalSelectField);

src/Components/ValidationField/View/NumberFormate.tsx

@@ -1,62 +0,0 @@
-import { InputNumber } from "antd";
-import React from "react";
-import useFormField from "../../../Hooks/useFormField";
-import { Field } from "formik";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
-
-const NumberFormate = ({
-  name,
-  label,
-  placeholder,
-  isDisabled,
-  type,
-  no_label,
-  label_icon,
-  ...props
-}: any) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
-  const SelectableChange = (value: {
-    value: string;
-    label: React.ReactNode;
-  }) => {
-    formik.setFieldValue(name, value);
-  };
-  return (
-    <div className="ValidationField w-100">
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
-        <Field
-          as={InputNumber}
-          formatter={(value: any) =>
-            `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-          }
-          parser={(value: any) =>
-            value?.replace(/\$\s?|(,*)/g, "") as unknown as number
-          }
-          min="0"
-          type={type ?? "text"}
-          value={formik.values[name]}
-          onChange={SelectableChange}
-          placeholder={t(`input.${placeholder || label || name}`)}
-          name={name}
-          disabled={isDisabled}
-          size="large"
-          id={name}
-          {...props}
-
-          //  onChange={onChange ? onChange : handleChange}
-        />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
-
-export default React.memo(NumberFormate);

src/Components/ValidationField/View/SearchField.tsx

@@ -1,140 +1,44 @@
-import { Select, Spin } from "antd";
+import { Input } from 'antd';
-import React, { useEffect, useState } from "react";
+import { SearchProps } from 'antd/es/input'
-import useFormField from "../../../Hooks/useFormField";
+import { useState } from 'react';
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+import { useTranslation } from 'react-i18next';
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { SearchFieldProps } from "../utils/types";
+const { Search } = Input;
-import { useValidationValidationParamState } from "../state/ValidationValidationParamState";
 
-const SearchField = ({
+const SearchField = () => {
-  name,
+    const navigate = useNavigate()
-  label,
+    const [searchParams,] = useSearchParams();
-  placeholder,
+    const location   =useLocation()  
-  isDisabled,
+    const {t} = useTranslation();
-  searchBy = "search",
+        
-  option = [],
+    const [searchValue, setSearchValue] = useState(searchParams.get('search')|| "");
-  isMulti,
-  onChange,
-  className,
-  no_label,
-  label_icon,
-  isLoading,
-  canChangePage,
-  PageName,
-  page,
-  ...props
-}: SearchFieldProps) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
-  const { pushValidationParamState, setValidationParamState } =
-    useValidationValidationParamState();
 
-  const [AllPagesOption, setAllPagesOption] = useState<any>([]);
+    const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
+        // console.log(value);
 
-  useEffect(() => {
+        navigate(`${location?.pathname}?search=${value}`, { replace: true });
-    if (option?.length > 0) {
-      const NewOption = [...option, ...AllPagesOption];
-      const FilteredOption = NewOption.filter(
-        (value, index, self) =>
-          index === self.findIndex((t) => t.id === value.id),
-      );
-      const sortedNewOption = FilteredOption.sort((a, b) => a.id - b.id);
-      setAllPagesOption(sortedNewOption);
     }
-  }, [option]);
+    const onChange = (e :any) => {
-  useEffect(() => {
+        setSearchValue(e.target.value);
-    if (page === 1) {
+
-      setAllPagesOption(option);
     }
-  }, [page]);
 
-  const SelectableChange = (value: any) => {
-    formik?.setFieldValue(name, value);
-    const isCleared = value?.length === 0 || !value;
 
-    if (isCleared) {
+    return (
-      if (PageName) {
+        <div className='SearchField'>
-        setValidationParamState({
+            <Search
-          [PageName]: 1,
+                allowClear
-        });
+                enterButton={t("search")}
-      }
+                size="middle"
-    }
+                placeholder={t("search")}
-    console.log(value, "value");
+                onSearch={onSearch}
-  };
+                style={{ width: 250 }} 
+                value={searchValue}
+                onChange={onChange}
+                />
 
-  const handleChange = ((value: string) => {
+        </div>
-    if (PageName) {
+    )
-      pushValidationParamState({
+}
-        [PageName]: 1,
-      });
-    }
-    pushValidationParamState({
-      [searchBy]: value,
-    });
-  });
 
-  const handleBlur = () => {
+export default SearchField
-    if (PageName && page === 1) {
-      setValidationParamState({
-        [PageName]: null,
-      });
-    }
-    if (PageName && page !== 1) {
-      setValidationParamState({
-        [PageName]: 1,
-      });
-      setAllPagesOption([]);
-    }
-  };
-
-  const handleScroll = (event: any) => {
-    const target = event.target;
-    const isAtBottom =
-      target.scrollHeight === target.scrollTop + target.clientHeight;
-
-    if (isAtBottom && canChangePage && PageName && page) {
-      console.log("Scrolled to the last option!");
-      let newPage = page + 1;
-      pushValidationParamState({
-        [PageName]: newPage,
-      });
-    }
-  };
-
-  return (
-    <div className="ValidationField w-100">
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
-        <Select
-          placeholder={t(`input.${placeholder || label || name}`)}
-          disabled={isDisabled}
-          options={AllPagesOption}
-          size="large"
-          className={`${className} w-100`}
-          value={formik.values[name]}
-          // loading={isLoading}
-          allowClear
-          {...(isMulti && { mode: "multiple" })}
-          onChange={onChange || SelectableChange}
-          showSearch
-          optionFilterProp="name"
-          notFoundContent={isLoading ? <Spin /> : t("validation.undefined")}
-          onSearch={handleChange}
-          onBlur={handleBlur}
-          id={name}
-          onPopupScroll={handleScroll}
-          fieldNames={{ label: "name", value: "id" }}
-          {...props}
-        />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
-
-export default React.memo(SearchField);

src/Components/ValidationField/View/SelectField.tsx

@@ -1,63 +1,39 @@
-import { Select } from "antd";
+import { Form, Select } from 'antd'
-import React from "react";
+import React from 'react'
-import useFormField from "../../../Hooks/useFormField";
+import useFormField from '../../../Hooks/useFormField';
-import { translateOptions } from "../utils/translatedOptions";
+
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
+const SelectField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange, props }: any) => {
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
+
-import { SelectFieldProps } from "../utils/types";
+  const { errorMsg, isError, t, formik } = useFormField(name, props)
+  const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
+    formik.setFieldValue(name, value)
 
-const SelectField = ({
-  name,
-  label,
-  placeholder,
-  isDisabled,
-  option,
-  isMulti,
-  onChange,
-  className,
-  no_label,
-  label_icon,
-  isLoading,
-  ...props
-}: SelectFieldProps) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
-  const SelectableChange = (value: {
-    value: string;
-    label: React.ReactNode;
-  }) => {
-    formik.setFieldValue(name, value);
   };
-  const options = translateOptions(option, t);
   return (
-    <div className="ValidationField w-100">
+    <div className='ValidationField'>
-      <ValidationFieldLabel
+      <label htmlFor={name} className="text">
-        name={name}
+        {t(`${label ? label : name}`)}
-        label={label}
+      </label>
-        label_icon={label_icon}
+      <Form.Item
-        no_label={no_label}
+        hasFeedback
-        placeholder={placeholder}
+        validateStatus={isError ? "error" : ""}
-        t={t}
+        help={isError ? errorMsg : ""}
-      />
+      >
-
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
         <Select
-          placeholder={t(`input.${placeholder || label || name}`)}
+          placeholder={t(`${placeholder ? placeholder : name}`)}
           disabled={isDisabled}
-          options={options}
+          options={option}
-          {...(isLoading && { loading: isLoading })}
+          defaultValue={formik.values[name]}
-          size="large"
-          className={`${className} ${isError ? "SelectError" : ""} w-100`}
-          value={formik.values[name]}
           allowClear
           {...(isMulti && { mode: "multiple" })}
-          onChange={onChange || SelectableChange}
+          onChange={onChange || SelecthandleChange}
-          showSearch={false}
-          id={name}
-          {...props}
-        />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
 
-export default React.memo(SelectField);
+
+
+        />
+      </Form.Item>
+    </div>
+  )
+}
+
+export default SelectField

src/Components/ValidationField/View/TextAreaField.tsx

@@ -1,45 +0,0 @@
-import { Input } from "antd";
-import React from "react";
-import useFormField from "../../../Hooks/useFormField";
-import { Field } from "formik";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
-const { TextArea } = Input;
-
-const TextAreaField = ({
-  name,
-  label,
-  placeholder,
-  isDisabled,
-  onChange,
-  props,
-}: any) => {
-  const { formik, isError, errorMsg, t } = useFormField(name, props);
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    formik.setFieldValue(name, e.target.value);
-  };
-
-  return (
-    <div className="ValidationField w-100">
-      <label htmlFor={name} className="text">
-        {t(`input.${label ? label : name}`)}
-      </label>
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
-        <Field
-          as={TextArea}
-          placeholder={t(`input.${placeholder ? placeholder : name}`)}
-          name={name}
-          disabled={isDisabled}
-          size="large"
-          onChange={onChange || handleChange}
-          id={name}
-          //  onChange={onChange ? onChange : handleChange}
-        />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
-
-export default React.memo(TextAreaField);

src/Components/ValidationField/View/TextField.tsx

@@ -1,57 +0,0 @@
-import { Form, Input } from "antd";
-import React from "react";
-import useFormField from "../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
-import { Field } from "formik";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
-import { ValidationFieldContainer } from "../components/ValidationFieldContainer";
-const { TextArea } = Input;
-
-const TextField = ({
-  name,
-  label,
-  label2,
-  placeholder,
-  isDisabled,
-  onChange,
-  props,
-  no_label,
-  label_icon,
-  className,
-}: any) => {
-  const { formik, isError, errorMsg, t } = useFormField(name, props);
-  const TextFilehandleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    formik.setFieldValue(name, e.target.value);
-  };
-  return (
-    <div className={`ValidationField w-100 ${className ?? ""} `}>
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
-
-      <ValidationFieldContainer isError={isError} errorMsg={errorMsg}>
-        <Field
-          as={TextArea}
-          placeholder={t(`input.${placeholder ? placeholder : name}`)}
-          name={name}
-          disabled={isDisabled}
-          size="large"
-          showCount
-          maxLength={1000}
-          onChange={onChange || TextFilehandleChange}
-          style={{ height: 120 }}
-          id={name}
-        />
-      </ValidationFieldContainer>
-    </div>
-  );
-};
-
-export default React.memo(TextField);

src/Components/ValidationField/View/Time.tsx

@@ -1,40 +1,21 @@
-import { Form, TimePicker } from "antd";
+import { Form, TimePicker } from 'antd'
-import React from "react";
+import React from 'react'
-import useFormField from "../../../Hooks/useFormField";
+import useFormField from '../../../Hooks/useFormField';
-import { MdOutlineEdit } from "react-icons/md";
-import dayjs from "dayjs";
-import { ValidationFieldLabel } from "../components/ValidationFieldLabel";
 
-const Time = ({
+const Time = ({ name, label, props }: any) => {
-  name,
+
-  label,
+  const { errorMsg, isError, t, formik } = useFormField(name, props)
-  className,
-  isDisabled,
-  onChange,
-  props,
-  placeholder,
-  no_label,
-  label_icon,
-}: any) => {
-  const { errorMsg, isError, t, formik } = useFormField(name, props);
   const onCalendarChange = (value: any) => {
-    formik.setFieldValue(name, value);
+
+    formik.setFieldValue(name, value)
+
   };
-
-  const Formatter = "H:mm";
-  const FormikValue = formik.values[name];
-
   return (
-    <div className="ValidationField w-100 ">
-      <ValidationFieldLabel
-        name={name}
-        label={label}
-        label_icon={label_icon}
-        no_label={no_label}
-        placeholder={placeholder}
-        t={t}
-      />
 
+    <div className='ValidationField'>
+      <label htmlFor={name} className="text">
+        {t(`${label}`)}
+      </label>
       <Form.Item
         hasFeedback
         validateStatus={isError ? "error" : ""}
@@ -42,19 +23,16 @@ const Time = ({
       >
         <TimePicker
           allowClear
-          className={`${className} w-100`}
+          className='w-100'
-          size="large"
+          defaultValue={formik.values[name]}
-          value={FormikValue ? dayjs(FormikValue, Formatter) : null}
+          onChange={onCalendarChange} />
-          onChange={onChange || onCalendarChange}
+
-          disabled={isDisabled}
+
-          placeholder={t(`input.${placeholder || label || name}`)}
+
-          format={Formatter}
+
-        
-          id={name}
-        />
       </Form.Item>
     </div>
-  );
+  )
-};
+}
 
-export default Time;
+export default Time

src/Components/ValidationField/View/index.tsx

@@ -5,21 +5,18 @@ import DataRange from "./DataRange";
 import CheckboxField from "./CheckboxField";
 import Default from "./Default";
 import File from "./File";
-import MaltyFile from "./MaltyFile";
+
-import SearchField from "./SearchField";
+
-import TextField from "./TextField";
+
-import DropFile from "./DropFile.tsx";
+
 
 export {
-  Time,
+    Time,
-  SelectField,
+    SelectField,
-  Date,
+    Date,
-  DataRange,
+    DataRange,
-  CheckboxField,
+    CheckboxField,
-  Default,
+    Default,
-  File,
+    File
-  MaltyFile,
+
-  SearchField,
+}
-  TextField,
-  DropFile,
-};

src/Components/ValidationField/components/ValidationFieldContainer.tsx

@@ -1,24 +0,0 @@
-import React, { FC } from "react";
-import { Form } from "antd";
-
-interface ValidationFieldContainerProps {
-  children: React.ReactNode;
-  isError: boolean;
-  errorMsg: string;
-}
-
-export const ValidationFieldContainer: FC<ValidationFieldContainerProps> = ({
-  children,
-  isError,
-  errorMsg,
-}) => (
-  <div className="ValidationFieldContainer">
-    <Form.Item
-      hasFeedback
-      validateStatus={isError ? "error" : ""}
-      help={isError ? errorMsg : ""}
-    >
-      {children}
-    </Form.Item>
-  </div>
-);

src/Components/ValidationField/components/ValidationFieldLabel.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { MdOutlineEdit } from "react-icons/md";
-
-interface ValidationFieldLabelProps {
-  name: string;
-  label?: string;
-  no_label?: boolean;
-  label_icon?: boolean;
-  placeholder?: string;
-  t: (key: string) => string;
-}
-
-export const ValidationFieldLabel: React.FC<ValidationFieldLabelProps> = ({
-  name,
-  label,
-  placeholder,
-  no_label,
-  label_icon,
-  t,
-}) => (
-  <>
-    {no_label ? (
-      <label htmlFor={name} className="text">
-        <span>empty</span>
-      </label>
-    ) : label_icon ? (
-      <div className="LabelWithIcon">
-        <label htmlFor={name} className="text">
-          {t(`input.${label ? label : name}`)}
-        </label>
-        <MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
-      </div>
-    ) : (
-      <label htmlFor={name} className="text">
-        {t(`input.${label ? label : name}`)}
-      </label>
-    )}
-  </>
-);

src/Components/ValidationField/index.tsx

@@ -1,14 +1,21 @@
-import { useState } from "react";
+import  { useState } from 'react';
-import { ErrorMessage, useField, Field, useFormikContext } from "formik";
+import { ErrorMessage, useField, Field, useFormikContext } from 'formik';
-import { useTranslation } from "react-i18next";
+import { useTranslation } from 'react-i18next';
-import { FaExclamationCircle } from "react-icons/fa";
+import { FaExclamationCircle } from 'react-icons/fa';
+import Select from 'react-select';
+import { convert_data_to_select } from '../../Layout/app/Const';
+
+
+
+
 
 export {
-  useState,
+    useState,
-  ErrorMessage,
+    ErrorMessage, useField, Field, useFormikContext,
-  useField,
+    useTranslation,
-  Field,
+    FaExclamationCircle,
-  useFormikContext,
+    Select,
-  useTranslation,
+    convert_data_to_select,
-  FaExclamationCircle,
+    
-};
+
+}

src/Components/ValidationField/state/ValidationValidationParamState.ts

@@ -1,36 +0,0 @@
-import { create } from "zustand";
-
-interface ValidationParamState {
-  [key: string]: any;
-}
-
-interface ModalState {
-  ValidationParamState: ValidationParamState;
-  setValidationParamState: (validationParamState: ValidationParamState) => void;
-  pushValidationParamState: (
-    validationParamState: ValidationParamState,
-  ) => void;
-  clearValidationParamState: () => void;
-}
-
-export const useValidationValidationParamState = create<ModalState>((set) => ({
-  ValidationParamState: {},
-
-  setValidationParamState: (validationParamState) =>
-    set(() => ({
-      ValidationParamState: validationParamState,
-    })),
-
-  pushValidationParamState: (validationParamState) =>
-    set((state) => ({
-      ValidationParamState: {
-        ...state.ValidationParamState,
-        ...validationParamState,
-      },
-    })),
-
-  clearValidationParamState: () =>
-    set({
-      ValidationParamState: {},
-    }),
-}));

src/Components/ValidationField/utils/ValidationField.scss

@@ -1,200 +0,0 @@
-.LabelWithIcon {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-.ValidationField {
-  margin-bottom: 1.3vw;
-  position: relative;
-  > * {
-    width: 100%;
-  }
-  .text,
-  .ant-form-item {
-    margin-bottom: 7px !important;
-    > span {
-      color: transparent;
-    }
-  }
-
-  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-    border: 1px solid var(--border-color);
-  }
-
-  .SelectError {
-    .ant-select-selector {
-      border: 1px solid red !important;
-    }
-  }
-
-  // .ValidationField{
-  //   .ant-select-selector{
-  //     border: 1px solid var(--border-color) ;
-
-  //     }
-  // }
-  > span {
-    margin-bottom: 0px !important;
-    &:focus-within {
-      border-color: var(--primary);
-      box-shadow: 0 0 0 1px var(--primary);
-      cursor: pointer;
-    }
-    &:has(.is-invalid) {
-      border-color: red !important ;
-    }
-    input {
-      color: var(--text);
-      background: var(--bg);
-    }
-
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    input:-webkit-autofill:active {
-      -webkit-box-shadow: 0 0 0 30px white inset !important;
-    }
-  }
-}
-
-.ant-upload-select {
-  width: 100%;
-}
-.Checkbox {
-  padding: 4%;
-}
-.SearchField {
-  button {
-    background: var(--primary);
-  }
-}
-.text {
-  color: var(--text);
-  margin-bottom: 15px;
-  font-weight: bold;
-}
-
-input:disabled {
-  color: var(--text) !important;
-}
-
-.isError {
-  outline: red 1px solid;
-  color: red;
-}
-.Error_color {
-  color: red;
-}
-input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
-}
-input:-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
-}
-
-/* Remove autofill background color on hover */
-input:-webkit-autofill:hover {
-  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Change the color to your desired background color */
-}
-.upload_image_button {
-  .ant-btn {
-    min-height: 3vw !important;
-    border: 0.1vw solid var(--border-color);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-.ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-  min-height: 3vw !important;
-}
-.ant-select-multiple.ant-select-lg .ant-select-selection-overflow {
-  min-height: 3vw !important;
-}
-
-.ant-upload-list .ant-upload-list-item {
-  // height:3vw !important;
-  border: 1px solid var(--border-color) !important;
-}
-
-.TowValidationItems {
-  display: flex;
-  gap: 3%;
-  > label {
-    display: none;
-  }
-}
-
-.ant-select .ant-select-arrow {
-  inset-inline-end: 1vw;
-}
-.ant-input-affix-wrapper-lg {
-  padding: 0.5vw 1vw;
-  font-size: 1vw;
-  min-height: 3vw;
-  border-radius: 0.6vw;
-}
-
-.ant-picker-outlined {
-  padding: 0.5vw 1vw;
-  font-size: 1vw;
-  min-height: 3vw;
-  border-radius: 0.6vw;
-  border: 1px solid var(--border-color);
-}
-
-.ant-select-single.ant-select-lg .ant-select-selector {
-  min-height: 3vw;
-  border-radius: 0.6vw;
-}
-.ant-select-single .ant-select-selector .ant-select-selection-search-input {
-  min-height: 3vw;
-}
-
-.ant-select-outlined .ant-select-selector {
-  min-height: 3vw !important;
-  border-radius: 0.6vw !important;
-}
-.ant-select-single.ant-select-lg {
-  min-height: 3vw;
-}
-
-.ant-upload-wrapper .ant-upload-list .ant-upload-list-item {
-  width: 21.5vw;
-}
-
-.ant-input-number-outlined {
-  width: 100%;
-  height: 3vw;
-}
-.ant-input-number-lg input.ant-input-number-input {
-  width: 100%;
-  height: 3vw;
-}
-
-.bigRow {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  > *.w-100 {
-    width: 48% !important;
-  }
-}
-
-.ant-input-number-affix-wrapper-lg {
-  width: 100%;
-  height: 3vw;
-  border-radius: 0.6vw;
-  border: 1px solid var(--border-color);
-}
-
-.TwoSelectGroup {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-.TwoSelectGroupbutton {
-  margin-bottom: 20px;
-}

src/Components/ValidationField/utils/ValidationState.ts

@@ -1,11 +0,0 @@
-import { create } from "zustand";
-
-interface ValidationState {
-  Validation: any[];
-  setValidation: (value: any[]) => void;
-}
-
-export const useValidationState = create<ValidationState>((set) => ({
-  Validation: [],
-  setValidation: (value) => set((state) => ({ Validation: value })),
-}));

src/Components/ValidationField/utils/translatedOptions.ts

@@ -1,7 +0,0 @@
-export const translateOptions = (options: any, t: any) => {
-  return options?.map((opt: any) => ({
-    ...opt,
-    label: t(`${opt?.label}`),
-    name: t(`${opt?.name}`),
-  }));
-};

src/Components/ValidationField/utils/types.ts

@@ -1,80 +0,0 @@
-import { InputProps, SelectProps } from "antd";
-
-// Common properties for all field types
-interface BaseFieldProps {
-  name: string;
-  label?: string;
-  placeholder?: string;
-  className?: string;
-  isDisabled?: boolean;
-  onChange?: (value: any) => void;
-  dir?: "ltr" | "rtl";
-  no_label?: boolean;
-  label_icon?: boolean;
-}
-
-// Specific field type properties
-export type SelectFieldProps = BaseFieldProps &
-  SelectProps & {
-    type: "Select" | "LocalSearch";
-    option: any[];
-    isMulti?: boolean;
-    isLoading?: boolean;
-    searchBy?: string;
-    canChangePage?: boolean;
-    PageName?: string;
-    page?: number;
-  };
-
-export type SearchFieldProps = BaseFieldProps &
-  SelectProps & {
-    type: "Search";
-    option: any[];
-    isMulti?: boolean;
-    isLoading: boolean;
-    searchBy: string;
-    canChangePage: boolean;
-    PageName: string;
-    page: number;
-  };
-
-type DateFieldProps = BaseFieldProps & {
-  type: "DataRange" | "Date" | "Time";
-  Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM" | "YYYY-MM-DD HH:mm:ss.SSS";
-  picker?: "data" | "week" | "month" | "quarter" | "year";
-};
-
-type FileFieldProps = BaseFieldProps & {
-  type: "File" | "MaltyFile" | "DropFile";
-};
-
-type CheckboxFieldProps = BaseFieldProps & {
-  type: "Checkbox";
-  Group?: boolean;
-};
-
-export type FieldProps = BaseFieldProps &
-  InputProps & {
-    type?:
-      | "text"
-      | "number"
-      | "password"
-      | "email"
-      | "TextArea"
-      | "NumberFormate";
-    label2?: string;
-    Group?: boolean;
-    [key: string]: any;
-  };
-
-// Union type for all field types
-export type ValidationFieldProps =
-  | SelectFieldProps
-  | DateFieldProps
-  | FileFieldProps
-  | CheckboxFieldProps
-  | SearchFieldProps
-  | FieldProps;
-
-// Validation field type
-export type ValidationFieldType = ValidationFieldProps["type"];