Dynamic card & Accordian Fixed

packages/molecules/src/accordian-card/index.tsx

@@ -10,6 +10,7 @@ import {
   Typography,
 } from '@mui/material';
 import { ExpandMore } from '@mui/icons-material';
+
 export interface CardProps {
   key: string | number;
   bgcolor: string;
@@ -35,13 +36,30 @@ const AccordionCard: React.FC<CardProps> = ({
   buttonText,
   buttonVariant,
   buttonStyle,
+  onButtonClick,
   onClick,
   icon,
   isAccordion = false,
   InfoCard,
 }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
 
+  const handleAccordionClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (onClick) {
+      onClick(e);
+    }
+    if (isAccordion) {
+      setExpanded(!expanded);
+    }
+  };
+
+  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (onButtonClick) {
+      onButtonClick();
+    }
+  };
+
   return (
     <Accordion
       expanded={expanded}
@@ -54,7 +72,7 @@ const AccordionCard: React.FC<CardProps> = ({
         backgroundColor: bgcolor,
         border: 'none !important',
       }}
-      onClick={onClick}
+      onClick={handleAccordionClick}
     >
       <AccordionSummary
         aria-controls={`panel-${key}-content`}
@@ -92,10 +110,7 @@ const AccordionCard: React.FC<CardProps> = ({
                 variant={buttonVariant}
                 size="large"
                 sx={buttonStyle}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  //   onButtonClick();
-                }}
+                onClick={handleButtonClick}
               >
                 {buttonText}
               </Button>
@@ -108,7 +123,6 @@ const AccordionCard: React.FC<CardProps> = ({
               color="#fff"
               fontWeight={600}
               fontSize={'13px'}
-              onClick={() => setExpanded(!expanded)}
               display="flex"
               justifyContent="center"
               alignItems="center"
@@ -140,4 +154,4 @@ const AccordionCard: React.FC<CardProps> = ({
   );
 };
 
-export { AccordionCard };
+export default AccordionCard;

packages/molecules/src/dynamic-card/index.tsx

@@ -1,4 +1,4 @@
-import { ExpandMore } from '@mui/icons-material';
+import { Download, ExpandMore } from '@mui/icons-material';
 import {
   Accordion,
   AccordionDetails,
@@ -9,7 +9,8 @@ import {
   Typography,
 } from '@mui/material';
 import React from 'react';
-import { AccordionCard } from '../accordian-card';
+import AccordionCard from '../accordian-card';
+
 type OuterAccordion = {
   title: string;
   date: string;
@@ -33,10 +34,69 @@ interface CardProps {
 type Props = {
   outerAccordion: OuterAccordion;
   results: CardProps[];
-  InfoCard?: (props: CardProps) => React.ReactNode;
 };
 
-const DynamicCard = React.memo(({ outerAccordion, results, InfoCard }: Props) => {
+const DynamicCard = React.memo(({ outerAccordion, results }: Props) => {
+
+  // Declare InfoCard inside DynamicCard
+  const InfoCard = ({ result }: { result: any }) => {
+
+    // Function to determine the color based on the score/value
+    const getColor = (value: number) => (value === 0 ? "red" : value === 1 ? "green" : "grey");
+
+    // Render the transcript or result depending on the available data
+    const renderContent = () => {
+      if (result?.result && result.result.length > 0) {
+        return result.result.map((qa: any, index: number) => (
+          <Box key={index} mb={2}>
+            <Box fontWeight={600} mb={1}>
+              Q: {qa.question}
+            </Box>
+            <Box style={{ color: getColor(qa.score) }}>
+              A: {qa.answer}
+            </Box>
+          </Box>
+        ));
+      }
+
+      if (result?.transcript && result?.transcript?.length > 0) {
+        return (
+          <p style={{ textAlign: 'justify' }}>
+            {result.transcript.map((item: any, index: number) => {
+              const word = Object.keys(item)[0];
+              const value = item[word];
+              return (
+                <span key={index} style={{ color: getColor(value), marginRight: "4px" }}>
+                  {word}{' '}
+                </span>
+              );
+            })}
+          </p>
+        );
+      }
+
+      return <p>No transcript or result available</p>;
+    };
+
+    return (
+      <Box bgcolor={"white"} p={2} borderRadius={1} boxShadow={1}>
+        <Box
+          display={"flex"}
+          alignItems={"center"}
+          gap={1}
+          justifyContent={"space-between"}
+        >
+          <Box>{result?.title?.sub_label || "सब्दों की सुचि"}</Box>
+          <Download />
+        </Box>
+        <hr />
+        <Box fontSize={"16px"} fontWeight={600}>
+          {renderContent()}
+        </Box>
+      </Box>
+    );
+  };
+
   return (
     <Accordion key={outerAccordion.title}>
       <AccordionSummary
@@ -53,15 +113,16 @@ const DynamicCard = React.memo(({ outerAccordion, results, InfoCard }: Props) =>
             outerAccordion.title === 'निपुण'
               ? 'var(--successSecondary)'
               : 'var(--failureSecondary)',
+          color: outerAccordion.title === 'निपुण' ? 'var(--success)' : 'var(--failure)',
           border: 'none',
           maxHeight: '64px',
         }}
       >
         <Box display={'flex'} flexDirection={'column'}>
-          <Typography fontSize={'16px'} color={'#06753C'} fontWeight={600}>
+          <Typography fontSize={'16px'} fontWeight={600}>
             {outerAccordion.title}
           </Typography>
-          <Typography fontSize={'10px'} color={'#06753C'}>
+          <Typography fontSize={'10px'}>
             आकलन : {outerAccordion.date}
           </Typography>
         </Box>
@@ -80,22 +141,22 @@ const DynamicCard = React.memo(({ outerAccordion, results, InfoCard }: Props) =>
               <AccordionCard
                 key={el?.competency_id}
                 bgcolor={
-                  el?.grade == 'Passed' ? 'var(--successSecondary)' : 'var(--failureSecondary)'
+                  el?.status == 'pass' ? 'var(--successSecondary)' : 'var(--failureSecondary)'
                 }
-                icon={el?.track === 'Hindi' ? '/hindiIcon.svg' : '/mathIcon.svg'}
-                textColor={el?.grade == 'Passed' ? 'var(--success)' : 'var(--failure)'}
-                name={el?.track === 'Hindi' ? 'कहानी आधारित प्रश्न' : 'गणित के प्रश्न'}
-                buttonText={`${el?.results?.scored}/${el?.results?.max_score} सही`}
+                icon={el?.title?.icon || ''}
+                textColor={el?.status == 'pass' ? 'var(--success)' : 'var(--failure)'}
+                name={el?.title?.label}
+                buttonText={el?.achievement}
                 buttonStyle={{
                   color: '#fff',
                   fontSize: '14px',
                   fontWeight: '600',
-                  backgroundColor: el?.grade == 'Passed' ? 'var(--success)' : 'var(--failure)',
+                  backgroundColor: el?.status == 'pass' ? 'var(--success)' : 'var(--failure)',
                   '&:hover': {
-                    backgroundColor: el?.grade == 'Passed' ? 'var(--success)' : 'var(--failure)',
+                    backgroundColor: el?.status == 'pass' ? 'var(--success)' : 'var(--failure)',
                   },
                 }}
-                InfoCard={InfoCard ? () => <InfoCard /> : () => <></>}
+                InfoCard={() => <InfoCard result={el} />}
                 isAccordion
               />
             );