sme-pos-package 1.0.7 → 1.0.9

package/src/router/pos-route.tsx

@@ -0,0 +1,75 @@
+import { ProductContent, TableContent } from "@components/index";
+import CommonLayout from "@layouts/common";
+import PosLayout from "@layouts/pos-layout";
+import PosOrderLayout from "@layouts/pos-order-layout";
+import SaleLayout from "@layouts/sale-layout";
+import {
+  ManagementFloorsPage,
+  ManagementOrderPage,
+  PaymentSuccess,
+} from "@pages/index";
+import OrderDetailPage from "@pages/pos/management-order/order-detail";
+import { BrowserRouter, MemoryRouter, Route } from "react-router-dom";
+import "../utils/i18n";
+import POSPath from "@constants/routes.constants";
+
+export type SaleAppProps = {
+  mode?: "standalone" | "embedded";
+  basePath?: string;
+};
+
+export const POSRoutes = ({
+  mode = "embedded",
+  basePath = "/sale",
+}: SaleAppProps) => {
+  const Router = mode === "standalone" ? BrowserRouter : MemoryRouter;
+  return (
+    <Router basename={mode === "standalone" ? undefined : basePath}>
+      <Route path="" element={<PosLayout />}>
+        <Route
+          path={POSPath.MANAGEMENT_FLOOR}
+          element={<ManagementFloorsPage />}
+        />
+
+        <Route path={POSPath.POS} element={<SaleLayout />}>
+          <Route path="" element={<CommonLayout />}>
+            <Route path="" element={<PosOrderLayout />}>
+              <Route path={POSPath.TABLES} element={<TableContent />} />
+              <Route path={POSPath.MENUS} element={<ProductContent />} />
+            </Route>
+            <Route path={POSPath.ORDERS} element={<ManagementOrderPage />} />
+          </Route>
+          <Route path={POSPath.ORDER_DETAIL} element={<OrderDetailPage />} />
+
+          <Route path={POSPath.SUCCESS} element={<PaymentSuccess />} />
+        </Route>
+      </Route>
+    </Router>
+  );
+};
+
+export function createPOSRoutes() {
+  return (
+    <Route path="" element={<PosLayout />}>
+      <Route
+        path={POSPath.MANAGEMENT_FLOOR}
+        element={<ManagementFloorsPage />}
+      />
+
+      <Route path={POSPath.POS} element={<SaleLayout />}>
+        <Route path="" element={<CommonLayout />}>
+          <Route path="" element={<PosOrderLayout />}>
+            <Route path={POSPath.TABLES} element={<TableContent />} />
+            <Route path={POSPath.MENUS} element={<ProductContent />} />
+          </Route>
+          <Route path={POSPath.ORDERS} element={<ManagementOrderPage />} />
+        </Route>
+        <Route path={POSPath.ORDER_DETAIL} element={<OrderDetailPage />} />
+
+        <Route path={POSPath.SUCCESS} element={<PaymentSuccess />} />
+      </Route>
+    </Route>
+  );
+}
+
+export default createPOSRoutes;

package/src/router/protected-route.tsx

@@ -0,0 +1,16 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { ROUTES } from "../constants/routes.constants";
+import { localStorageUtils } from "../utils/storages";
+import PosAppProvider from "@provider/app-provider";
+
+export default function ProtectedRoute() {
+  const accessToken = localStorageUtils.getAccessToken();
+
+  return accessToken ? (
+    <PosAppProvider>
+      <Outlet />
+    </PosAppProvider>
+  ) : (
+    <Navigate to={ROUTES.login} replace />
+  );
+}

package/src/router/public-route.tsx

@@ -0,0 +1,11 @@
+import { ROUTES } from "@constants/routes.constants";
+import { localStorageUtils } from "@utils/storages";
+import { Navigate, Outlet } from "react-router-dom";
+
+export default function PublicRoute() {
+  const accessToken = localStorageUtils.getAccessToken();
+  const storedParams = sessionStorage.getItem("oauth_redirect_params");
+  const parsedParams = storedParams ? JSON.parse(storedParams) : null;
+  const validCondition = accessToken && !parsedParams?.redirect_uri;
+  return validCondition ? <Navigate to={ROUTES.pinCode} replace /> : <Outlet />;
+}

package/src/store/header/index.ts

