ခြုံငုံသုံးသပ်ချက်
Plugin များသည် register(AppRegistry) အတွင်း shared ERP dashboard သို့ widget ပံ့ပိုးပါသည်။ Shell က layout၊ date range နှင့် persistence ကို ပိုင်ဆိုင်ပါသည်။
- frontend/src/index.tsx တွင် AppRegistry.dashboard.add ခေါ်ပါ
- DashboardItem ကို registration တွင် inline ထားပါ — widget file သည် content သာ export လုပ်ရပါမည်
- Registration id နှင့် DashboardItem id တူရပါမည်
- RBAC အတွက် requiredApis ပေးပါ
၁။ Widget တည်ဆောက်ခြင်း (content only)
Widget ကို frontend/src/page/dashboard/ အောက်တွင် ထားရှိရပါသည်။ Widget ဖိုင်အတွင်း DashboardItem ဖြင့် wrap မလုပ်ရပါ။ Date range အတွက် useDashboardContext ကို အသုံးပြုရပါသည်။
- Widget file အတွင်း DashboardItem မသုံးရပါ
- flex + h-full ဖြင့် cell ကို ဖြည့်ပါ
- Date-scoped ဆို startDate / endDate ဖတ်ပါ
TSXfrontend/src/page/dashboard/analytics-widget.tsx
1import { useDashboardContext } from "@quan-erp/base-frontend";
2
3export function AnalyticsWidget() {
4 const { startDate, endDate } = useDashboardContext();
5
6 return (
7 <div className="flex flex-col w-full h-full p-4 gap-2">
8 <h3>Analytics</h3>
9 <span>Start {startDate.toLocaleDateString()}</span>
10 <span>End {endDate.toLocaleDateString()}</span>
11 </div>
12 );
13}၂။ AppRegistry.dashboard.add ဖြင့် မှတ်ပုံတင်ခြင်း
Plugin entry တွင် DashboardItem ကို inline wrap လုပ်ပြီး AppRegistry.dashboard.add ခေါ်ပါ။
- id — plugin များအကြား unique ဖြစ်ရပါမည်၊ `${metadata.name}-…` သုံးပါ
- pluginName — module.metadata.json name နှင့် တူရပါမည်
- DashboardItem id — registration id နှင့် တူရပါမည်
- requiredApis — withApiMetadataFetchFn မှ .api
TSXfrontend/src/index.tsx
1import type { AppRegistryState, PluginModule } from "@quan-erp/shared-types";
2import { DashboardItem } from "@quan-erp/shared-ui";
3import metadata from "../module.metadata.json" with { type: "json" };
4import { getAnalyticsApi } from "./api/analytics.api";
5import { AnalyticsWidget } from "./page/dashboard/analytics-widget";
6
7const Plugin: PluginModule = {
8 register(AppRegistry: AppRegistryState) {
9 AppRegistry.dashboard.add({
10 id: `${metadata.name}-analytics`,
11 pluginName: metadata.name,
12 element: (
13 <DashboardItem
14 id={`${metadata.name}-analytics`}
15 colSpan={2}
16 rowSpan={1}
17 pluginName={metadata.name}
18 requiredApis={[getAnalyticsApi.api]}
19 >
20 <AnalyticsWidget />
21 </DashboardItem>
22 ),
23 });
24 },
25};
26
27export default Plugin;၃။ Dashboard context
useDashboardContext() သည် global filters (startDate, endDate) ပေးပါသည်။ Range ပြောင်းသည့်အခါ query များကို sync ထားရှိပါ။
TSXuseDashboardContext
import { useDashboardContext } from "@quan-erp/base-frontend";
const { startDate, endDate } = useDashboardContext();
// Pass into react-query keys / API params so the widget refetches on range changeအရေးကြီးသော စည်းကမ်းများ
- DashboardItem ကို index.tsx တွင် inline ထားပါ — widget အတွင်း wrap မလုပ်ရပါ
- Registration id နှင့် DashboardItem id တူရပါမည်
- id များသည် installed plugin အားလုံးတွင် unique ဖြစ်ရပါမည်
- RBAC အတွက် requiredApis ပေးပါ
- Widget file များသည် content သာ export လုပ်ရပါမည်
စစ်ဆေးရန်စာရင်း
- page/dashboard/ တွင် content-only widget ဖန်တီးပါ
- Date-scoped ဆို useDashboardContext သုံးပါ
- register() တွင် matching ids ဖြင့် add ခေါ်ပါ
- DashboardItem တွင် pluginName, colSpan, rowSpan, requiredApis ထည့်ပါ
- quan-erp watch + install ပြီး ပေါ်ကြောင်း စစ်ဆေးပါ
အဖြစ်များသော ပြဿနာများ
- Widget မပေါ် — မမှတ်ပုံတင်ခြင်း / pluginName မှားခြင်း / မ install ရသေးခြင်း
- Layout ပျက် — registration id ≠ DashboardItem id
- Permission / empty — requiredApis မှားခြင်း သို့မဟုတ် ပျောက်နေခြင်း
- Date range မလိုက် — useDashboardContext မဖတ်ခြင်း
- Layout ပျက် — DashboardItem ကို widget file တွင် wrap လုပ်ထားခြင်း