From 87d0c73065c44b5cff59b971d2487bf2c9e7b826 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Fri, 23 Aug 2024 18:46:36 +0530 Subject: [PATCH 1/6] Issue feat: Update UI --- public/locales/en/common.json | 29 +++++++---- src/components/layouts/header/Profile.tsx | 60 +++++++++++++---------- src/data/tableColumns.ts | 32 ++++++------ src/pages/login.tsx | 2 + src/styles/globals.css | 4 ++ 5 files changed, 74 insertions(+), 53 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 489ee765..16ad48b4 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -239,8 +239,8 @@ "CENTER_CREATED_SUCCESSFULLY": "Center Created Successfully", "SEARCHBAR_PLACEHOLDER": "Search Center..", "CENTER_UPDATE_FAILED": "Something went wrong while updating center", - "ARCHIVED_MEMBERS": "Archived Members:", - "ACTIVE_MEMBERS": "Active Members" + "ARCHIVED_MEMBERS": "ARCHIVED MEMBERS", + "ACTIVE_MEMBERS": "ACTIVE MEMBERS" }, "FORM": { "FULL_NAME": "Full Name", @@ -341,13 +341,22 @@ "ENTER_VALID_MOBILE_NUMBER": "Enter a valid Mobile Number" }, "TABLE_TITLE": { - "NAME": "Name", - "STATUS": "Status", - "CREATED_DATE": "Created Date", - "UPDATED_DATE": "Updated Date", - "CREATED_BY": "Created By", - "UPDATED_BY": "Updated By", - "ACTIONS": "Actions", - "TYPE": "Type" + "NAME": "NAME", + "STATUS": "STATUS", + "CREATED_DATE": "CREATED DATE", + "UPDATED_DATE": "UPDATED DATE", + "CREATED_BY": "CREATED BY", + "UPDATED_BY": "UPDATED BY", + "ACTIONS": "ACTIONS", + "TYPE": "TYPE", + "STATE": "STATE", + "DISTRICT": "DISTRICT", + "BLOCK": "BLOCK", + "CENTER": "CENTERS", + "AGE": "AGE", + "GENDER": "GENDER", + "MOBILE": "MOBILE" + + } } diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx index 49d8b15e..d1e4d5cf 100644 --- a/src/components/layouts/header/Profile.tsx +++ b/src/components/layouts/header/Profile.tsx @@ -14,7 +14,7 @@ import PhoneIcon from "@mui/icons-material/Phone"; import { Box, Button, IconButton, Menu, Typography } from "@mui/material"; import { useRouter } from "next/router"; import useSubmittedButtonStore from "@/utils/useSharedState"; - +import LogoutIcon from '@mui/icons-material/Logout'; const Profile = () => { const [anchorEl4, setAnchorEl4] = React.useState(null); const [profileClick, setProfileClick] = React.useState(false); @@ -267,51 +267,37 @@ const Profile = () => { - {/* - - */} - - {adminInfo?.name ?.split(" ") @@ -319,6 +305,21 @@ const Profile = () => { .join("")} + + + + {adminInfo?.name} @@ -343,7 +344,12 @@ const Profile = () => { variant="contained" color="primary" onClick={handleLogout} - sx={{ fontSize: "16px" }} + + sx={{ fontSize: "16px", backgroundColor:"white", + border: "0.6px solid black" // Replace with your desired border color + + }} + endIcon={} > {t("COMMON.LOGOUT")} diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts index 956a90e6..d1c8dc8e 100644 --- a/src/data/tableColumns.ts +++ b/src/data/tableColumns.ts @@ -25,18 +25,18 @@ const generateColumns = ( export const getUserTableColumns = (t: any, isMobile: boolean) => { const configs: ColumnConfig[] = [ - { key: "name", titleKey: "FORM.NAME", width: 180 }, - { key: "age", titleKey: "FORM.AGE", width: 100 }, - { key: "gender", titleKey: "FORM.GENDER", width: 130 }, - { key: "mobile", titleKey: "COMMON.MOBILE", width: 130 }, - { key: "district", titleKey: "FORM.DISTRICT", width: 130}, - { key: "blocks", titleKey: "FORM.BLOCK", width: 130}, - { key: "centers", titleKey: "FORM.CENTER", width: 130, }, + { key: "name", titleKey: "TABLE_TITLE.NAME", width: 180 }, + { key: "age", titleKey: "TABLE_TITLE.AGE", width: 100 }, + { key: "gender", titleKey: "TABLE_TITLE.GENDER", width: 130 }, + { key: "mobile", titleKey: "TABLE_TITLE.MOBILE", width: 130 }, + { key: "district", titleKey: "TABLE_TITLE.DISTRICT", width: 130}, + { key: "blocks", titleKey: "TABLE_TITLE.BLOCK", width: 130}, + { key: "centers", titleKey: "TABLE_TITLE.CENTER", width: 130, }, { key: "updatedBy", titleKey: "TABLE_TITLE.UPDATED_BY", width: 160}, // { key: "createdBy", titleKey: "TABLE_TITLE.CREATED_BY", width: 130, sortDirection: SortDirection.Ascend }, // { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 160, sortDirection: SortDirection.Ascend }, { key: "updatedAt", titleKey: "TABLE_TITLE.UPDATED_DATE", width: 160}, - { key: "actions", titleKey: "FORM.ACTION", width: 130 , isSortable: false }, + { key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 130 , isSortable: false }, ]; return generateColumns(t, configs, isMobile); @@ -44,16 +44,16 @@ export const getUserTableColumns = (t: any, isMobile: boolean) => { export const getTLTableColumns = (t: any, isMobile: boolean) => { const configs: ColumnConfig[] = [ - { key: "name", titleKey: "FORM.NAME", width: 130 }, - { key: "age", titleKey: "FORM.AGE", width: 100 }, - { key: "gender", titleKey: "FORM.GENDER", width: 130 }, - { key: "district", titleKey: "FORM.DISTRICT", width: 130,}, - { key: "blocks", titleKey: "FORM.BLOCK", width: 130 }, + { key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 }, + { key: "age", titleKey: "TABLE_TITLE.AGE", width: 100 }, + { key: "gender", titleKey: "TABLE_TITLE.GENDER", width: 130 }, + { key: "district", titleKey: "TABLE_TITLE.DISTRICT", width: 130,}, + { key: "blocks", titleKey: "TABLE_TITLE.BLOCK", width: 130 }, { key: "updatedBy", titleKey: "TABLE_TITLE.UPDATED_BY", width: 130, }, { key: "createdBy", titleKey: "TABLE_TITLE.CREATED_BY", width: 130, }, { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 160, }, { key: "updatedAt", titleKey: "TABLE_TITLE.UPDATED_DATE", width: 160, }, - { key: "actions", titleKey: "FORM.ACTION", width: 130 , isSortable: false}, + { key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 130 , isSortable: false}, ]; return generateColumns(t, configs, isMobile); @@ -68,10 +68,10 @@ export const getCenterTableData = (t: any, isMobile: boolean) => { { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 130 }, { key: "updatedAt", titleKey: "TABLE_TITLE.UPDATED_DATE", width: 130 }, - { key: "totalActiveMembers", titleKey: "Active Members", width: 130 }, + { key: "totalActiveMembers", titleKey: "CENTERS.ACTIVE_MEMBERS", width: 130 }, { key: "totalArchivedMembers", - titleKey: "Archived Members", + titleKey: "CENTERS.ARCHIVED_MEMBERS", width: 130, }, { key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 }, diff --git a/src/pages/login.tsx b/src/pages/login.tsx index d296c71d..0bce5c67 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -145,6 +145,8 @@ const LoginPage = () => { { const errorMessage = t("LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT"); showToastMessage(errorMessage, "error"); + localStorage.removeItem("token"); + } else diff --git a/src/styles/globals.css b/src/styles/globals.css index f2a3cfbd..a9fa6b1b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -79,3 +79,7 @@ ul.MuiList-root li.MuiMenuItem-root[data-value=""] { .ka-thead-cell { font-weight: 600; } +.ka-thead-cell-content +{ + font-weight: normal !important; +} \ No newline at end of file From cab6f70d802c7fc2cf0b61f5673c0942346b4d40 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Fri, 23 Aug 2024 19:07:00 +0530 Subject: [PATCH 2/6] Add translation icon --- src/components/layouts/header/Header.tsx | 116 +++++++++++++++-------- 1 file changed, 78 insertions(+), 38 deletions(-) diff --git a/src/components/layouts/header/Header.tsx b/src/components/layouts/header/Header.tsx index 05ccf374..c97c5d3c 100644 --- a/src/components/layouts/header/Header.tsx +++ b/src/components/layouts/header/Header.tsx @@ -5,19 +5,14 @@ import MenuItem from "@mui/material/MenuItem"; import Select, { SelectChangeEvent } from "@mui/material/Select"; import config from "../../../../config.json"; import PropTypes from "prop-types"; -// Dropdown Component +import translationIcon from '../../../../public/images/translation.svg'; +import Image from "next/image"; +import TranslateIcon from '@mui/icons-material/Translate'; +import Menu from '@mui/material/Menu'; import SearchBar from "./SearchBar"; import { useRouter } from 'next/router'; -import { - Button, - FormControl, - TextField, - Grid, - Typography, - useMediaQuery, - // Import useMediaQuery hook -} from "@mui/material"; + import { useTranslation } from "next-i18next"; import { createTheme } from "@mui/material/styles"; import Profile from "./Profile"; @@ -27,6 +22,8 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => { const theme = createTheme(); const [lang, setLang] = useState(""); const router = useRouter(); + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); const [selectedLanguage, setSelectedLanguage] = useState(lang); @@ -47,7 +44,24 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => { router.replace(router.pathname, router.asPath, { locale: newLocale }); } }; + const handleClick = (event: React.MouseEvent) => { + console.log(event) + setAnchorEl(event.currentTarget); + console.log(anchorEl) + }; + const handleClose = () => { + setAnchorEl(null); + }; + const handleMenuItemClick = (newLocale: any) => { + console.log(newLocale); + setLanguage(newLocale); + if (typeof window !== 'undefined' && window.localStorage) { + localStorage.setItem('preferredLanguage', newLocale); + router.replace(router.pathname, router.asPath, { locale: newLocale }); + } + handleClose(); + }; return ( @@ -63,6 +77,7 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => { }, }} > + {/* ------------------------------------------- */} @@ -76,39 +91,64 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => { - - - - - - - + + {/* ------------------------------------------- */} {/* Profile Dropdown */} {/* ------------------------------------------- */} From 566a5f999f15e320ff88c8af34e32c7caad518de Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Sat, 24 Aug 2024 09:40:37 +0530 Subject: [PATCH 3/6] Issue feat: Combine district, block column in user management --- src/components/UserTable.tsx | 6 +++--- src/data/tableColumns.ts | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx index f01b95a8..7d7998c0 100644 --- a/src/components/UserTable.tsx +++ b/src/components/UserTable.tsx @@ -571,7 +571,7 @@ const UserTable: React.FC = ({ // gender: user.gender, mobile: user.mobile === "NaN" ? "-" : user.mobile, age: ageField ? ageField?.fieldvalues : "-", - district: districtField ? districtField?.fieldvalues : "-", + district: districtField ? districtField?.fieldvalues+" , "+blockField?.fieldvalues : "-", state: stateField ? stateField?.fieldvalues : "-", blocks: blockField ? blockField?.fieldvalues : "-", gender: genderField @@ -619,7 +619,7 @@ const UserTable: React.FC = ({ // gender: user.gender, mobile: user.mobile === "NaN" ? "-" : user.mobile, age: ageField ? ageField?.fieldvalues : "-", - district: districtField ? districtField.value : "-", + district: districtField ? districtField.value+" , "+blockField.value : "-", state: stateField ? stateField.value : "-", blocks: blockField ? blockField.value : "-", gender: genderField @@ -645,7 +645,7 @@ const UserTable: React.FC = ({ // gender: user.gender, mobile: user.mobile === "NaN" ? "-" : user.mobile, age: ageField ? ageField.value : "-", - district: districtField ? districtField.value : "-", + district: districtField ? districtField.value+" , "+blockField.value : "-", state: stateField ? stateField.value : "-", blocks: blockField ? blockField.value : "-", gender: genderField diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts index d1c8dc8e..dcf49eb5 100644 --- a/src/data/tableColumns.ts +++ b/src/data/tableColumns.ts @@ -25,12 +25,12 @@ const generateColumns = ( export const getUserTableColumns = (t: any, isMobile: boolean) => { const configs: ColumnConfig[] = [ - { key: "name", titleKey: "TABLE_TITLE.NAME", width: 180 }, - { key: "age", titleKey: "TABLE_TITLE.AGE", width: 100 }, - { key: "gender", titleKey: "TABLE_TITLE.GENDER", width: 130 }, + { key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 }, + { key: "age", titleKey: "TABLE_TITLE.AGE", width: 70 }, + { key: "gender", titleKey: "TABLE_TITLE.GENDER", width: 90}, { key: "mobile", titleKey: "TABLE_TITLE.MOBILE", width: 130 }, - { key: "district", titleKey: "TABLE_TITLE.DISTRICT", width: 130}, - { key: "blocks", titleKey: "TABLE_TITLE.BLOCK", width: 130}, + { key: "district", titleKey: "TABLE_TITLE.DISTRICT_BLOCK", width: 160}, + // { key: "blocks", titleKey: "TABLE_TITLE.BLOCK", width: 130}, { key: "centers", titleKey: "TABLE_TITLE.CENTER", width: 130, }, { key: "updatedBy", titleKey: "TABLE_TITLE.UPDATED_BY", width: 160}, // { key: "createdBy", titleKey: "TABLE_TITLE.CREATED_BY", width: 130, sortDirection: SortDirection.Ascend }, @@ -45,10 +45,10 @@ export const getUserTableColumns = (t: any, isMobile: boolean) => { export const getTLTableColumns = (t: any, isMobile: boolean) => { const configs: ColumnConfig[] = [ { key: "name", titleKey: "TABLE_TITLE.NAME", width: 130 }, - { key: "age", titleKey: "TABLE_TITLE.AGE", width: 100 }, - { key: "gender", titleKey: "TABLE_TITLE.GENDER", width: 130 }, - { key: "district", titleKey: "TABLE_TITLE.DISTRICT", width: 130,}, - { key: "blocks", titleKey: "TABLE_TITLE.BLOCK", width: 130 }, + { key: "age", titleKey: "TABLE_TITLE.AGE", width: 70 }, + { key: "gender", titleKey: "TABLE_TITLE.GENDER", width: 90 }, + { key: "district", titleKey: "TABLE_TITLE.DISTRICT_BLOCK", width: 150,}, + // { key: "blocks", titleKey: "TABLE_TITLE.BLOCK", width: 130 }, { key: "updatedBy", titleKey: "TABLE_TITLE.UPDATED_BY", width: 130, }, { key: "createdBy", titleKey: "TABLE_TITLE.CREATED_BY", width: 130, }, { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 160, }, From aacd0f5645c7aa0bcd95d3460cd7447a0da28186 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Sat, 24 Aug 2024 09:40:51 +0530 Subject: [PATCH 4/6] push translation file --- public/locales/en/common.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 16ad48b4..529ab26a 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -350,7 +350,7 @@ "ACTIONS": "ACTIONS", "TYPE": "TYPE", "STATE": "STATE", - "DISTRICT": "DISTRICT", + "DISTRICT_BLOCK": "DISTRICT, BLOCK", "BLOCK": "BLOCK", "CENTER": "CENTERS", "AGE": "AGE", From 2c5973d0bf20a3939af11c6f25972db848e79e49 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Sat, 24 Aug 2024 10:12:10 +0530 Subject: [PATCH 5/6] Update translation file and add touppercase condition to column title --- public/locales/en/common.json | 39 +++++++++++++++++------------------ src/data/tableColumns.ts | 6 +++--- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 529ab26a..bdbb3465 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -238,9 +238,8 @@ "CENTER_DELETE_SUCCESSFULLY": "Center has been Successfully Deleted", "CENTER_CREATED_SUCCESSFULLY": "Center Created Successfully", "SEARCHBAR_PLACEHOLDER": "Search Center..", - "CENTER_UPDATE_FAILED": "Something went wrong while updating center", - "ARCHIVED_MEMBERS": "ARCHIVED MEMBERS", - "ACTIVE_MEMBERS": "ACTIVE MEMBERS" + "CENTER_UPDATE_FAILED": "Something went wrong while updating center" + }, "FORM": { "FULL_NAME": "Full Name", @@ -341,22 +340,22 @@ "ENTER_VALID_MOBILE_NUMBER": "Enter a valid Mobile Number" }, "TABLE_TITLE": { - "NAME": "NAME", - "STATUS": "STATUS", - "CREATED_DATE": "CREATED DATE", - "UPDATED_DATE": "UPDATED DATE", - "CREATED_BY": "CREATED BY", - "UPDATED_BY": "UPDATED BY", - "ACTIONS": "ACTIONS", - "TYPE": "TYPE", - "STATE": "STATE", - "DISTRICT_BLOCK": "DISTRICT, BLOCK", - "BLOCK": "BLOCK", - "CENTER": "CENTERS", - "AGE": "AGE", - "GENDER": "GENDER", - "MOBILE": "MOBILE" - - + "NAME": "Name", + "STATUS": "Status", + "CREATED_DATE": "Created Date", + "UPDATED_DATE": "Updated Date", + "CREATED_BY": "Created By", + "UPDATED_BY": "Updated By", + "ACTIONS": "Actions", + "TYPE": "Type", + "STATE": "State", + "DISTRICT_BLOCK": "District, Block", + "BLOCK": "Block", + "CENTER": "Centers", + "AGE": "Age", + "GENDER": "Gender", + "MOBILE": "Mobile", + "ARCHIVED_MEMBERS": "Archived Members", + "ACTIVE_MEMBERS": "Active Members" } } diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts index dcf49eb5..50732661 100644 --- a/src/data/tableColumns.ts +++ b/src/data/tableColumns.ts @@ -15,7 +15,7 @@ const generateColumns = ( ) => { return configs.map((config) => ({ key: config.key, - title: t(config.titleKey), + title: t(config.titleKey).toUpperCase(), dataType: DataType.String, sortDirection: config.sortDirection, width: isMobile && config.width ? config.width : config.width || undefined, @@ -68,10 +68,10 @@ export const getCenterTableData = (t: any, isMobile: boolean) => { { key: "createdAt", titleKey: "TABLE_TITLE.CREATED_DATE", width: 130 }, { key: "updatedAt", titleKey: "TABLE_TITLE.UPDATED_DATE", width: 130 }, - { key: "totalActiveMembers", titleKey: "CENTERS.ACTIVE_MEMBERS", width: 130 }, + { key: "totalActiveMembers", titleKey: "TABLE_TITLE.ACTIVE_MEMBERS", width: 130 }, { key: "totalArchivedMembers", - titleKey: "CENTERS.ARCHIVED_MEMBERS", + titleKey: "TABLE_TITLE.ARCHIVED_MEMBERS", width: 130, }, { key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 }, From b972a05d4eac04d02d8289c5ec1c8d6d10ced4fe Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Sat, 24 Aug 2024 10:18:11 +0530 Subject: [PATCH 6/6] remove unwanted translation svg --- src/components/layouts/header/Header.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/layouts/header/Header.tsx b/src/components/layouts/header/Header.tsx index c97c5d3c..3c82a403 100644 --- a/src/components/layouts/header/Header.tsx +++ b/src/components/layouts/header/Header.tsx @@ -5,7 +5,6 @@ import MenuItem from "@mui/material/MenuItem"; import Select, { SelectChangeEvent } from "@mui/material/Select"; import config from "../../../../config.json"; import PropTypes from "prop-types"; -import translationIcon from '../../../../public/images/translation.svg'; import Image from "next/image"; import TranslateIcon from '@mui/icons-material/Translate'; import Menu from '@mui/material/Menu';