added

src/components/ProductSuggestion/index.js

@@ -19,7 +19,12 @@ const ProductSuggestion = ({ suggestions, selected }) => {
             <div
               className={`flex flex-col items-center border rounded-md border-gray-300 p-5 mx-4 cursor-pointer transition-all ease-in-out duration-500
                 ${selectedProduct === suggestion ? "bg-white" : ""}`}
-              onClick={() => setSelectedProduct(suggestion)}
+              // onClick={() => setSelectedProduct(suggestion)}
+              onClick={() =>
+                setSelectedProduct(
+                  selectedProduct === suggestion ? null : suggestion
+                )
+              }
             >
               <img
                 src={suggestion.productImage}

src/components/ReactTable4/BasicTable.js

@@ -16,13 +16,14 @@ import {
 
 import { COLUMNS } from "./columns";
 import { GlobalFilter } from "./GlobalFilter";
+
 import { Pagination } from "./Pagination";
 import { GoToPage } from "./GoToPage";
+import { Settings } from "./Settings";
+
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
-import settings from "./settings.svg";
-
 // This is a custom filter UI for selecting
 // a unique option from a list
 export function SelectColumnFilter({
@@ -181,27 +182,25 @@ const BasicTable = ({ settingsIcon }) => {
       <div className="flex flex-row items-center justify-end">
         {/* left box */}
         <div
-          className="rounded-md p-2 flex flex-row flex-items-center"
+          className="rounded-md p-2 flex flex-row items-center"
           style={{ backgroundColor: "#F1F6FF" }}
         >
           {/* search box */}
           <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
           {/* pagination */}
           <div
-            className="flex flex-row flex-items-center p-1 rounded"
+            className="flex flex-row items-center p-1 rounded"
             style={{ backgroundColor: "#F9FBFF" }}
           >
             {/* go to page */}
-            <div>
             <GoToPage
               pageIndex={pageIndex}
               gotoPage={gotoPage}
               pageOptions={pageOptions}
             />
-            </div>
             {/* vertical line */}
             <div
-              className={`w-0.5 my-1 mx-2`}
+              className={`w-0.5 h-4 mr-2`}
               style={{ backgroundColor: "#65A9FF" }}
             ></div>
             {/* arrows */}
@@ -215,14 +214,7 @@ const BasicTable = ({ settingsIcon }) => {
             />
           </div>
           {/* settings icon */}
-          {settingsIcon && (
-            <div
-              style={{ backgroundColor: "#F9FBFF" }}
-              className="mr-2 flex flex-col items-center justify-center p-1 rounded"
-            >
-              <img src={settings} className="w-5 h-5 cursor-pointer" />
-            </div>
-          )}
+          {settingsIcon && <Settings />}
         </div>
       </div>
       <table
@@ -387,5 +379,5 @@ function renderRowSubComponent({ row }) {
 export default BasicTable;
 
 BasicTable.defaultProps = {
-  settingsIcon: false,
+  settingsIcon: true,
 };

src/components/ReactTable4/Buttons.js

@@ -7,7 +7,7 @@ import { useState } from "react";
 export function Buttons({ row }) {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
-    <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-row items-center justify-end mx-1">
       <button
         className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
         onClick={() => setActiveDetails(!activeDetails)}

src/components/ReactTable4/DropDown.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+export const DropDown = ({}) => {
+  return (
+    <div>
+      <button
+        id="dropdownButton"
+        data-dropdown-toggle="dropdown"
+        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        type="button"
+      >
+        Dropdown button{" "}
+        <svg
+          className="ml-2 w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          ></path>
+        </svg>
+      </button>
+
+      <div
+        id="dropdown"
+        className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+      >
+        <ul className="py-1" aria-labelledby="dropdownButton">
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Dashboard
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Settings
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Earnings
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            >
+              Sign out
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default DropDown;

src/components/ReactTable4/EditButtons.js

@@ -3,11 +3,12 @@ import React, { useState } from "react";
 import filter from "./filter.svg";
 import plus from "./plus.svg";
 import more from "./more2.svg";
+import DropDown from "./DropDown";
 
 export function EditButtons({ buttons }) {
   const [selectedButton, setSelectedButton] = useState(null);
   return (
-    <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-row items-center justify-end ">
       {buttons.map((button, index) => (
         <div>
           <div
@@ -36,6 +37,7 @@ export function EditButtons({ buttons }) {
           </div>
         </div>
       ))}
+      <div>{selectedButton?.components}</div>
     </div>
   );
 }
@@ -51,8 +53,7 @@ EditButtons.defaultProps = {
       border: "border-b-4",
       borderColor: "#3686EC",
       padding: "4px 7px",
-      components: "d",
-      buttonSubItems: [],
+      // components: "d",
     },
     {
       logo: filter,
@@ -62,8 +63,7 @@ EditButtons.defaultProps = {
       backgroundColor: "#F3F8FF",
       border: null,
       borderColor: null,
-      components: "a",
-      buttonSubItems: [],
+      // components: "a",
     },
     {
       logo: more,
@@ -74,22 +74,7 @@ EditButtons.defaultProps = {
       backgroundColor: "#F3F8FF",
       border: null,
       borderColor: null,
-      components: "a",
-      buttonSubItems: [
-        {
-          title: "دراپ داون 1",
-        },
-      ],
+      // components: <DropDown />,
     },
   ],
 };
-
-// {
-//   logo: settings,
-//   width: "w-5",
-//   height: "h-5",
-//   title: null,
-//   textColor: null,
-//   backgroundColor: "#F3F8FF",
-//   components: "b",
-// },

src/components/ReactTable4/GlobalFilter.js

@@ -2,9 +2,10 @@ import React, { useState } from "react";
 import { useAsyncDebounce } from "react-table";
 
 import search from "./search-normal.svg";
+import settings from "./settings.svg";
 
 export const GlobalFilter = ({ filter, setFilter }) => {
-  const [openModal, setOpenModal] = useState(true);
+  // const [activeSearchBox, setActiveSearchBox] = useState(null);
 
   const [value, setValue] = useState(filter);
 
@@ -13,9 +14,13 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 400);
 
   return (
-    <div className="flex flex-row-reverse items-center relative ml-2">
+    <div
+      className="flex flex-row-reverse items-center relative ml-2"
+      // onClick={() => setActiveSearchBox(!activeSearchBox)}
+    >
       <img
         src={search}
+        // src={activeSearchBox ? { search } : { settings }}
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
@@ -26,25 +31,9 @@ export const GlobalFilter = ({ filter, setFilter }) => {
           onChange(e.target.value);
         }}
         type="text"
-        // placeholder="نام کالا را جستجو کنید..."
-        className="text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border"
+        className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
     </div>
   );
 };
-
-{
-  /* <div className="flex flex-row-reverse items-center relative w-full">
-              <img
-                src={lightGraySearchIcon}
-                alt=""
-                className="w-4 h-4 absolute left-3"
-              />
-              <input
-                type="text"
-                placeholder="نام کالا را جستجو کنید..."
-                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
-              />
-            </div> */
-}

src/components/ReactTable4/GoToPage.js

@@ -2,17 +2,16 @@ import React from "react";
 
 export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
   return (
-    <span className="text-xs text-blue-400">
+    <span className="text-xs text-blue-400 mr-1">
       صفحه{" "}
       <input
-        className="ml-1 text-xs p-1 rounded border-blue-400"
+        className="ml-1 text-xs p-1 rounded border-blue-400 w-9"
         type="number"
         defaultValue={pageIndex + 1}
         onChange={(e) => {
           const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
           gotoPage(pageNumber);
         }}
-        style={{ width: "50px" }}
       />
       از {pageOptions.length}
     </span>

src/components/ReactTable4/MOCK_DATA.json

@@ -1,4 +1,64 @@
 [
+  {
+    "name": "mahdi",
+    "order-date": "1399/09/27",
+    "order-price": 25,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "مهدی"
+  },
+  {
+    "name": "مهدی",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "mahdimahdi"
+  },
+  {
+    "name": "mahdi",
+    "order-date": "1399/09/27",
+    "order-price": 25,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "مهدی"
+  },
+  {
+    "name": "مهدی",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "mahdimahdi"
+  },
+  {
+    "name": "mahdi",
+    "order-date": "1399/09/27",
+    "order-price": 25,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "مهدی"
+  },
+  {
+    "name": "مهدی",
+    "order-date": "1399/09/27",
+    "order-price": 27,
+    "order-number": "09120023100",
+    "user-job": "مهندس ساختمان",
+    "order-status": 1,
+    "order-level": 1,
+    "history": "mahdimahdi"
+  },
   {
     "name": "mahdi",
     "order-date": "1399/09/27",

src/components/ReactTable4/Pagination.js

@@ -12,9 +12,9 @@ export const Pagination = ({
   nextPage,
 }) => {
   return (
-    <div className="flex flex-row items-center">
+    <div className="flex flex-row items-center space-x-1">
       <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
         style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
         onClick={() => gotoPage(0)}
         disabled={!canPreviousPage}
@@ -22,7 +22,7 @@ export const Pagination = ({
         <img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
       </button>
       <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
         style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
         onClick={() => previousPage()}
         disabled={!canPreviousPage}
@@ -30,7 +30,7 @@ export const Pagination = ({
         <img src={rightArrow} className="w-3 h-3" />
       </button>
       <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
         style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
         onClick={() => nextPage()}
         disabled={!canNextPage}
@@ -38,7 +38,7 @@ export const Pagination = ({
         <img src={leftArrow} className="w-3 h-3" />
       </button>
       <button
-        className="rounded py-1 px-2 mx-1 text-xs font-bold"
+        className="rounded py-1 px-2  text-xs font-bold"
         style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
         onClick={() => gotoPage(pageCount - 1)}
         disabled={!canNextPage}
@@ -48,3 +48,14 @@ export const Pagination = ({
     </div>
   );
 };
+
+export default Pagination;
+
+// Pagination.defaultProps = {
+//   pagintaionButtons: [
+//     {
+//       image: { dobleLeftArrow },
+//       click: gotoPage(0),
+//     },
+//   ],
+// };

src/components/ReactTable4/Settings.js

@@ -0,0 +1,13 @@
+import React from "react";
+import settings from "./settings.svg";
+
+export const Settings = ({}) => {
+  return (
+    <div
+      style={{ backgroundColor: "#F9FBFF" }}
+      className="mr-2 flex flex-col items-center justify-center p-1 rounded"
+    >
+      <img src={settings} className="w-6 h-6 cursor-pointer" />
+    </div>
+  );
+};