Skip to content
This repository was archived by the owner on Nov 6, 2023. It is now read-only.

slot improvements #393

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pos/app/(main)/checkout/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
</>
)
Expand Down
2 changes: 1 addition & 1 deletion pos/app/(main)/checkout/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />}
</>
)
Expand Down
40 changes: 4 additions & 36 deletions pos/app/(main)/main.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions pos/app/(main)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />}
</>
)
Expand Down
30 changes: 30 additions & 0 deletions pos/app/(main)/restaurant.tsx
Original file line number Diff line number Diff line change
@@ -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
7 changes: 1 addition & 6 deletions pos/components/header/headerLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
6 changes: 4 additions & 2 deletions pos/components/header/logo.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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("/"))}
Expand Down
200 changes: 200 additions & 0 deletions pos/components/ui/context-menu.tsx
Original file line number Diff line number Diff line change
@@ -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,
}
27 changes: 27 additions & 0 deletions pos/modules/checkout/main.tsx
Original file line number Diff line number Diff line change
@@ -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
Loading