Merge pull request #30 from namita-25/feat-poc

create Progress bar component and use on card and details page,logout button add and functionality

libs/shared-lib/src/index.ts

@@ -23,6 +23,7 @@ export * from './lib/Dialog/CommonDialog';
 export * from './lib/theme';
 export * from './lib/ThemeProvider';
 export * from './lib/Progress/Circular';
+export * from './lib/Progress/Progress';
 import Image from '../images/default.png';
 export const IMAGES = {
   DEFAULT_PLACEHOLDER: Image,

libs/shared-lib/src/lib/Card/CommonCard.tsx

@@ -8,6 +8,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { red } from '@mui/material/colors';
 import { Box } from '@mui/material';
+import { Progress } from '../Progress/Progress';
 
 interface CommonCardProps {
   title: string;
@@ -21,6 +22,8 @@ interface CommonCardProps {
   children?: React.ReactNode;
   orientation?: 'vertical' | 'horizontal';
   minheight?: string;
+  status?: 'Not started' | 'Completed' | 'In progress' | string;
+  progress?: number;
   onClick?: () => void;
 }
 
@@ -36,6 +39,8 @@ export const CommonCard: React.FC<CommonCardProps> = ({
   children,
   orientation,
   minheight,
+  status,
+  progress,
   onClick,
 }) => {
   return (
@@ -58,22 +63,83 @@ export const CommonCard: React.FC<CommonCardProps> = ({
       }}
       onClick={onClick}
     >
-      {image && orientation === 'horizontal' && (
-        <CardMedia
-          component="img"
-          image={image || '/assets/images/default.png'}
-          alt={imageAlt || ''}
-          sx={{
-            width: orientation === 'horizontal' ? '100%' : '40%',
-            height: orientation === 'horizontal' ? '297px' : 'auto',
-            objectFit: 'cover',
-            '@media (max-width: 600px)': {
+      {/* Image and Progress Overlay */}
+      <Box sx={{ position: 'relative', width: '100%' }}>
+        {image && (
+          <CardMedia
+            component="img"
+            image={image || '/assets/images/default.png'}
+            alt={imageAlt || 'Image'}
+            sx={{
               width: '100%',
-              height: '200px',
-            },
-          }}
-        />
-      )}
+              height: orientation === 'horizontal' ? '297px' : 'auto',
+              objectFit: 'cover', //set contain
+              '@media (max-width: 600px)': {
+                height: '200px',
+              },
+            }}
+          />
+        )}
+
+        {/* Progress Bar Overlay */}
+        {progress !== undefined && (
+          <Box
+            sx={{
+              position: 'absolute',
+              height: '40px',
+              top: 0,
+              width: '100%',
+              display: 'flex',
+              // justifyContent: 'center',
+              alignItems: 'center',
+              background: 'rgba(0, 0, 0, 0.5)',
+            }}
+          >
+            <Progress
+              variant="determinate"
+              value={100}
+              size={30}
+              thickness={5}
+              sx={{
+                color: '#fff8fb',
+                position: 'absolute',
+                left: '10px',
+              }}
+            />
+            <Progress
+              variant="determinate"
+              value={progress}
+              size={30}
+              thickness={5}
+              sx={{
+                color: progress === 100 ? '#21A400' : '#FFB74D',
+                position: 'absolute',
+                left: '10px',
+              }}
+            />
+            <Typography
+              sx={{
+                fontSize: '12px',
+                fontWeight: 'bold',
+                marginLeft: '12px',
+                color: progress === 100 ? '#21A400' : '#FFB74D',
+                position: 'absolute',
+                left: '50px',
+              }}
+            >
+              {status &&
+                actions &&
+                actions?.toString().toLowerCase() === 'resource' &&
+                status}
+              {status &&
+                actions &&
+                actions?.toString().toLowerCase() === 'course' &&
+                `${progress}%`}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+
       <CardHeader
         avatar={
           avatarLetter && (
@@ -82,11 +148,6 @@ export const CommonCard: React.FC<CommonCardProps> = ({
             </Avatar>
           )
         }
-        action={
-          orientation === 'vertical' ? (
-            <CardMedia component="img" image={image} />
-          ) : undefined
-        }
         title={
           <Typography
             sx={{
@@ -98,7 +159,6 @@ export const CommonCard: React.FC<CommonCardProps> = ({
               WebkitBoxOrient: 'vertical',
               WebkitLineClamp: 1,
               paddingLeft: '5px',
-              // height: '70px',
             }}
           >
             {title}
@@ -124,9 +184,9 @@ export const CommonCard: React.FC<CommonCardProps> = ({
             <Typography
               sx={{
                 display: '-webkit-box',
-                WebkitLineClamp: 2, // Limit text to 2 lines
-                WebkitBoxOrient: 'vertical', // Set the box orientation
-                overflow: 'hidden', // Hide overflow
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
                 textOverflow: 'ellipsis',
               }}
             >

libs/shared-lib/src/lib/Header/TopAppBar.tsx

@@ -6,10 +6,14 @@ import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Menu, MenuItem } from '@mui/material';
 interface ActionIcon {
   icon: React.ReactNode;
   ariaLabel: string;
-  onClick: () => void;
+  anchorEl?: HTMLElement | null;
+  onLogoutClick: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
 }
 interface CommonAppBarProps {
   title?: string;
@@ -24,6 +28,7 @@ interface CommonAppBarProps {
   color?: 'primary' | 'secondary' | 'default' | 'transparent' | 'inherit';
   actionIcons?: ActionIcon[];
   bgcolor?: string;
+  onMenuClose?: () => void;
 }
 
 export const TopAppBar: React.FC<CommonAppBarProps> = ({
@@ -32,6 +37,7 @@ export const TopAppBar: React.FC<CommonAppBarProps> = ({
   showBackIcon = false,
   menuIconClick,
   backIconClick,
+  onMenuClose,
   actionButtonLabel = 'Action',
   actionButtonClick,
   actionButtonColor = 'inherit',
@@ -40,6 +46,7 @@ export const TopAppBar: React.FC<CommonAppBarProps> = ({
   actionIcons = [],
   bgcolor = '#FDF7FF',
 }) => {
+  const accountIcon = actionIcons.find((icon) => icon.ariaLabel === 'Account');
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar
@@ -100,13 +107,32 @@ export const TopAppBar: React.FC<CommonAppBarProps> = ({
               key={index}
               color={actionButtonColor}
               aria-label={action.ariaLabel}
-              //   onClick={action.onClick}
+              onClick={action.onLogoutClick}
             >
               {action.icon}
             </IconButton>
           ))}
         </Toolbar>
       </AppBar>
+      {accountIcon?.anchorEl && (
+        <Menu
+          id="menu-appbar"
+          anchorEl={accountIcon.anchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          keepMounted
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          open={Boolean(accountIcon.anchorEl)}
+          onClose={onMenuClose}
+        >
+          <MenuItem onClick={onMenuClose}>Logout</MenuItem>
+        </Menu>
+      )}
     </Box>
   );
 };

libs/shared-lib/src/lib/Layout/Layout.tsx

@@ -61,7 +61,7 @@ interface LayoutProps {
     showMenuIcon?: boolean;
     showBackIcon?: boolean;
     menuIconClick?: () => void;
-
+    onMenuClose?: () => void;
     actionButtonLabel?: string;
     actionButtonClick?: () => void;
     actionButtonColor?: 'inherit' | 'primary' | 'secondary' | 'default';
@@ -70,7 +70,10 @@ interface LayoutProps {
     actionIcons?: {
       icon: React.ReactNode;
       ariaLabel: string;
-      onClick: () => void;
+      anchorEl?: HTMLElement | null;
+      onLogoutClick?: (
+        event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+      ) => void;
     }[];
   };
   topAppBarIcons?: {
@@ -83,7 +86,8 @@ interface LayoutProps {
     language?: string[];
     subject?: string[];
     contentType?: string[];
-  };currentSelectedValues
+  };
+  currentSelectedValues?;
   language?: string;
   selectedSubjects?: string[];
   selectedContentTypes?: string[];
@@ -144,7 +148,10 @@ const FilterDialog = ({
       open={open}
       onClose={onClose}
       fullWidth
-      sx={{ borderRadius: '16px' }}
+      sx={{
+        borderRadius: '16px',
+        '& .MuiDialog-paper': { backgroundColor: '#FEF7FF' },
+      }}
     >
       <DialogTitle>Filters</DialogTitle>
       <IconButton
@@ -173,8 +180,8 @@ const FilterDialog = ({
                 value: term.code,
               }));
 
-                // Get the selected values for the current category
-                const currentSelectedValues = selectedValues[filterCode] || [];
+              // Get the selected values for the current category
+              const currentSelectedValues = selectedValues[filterCode] || [];
 
               return (
                 <FormControl
@@ -459,6 +466,7 @@ export const Layout: React.FC<LayoutProps> = ({
               bgcolor="#FDF7FF"
               actionIcons={topAppBarIcons}
               menuIconClick={() => setIsDrawerOpen(true)}
+              onLogoutClick={(event) => action.onLogoutClick(event)}
               {...showTopAppBar}
             />
           </Box>

libs/shared-lib/src/lib/Progress/Progress.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import { SxProps, Theme } from '@mui/material/styles';
+
+interface CommonCircularProgressProps {
+  variant?: 'determinate' | 'indeterminate';
+  value?: number;
+  size?: number;
+  thickness?: number;
+  color?: string;
+  sx?: SxProps<Theme>;
+}
+
+export const Progress: React.FC<CommonCircularProgressProps> = ({
+  variant = 'determinate',
+  value = 0,
+  size = 40,
+  thickness = 3.6,
+  color = 'primary',
+  sx = {},
+}) => {
+  return (
+    <CircularProgress
+      variant={variant}
+      value={value}
+      size={size}
+      thickness={thickness}
+      sx={{
+        color,
+        ...sx,
+      }}
+    />
+  );
+};