From 568f55f00f800da0a80698cb05a4c20e627852e7 Mon Sep 17 00:00:00 2001
From: Syed Waseem <syedwaseemrafai@gmail.com>
Date: Mon, 3 Aug 2026 16:21:27 +0530
Subject: [PATCH] feat: implement dynamic form rendering and field management
 system for action builders

---
 .../components/ActionCategoryManager.tsx       | 18 +++++++++---------
 .../components/ActionTypeManager.tsx           | 18 +++++++++---------
 .../components/DynamicFormRenderer.tsx         |  6 +++---
 .../components/FieldBuilderManager.tsx         |  8 ++++----
 src/app/actionBuilder/index.tsx                |  6 +++---
 src/app/masterData/index.tsx                   |  2 +-
 src/layout/AppHeader.tsx                       |  4 ++++
 7 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/app/actionBuilder/components/ActionCategoryManager.tsx b/src/app/actionBuilder/components/ActionCategoryManager.tsx
index f56831b..b6357ba 100644
--- a/src/app/actionBuilder/components/ActionCategoryManager.tsx
+++ b/src/app/actionBuilder/components/ActionCategoryManager.tsx
@@ -201,9 +201,9 @@ export function ActionCategoryManager() {
   );
 
   return (
-    <div className="space-y-6 font-sans">
+    <div className="w-full space-y-6 font-sans">
       {/* Top Banner / Controls */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white p-5 rounded-[16px] border border-gray-200 shadow-sm">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white p-5 rounded-[20px] border border-gray-100 shadow-sm">
         <div>
           <h3 className="text-[17px] font-bold text-[#0F172B] flex items-center gap-2">
             <FolderPlusIcon size={22} className="text-[#1E7D5C]" />
@@ -219,7 +219,7 @@ export function ActionCategoryManager() {
             variant="primary"
             onClick={handleOpenCreate}
             leftIcon={<PlusIcon size={18} />}
-            className="!bg-[#1E7D5C] hover:!bg-[#17664B] !rounded-[12px] font-semibold text-[14px]"
+            className="!bg-[#1E7D5C] hover:!bg-[#17664B] !rounded-[10px] !gap-[10px] !h-[40px] font-semibold text-[14px]"
           >
             Add New Category
           </CustomButton>
@@ -337,17 +337,17 @@ export function ActionCategoryManager() {
       </CustomModal>
 
       {/* Category List Table Card */}
-      <div className="bg-white rounded-[20px] border border-gray-200 shadow-sm overflow-hidden flex flex-col">
+      <div className="bg-white rounded-[20px] border border-gray-100 shadow-sm overflow-hidden flex flex-col">
         {/* Table Filter Bar */}
         <div className="p-4 border-b border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-50/50">
-          <div className="relative w-full sm:w-80">
-            <MagnifyingGlassIcon size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400" />
-            <input
-              type="text"
+          <div className="w-full sm:w-80">
+            <CustomInput
               value={searchTerm}
               onChange={(e) => handleSearchChange(e.target.value)}
               placeholder="Search category by name or code..."
-              className="w-full pl-10 pr-4 py-2 text-[13px] bg-white border border-gray-200 rounded-[10px] focus:outline-none focus:border-[#1E7D5C] focus:ring-1 focus:ring-[#1E7D5C] transition-colors"
+              leftIcon={<MagnifyingGlassIcon size={16} />}
+              className="!bg-[#F3F6F5] !rounded-[10px] !h-[38px] !border !border-[#E5E7EB]"
+              containerClassName="!gap-0"
             />
           </div>
 
diff --git a/src/app/actionBuilder/components/ActionTypeManager.tsx b/src/app/actionBuilder/components/ActionTypeManager.tsx
index 15680a7..13a5649 100644
--- a/src/app/actionBuilder/components/ActionTypeManager.tsx
+++ b/src/app/actionBuilder/components/ActionTypeManager.tsx
@@ -225,9 +225,9 @@ export function ActionTypeManager() {
   );
 
   return (
-    <div className="space-y-6 font-sans">
+    <div className="w-full space-y-6 font-sans">
       {/* Top Banner / Controls */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white p-5 rounded-[16px] border border-gray-200 shadow-sm">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white p-5 rounded-[20px] border border-gray-100 shadow-sm">
         <div>
           <h3 className="text-[17px] font-bold text-[#0F172B] flex items-center gap-2">
             <CirclesThreePlusIcon size={22} className="text-[#1E7D5C]" />
@@ -243,7 +243,7 @@ export function ActionTypeManager() {
             variant="primary"
             onClick={handleOpenCreate}
             leftIcon={<PlusIcon size={18} />}
-            className="!bg-[#1E7D5C] hover:!bg-[#17664B] !rounded-[12px] font-semibold text-[14px]"
+            className="!bg-[#1E7D5C] hover:!bg-[#17664B] !rounded-[10px] !gap-[10px] !h-[40px] font-semibold text-[14px]"
           >
             Add Action Type
           </CustomButton>
@@ -375,7 +375,7 @@ export function ActionTypeManager() {
       </CustomModal>
 
       {/* Action Types Table Card */}
-      <div className="bg-white rounded-[20px] border border-gray-200 shadow-sm overflow-hidden flex flex-col">
+      <div className="bg-white rounded-[20px] border border-gray-100 shadow-sm overflow-hidden flex flex-col">
         {/* Table Filter Bar */}
         <div className="p-4 border-b border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-50/50">
           <div className="flex items-center gap-3 w-full sm:w-auto">
@@ -387,14 +387,14 @@ export function ActionTypeManager() {
               />
             </div>
 
-            <div className="relative flex-1 sm:w-72">
-              <MagnifyingGlassIcon size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400" />
-              <input
-                type="text"
+            <div className="flex-1 sm:w-72">
+              <CustomInput
                 value={searchTerm}
                 onChange={(e) => handleSearchChange(e.target.value)}
                 placeholder="Search action types..."
-                className="w-full pl-10 pr-4 py-2 text-[13px] bg-white border border-gray-200 rounded-[10px] focus:outline-none focus:border-[#1E7D5C] focus:ring-1 focus:ring-[#1E7D5C] transition-colors"
+                leftIcon={<MagnifyingGlassIcon size={16} />}
+                className="!bg-[#F3F6F5] !rounded-[10px] !h-[38px] !border !border-[#E5E7EB]"
+                containerClassName="!gap-0"
               />
             </div>
           </div>
diff --git a/src/app/actionBuilder/components/DynamicFormRenderer.tsx b/src/app/actionBuilder/components/DynamicFormRenderer.tsx
index e8a82d4..cc66a2e 100644
--- a/src/app/actionBuilder/components/DynamicFormRenderer.tsx
+++ b/src/app/actionBuilder/components/DynamicFormRenderer.tsx
@@ -382,9 +382,9 @@ export function DynamicFormRenderer() {
   const selectedTypeObj = actionTypes.find((t) => t.id === selectedActionTypeId);
 
   return (
-    <div className="space-y-6 font-sans">
+    <div className="w-full space-y-6 font-sans">
       {/* Top Control Bar */}
-      <div className="bg-white p-5 rounded-[16px] border border-gray-200 shadow-sm space-y-4">
+      <div className="bg-white p-5 rounded-[20px] border border-gray-100 shadow-sm space-y-4">
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
           <div>
             <h3 className="text-[17px] font-bold text-[#0F172B] flex items-center gap-2">
@@ -424,7 +424,7 @@ export function DynamicFormRenderer() {
       </div>
 
       {/* Main Dynamic Form Card */}
-      <div className="bg-white rounded-[20px] border border-gray-200 shadow-sm overflow-hidden">
+      <div className="bg-white rounded-[20px] border border-gray-100 shadow-sm overflow-hidden">
         <div className="p-5 border-b border-gray-100 bg-slate-50/70 flex items-center justify-between">
           <div className="flex items-center gap-2 text-[15px] font-bold text-slate-800">
             <LightningIcon size={20} className="text-[#1E7D5C]" weight="fill" />
diff --git a/src/app/actionBuilder/components/FieldBuilderManager.tsx b/src/app/actionBuilder/components/FieldBuilderManager.tsx
index 982a25b..8b223b8 100644
--- a/src/app/actionBuilder/components/FieldBuilderManager.tsx
+++ b/src/app/actionBuilder/components/FieldBuilderManager.tsx
@@ -323,9 +323,9 @@ export function FieldBuilderManager() {
   const selectedTypeObj = actionTypes.find((t) => t.id === selectedActionTypeId);
 
   return (
-    <div className="space-y-6 font-sans">
+    <div className="w-full space-y-6 font-sans">
       {/* Top Banner / Selectors */}
-      <div className="bg-white p-5 rounded-[16px] border border-gray-200 shadow-sm space-y-4">
+      <div className="bg-white p-5 rounded-[20px] border border-gray-100 shadow-sm space-y-4">
         <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
           <div>
             <h3 className="text-[17px] font-bold text-[#0F172B] flex items-center gap-2">
@@ -343,7 +343,7 @@ export function FieldBuilderManager() {
               onClick={handleOpenCreate}
               disabled={!selectedActionTypeId}
               leftIcon={<PlusIcon size={18} />}
-              className="!bg-[#1E7D5C] hover:!bg-[#17664B] !rounded-[12px] font-semibold text-[14px]"
+              className="!bg-[#1E7D5C] hover:!bg-[#17664B] !rounded-[10px] !gap-[10px] !h-[40px] font-semibold text-[14px]"
             >
               Add Field Definition
             </CustomButton>
@@ -387,7 +387,7 @@ export function FieldBuilderManager() {
       )}
 
       {/* Fields List Card */}
-      <div className="bg-white rounded-[20px] border border-gray-200 shadow-sm overflow-hidden">
+      <div className="bg-white rounded-[20px] border border-gray-100 shadow-sm overflow-hidden">
         <div className="p-4 border-b border-gray-100 bg-slate-50/50 flex items-center justify-between">
           <div className="flex items-center gap-2 text-[14px] font-bold text-slate-800">
             <span>Configured Fields for:</span>
diff --git a/src/app/actionBuilder/index.tsx b/src/app/actionBuilder/index.tsx
index e7d784a..e1ac518 100644
--- a/src/app/actionBuilder/index.tsx
+++ b/src/app/actionBuilder/index.tsx
@@ -46,9 +46,9 @@ export default function ActionBuilderPage() {
   ];
 
   return (
-    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-6 font-sans">
+    <div className="w-full space-y-6 font-sans">
       {/* Top Header */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[24px] border border-gray-200 shadow-sm">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[20px] border border-gray-100 shadow-sm">
         <div className="flex items-start gap-4">
           <div className="w-12 h-12 rounded-[16px] bg-[#E8F3EF] text-[#1E7D5C] flex items-center justify-center shrink-0 shadow-inner">
             <LightningIcon size={26} weight="fill" />
@@ -76,7 +76,7 @@ export default function ActionBuilderPage() {
       </div>
 
       {/* Main Tabs Navigation */}
-      <div className="bg-white p-3 rounded-[18px] border border-gray-200 shadow-sm">
+      <div>
         <CustomTabs
           tabs={tabs}
           value={activeTab}
diff --git a/src/app/masterData/index.tsx b/src/app/masterData/index.tsx
index cc36ceb..510bc31 100644
--- a/src/app/masterData/index.tsx
+++ b/src/app/masterData/index.tsx
@@ -195,7 +195,7 @@ export default function MasterDataManagement() {
   };
 
   return (
-    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-6 font-sans">
+    <div className="w-full space-y-6 font-sans">
       {/* Top Header Component */}
       <MasterDataHeader
         categoriesCount={categories.length}
diff --git a/src/layout/AppHeader.tsx b/src/layout/AppHeader.tsx
index 3ddcdcd..4880572 100644
--- a/src/layout/AppHeader.tsx
+++ b/src/layout/AppHeader.tsx
@@ -4,6 +4,10 @@ import { useLocation } from 'react-router-dom';
 const PAGE_META: Record<string, { title: string; subtitle: string }> = {
   '/': { title: 'Dashboard', subtitle: 'Overview of system status and active incidents.' },
   '/cohorts': { title: 'Cohort Management', subtitle: 'Dynamic passenger segmentation for targeted recovery and recovery intelligence.' },
+  '/policy-engine': { title: 'Policy Engine Framework Registry', subtitle: 'Manage framework policies, conditions, and automated actions.' },
+  '/policy-engine/add': { title: 'Deploy New Policy', subtitle: 'Configure policy framework details, targeting rules, and action payloads.' },
+  '/action-builder': { title: 'Action Builder', subtitle: 'Configure dynamic categories, action types, metadata fields, and dynamic user form workflows.' },
+  '/config': { title: 'Master Data Configurations', subtitle: 'Manage system rule categories, lookup values, and master data parameters.' },
   '/recovery': { title: 'Recovery Incidents', subtitle: 'Operational workspace for managing passenger disruption cases.' },
 };