update 8 files

src/App.js

@@ -187,7 +187,7 @@ function App() {
         {/* <FolderTree /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <ReactTable5 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
@@ -209,7 +209,7 @@ function App() {
 
         <FileManager />
 
-        <GridListTable />
+        {/* <GridListTable /> */}
 
         <PopupCard />
 
@@ -265,7 +265,7 @@ function App() {
         {/* <DateRangePicker /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <FormInput /> */}
+        <FormInput />
 
         {/* <LeafletMap /> */}
 

src/components/AnimatedInput/Input.js

@@ -9,6 +9,7 @@ const FormFields = ({
   set,
   label,
   borderClassname,
+  inputClassname,
   type,
   maxLength,
   max,
@@ -17,7 +18,7 @@ const FormFields = ({
   onClick,
 }) => {
   const [value, setValue] = useState(defaultValue);
-
+  console.log(value);
   return (
     <div
       onClick={onClick}
@@ -31,8 +32,8 @@ const FormFields = ({
         className={
           "text-xs absolute transition-all duration-300 pointer-events-none px-3  transform -translate-x-[7px]" +
           (value
-            ? `text-[#2483E1] bg-white top-[-10px]`
+            ? ` text-blue-600 bg-white top-[-10px]`
-            : "text-[#0F0543] top-[10px]")
+            : " text-gray-400 top-[10px]")
         }
       >
         {label}
@@ -53,8 +54,8 @@ const FormFields = ({
             if (!isNaN(min) && +e.target.value < min) value = min;
             e.target.value = value;
           }}
-          className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent
+          className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent 
-             ${value === "" ? "bg-red-200 " : "bg-[#F9F9F9] "} `}
+              ${!value ? "bg-[#F9F9F9] " : "bg-white "} `}
           onChange={(e) => setValue(e.target.value)}
           inputMode={type === "number" ? "numeric" : ""}
         />

src/components/DateRangePicker/index.js

@@ -49,11 +49,12 @@ function CustomRangeInput({ openCalendar, value }) {
 
 const DateRangePicker = () => {
   return (
-    <div className="w-full" style={{ direction: "rtl" }}>
+    <div className="w-full rtl flex flex-col-reverse">
       {/* <Calendar calendar={persian} locale={persian_fa} />
       <hr className="my-20" /> */}
       <DatePicker
         range
+        className="flex "
         calendar={persian}
         locale={persian_fa}
         fixMainPosition={true}

src/components/FormInput/index.js

@@ -12,7 +12,7 @@ const FormInput = ({ items }) => {
   const [selectedInput, setSelectedInput] = useState(false);
 
   return (
-    <div className="h-96 mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
+    <div className="mx-auto w-fit mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
           register={register("firstName")}
@@ -80,14 +80,15 @@ const FormInput = ({ items }) => {
         />
       </div>
       <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
-        <Input
+        <lable>تاریخ ورود</lable>
+        <DateRangePicker />{" "}
+        {/* <Input
           register={register("lastName")}
           label="تاریخ ورود"
           type="text"
           borderClassname={`border-transparent `}
           className={``}
-        />
+        /> */}
-        <DateRangePicker />
       </div>
     </div>
   );

src/components/ReactTable5/BasicTable.js

@@ -240,7 +240,7 @@ const BasicTable = ({ addTab, activeTab }) => {
                                 className: cell.column.className,
                               })}
                               style={{
-                                padding: "12px",
+                                padding: "20px",
                                 fontSize: "13px",
                                 textAlign: "right",
                                 whiteSpace: "nowrap",

src/index.scss

@@ -19,7 +19,12 @@ body {
   direction: rtl;
   background-color: #f5f5f5;
 }
-
+.rtl {
+  direction: rtl;
+}
+.ltr {
+  direction: ltr;
+}
 .comment-num {
   font-size: 8px;
   padding-top: 4px;
@@ -28,6 +33,14 @@ body {
   padding-right: 4px;
   border-radius: 50%;
 }
+.rmdp-container {
+  display: flex !important;
+  flex-direction: column-reverse;
+}
+.rmdp-container > div {
+  position: relative !important;
+  transform: none !important;
+}
 
 // TODO Start Alert Component