Merge pull request #53 from chaitanyakole/ui_changes

Ui Changes in admin portal (Filter position changed, search bar position changed, Text color, etc)
tekdi · Feb 18, 2025 · ef3e009 · ef3e009
2 parents 9099427 + 990fe62
commit ef3e009
Show file tree

Hide file tree

Showing 14 changed files with 235 additions and 194 deletions.
diff --git a/src/components/AreaSelection.tsx b/src/components/AreaSelection.tsx
@@ -99,14 +99,6 @@ const AreaSelection: React.FC<DropdownBoxProps> = ({
         },
       }}
     >
-      {userType && !reAssignModal && (
-        <Box>
-          <Typography marginTop="20px" variant="h1">
-            {userType}
-          </Typography>
-        </Box>
-      )}
-
       <Box
         sx={{
           width: inModal ? "100%" : "90%",

diff --git a/src/components/FormControl.tsx b/src/components/FormControl.tsx
@@ -14,7 +14,7 @@ const MenuProps = {
   PaperProps: {
     style: {
       maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-      width: 250,
+      width: "auto",
     },
   },
 };

diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   FormControl,
   MenuItem,
+  Typography,
   useMediaQuery,
 } from "@mui/material";
 import Select from "@mui/material/Select";
@@ -362,8 +363,8 @@ const HeaderComponent = ({
       sx={{
         display: "flex",
         flexDirection: "column",
-        gap: isMobile ? "8px" : "16px",
-        padding: isMobile ? "8px" : "16px",
+        gap: isMobile ? "2px" : "16px",
+        padding: isMobile ? "none" : "16px",
         backgroundColor: theme.palette.secondary["100"],
         borderRadius: "8px",
       }}
@@ -373,30 +374,52 @@ const HeaderComponent = ({
           {userType}
         </Typography>
       )} */}
-
-      {showTenantCohortDropDown && (
-        <AreaSelection
-          tenants={transformArray(tenants)}
-          cohorts={transformArray(cohorts)}
-          selectedTenant={selectedTenant}
-          selectedCohort={selectedCohort}
-          handleTenantChange={handleTenantChange}
-          handleCohortChange={handleCohortChange}
-          isMobile={isMobile}
-          tenantDefaultValue={tenantDefaultValue}
-          cohortDefaultValue={cohortDefaultValue}
-          userType={userType}
-          isMediumScreen={isMediumScreen}
-          inModal={false}
-          isTenantShow={isTenantShow}
-          isCohortShow={isCohortShow}
-        />
-      )}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 2,
+          justifyContent: "space-between",
+        }}
+      >
+        {userType && <Typography variant="h1">{userType}</Typography>}
+        {showAddNew && (
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              borderRadius: "20px",
+              border: "1px solid #1E1B16",
+              boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
+              padding: "2px 10px",
+              height: "32px",
+              width: isMobile ? "auto" : "160px",
+            }}
+          >
+            <Button
+              startIcon={<AddIcon sx={{ fontSize: "20px" }} />}
+              sx={{
+                textTransform: "none",
+                color: theme.palette.primary["100"],
+                fontSize: "13px",
+                padding: "4px 8px",
+                minHeight: 0,
+                width: "100%",
+              }}
+              onClick={handleAddUserClick}
+            >
+              {t("COMMON.ADD_NEW")}
+            </Button>
+          </Box>
+        )}
+      </Box>
 
       <Box
         sx={{
           backgroundColor: "white",
-          paddingTop: "20px",
+          paddingTop: "15px",
+          borderRadius: "10px",
         }}
       >
         {showFilter && (
@@ -424,25 +447,6 @@ const HeaderComponent = ({
                 }
                 value={Status.ACTIVE}
               />
-              {/* Uncomment this section if you need the INACTIVE tab
-      <Tab
-        label={
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              color:
-                statusValue === Status.INACTIVE
-                  ? theme.palette.primary["100"]
-                  : "inherit",
-            }}
-          >
-            {t("COMMON.INACTIVE")}
-          </Box>
-        }
-        value={Status.INACTIVE}
-      />
-      */}
               {statusInactive && (
                 <Tab
                   label={
@@ -489,54 +493,44 @@ const HeaderComponent = ({
           sx={{
             display: "flex",
             flexDirection: isMobile || isMediumScreen ? "column" : "row",
+            alignItems: "center",
             gap: isMobile || isMediumScreen ? "8px" : "5%",
-            marginTop: showSearch ? "20px" : "10px",
-            p: showSearch ? "1%" : "1%",
+            marginTop: showSearch ? "10px" : "none",
+            px: "1%",
+            flexWrap: "nowwrap",
           }}
         >
           {showSearch && (
-            <Box sx={{ flex: 1, paddingLeft: "16px", paddingRight: "16px" }}>
+            <Box sx={{ width: isMobile ? "auto" : "60%" }}>
               <SearchBar
                 onSearch={handleSearch}
                 placeholder={searchPlaceHolder}
               />
             </Box>
           )}
-          {showAddNew && (
-            <Box
-              display={"flex"}
-              gap={1}
-              alignItems={"center"}
-              sx={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                // height: "40px",
-                width: isMobile ? "70%" : "200px",
-                borderRadius: "20px",
-                border: "1px solid #1E1B16",
-                //  mt: isMobile ? "10px" : "16px",
-                boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
-                mr: "10px",
-                ml: isMobile ? "50px" : isMediumScreen ? "10px" : undefined,
-                mt: isMobile ? "10px" : isMediumScreen ? "10px" : undefined,
-              }}
-            >
-              <Button
-                //  variant="contained"
-                startIcon={<AddIcon />}
-                sx={{
-                  textTransform: "none",
-                  fontSize: "14px",
-                  color: theme.palette.primary["100"],
-                }}
-                onClick={handleAddUserClick}
-              >
-                {t("COMMON.ADD_NEW")}
-              </Button>
+
+          {showTenantCohortDropDown && (
+            <Box sx={{ flex: 1, minWidth: isMobile ? "300px" : "40%" }}>
+              <AreaSelection
+                tenants={transformArray(tenants)}
+                cohorts={transformArray(cohorts)}
+                selectedTenant={selectedTenant}
+                selectedCohort={selectedCohort}
+                handleTenantChange={handleTenantChange}
+                handleCohortChange={handleCohortChange}
+                isMobile={isMobile}
+                tenantDefaultValue={tenantDefaultValue}
+                cohortDefaultValue={cohortDefaultValue}
+                userType={userType}
+                isMediumScreen={isMediumScreen}
+                inModal={false}
+                isTenantShow={isTenantShow}
+                isCohortShow={isCohortShow}
+              />
             </Box>
           )}
         </Box>
+
         {showSort && (
           <Box
             sx={{

diff --git a/src/components/MetabaseReportMenu.tsx b/src/components/MetabaseReportMenu.tsx
@@ -127,7 +127,7 @@ const MetabaseReportsMenu: React.FC<MetabaseDashboardProps> = ({
 
   return (
     <>
-      <Tooltip title={t("COMMON.ACTIONS")}>
+      <Tooltip title={t("MASTER.ACTIONS")}>
         <IconButton
           onClick={handleClick}
           sx={{

diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
@@ -909,29 +909,37 @@ const UserTable: React.FC<UserTableProps> = ({
           <Loader showBackdrop={false} loadingText={t("COMMON.LOADING")} />
         </Box>
       ) : data?.length !== 0 && loading === false ? (
-        <KaTableComponent
-          columns={
-            // role === Role.TEAM_LEADER
-            getTLTableColumns(t, isMobile, filters)
-            // : getUserTableColumns(t, isMobile)
-          }
-          data={data}
-          limit={pageLimit}
-          offset={pageOffset}
-          paginationEnable={totalCount > Numbers.TEN}
-          PagesSelector={PagesSelector}
-          PageSizeSelector={PageSizeSelectorFunction}
-          pageSizes={pageSizeArray}
-          extraActions={extraActions}
-          showIcons={true}
-          onEdit={handleEdit}
-          onDelete={handleDelete}
-          pagination={pagination}
-          allowEditIcon={true}
-          showReports={true}
-          showLearnerReports={true}
-          noDataMessage={data?.length === 0 ? t("COMMON.NO_USER_FOUND") : ""}
-        />
+        <Box
+          sx={{
+            backgroundColor: "white",
+            padding: "10px",
+            borderRadius: "15px",
+          }}
+        >
+          <KaTableComponent
+            columns={
+              // role === Role.TEAM_LEADER
+              getTLTableColumns(t, isMobile, filters)
+              // : getUserTableColumns(t, isMobile)
+            }
+            data={data}
+            limit={pageLimit}
+            offset={pageOffset}
+            paginationEnable={totalCount > Numbers.TEN}
+            PagesSelector={PagesSelector}
+            PageSizeSelector={PageSizeSelectorFunction}
+            pageSizes={pageSizeArray}
+            extraActions={extraActions}
+            showIcons={true}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            pagination={pagination}
+            allowEditIcon={true}
+            showReports={true}
+            showLearnerReports={true}
+            noDataMessage={data?.length === 0 ? t("COMMON.NO_USER_FOUND") : ""}
+          />
+        </Box>
       ) : (
         loading === false &&
         data.length === 0 && (

diff --git a/src/components/layouts/FullLayout.tsx b/src/components/layouts/FullLayout.tsx
@@ -137,7 +137,7 @@ const FullLayout = ({ children }: any) => {
         sx={{
           paddingLeft: isSidebarOpen && lgUp ? "265px" : "",
           backgroundColor: "#000033",
-                    boxshow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+          boxshow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
         }}
         toggleMobileSidebar={() => setMobileSidebarOpen(true)}
       />
@@ -150,15 +150,12 @@ const FullLayout = ({ children }: any) => {
         <Container
           maxWidth={false}
           sx={{
-          //  paddingTop: "20px",
+            // paddingTop: "20px",
             paddingLeft: isSidebarOpen && lgUp ? "280px!important" : "",
             backgroundColor: "#F3F5F8",
-
           }}
         >
-          <Box 
-          sx={{ minHeight: "calc(100vh - 170px)" }}  >
-{children}</Box>
+          <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
           <Footer />
         </Container>
       </PageWrapper>

diff --git a/src/components/layouts/header/Header.tsx b/src/components/layouts/header/Header.tsx
@@ -73,6 +73,7 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
             display: {
               lg: "none",
               xs: "flex",
+              color: "white",
             },
           }}
         >

diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx
@@ -346,7 +346,7 @@ const Profile = () => {
           >
             <PhoneIcon sx={{ marginRight: "10px" }} />
             <Typography variant="body1" sx={{ fontSize: "14px" }}>
-              {adminInfo?.mobile}
+              {adminInfo?.mobile || "NA"}
             </Typography>
           </Box>
           <Box
@@ -359,7 +359,7 @@ const Profile = () => {
           >
             <MailIcon sx={{ marginRight: "10px" }} />
             <Typography variant="body1" sx={{ fontSize: "14px" }}>
-              {adminInfo?.email}
+              {adminInfo?.email || "NA"}
             </Typography>
           </Box>
           {/* <Box

diff --git a/src/components/layouts/header/SearchBar.tsx b/src/components/layouts/header/SearchBar.tsx
@@ -10,15 +10,18 @@ interface SearchBarProps {
   placeholder: string;
 }
 
-const SearchBox = styled(Paper)<{ isSmallScreen: boolean }>(({ theme, isSmallScreen }) => ({
-  padding: "2px 4px",
-  display: "flex",
-  alignItems: "center",
-  width: "100%",
-  maxWidth: isSmallScreen ? 300 : 900,
-  borderRadius: "8px",
-  backgroundColor:"#F0F0F0",
-}));
+const SearchBox = styled(Paper)<{ isSmallScreen: boolean }>(
+  ({ theme, isSmallScreen }) => ({
+    padding: "2px 4px",
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    maxWidth: isSmallScreen ? 300 : 900,
+    borderRadius: "8px",
+    backgroundColor: "#EDEDED",
+    boxShadow: "none",
+  })
+);
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
   marginLeft: theme.spacing(1),
@@ -29,7 +32,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSearch, placeholder }) => {
   const [keyword, setKeyword] = useState("");
   const { t } = useTranslation();
   const isSmallScreen = useMediaQuery((theme: any) =>
-    theme.breakpoints.down("sm"),
+    theme.breakpoints.down("sm")
   );
 
   const validateKeyword = (keyword: string) => {
@@ -71,11 +74,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSearch, placeholder }) => {
         inputProps={{ "aria-label": "search" }}
       />
       {keyword && (
-        <IconButton
-          type="button"
-          onClick={handleClear}
-          aria-label="clear"
-        >
+        <IconButton type="button" onClick={handleClear} aria-label="clear">
           <CloseIcon />
         </IconButton>
       )}