Skip to content

Commit

Permalink
Merge pull request #155 from AkshataKatwal16/admin
Browse files Browse the repository at this point in the history 
Issue feat: Update  Profile UI, modify font of table column name, remove token from local-storage if unauthorised user try to login
  • Loading branch information
@itsvick
itsvick authored Aug 24, 2024
2 parents a618ae0 + b972a05 commit 1351001
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 89 deletions.
16 changes: 12 additions & 4 deletions public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -348,6 +347,15 @@
"CREATED_BY": "Created By",
"UPDATED_BY": "Updated By",
"ACTIONS": "Actions",
"TYPE": "Type"
"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"
}
}
6 changes: 3 additions & 3 deletions src/components/UserTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@ const UserTable: React.FC<UserTableProps> = ({
// 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
Expand Down Expand Up @@ -619,7 +619,7 @@ const UserTable: React.FC<UserTableProps> = ({
// 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
Expand All @@ -645,7 +645,7 @@ const UserTable: React.FC<UserTableProps> = ({
// 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
Expand Down
115 changes: 77 additions & 38 deletions src/components/layouts/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,13 @@ 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 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";
Expand All @@ -27,6 +21,8 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
const theme = createTheme();
const [lang, setLang] = useState("");
const router = useRouter();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);

const [selectedLanguage, setSelectedLanguage] = useState(lang);

Expand All @@ -47,7 +43,24 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
router.replace(router.pathname, router.asPath, { locale: newLocale });
}
};
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
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 (
<AppBar sx={sx} position={position} elevation={0} className={customClass}>
<Toolbar>
Expand All @@ -63,6 +76,7 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
},
}}
>

<FeatherIcon icon="menu" size="20" />
</IconButton>
{/* ------------------------------------------- */}
Expand All @@ -76,39 +90,64 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {

<Box flexGrow={1} />

<Box

sx={{
display: "flex",
gap:"10px"
}}
>
<FormControl >
<Select
className="SelectLanguages"
value={language}
onChange={handleChange}
displayEmpty
sx={{
borderRadius: "0.5rem",
width: "117px",
height: "32px",
marginBottom: "0rem",
fontSize: "14px",
backgroundColor: 'white',
<Box

sx={{
display: "flex",
// gap:"10px",
backgroundColor:"white",
padding:"5px",
alignItems:"center",
justifyContent:"center",
height:"20px",
width:"30px",
borderRadius:"10px"
}}
>
<IconButton
aria-label="more"
id="long-button"
aria-controls={open ? 'long-menu' : undefined}
aria-expanded={open ? 'true' : undefined}
aria-haspopup="true"
onClick={handleClick}

>
<TranslateIcon />
</IconButton>
</Box>
<Menu
id="long-menu"
MenuListProps={{
'aria-labelledby': 'long-button',
}}

anchorEl={anchorEl}
open={open}
onClose={handleClose}
PaperProps={{
style: {
// maxHeight: ITEM_HEIGHT * 4.5,
width: '20ch',
},
}}
>
{config.languages.map((lang) => (
<MenuItem value={lang.code} key={lang.code} onClick={() => handleMenuItemClick(lang.code)}

}}
>
{config.languages.map((lang) => (
<MenuItem value={lang.code} key={lang.code}>
sx={{
backgroundColor: lang.code === language ? 'rgba(0, 0, 0, 0.08)' : 'inherit',
'&:hover': {
backgroundColor: lang.code === language ? 'rgba(0, 0, 0, 0.12)' : 'rgba(0, 0, 0, 0.08)',
},
}}
>
{lang.label}
</MenuItem>
))}
</Select>
</FormControl>

<Profile />
</Box>
</Menu>
<Profile />
{/* ------------------------------------------- */}
{/* Profile Dropdown */}
{/* ------------------------------------------- */}
Expand Down
60 changes: 33 additions & 27 deletions src/components/layouts/header/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | HTMLElement>(null);
const [profileClick, setProfileClick] = React.useState<boolean>(false);
Expand Down Expand Up @@ -267,58 +267,59 @@ const Profile = () => {
<Menu
id="profile-menu"
anchorEl={anchorEl4}
keepMounted
open={Boolean(anchorEl4)}
onClose={handleClose4}
sx={{
paddingTop:"0px",
//backgroundColor: "#F8EFE7",

}}
PaperProps={{
sx: {
width: "500px",
backgroundColor: "#F8EFE7",
},
}}
>
<Box
sx={{
position: "relative",
padding: "20px",
borderRadius: "10px",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
{/* <IconButton
sx={{
position: "absolute",
top: 10,
right: 10,
}}
onClick={handleEditClick}
>
<EditIcon />
</IconButton> */}

<Box
sx={{
backgroundColor: "#FFC107",
backgroundColor: "#78590C",
width: "50px",
height: "50px",
borderRadius: "50%",
display: "flex",
justifyContent: "center",
alignItems: "center",
marginBottom: "20px",
marginLeft:"45%",

}}
>
<Typography
variant="h6"
sx={{ fontWeight: "bold", fontSize: "18px" }}
color={"white"}
sx={{ fontWeight: "bold", fontSize: "18px"}}
>
{adminInfo?.name
?.split(" ")
.map((word: any) => word[0])
.join("")}
</Typography>
</Box>
<Box
sx={{
position: "relative",
// marginTop:"10px",
padding: "20px",
// borderRadius: "10px",
display: "flex",
flexDirection: "column",
alignItems: "center",
backgroundColor:"white"
}}
>




<Typography variant="h5" sx={{ marginBottom: "10px" }}>
{adminInfo?.name}
Expand All @@ -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={<LogoutIcon />}
>
{t("COMMON.LOGOUT")}
</Button>
Expand Down
34 changes: 17 additions & 17 deletions src/data/tableColumns.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -25,35 +25,35 @@ 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: 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_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 },
// { 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);
};

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: 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, },
{ 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);
Expand All @@ -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: "TABLE_TITLE.ACTIVE_MEMBERS", width: 130 },
{
key: "totalArchivedMembers",
titleKey: "Archived Members",
titleKey: "TABLE_TITLE.ARCHIVED_MEMBERS",
width: 130,
},
{ key: "actions", titleKey: "TABLE_TITLE.ACTIONS", width: 125 },
Expand Down
Loading

0 comments on commit 1351001

Please sign in to comment.