@@ -0,0 +1,21 @@
+import { languages, type ILanguage } from "@constants/language.store"
+import { localStorageUtils } from "@utils/storages"
+import { create } from "zustand"
+
+type StateAction = {
+  selectedLang: ILanguage
+  layoutDisplay: "left" | "right"
+  setSelectedLang: (selectedLang: ILanguage) => void
+  setLayoutDisplay: (layoutDisplay: "left" | "right") => void
+}
+
+const useHeaderStore = create<StateAction>((set) => ({
+  selectedLang: languages[0],
+  layoutDisplay: localStorageUtils.getLayoutDisplay() || "left",
+  setSelectedLang: (selectedLang: ILanguage) =>
+    set(() => ({ selectedLang: selectedLang })),
+  setLayoutDisplay: (layoutDisplay: "left" | "right") =>
+    set(() => ({ layoutDisplay: layoutDisplay })),
+}))
+
+export default useHeaderStore

package/src/store/session/index.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand";
+
+type TState = {
+  step: number;
+  sessionConfirmParams: {
+    cashCount: number;
+    note: string;
+  };
+};
+
+type TActions = {
+  setStep: (step: number) => void;
+  setSessionConfirmParams: (params: TState["sessionConfirmParams"]) => void;
+};
+
+export const useSessionStore = create<TState & TActions>((set) => ({
+  step: 0,
+  setStep: (step: number) => set({ step }),
+  sessionConfirmParams: {
+    cashCount: 0,
+    note: "",
+  },
+  setSessionConfirmParams: (params: TState["sessionConfirmParams"]) =>
+    set({ sessionConfirmParams: params }),
+}));

package/src/store/states/cart.state.ts

@@ -0,0 +1,135 @@
+import { getTotalProductPrice } from "@provider/pos-provider/order-provider";
+import { TProduct } from "@type/product/product";
+import { getKey } from "@utils/functions";
+import { create } from "zustand";
+
+export type CartItemType = {
+  product: TProduct;
+  qty: number;
+  note?: string;
+  lineId?: number[];
+  orderId?: number;
+  ordered?: boolean;
+  orderedNumber?: number;
+  subTotal?: number;
+  inchTotal?: number;
+};
+
+type State = {
+  cartItems: Record<string, CartItemType>;
+  activeProduct: ActiveProductType;
+};
+
+type ActiveProductType = {
+  id: string;
+  isFromCart: boolean;
+};
+
+type Actions = {
+  add: (value: CartItemType) => void;
+  addList: (value: CartItemType[]) => void;
+  inc: (productId: string, qty?: number) => void;
+  dec: (value: string, qty?: number, lineId?: number[]) => void;
+  remove: (productId: string) => void;
+  updateQty: (productId: string, qty: number) => void;
+  clear: () => void;
+  setActiveProduct: (val: ActiveProductType) => void;
+};
+
+export const useCartStore = create<State & Actions>()((set) => ({
+  cartItems: {},
+  activeProduct: { id: "", isFromCart: false },
+  add: ({ product, qty = 1, lineId }) =>
+    set((state) => ({
+      cartItems: {
+        ...state.cartItems,
+        [getKey(product)]: {
+          product,
+          qty: (state.cartItems[getKey(product)]?.qty ?? 0) + qty,
+          lineId,
+          subTotal: getTotalProductPrice(product) * qty,
+          inchTotal:
+            Number(
+              (
+                getTotalProductPrice(product) *
+                (1 + product.tax * 0.01)
+              ).toFixed(2)
+            ) * qty,
+        },
+      },
+    })),
+  addList: (items) =>
+    set((state) => ({
+      cartItems: {
+        ...state.cartItems,
+        ...items.reduce<Record<string, CartItemType>>((acc, item) => {
+          return {
+            ...acc,
+            [getKey(item.product)]: {
+              ...item,
+              qty: (acc?.[getKey(item.product)]?.qty ?? 0) + item.qty,
+              lineId: item.lineId
+                ? [
+                    ...(acc?.[getKey(item.product)]?.lineId ?? []),
+                    item.lineId?.[0],
+                  ]
+                : acc?.[getKey(item.product)]?.lineId,
+            },
+          };
+        }, {}),
+      },
+    })),
+  inc: (productId, qty = 1) =>
+    set((state) => ({
+      cartItems: {
+        ...state.cartItems,
+        [productId]: {
+          ...state.cartItems[productId],
+          qty: state.cartItems[productId].qty + qty,
+        },
+      },
+    })),
+  dec: (productId, qty = 1, lineId) =>
+    set((state) => {
+      const currentQty = state.cartItems[productId].qty - qty;
+      if (currentQty <= 0) {
+        const { [productId]: removed, ...remainingItems } = state.cartItems;
+        return {
+          cartItems: {
+            ...remainingItems,
+            [productId]: {
+              ...state.cartItems[productId],
+              lineId,
+            },
+          },
+        };
+      }
+      return {
+        cartItems: {
+          ...state.cartItems,
+          [productId]: {
+            ...state.cartItems[productId],
+            qty: currentQty,
+            lineId,
+          },
+        },
+      };
+    }),
+  remove: (productId) =>
+    set((state) => {
+      const { [productId]: removed, ...remainingItems } = state.cartItems;
+      return { cartItems: remainingItems };
+    }),
+  updateQty: (productId, qty) =>
+    set((state) => ({
+      cartItems: {
+        ...state.cartItems,
+        [productId]: {
+          ...state.cartItems[productId],
+          qty,
+        },
+      },
+    })),
+  clear: () => set({ cartItems: {} }),
+  setActiveProduct: (val: ActiveProductType) => set({ activeProduct: val }),
+}));

