feat: Orders list overview

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
     "@radix-ui/react-popover": "^0.1.4",
+    "@radix-ui/react-portal": "^0.1.3",
     "@radix-ui/react-radio-group": "^0.1.4",
     "@radix-ui/react-tooltip": "^0.1.6",
     "@rebass/forms": "^4.0.6",
@@ -43,7 +44,6 @@
     "lodash": "^4.17.21",
     "moment": "^2.27.0",
     "prop-types": "^15.7.2",
-    "qs": "^6.9.6",
     "query-string": "^6.13.1",
     "react": "^16.12.0",
     "react-collapse": "^5.0.1",
@@ -75,6 +75,7 @@
     "@storybook/react": "^6.4.9",
     "@storybook/theming": "^6.4.9",
     "@tailwindcss/line-clamp": "^0.3.1",
+    "@types/react-table": "^7.7.9",
     "@typescript-eslint/parser": "^5.9.1",
     "autoprefixer": "^10.4.1",
     "babel-loader": "^8.1.0",

src/components/atoms/date-picker/date-picker.tsx

@@ -1,27 +1,17 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
+import moment from "moment"
 import React, { useEffect, useState } from "react"
 import ReactDatePicker from "react-datepicker"
 import "react-datepicker/dist/react-datepicker.css"
 import Button from "../../fundamentals/button"
-import moment from "moment"
-import ChevronRightIcon from "../../fundamentals/icons/chevron-right-icon"
 import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
 import ChevronLeftIcon from "../../fundamentals/icons/chevron-left-icon"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import ChevronRightIcon from "../../fundamentals/icons/chevron-right-icon"
 import InputContainer from "../../fundamentals/input-container"
 import InputHeader from "../../fundamentals/input-header"
-import clsx from "clsx"
 import { DateTimePickerProps } from "./types"
 
-const getDateClassname = (d, tempDate) => {
-  return moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD")
-    ? "date chosen"
-    : `date ${
-        moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD")
-          ? "past"
-          : ""
-      }`
-}
-
 const DatePicker: React.FC<DateTimePickerProps> = ({
   date,
   onSubmitDate,
@@ -79,21 +69,7 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
           sideOffset={8}
           className="rounded-rounded px-8  border border-grey-20 bg-grey-0 w-full shadow-dropdown"
         >
-          <ReactDatePicker
-            selected={tempDate}
-            inline
-            onChange={setTempDate}
-            calendarClassName="date-picker"
-            dayClassName={(d) => getDateClassname(d, tempDate)}
-            renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
-              <CustomHeader
-                date={date}
-                decreaseMonth={decreaseMonth}
-                increaseMonth={increaseMonth}
-              />
-            )}
-          />
-
+          <CalendarComponent date={tempDate} onChange={setTempDate} />
           <div className="flex w-full mb-8 mt-5">
             <Button
               variant="ghost"
@@ -149,4 +125,29 @@ const CustomHeader = ({ date, decreaseMonth, increaseMonth, ...props }) => {
   )
 }
 
+export const CalendarComponent = ({ date, onChange }) => (
+  <ReactDatePicker
+    selected={date}
+    inline
+    onChange={onChange}
+    calendarClassName="date-picker"
+    dayClassName={(d) => {
+      return moment(d).format("YY,MM,DD") === moment(date).format("YY,MM,DD")
+        ? "date chosen"
+        : `date ${
+            moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD")
+              ? "past"
+              : ""
+          }`
+    }}
+    renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
+      <CustomHeader
+        date={date}
+        decreaseMonth={decreaseMonth}
+        increaseMonth={increaseMonth}
+      />
+    )}
+  />
+)
+
 export default DatePicker

src/components/atoms/date-picker/time-picker.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
 import moment from "moment"
+import React, { useEffect, useState } from "react"
 import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
 import ClockIcon from "../../fundamentals/icons/clock-icon"
-import NumberScroller from "../number-scroller"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
 import InputContainer from "../../fundamentals/input-container"
 import InputHeader from "../../fundamentals/input-header"
-import clsx from "clsx"
+import NumberScroller from "../number-scroller"
 import { DateTimePickerProps } from "./types"
 
 const TimePicker: React.FC<DateTimePickerProps> = ({

src/components/fundamentals/icons/chevron-up.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ChevronUpIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M5 12.5L10 7.5L15 12.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ChevronUpIcon

src/components/fundamentals/icons/details-icon.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const DetailsIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DetailsIcon

src/components/fundamentals/icons/list-icon.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ListIcon: React.FC<IconProps> = ({
+  size = "20px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M6.66669 5H17.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.66669 10H17.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.66669 15H17.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.5 5H2.50875"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.5 10H2.50875"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.5 15H2.50875"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ListIcon

src/components/fundamentals/icons/tile-icon.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const TileIcon: React.FC<IconProps> = ({
+  size = "20px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8.5 3.5H3.5V8.5H8.5V3.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.5 3.5H11.5V8.5H16.5V3.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.5 11.5H11.5V16.5H16.5V11.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8.5 11.5H3.5V16.5H8.5V11.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default TileIcon

src/components/fundamentals/image-placeholder.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import IconProps from "./icons/types/icon-type"
+
+const ImagePlaceholder: React.FC<IconProps> = ({
+  size = "38",
+  color = "#b8b8bf",
+  ...attributes
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 64 48"
+    >
+      <path
+        fill={color}
+        d="M56,0H8A8,8,0,0,0,0,8V40a7.27,7.27,0,0,0,.48,2.64A8.05,8.05,0,0,0,4,46.91,8.1,8.1,0,0,0,8,48H56a8.08,8.08,0,0,0,6.72-3.65A8.18,8.18,0,0,0,64,40V8A8,8,0,0,0,56,0ZM33,42.67H8a2.35,2.35,0,0,1-.83-.16L21.65,22.75,33.52,34.61l3.76,3.76,4.27,4.3ZM58.67,40A2.68,2.68,0,0,1,56,42.67H49.12l-8-8.06,6.82-6.74,10.78,12Zm0-8.13L50,22.21a2.72,2.72,0,0,0-1.89-.88,2.53,2.53,0,0,0-1.95.78l-8.82,8.74L23.23,16.77A2.84,2.84,0,0,0,21.12,16a2.76,2.76,0,0,0-1.95,1.09L5.33,36V8A2.68,2.68,0,0,1,8,5.33H56A2.68,2.68,0,0,1,58.67,8Z"
+      />
+      <circle fill={color} cx="37.33" cy="18.67" r="5.33" />
+    </svg>
+  )
+}
+
+export default ImagePlaceholder