feat: Order details

src/components/fundamentals/icons/cancel-icon/index.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CancelIcon: React.FC<IconProps> = ({
+  size = "16",
+  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="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 5L15 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CancelIcon

src/components/fundamentals/icons/corner-down-right-icon/index.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const CornerDownRightIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M10 6.66602L13.3333 9.99935L10 13.3327"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.66797 2.66602V7.33268C2.66797 8.03993 2.94892 8.7182 3.44902 9.2183C3.94911 9.7184 4.62739 9.99935 5.33464 9.99935H13.3346"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default CornerDownRightIcon

src/components/fundamentals/icons/package-icon/index.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const PackageIcon: React.FC<IconProps> = ({
+  size = "16",
+  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="M13.3634 8.02713L6.73047 4.21289"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.723 12.9577V6.98101C16.7228 6.71899 16.6536 6.46164 16.5225 6.23479C16.3913 6.00794 16.2029 5.81956 15.9759 5.68855L10.7463 2.70018C10.5192 2.56904 10.2615 2.5 9.99921 2.5C9.73692 2.5 9.47926 2.56904 9.25212 2.70018L4.02248 5.68855C3.79556 5.81956 3.60708 6.00794 3.47596 6.23479C3.34483 6.46164 3.27566 6.71899 3.27539 6.98101V12.9577C3.27566 13.2198 3.34483 13.4771 3.47596 13.704C3.60708 13.9308 3.79556 14.1192 4.02248 14.2502L9.25212 17.2386C9.47926 17.3697 9.73692 17.4388 9.99921 17.4388C10.2615 17.4388 10.5192 17.3697 10.7463 17.2386L15.9759 14.2502C16.2029 14.1192 16.3913 13.9308 16.5225 13.704C16.6536 13.4771 16.7228 13.2198 16.723 12.9577Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.47852 6.2041L10.0006 9.97691L16.5227 6.2041"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 17.5004V9.96973"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default PackageIcon

src/components/molecules/actionables.tsx

@@ -8,7 +8,7 @@ export type ActionType = {
   label: string
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
   variant?: "normal" | "danger"
-  icon: React.ReactNode
+  icon?: React.ReactNode
 }
 
 type ActionablesProps = {
@@ -26,11 +26,11 @@ const Actionables: React.FC<ActionablesProps> = ({
   customTrigger,
   forceDropdown = false,
 }) => {
-  if (!actions?.length) {
+  if (!actions?.length && !customTrigger) {
     return null
   }
 
-  return actions.length > 1 || forceDropdown ? (
+  return actions?.length > 1 || forceDropdown ? (
     <div>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
@@ -59,9 +59,9 @@ const Actionables: React.FC<ActionablesProps> = ({
                     variant="ghost"
                     size="small"
                     className={clsx("w-full justify-start", {
-                      "text-rose-50": action.variant === "danger",
+                      "text-rose-50": action?.variant === "danger",
                     })}
-                    onClick={action.onClick}
+                    onClick={action?.onClick}
                   >
                     {action.icon}
                     {action.label}

src/components/molecules/indeterminate-checkbox/index.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, useEffect, useRef } from "react"
+import CheckIcon from "../../fundamentals/icons/check-icon"
+
+interface Props {
+  indeterminate?: boolean
+  name: string
+}
+
+const useCombinedRefs = (...refs): React.MutableRefObject<any> => {
+  const targetRef = React.useRef()
+
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (!ref) {
+        return
+      }
+
+      if (typeof ref === "function") {
+        ref(targetRef.current)
+      } else {
+        ref.current = targetRef.current
+      }
+    })
+  }, [refs])
+
+  return targetRef
+}
+
+const IndeterminateCheckbox = forwardRef<HTMLInputElement, Props>(
+  ({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
+    const defaultRef = useRef(null)
+    const combinedRef = useCombinedRefs(ref, defaultRef)
+
+    useEffect(() => {
+      if (combinedRef?.current) {
+        combinedRef.current.indeterminate = indeterminate ?? false
+      }
+    }, [combinedRef, indeterminate])
+
+    return (
+      <div className="items-center h-full flex">
+        <div
+          onClick={() => combinedRef.current?.click()}
+          className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border cursor-pointer rounded-base ${
+            combinedRef.current?.checked && "bg-violet-60"
+          }`}
+        >
+          <span className="self-center">
+            {combinedRef.current?.checked && <CheckIcon size={16} />}
+          </span>
+        </div>
+        <input type="checkbox" className="hidden" ref={combinedRef} {...rest} />
+      </div>
+    )
+  }
+)
+
+export default IndeterminateCheckbox

src/components/molecules/view-raw/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react"
-import ReactJson from "react-json-view"
 import * as Collapsible from "@radix-ui/react-collapsible"
-import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
-import Button from "../../fundamentals/button"
 import clsx from "clsx"
+import React, { useState } from "react"
+import ReactJson from "react-json-view"
 import useClipboard from "../../../hooks/use-clipboard"
+import Button from "../../fundamentals/button"
+import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
 import ClipboardCopyIcon from "../../fundamentals/icons/clipboard-copy-icon"
 
 type ViewRawProps = {
@@ -63,7 +63,10 @@ const ViewRaw: React.FC<ViewRawProps> = ({ raw, title = "Data", name }) => {
               variant="ghost"
               size="small"
               type="button"
-              onClick={handleCopy}
+              onClick={(e) => {
+                e.currentTarget.blur()
+                handleCopy()
+              }}
             >
               <ClipboardCopyIcon size={20} />
             </Button>