package/src/store/states/close-session.state.ts

@@ -0,0 +1,20 @@
+import { create } from "zustand";
+
+type TCloseSessionInfo = {
+  cashCount: number;
+  difference: number;
+};
+
+type State = {
+  closeSessionInfo: TCloseSessionInfo;
+};
+
+type Actions = {
+  setCloseSessionInfo: (closeSessionInfo: TCloseSessionInfo) => void;
+};
+
+export const useCloseSessionStore = create<State & Actions>()((set: any) => ({
+  closeSessionInfo: { cashCount: 0, difference: 0 },
+  setCloseSessionInfo: (closeSessionInfo: TCloseSessionInfo) =>
+    set((state: State) => ({ ...state, closeSessionInfo })),
+}));

package/src/store/states/customer.state.ts

@@ -0,0 +1,19 @@
+import { TCustomer } from "@type/customer";
+import { create } from "zustand";
+
+type State = {
+  isEditMode: boolean;
+  customer: TCustomer | null;
+};
+
+type Actions = {
+  setIsEditMode: (isEditMode: boolean) => void;
+  setCustomer: (customer: TCustomer | null) => void;
+};
+
+export const useCustomerStore = create<State & Actions>()((set: any) => ({
+  isEditMode: false,
+  customer: null,
+  setIsEditMode: (isEditMode: boolean) => set({ isEditMode }),
+  setCustomer: (customer: TCustomer | null) => set({ customer }),
+}));

package/src/store/states/payment.state.ts

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+
+type State = {
+  showPayment: boolean;
+};
+
+type Actions = {
+  setShowPayment: (showPayment: boolean) => void;
+};
+
+export const usePaymentStore = create<State & Actions>()((set: any) => ({
+  showPayment: false,
+  setShowPayment: (showPayment: boolean) => set({ showPayment }),
+}));

package/src/styles/base.css

@@ -0,0 +1,212 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+:root {
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --text-primary: var(--text-primary);
+  --text-colored-light: var(--text-light);
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  box-sizing: border-box;
+  background-color: #f1f6f1;
+  color: #525866;
+  overflow: hidden;
+  height: 100dvh;
+}
+
+hr {
+  border-top-width: 1px;
+  color: inherit;
+  height: 0;
+  border-top: 1px solid #e8ebed;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  border-radius: 50px !important;
+}
+
+::-webkit-scrollbar-track {
+  background: #e8ebed;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-primary);
+  border-radius: 12px;
+}
+
+.button {
+  height: 44px;
+  border-radius: 8px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -ms-border-radius: 8px;
+  -o-border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  min-width: 120px;
+}
+
+.button-primary {
+  height: 44px;
+  padding: 0 12px;
+  min-width: 120px;
+  border-radius: 8px;
+  background: var(--color-primary);
+  padding: 10px 32px;
+  color: var(--text-button);
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  transition: all ease-in-out 0.5;
+}
+
+.button-primary:hover {
+  color: #0093f5;
+}
+
+.button-primary:disabled {
+  opacity: 0.5;
+  /* background: var(--color-background-disabled); */
+  /* color: var(--color-text-disabled); */
+}
+
+.button-secondary {
+  height: 44px;
+  padding: 0 12px;
+  min-width: 120px;
+  border: 1px solid #e5e7eb;
+  color: var(--text-primary);
+  background-color: #fff;
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: -0.5%;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 10px 32px;
+  box-shadow: 0 1px 2px 0 rgba(228, 229, 231, 0.24);
+}
+
+.button-icon {
+  /* width: 44px !important; */
+  min-width: fit-content;
+  width: 44px;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.title {
+  background: var(--color-secondary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@media only screen and (max-width: 876px) {
+  .button-action-form:has(+ .statusbar) {
+    margin-right: 0;
+  }
+}
+
+.hide-scrollbar {
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none !important;
+}
+
+.bg-primary {
+  background: var(--color-primary);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-primary-20 {
+  background: color-mix(in oklab, var(--color-primary) 20%, transparent);
+}
+
+* {
+  font-family: "Inter", sans-serif;
+}
+
+.border-b-primary {
+  border-bottom: 1px solid transparent !important;
+}
+.border-b-primary:hover {
+  border: 1px solid transparent !important;
+  border-bottom-color: var(--active-border-color) !important;
+}
+
+.border-b-primary:focus {
+  border: 1px solid transparent !important;
+  border-bottom-color: var(--active-border-color) !important;
+}
+
+.border-input-primary:focus {
+  border: 1px solid var(--active-border-color) !important;
+}
+
+.search {
+  min-height: 44px;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.background-home {
+  background: url("/assets/images/home-bg.png") no-repeat center center;
+  background-size: cover;
+}
+
+.table-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+}
+.table-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-primary);
+  border-radius: 8px;
+}
+
+.table-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary);
+}
+
+@media print {
+  svg [filter],
+  svg [style*="drop-shadow"] {
+    filter: none !important;
+  }
+}

