feat: add StatusBadge component and integrate action confirmation modal

- Introduced StatusBadge component for displaying various status indicators with customizable colors and icons. - Updated ModulePageHeader to conditionally render badges based on props. - Implemented ActionConfirmationModal for handling lifecycle actions (delete, activate, etc.) with support for forms and custom body rendering. - Enhanced EnterpriseDetailPageProvider to manage action confirmation modal state and execution of actions. - Added new modal configurations for various actions in EnterpriseDetailPageConfig. - Updated theme provider to include ModalsProvider and Notifications for better user feedback.
2026-07-15 17:27:29 +07:00
parent 7ce4ced7d6
commit 43f9d3d491
21 changed files with 966 additions and 93 deletions
@@ -21,5 +21,6 @@ export const FullPageModuleConfig: ModuleConfigEntity = {
  moduleCategory: 'FULL_PAGE',

  /**  */
-  moduleType: 'MASTER_DATA',
+  // moduleType: 'MASTER_DATA',
+  moduleType: 'TRANSACTION',
 } as const;
@@ -4,6 +4,9 @@
    "create_page_title": "New Full Page",
    "duplicate_page_title": "Duplicate Full Page",
    "description": "An example module of a <1>full page layout</1> for detailed forms.",
+    "detail_page_description": "View and manage detailed information for this record.",
+    "create_page_description": "Fill out the form below to add a new record to the system.",
+    "duplicate_page_description": "Copy and modify information from an existing record to quickly create a new one.",
    "fields": {
        "status": "Status",
        "name": "Name",
@@ -4,6 +4,9 @@
    "create_page_title": "Buat Halaman Penuh Baru",
    "duplicate_page_title": "Duplikat Halaman Penuh",
    "description": "Contoh penerapan <1>tata letak halaman penuh</1> untuk formulir detail.",
+    "detail_page_description": "Lihat dan kelola informasi terperinci terkait data ini.",
+    "create_page_description": "Lengkapi formulir di bawah ini untuk menambahkan data baru ke dalam sistem.",
+    "duplicate_page_description": "Salin dan sesuaikan informasi dari data yang sudah ada untuk mempercepat pembuatan data baru.",
    "fields": {
        "status": "Status",
        "name": "Nama",
@@ -1,14 +1,61 @@
+import { z } from 'zod';
+import { FieldTextarea, STATUS_DATA } from '@repo/ui/components';
+import { Sparkles } from 'lucide-react';
 import { EnterpriseDetailPageProvider, useEnterpriseModuleTranslationContext } from '@repo/ui/foundations';
 import { FullPageModuleConfig } from '../../domain/constants';
+import { useState } from 'react';
+
+const cancelSchema = z.object({
+  reason: z.string().min(1, 'Reason is required'),
+});

 export default function FullPagePageDetail() {
  const { t } = useEnterpriseModuleTranslationContext();
-
+  const [detailData, setDetailData] = useState();
+  console.log({ detailData });
  return (
    <EnterpriseDetailPageProvider
+      onDetailLoaded={detailData}
+      cancelModalConfig={{
+        title: t('common:confirmDialog.cancel.title'),
+        schema: cancelSchema,
+        defaultValues: { reason: '' },
+        renderBody: (form) => (
+          <FieldTextarea
+            name="reason"
+            control={form!.control}
+            label="Reason for Cancellation"
+            placeholder="Please provide a reason..."
+            withAsterisk
+          />
+        ),
+        confirmLabel: 'Submit Cancellation',
+        successMessage: 'The record was successfully cancelled.',
+        errorMessage: (error: any) => {
+          // Example of parsing a standard axios/backend network error
+          const backendMessage = error?.response?.data?.message;
+          return backendMessage
+            ? `Custom Cancellation failed: ${backendMessage}`
+            : 'Custom Failed to cancel the record due to a system error.';
+        },
+      }}
+      // By default it looks for 'status' in detailData, but you can change it here:
+      statusKey="status"
+      // Example of custom badge injection
+      getCustomStatusConfig={(status) => {
+        if (status === STATUS_DATA.DRAFT) {
+          return {
+            color: 'violet',
+            variant: 'outline',
+            leftSection: <Sparkles size={12} strokeWidth={2.5} />,
+          };
+        }
+        return {};
+      }}
      pageHeaderProps={{
        title: t('detail_page_title'),
-
+        description: t('detail_page_description'),
+        // showBadges: false,
        breadcrumbs: [
          { label: t('nav:example-module'), type: 'text' },
          { label: t('nav:example-full-page'), type: 'link', href: `${FullPageModuleConfig.webUrl}/index` },
@@ -23,6 +23,8 @@ import {
  Tabs,
  Box,
  Paper,
+  StatusBadge,
+  STATUS_DATA,
 } from '@repo/ui/components';
 import { ShieldCheck, Database, Lock, Layout, Activity, Printer, FileText, LayoutDashboard } from 'lucide-react';
 import { Globe } from 'lucide-react';
@@ -249,6 +251,25 @@ export default function ShowcaseView({ density, setDensity }: ShowcaseViewProps)
                        </Group>
                      </div>
                      <Divider />
+                      <div>
+                        <Title order={4} mb="xs">
+                          Enterprise Status Badges
+                        </Title>
+                        <Text size="sm" c="dimmed" mb="md">
+                          Pre-configured status badges for transaction and master data.
+                        </Text>
+                        <Group>
+                          <StatusBadge status={STATUS_DATA.DRAFT} />
+                          <StatusBadge status={STATUS_DATA.PENDING} />
+                          <StatusBadge status={STATUS_DATA.PROCESS} />
+                          <StatusBadge status={STATUS_DATA.APPROVED} />
+                          <StatusBadge status={STATUS_DATA.CANCELLED} />
+                          <StatusBadge status={STATUS_DATA.WAITING} />
+                          <StatusBadge status={STATUS_DATA.ON_HOLD} />
+                          <StatusBadge status={STATUS_DATA.REFUNDED} />
+                        </Group>
+                      </div>
+                      <Divider />
                      <div>
                        <Title order={4} mb="md">
                          Buttons