slot improvements

pos/app/(main)/checkout/layout.tsx

@@ -10,7 +10,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   const mode = useAtomValue(modeAtom)
   return (
     <>
-      {["main", "coffee-shop"].includes(mode) && <Main>{children}</Main>}
+      {["main", "coffee-shop", "restaurant"].includes(mode) && <Main>{children}</Main>}
       {mode === "kiosk" && <Kiosk>{children}</Kiosk>}
     </>
   )

pos/app/(main)/checkout/page.tsx

@@ -11,7 +11,7 @@ const Checkout = () => {
   const mode = useAtomValue(modeAtom)
   return (
     <>
-      {["main", "coffee-shop"].includes(mode) && <Main />}
+      {["main", "coffee-shop", "restaurant"].includes(mode) && <Main />}
       {mode === "kiosk" && <Kiosk />}
     </>
   )

pos/app/(main)/main.tsx

@@ -1,15 +1,5 @@
-import CheckoutConfig from "@/modules/auth/checkoutConfig"
-import BuyAction from "@/modules/checkout/components/buyAction/buyAction.main"
-import Cart from "@/modules/checkout/components/cart/cart.main"
-import TotalAmount from "@/modules/checkout/components/totalAmount/totalAmount.main"
-import Customer from "@/modules/customer"
-import ChooseType from "@/modules/orders/components/chooseType/chooseType.main"
-import OrderDetail from "@/modules/orders/OrderDetail"
-import Products from "@/modules/products"
-import BarcodeResult from "@/modules/products/barcodeResult.market"
-import Search from "@/modules/products/components/search/search.main"
-import ProductCategories from "@/modules/products/productCategories.main"
-import Slots from "@/modules/slots"
+import CheckoutMain from "@/modules/checkout/main"
+import ProductsContainer from "@/modules/products/productsContainer"
 
 import { cn } from "@/lib/utils"
 import BarcodeListener from "@/components/barcodeListener"
@@ -21,32 +11,10 @@ const MainIndexPage = () => {
       <Header />
       <section className="flex flex-auto items-stretch overflow-hidden">
         <div className={cn("flex h-full w-2/3 flex-col p-4 pr-0")}>
-          <div className="-mt-1 flex flex-none items-center pb-3 pr-3">
-            <Search />
-            <div className="flex flex-auto overflow-hidden">
-              <ProductCategories />
-            </div>
-          </div>
-          <div className="flex flex-auto overflow-hidden relative">
-            <Slots />
-            <Products />
-            <BarcodeResult />
-          </div>
+          <ProductsContainer />
         </div>
         <div className={"flex w-1/3 flex-col border-l"}>
-          <CheckoutConfig>
-            <OrderDetail>
-              <div className="p-4">
-                <Customer />
-              </div>
-              <Cart />
-              <div className="grid flex-none grid-cols-2 gap-2 p-4">
-                <TotalAmount />
-                <ChooseType />
-                <BuyAction />
-              </div>
-            </OrderDetail>
-          </CheckoutConfig>
+          <CheckoutMain />
         </div>
       </section>
     </BarcodeListener>

pos/app/(main)/page.tsx

@@ -7,13 +7,15 @@ import { useAtomValue } from "jotai"
 const Market = dynamic(() => import("./market"))
 const Main = dynamic(() => import("./main"))
 const Kiosk = dynamic(() => import("./kiosk"))
+const Restaurant = dynamic(() => import("./restaurant"))
 
 export default function IndexPage() {
   const mode = useAtomValue(modeAtom)
   return (
     <>
       {mode === "market" && <Market />}
       {["main", "coffee-shop"].includes(mode) && <Main />}
+      {mode === "restaurant" && <Restaurant />}
       {mode === "kiosk" && <Kiosk />}
     </>
   )

pos/app/(main)/restaurant.tsx

@@ -0,0 +1,30 @@
+import CheckoutMain from "@/modules/checkout/main"
+import ProductsContainer from "@/modules/products/productsContainer"
+import Slots from "@/modules/slots"
+import SelectTab from "@/modules/slots/components/SelectTab"
+import { selectedTabAtom } from "@/store"
+import { useAtomValue } from "jotai"
+
+import { cn } from "@/lib/utils"
+import Header from "@/components/header/header.main"
+
+const Restaurant = () => {
+  const selectedTab = useAtomValue(selectedTabAtom)
+  return (
+    <>
+      <Header />
+      <section className="flex flex-auto items-stretch overflow-hidden">
+        <div className={cn("flex h-full w-2/3 flex-col p-3 pl-4 relative")}>
+          {selectedTab === "plan" && <Slots />}
+          {selectedTab === "products" && <ProductsContainer />}
+          <SelectTab />
+        </div>
+        <div className={"flex w-1/3 flex-col border-l"}>
+          <CheckoutMain />
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default Restaurant

pos/components/header/headerLayout.tsx

@@ -21,12 +21,7 @@ const HeaderLayout = (props: {
 }) => {
   const mode = useAtomValue(modeAtom)
 
-  return (
-    <>
-      {["coffee-shop", "main"].includes(mode) && <Main {...props} />}
-      {mode === "market" && <Market {...props} />}
-    </>
-  )
+  return <>{mode === "market" ? <Market {...props} /> : <Main {...props} />}</>
 }
 
 export default HeaderLayout

pos/components/header/logo.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { usePathname, useRouter } from "next/navigation"
-import { activeCategoryAtom } from "@/store"
+import { activeCategoryAtom, slotFilterAtom } from "@/store"
 import { configAtom } from "@/store/config.store"
 import { setInitialAtom } from "@/store/order.store"
 import { useAtomValue, useSetAtom } from "jotai"
@@ -13,17 +13,19 @@ const Logo = () => {
   const router = useRouter()
   const setInitialState = useSetAtom(setInitialAtom)
   const setCategory = useSetAtom(activeCategoryAtom)
+  const setSlotFilter = useSetAtom(slotFilterAtom)
   const config = useAtomValue(configAtom)
 
   const { logo } = config?.uiOptions || {}
 
   const reset = () => {
     setInitialState()
     setCategory("")
+    setSlotFilter(null)
   }
 
   return (
-    <div className="hidden rounded-md bg-gray-100 p-1 sm:block">
+    <div className="hidden rounded-md bg-gray-100 p-1 mx-1 sm:block">
       <div
         className="rounded bg-white px-3 text-black"
         onClick={() => (pathname === "/" ? reset() : router.push("/"))}

pos/components/ui/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-stone-100 focus:text-stone-900 data-[state=open]:bg-stone-100 data-[state=open]:text-stone-900 dark:focus:bg-stone-800 dark:focus:text-stone-50 dark:data-[state=open]:bg-stone-800 dark:data-[state=open]:text-stone-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-stone-200 bg-white p-1 text-stone-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-stone-200 bg-white p-1 text-stone-950 shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-xs outline-none focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-xs font-semibold text-stone-950 dark:text-stone-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-stone-200 dark:bg-stone-800", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-stone-500 dark:text-stone-400",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

pos/modules/checkout/main.tsx

@@ -0,0 +1,27 @@
+import CheckoutConfig from "@/modules/auth/checkoutConfig"
+import BuyAction from "@/modules/checkout/components/buyAction/buyAction.main"
+import Cart from "@/modules/checkout/components/cart/cart.main"
+import TotalAmount from "@/modules/checkout/components/totalAmount/totalAmount.main"
+import Customer from "@/modules/customer"
+import ChooseType from "@/modules/orders/components/chooseType/chooseType.main"
+import OrderDetail from "@/modules/orders/OrderDetail"
+
+const CheckoutMain = () => {
+  return (
+    <CheckoutConfig>
+      <OrderDetail>
+        <div className="p-4">
+          <Customer />
+        </div>
+        <Cart />
+        <div className="grid flex-none grid-cols-2 gap-2 p-4">
+          <TotalAmount />
+          <ChooseType />
+          <BuyAction />
+        </div>
+      </OrderDetail>
+    </CheckoutConfig>
+  )
+}
+
+export default CheckoutMain