package/src/styles/common.css

@@ -0,0 +1,65 @@
+body {
+  box-sizing: border-box;
+}
+
+.gradient-blur-circle {
+  border-radius: 640px;
+  opacity: 0.5;
+  background: conic-gradient(
+    from 211deg at 49.26% 49.01%,
+    #2b7cff 50.00729262828827deg,
+    #903ce9 95.19230604171753deg,
+    #e291ff 159.23076510429382deg,
+    #68cee2 235.38461208343506deg
+  );
+  filter: blur(90px);
+}
+
+.loader {
+  width: 8px;
+  height: 40px;
+  border-radius: 4px;
+  display: block;
+  margin: 20px auto;
+  position: relative;
+  background: currentColor;
+  color: #fff;
+  box-sizing: border-box;
+  animation: animloader 0.3s 0.3s linear infinite alternate;
+}
+
+.loader::after,
+.loader::before {
+  content: '';
+  width: 8px;
+  height: 40px;
+  border-radius: 4px;
+  background: currentColor;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20px;
+  box-sizing: border-box;
+  animation: animloader 0.3s 0.45s linear infinite alternate;
+}
+.loader::before {
+  left: -20px;
+  animation-delay: 0s;
+}
+
+@keyframes animloader {
+  0% {
+    height: 48px;
+  }
+  100% {
+    height: 4px;
+  }
+}
+
+button {
+  cursor: pointer;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}

package/src/styles/lib/tailwind.theme.css

@@ -0,0 +1,34 @@
+:root {
+  /* --color-primary: var(--primary); */
+  /* --color-secondary: var(--secondary); */
+  /* --color-sub-300: #d4d5d8;
+  --color-sub-600: #525866;
+  --color-soft-150: #edeff0;
+  --color-soft-200: #e8e8ea;
+  --color-soft-400: #a9abae;
+  --color-strong-950: #1a1a1b;
+  --color-weak-100: #f6f7f8;
+  --color-information: #335cff;
+  --color-disable-300: #d4d5d8;
+  --color-error: #fb3748;
+  --text-primary: #060606;
+  --text-secondary: #666666;
+  --color-troke-disabled: rgba(66, 66, 66, 0.12);
+  --color-tertiary: #aeaeae;
+  --color-neutral-200: #f1f2f4;
+  --bg-brand: #363793;
+  --stroke-warning: #f6b51e;
+  --stroke-info: #35ade9;
+  --stroke-success: #1fc163;
+  --color-secondary-sub:#CEE1FF,
+
+  --color-neutral-50: #fafafa;
+  --color-background-disabled: rgba(66, 66, 66, 0.04);
+  --color-text-disabled: #C3C3C3; */
+  /* ... */
+
+  --shadow-button: 0px 4px 4px -1px #00000006, 0px 1px 1px 0px #00000013;
+  /* ... */
+  /* --color-secondary: #0101ff; */
+  --linear-primary: linear-gradient(180deg, #004FD3 0%, #2E74E9 100%);
+}