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

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx

@@ -21,8 +21,9 @@ export interface RuleEngineCardGridProps {
     pageCount: number;
     totalCount: number;
   };
-  onEdit: (record: RuleEngineRecord) => void;
-  onDelete: (record: RuleEngineRecord) => void;
+  onEdit?: (record: RuleEngineRecord) => void;
+  onDelete?: (record: RuleEngineRecord) => void;
+  readOnly?: boolean;
   onViewChain?: () => void;
   onSubmitRate?: (id: string) => void;
   onApproveRate?: (record: RuleEngineRecord) => void;
@@ -41,6 +42,7 @@ const RuleEngineCardGrid = ({
   onViewChain,
   onSubmitRate,
   onApproveRate,
+  readOnly = false,
 }: RuleEngineCardGridProps) => {
   const presentation = resolveCardPresentation(config);
 
@@ -153,8 +155,9 @@ const RuleEngineCardGrid = ({
                   record={record}
                   config={config}
                   layout="compact"
-                  onEdit={onEdit}
-                  onDelete={onDelete}
+                  readOnly={readOnly}
+                  onEdit={onEdit ?? (() => {})}
+                  onDelete={onDelete ?? (() => {})}
                   onViewChain={onViewChain}
                   onSubmitRate={onSubmitRate}
                   onApproveRate={onApproveRate}

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineRecordActions.tsx

@@ -26,6 +26,7 @@ export interface RuleEngineRecordActionsProps {
   onSubmitRate?: (id: string) => void;
   onApproveRate?: (record: RuleEngineRecord) => void;
   layout?: "row" | "compact";
+  readOnly?: boolean;
 }
 
 const RuleEngineRecordActions = ({
@@ -37,6 +38,7 @@ const RuleEngineRecordActions = ({
   onSubmitRate,
   onApproveRate,
   layout = "row",
+  readOnly = false,
 }: RuleEngineRecordActionsProps) => {
   const status = String(record.status ?? "");
   const hasRateActions =
@@ -47,6 +49,21 @@ const RuleEngineRecordActions = ({
       ? "h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
       : "h-8 w-8 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground";
 
+  if (readOnly) {
+    return onViewChain ? (
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={iconBtnClass}
+        onClick={onViewChain}
+        aria-label="View chain"
+      >
+        <Eye className="h-4 w-4" />
+      </Button>
+    ) : null;
+  }
+
   return (
     <div className="flex items-center justify-end gap-0.5">
       <Button

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx

@@ -10,7 +10,7 @@ export interface RuleEngineToolbarProps {
   search: string;
   onSearchChange: (value: string) => void;
   searchPlaceholder: string;
-  onAdd: () => void;
+  onAdd?: () => void;
   addLabel?: string;
   viewMode: RuleEngineViewMode;
   onViewModeChange: (mode: RuleEngineViewMode) => void;
@@ -81,10 +81,12 @@ const RuleEngineToolbar = ({
         <Filter className="h-4 w-4" />
         Filter
       </Button>
-      <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
-        <Plus className="h-4 w-4" />
-        {addLabel}
-      </Button>
+      {onAdd ? (
+        <Button type="button" className={ruleEngineToolbar.primaryBtn} onClick={onAdd}>
+          <Plus className="h-4 w-4" />
+          {addLabel}
+        </Button>
+      ) : null}
     </div>
   </div>
 );