Refactor InfoCollapse component to use collapseKey prop for active state management and improve structure

src/components/Dashboard/common/InfoCollapse.jsx

@@ -12,33 +12,33 @@ const InfoCollapse = ({
   active,
   onToggle,
   className = '',
-  key = 'default'
+  collapseKey = 'default'
 }) => {
   return (
     <Collapse
       ghost
       expandIconPosition='end'
-      activeKey={active ? [key] : []}
+      activeKey={active ? [collapseKey] : []}
       onChange={(keys) => onToggle(keys.length > 0)}
       expandIcon={({ isActive }) => (
         <CaretLeftOutlined rotate={isActive ? -90 : 0} />
       )}
       className={`no-h-padding-collapse ${className}`}
-    >
-      <Collapse.Panel
-        header={
+      items={[
+        {
+          key: collapseKey,
+          children: children,
+          label: (
             <Flex align='center' gap={'middle'}>
               {icon}
               <Title level={5} style={{ margin: 0 }}>
                 {title}
               </Title>
             </Flex>
+          )
         }
-        key={key}
-      >
-        {children}
-      </Collapse.Panel>
-    </Collapse>
+      ]}
+    />
   )
 }
 
@@ -49,7 +49,7 @@ InfoCollapse.propTypes = {
   active: PropTypes.bool.isRequired,
   onToggle: PropTypes.func.isRequired,
   className: PropTypes.string,
-  key: PropTypes.string
+  collapseKey: PropTypes.string
 }
 
 export default InfoCollapse