Public page ဖန်တီးနည်း

ERP chrome အပြင်ဘက်ရှိ blank-layout page ကို AppRegistry.rootRoute.add() ဖြင့် မှတ်ပုံတင်ရပါသည် — တစ်ခုတည်းသော screen သို့မဟုတ် React.lazy ပါသော nested customer portal ဖြစ်နိုင်ပါသည်။ route.add() ကို မသုံးရပါ။

ပန်းတိုင်

ERP sidebar / admin shell မပါဘဲ ဖွင့်နိုင်သော မျက်နှာပြင်များ — kitchen board၊ QR menu၊ customer portal စသည် — ကို ပေးပို့ရန် ဖြစ်ပါသည်။

Blank layout — AppRegistry.rootRoute.add()
Path ကို /${metadata.name} ဖြင့် prefix လုပ်ရပါမည်
Multi-page — /* shell + nested Routes + React.lazy
အများသုံး ဖောက်သည် ≠ Quan ERP admin — အတည်ပြုခြင်းကို ခွဲခြားထားရပါမည်

1. လိုအပ်ချက်များ

frontend register() ရှိသော plugin နှင့် လည်ပတ်နေသော base stack လိုအပ်ပါသည်။

plugins/<name>/frontend/src/index.tsx ရှိရပါမည်
metadata.name နှင့် folder အမည် တူညီရပါမည်
Build/watch နှင့် Install ပြီး register() လည်ပတ်နေရပါမည်
တစ်ခုတည်းသော screen လိုအပ်သလား / multi-page portal လိုအပ်သလား သိရှိထားရပါမည်

Creating a plugin →Public routes (reference) →

2. တစ်ခုတည်းသော public page မှတ်ပုံတင်ခြင်း

တစ်ခုတည်းသော screen အတွက် register() ထဲတွင် rootRoute.add() ကို အသုံးပြုရပါသည်။ Blank layout အတွက် route.add() မသုံးရပါ။

path — `/${metadata.name}/…` သို့မဟုတ် `/${metadata.name}/:id`
element — page component (@quan-erp/shared-ui ကို အသုံးပြုနိုင်ပါသည်)
Public page အတွက် menu.add() မလုပ်ရပါ

TSXfrontend/src/index.tsx

import type { AppRegistryState, PluginModule } from "@quan-erp/shared-types";
import metadata from "../module.metadata.json" with { type: "json" };
import { FoodKitchenBoard } from "./page/kitchen/kitchen.page";
import { FoodPublicMenu } from "./page/public-menu/public-menu.page";

const Plugin: PluginModule = {
  register(AppRegistry: AppRegistryState) {
    AppRegistry.rootRoute.add({
      path: `/${metadata.name}/kitchen`,
      element: <FoodKitchenBoard />,
    });

    // Dynamic segment
    AppRegistry.rootRoute.add({
      path: `/${metadata.name}/:id`,
      element: <FoodPublicMenu />,
    });
  },
};

export default Plugin;

3. Nested public portal (multi-page)

Login / home / signup အတွက် `/${metadata.name}/*` shell တစ်ခုကို မှတ်ပုံတင်ပြီး၊ အတွင်းတွင် Routes ထားရှိရပါသည်။ Nested page တိုင်းကို React.lazy ဖြင့် load လုပ်ရပါမည်။

Portal တစ်ခုလုံးအတွက် rootRoute entry တစ်ခုသာ
React.lazy + Suspense + LoadingState
Nested path များသည် splat နှင့် relative ဖြစ်ပါသည် (login → /${metadata.name}/login)

TSfrontend/src/index.tsx — shell

AppRegistry.rootRoute.add({
  path: `/${metadata.name}/*`,
  element: <PublicShellPage />,
});

TSXfrontend/src/page/public/public-shell.page.tsx

import { LoadingState } from "@quan-erp/shared-ui";
import { lazy, Suspense } from "react";
import { Navigate, Route, Routes } from "react-router-dom";

const LoginPage = lazy(() =>
  import("./login/login.page").then((m) => ({ default: m.LoginPage })),
);
const SignupPage = lazy(() =>
  import("./signup/signup.page").then((m) => ({ default: m.SignupPage })),
);
const HomePage = lazy(() =>
  import("./home/home.page").then((m) => ({ default: m.HomePage })),
);

const HOME_PATH = "home";

export function PublicShellPage() {
  return (
    <Suspense fallback={<LoadingState />}>
      <Routes>
        <Route index element={<Navigate replace to={HOME_PATH} />} />
        <Route path="login" element={<LoginPage />} />
        <Route path="register" element={<SignupPage />} />
        <Route path="home" element={<HomePage />} />
        <Route path="*" element={<Navigate replace to={HOME_PATH} />} />
      </Routes>
    </Suspense>
  );
}

4. အများသုံး ဖောက်သည် ≠ admin auth

ပြင်ပ ဖောက်သည်များသည် Quan ERP အသုံးပြုသူ မဟုတ်ပါ။ Core admin login၊ base axios သို့မဟုတ် localStorage token ကို ပြန်လည် မသုံးရပါ။

Public axios + withCredentials: true
Backend — ${metadata.name}-prefixed httpOnly cookies
Auth gate = cookie-authenticated API အောင်မြင်မှု (401 → login)
Zustand profile (memory) — token မသိမ်းရပါ

5. စစ်ဆေးခြင်း

Watch နှင့် Install ပြီးနောက် public URL ကို browser တွင် ဖွင့်၍ စစ်ဆေးရပါမည်။

Single — /${metadata.name}/kitchen; ERP sidebar မရှိရပါ
Portal — /${metadata.name}/login → home; nested route များ အလုပ်လုပ်ရပါမည်
register() ပြောင်းလဲပြီးသား ဖြစ်ပါက hard-refresh လုပ်ပါ
Network — public API သည် plugin cookie ကို အသုံးပြုရပါမည်

အဖြစ်များသော အမှားများ

route.add() သုံးမိခြင်း — ERP chrome ပေါ်နေပါသည်
/${metadata.name} prefix မပါခြင်း
Shell တွင် /* မပါခြင်း — nested 404
Portal page များကို eager import လုပ်ခြင်း — login chunk ကြီးလာခြင်း
Public page တွင် admin login ရှိသည်ဟု ယူဆခြင်း