init project portal web

lib/price-plan-detail/view/tab/usage-content/index.tsx

@@ -0,0 +1,32 @@
+import { TabsContent } from "@/components/ui/tabs"
+import { OptionProps } from "@/lib/helper/type"
+import UsageEvents from "./usage-events"
+import RatePlanFlow from "./flow"
+import PricePlanDetailState from "@/lib/price-plan-detail/state/price-plan-detail-state"
+import RatePlanFormState from "@/lib/price-plan-detail/state/rate-plan-form-state"
+import RatePlanSection from "./rate-plan"
+import { observer } from "mobx-react-lite"
+
+interface Props {
+    usageEventOptions: OptionProps[]
+    mainState: PricePlanDetailState
+    formState: RatePlanFormState
+}
+
+const TabsUsageContent = observer(({
+    usageEventOptions,
+    mainState,
+    formState
+}: Props) => {
+    return (
+        <TabsContent value="usage" className="m-0">
+            <div className="grid grid-cols-12 min-h-[50vh]">
+                <UsageEvents eventOptions={usageEventOptions} mainState={mainState}/>
+                <RatePlanFlow mainState={mainState} formState={formState}/>
+                <RatePlanSection mainState={mainState} ratePlanFormState={formState}/>
+            </div>
+        </TabsContent>
+    )
+})
+
+export default TabsUsageContent