style: finalize the style of the dashboard

apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx

@@ -3,9 +3,10 @@ import { Navigate, useLocation, useParams } from "react-router-dom";
 import { useAuth } from "@/auth/useAuth";
 import { canAccessRuleEngineResource } from "@/lib/permissions";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Loader2 } from "lucide-react";
-import { Card, Button, Modal, Stack, Group, Text, List } from "@mantine/core";
+import { Box, Card, Button, Modal, Stack, Group, Text, List, Loader } from "@mantine/core";
+import { Plus } from "lucide-react";
 
+import { PageContainer, PageHeader } from "@/components/page";
 import RuleEngineCardGrid from "@/components/ruleEngine/RuleEngineCardGrid";
 import RuleEngineFormDialog from "@/components/ruleEngine/RuleEngineFormDialog";
 import ManageRuleEngineOrderDialog from "@/components/ruleEngine/ManageRuleEngineOrderDialog";
@@ -325,31 +326,44 @@ const RuleEngineResourcePage = () => {
   };
 
   const itemLabel = config.label.toLowerCase();
+  const addLabel = `Add ${config.label.replace(/s$/, "")}`;
 
   return (
-    <Stack gap="lg">
-      <Card p="lg" radius="lg" withBorder style={{ background: "white", boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)" }}>
-        <Stack gap="md">
-          <RuleEngineToolbar
-            search={search}
-            onSearchChange={
-              config.supportsSearch
-                ? (v) => {
-                    setSearch(v);
-                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                  }
-                : undefined
-            }
-            showSearch={Boolean(config.supportsSearch)}
-            searchPlaceholder={config.searchPlaceholder}
-            onAdd={canManage ? openCreate : undefined}
-            addLabel={`Add ${config.label.replace(/s$/, "")}`}
-            onManageOrder={
-              canManage && config.orderConfig ? () => setOrderDialogOpen(true) : undefined
-            }
-            viewMode={viewMode}
-            onViewModeChange={setViewMode}
-          />
+    <PageContainer>
+      <PageHeader
+        title={config.label}
+        subtitle={config.subtitle}
+        action={
+          canManage ? (
+            <Button leftSection={<Plus size={18} />} onClick={openCreate}>
+              {addLabel}
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <Card p={0}>
+        <Stack gap={0}>
+          <Box px="md" pt="md" pb="sm" w="100%">
+            <RuleEngineToolbar
+              search={search}
+              onSearchChange={
+                config.supportsSearch
+                  ? (v) => {
+                      setSearch(v);
+                      setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                    }
+                  : undefined
+              }
+              showSearch={Boolean(config.supportsSearch)}
+              searchPlaceholder={config.searchPlaceholder}
+              onManageOrder={
+                canManage && config.orderConfig ? () => setOrderDialogOpen(true) : undefined
+              }
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+            />
+          </Box>
 
           {viewMode === "table" ? (
             <DataTable
@@ -378,8 +392,7 @@ const RuleEngineResourcePage = () => {
                 state: { pagination },
                 onPaginationChange: setPagination,
               }}
-              containerClassName="border-0 shadow-none [&_[data-slot=table-row]]:border-border"
-              footerClassName="border-t border-border bg-card"
+              containerClassName="border-0 shadow-none bg-transparent"
               footer={({ table, pagination: footerPagination }) => (
                 <DataTableFooter
                   table={table}
@@ -473,16 +486,15 @@ const RuleEngineResourcePage = () => {
             </Button>
             <Button
               color="red"
-              disabled={remove.isPending}
+              loading={remove.isPending}
               onClick={() => {
                 if (!deleteTarget) return;
                 remove.mutate(deleteTarget.id, {
                   onSuccess: () => setDeleteTarget(null),
                 });
               }}
-              leftSection={remove.isPending && <Loader2 size={16} />}
             >
-              {remove.isPending ? "Deleting..." : "Delete"}
+              Delete
             </Button>
           </Group>
         </Stack>
@@ -498,7 +510,7 @@ const RuleEngineResourcePage = () => {
         <Stack gap="md">
           {chainLoading ? (
             <Group justify="center" p="xl">
-              <Loader2 size={32} style={{ animation: "spin 1s linear infinite" }} />
+              <Loader />
             </Group>
           ) : (
             <>
@@ -524,7 +536,7 @@ const RuleEngineResourcePage = () => {
           )}
         </Stack>
       </Modal>
-    </Stack>
+    </PageContainer>
   );
 };