booking flow,summtion, approval, contract, mock payemnt and integration to back office, and also add permissions

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

@@ -1,5 +1,7 @@
 import { useCallback, useMemo, useState } from "react";
 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";
 
@@ -54,6 +56,7 @@ const pathCategory = (pathname: string): RuleEngineNavCategory | undefined => {
 };
 
 const RuleEngineResourcePage = () => {
+  const { user } = useAuth();
   const { resource: resourceSlug } = useParams<{ resource: string }>();
   const location = useLocation();
   const category = pathCategory(location.pathname);
@@ -75,6 +78,13 @@ const RuleEngineResourcePage = () => {
     config?.slug ?? DEFAULT_CONFIGURATION_SLUG,
   );
 
+  const canView = Boolean(
+    config && canAccessRuleEngineResource(user, config.slug, "view"),
+  );
+  const canManage = Boolean(
+    config && canAccessRuleEngineResource(user, config.slug, "manage"),
+  );
+
   const listParams = useMemo(
     () => ({
       search: config?.supportsSearch ? search.trim() || undefined : undefined,
@@ -207,6 +217,7 @@ const RuleEngineResourcePage = () => {
           <RuleEngineRecordActions
             record={row.original}
             config={config}
+            readOnly={!canManage}
             onEdit={(record) => {
               setEditing(record);
               setFormOpen(true);
@@ -215,15 +226,15 @@ const RuleEngineResourcePage = () => {
             onViewChain={
               config.slug === "approval-rules" ? () => setChainOpen(true) : undefined
             }
-            onSubmitRate={(id) => submit.mutate(id)}
-            onApproveRate={handleApproveRate}
+            onSubmitRate={canManage ? (id) => submit.mutate(id) : undefined}
+            onApproveRate={canManage ? handleApproveRate : undefined}
           />
         </div>
       ),
     });
 
     return base;
-  }, [config, submit, handleApproveRate]);
+  }, [canManage, config, submit, handleApproveRate]);
 
   const tableStatus = isLoading ? "loading" : isError ? "error" : "success";
 
@@ -235,6 +246,10 @@ const RuleEngineResourcePage = () => {
     return <Navigate to={defaultPath} replace />;
   }
 
+  if (!canView) {
+    return <Navigate to="/dashboard/overview" replace />;
+  }
+
   const openCreate = () => {
     setEditing(null);
     setFormOpen(true);
@@ -279,7 +294,7 @@ const RuleEngineResourcePage = () => {
               setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
             }}
             searchPlaceholder={config.searchPlaceholder}
-            onAdd={openCreate}
+            onAdd={canManage ? openCreate : undefined}
             addLabel={`Add ${config.label.replace(/s$/, "")}`}
             viewMode={viewMode}
             onViewModeChange={setViewMode}
@@ -333,13 +348,14 @@ const RuleEngineResourcePage = () => {
             itemLabel={itemLabel}
             table={cardTable}
             pagination={paginationState}
-            onEdit={openEdit}
-            onDelete={setDeleteTarget}
+            readOnly={!canManage}
+            onEdit={canManage ? openEdit : undefined}
+            onDelete={canManage ? setDeleteTarget : undefined}
             onViewChain={
               config.slug === "approval-rules" ? () => setChainOpen(true) : undefined
             }
-            onSubmitRate={(id) => submit.mutate(id)}
-            onApproveRate={handleApproveRate}
+            onSubmitRate={canManage ? (id) => submit.mutate(id) : undefined}
+            onApproveRate={canManage ? handleApproveRate : undefined}
           />
         )}
       </Card>