v2.0.35.3

govtool/analytics-dashboard/src/app/[locale]/page.js

@@ -1,78 +1,156 @@
 'use client';
 
 import { Grid, Card, CardContent, Typography, Box } from '@mui/material';
-import { PeopleAltOutlined, ArticleOutlined, AccountBalanceWalletOutlined, HowToVoteOutlined, PersonOutline, BalanceOutlined } from '@mui/icons-material';
+import {
+	PeopleAltOutlined,
+	ArticleOutlined,
+	AccountBalanceWalletOutlined,
+	HowToVoteOutlined,
+	PersonOutline,
+	BalanceOutlined,
+} from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
 import getGoogleData from '@/lib/api';
 import { useEffect, useState } from 'react';
 import { Link } from '@/navigation';
 
 function Dashboard() {
-
 	const [stats, setStats] = useState([
 		// { title: 'Total users', value: 0, Icon: PeopleAltOutlined },
 		{ title: 'Unique users', value: 0, Icon: PeopleAltOutlined },
-		{ title: 'Wallet connections', value: 0, Icon: AccountBalanceWalletOutlined },
+		{
+			title: 'Wallet connections',
+			value: 0,
+			Icon: AccountBalanceWalletOutlined,
+		},
 		{ title: 'Proposal views', value: 0, Icon: ArticleOutlined },
 		{ title: 'DRep Registrations', value: 0, Icon: PersonOutline },
 		{ title: 'Votes submitted', value: 0, Icon: HowToVoteOutlined },
-		{ title: 'Delegations', value: 0, Icon: BalanceOutlined }
-	])
-
+		{ title: 'Delegations', value: 0, Icon: BalanceOutlined },
+	]);
 
 	const fetchData = async () => {
-		const resp = await getGoogleData()
+		const resp = await getGoogleData();
 		const statMap = resp.reduce((acc, event) => {
 			acc[event.eventName] = event.eventCount;
 			return acc;
 		}, {});
 
 		let statsTemplate = [
 			// { title: 'Total users', value: statMap['user_engagement'], Icon: PeopleAltOutlined },
-			{ title: 'Unique users', value: statMap['first_visit'], Icon: PeopleAltOutlined },
-			{ title: 'Wallet connections', value: +statMap['Connect wallet'] + +statMap['Connect your wallet'], Icon: AccountBalanceWalletOutlined },
-			{ title: 'Proposal views', value: statMap['View proposal details'], Icon: ArticleOutlined },
-			{ title: 'DRep Registrations', value: statMap['Register'], Icon: PersonOutline },
-			{ title: 'Votes submitted', value: statMap['Vote'], Icon: HowToVoteOutlined },
-			{ title: 'Delegations', value: statMap['Delegate'], Icon: BalanceOutlined },
+			{
+				title: 'Unique users',
+				value: statMap['first_visit'],
+				Icon: PeopleAltOutlined,
+			},
+			{
+				title: 'Wallet connections',
+				value:
+					+statMap['Connect wallet'] +
+					+statMap['Connect your wallet'],
+				Icon: AccountBalanceWalletOutlined,
+			},
+			{
+				title: 'Proposal views',
+				value: statMap['View proposal details'],
+				Icon: ArticleOutlined,
+			},
+			{
+				title: 'DRep Registrations',
+				value: statMap['Register'],
+				Icon: PersonOutline,
+			},
+			{
+				title: 'Votes submitted',
+				value: statMap['Vote'],
+				Icon: HowToVoteOutlined,
+			},
+			{
+				title: 'Delegations',
+				value: statMap['Delegate'],
+				Icon: BalanceOutlined,
+			},
 		];
-		setStats(statsTemplate)
-	}
+		setStats(statsTemplate);
+	};
 
 	useEffect(() => {
-		fetchData()
-	}, [])
-
-
+		fetchData();
+	}, []);
 
 	const theme = useTheme();
 
 	return (
-		<Box display="flex" flexDirection="column" alignItems="center" justifyContent="space-between" height="100%" sx={{ color: (theme) => theme?.palette?.text?.black }}>
-			<Box display="flex" flexDirection="column" alignItems="start" gap={5} padding={5}>
-				<Box display="flex" flexDirection="column" alignItems="start" gap={1}>
+		<Box
+			display="flex"
+			flexDirection="column"
+			alignItems="center"
+			justifyContent="space-between"
+			height="100%"
+			sx={{ color: (theme) => theme?.palette?.text?.black }}
+		>
+			<Box
+				display="flex"
+				flexDirection="column"
+				alignItems="start"
+				gap={5}
+				padding={5}
+			>
+				<Box
+					display="flex"
+					flexDirection="column"
+					alignItems="start"
+					gap={1}
+				>
 					<Typography variant="h5" component="h1">
 						SanchoNet Govtool
 					</Typography>
 					<Typography variant="h4" component="h2">
 						Participation Dashboard
 					</Typography>
-					<Typography variant="subtitle1" sx={{ color: (theme) => theme?.palette?.text?.gray }}>
-						This dashboard shows the overall participation and usage of SanchoNet Govtool from 1st of December 2023
+					<Typography
+						variant="subtitle1"
+						sx={{ color: (theme) => theme?.palette?.text?.gray }}
+					>
+						This dashboard shows the overall participation and usage
+						of SanchoNet Govtool from 1st of December 2023
 					</Typography>
 				</Box>
 
-
 				<Grid container spacing={4}>
 					{stats.map((stat, index) => (
 						<Grid item xs={12} sm={12} md={6} key={index}>
 							<Card
-								sx={{ background: (theme) => theme?.palette?.background?.info, width: '100%' }}
+								sx={{
+									background: (theme) =>
+										theme?.palette?.background?.info,
+									width: '100%',
+								}}
 							>
-								<CardContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-									<stat.Icon style={{ fontSize: 60, color: theme?.palette?.text?.black, paddingBottom: 20 }} />
-
-									<Typography variant="subtitle1" sx={{ color: (theme) => theme?.palette?.text?.gray }}>
+								<CardContent
+									sx={{
+										display: 'flex',
+										flexDirection: 'column',
+										alignItems: 'center',
+										justifyContent: 'center',
+										height: '100%',
+									}}
+								>
+									<stat.Icon
+										style={{
+											fontSize: 60,
+											color: theme?.palette?.text?.black,
+											paddingBottom: 20,
+										}}
+									/>
+
+									<Typography
+										variant="subtitle1"
+										sx={{
+											color: (theme) =>
+												theme?.palette?.text?.gray,
+										}}
+									>
 										{stat.title}
 									</Typography>
 									<Typography variant="h4">
@@ -85,18 +163,28 @@ function Dashboard() {
 				</Grid>
 			</Box>
 
-			<Box display="flex" flexDirection="column" alignItems="center" padding={2}>
+			<Box
+				display="flex"
+				flexDirection="column"
+				alignItems="center"
+				padding={2}
+			>
 				<Typography variant="caption" display="block" gutterBottom>
-					© {new Date().getFullYear()} Intersect MBO
+					© {new Date().getFullYear()} GovTool
 				</Typography>
 				<Link href="https://sanchogov.tools/">
-					<Typography variant="caption" display="block" sx={{ color: (theme) => theme?.palette?.text?.primaryBlue }}>
+					<Typography
+						variant="caption"
+						display="block"
+						sx={{
+							color: (theme) => theme?.palette?.text?.primaryBlue,
+						}}
+					>
 						Sancho Govtool
 					</Typography>
 				</Link>
 			</Box>
-
-		</Box >
+		</Box>
 	);
 }
 

govtool/frontend/package.json

@@ -27,7 +27,7 @@
     "@emotion/styled": "^11.11.0",
     "@emurgo/cardano-serialization-lib-asmjs": "^14.1.1",
     "@hookform/resolvers": "^3.3.1",
-    "@intersect.mbo/govtool-outcomes-pillar-ui": "v1.5.8",
+    "@intersect.mbo/govtool-outcomes-pillar-ui": "v1.5.9",
     "@intersect.mbo/intersectmbo.org-icons-set": "^1.0.8",
     "@intersect.mbo/pdf-ui": "1.0.14-beta",
     "@mui/icons-material": "^5.14.3",

govtool/frontend/src/components/molecules/DataActionsBar.tsx

@@ -65,6 +65,11 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
     [chosenFilters, filterOptions],
   );
 
+  const chosenSortingLabel = useMemo(() => {
+    const opt = (sortOptions ?? []).find((o) => o.key === chosenSorting);
+    return opt?.label ?? chosenSorting;
+  }, [sortOptions, chosenSorting]);
+
   const handleRemoveFilter = (key: string) =>
     setChosenFilters?.((prev) => (prev ?? []).filter((k) => k !== key));
 
@@ -135,7 +140,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
             filtersOpen={effectiveFiltersOpen}
             isFiltering={isFiltering}
             setFiltersOpen={setEffectiveFiltersOpen}
-            chosenSorting={chosenSorting}
+            chosenSorting={chosenSortingLabel}
             setSortOpen={setEffectiveSortOpen}
             sortOpen={effectiveSortOpen}
           >

govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx

@@ -77,7 +77,7 @@ export const DashboardGovernanceActionsVotedOn = ({
         <Box
           columnGap="20px"
           display="grid"
-          gridTemplateColumns={`repeat(auto-fit, minmax(${
+          gridTemplateColumns={`repeat(auto-fill, minmax(${
             screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
           }, 1fr))`}
         >

govtool/frontend/src/components/organisms/GovernanceActionsToVote.tsx

@@ -121,7 +121,7 @@ export const GovernanceActionsToVote = ({
         <Box
           columnGap="20px"
           display="grid"
-          gridTemplateColumns={`repeat(auto-fit, minmax(${
+          gridTemplateColumns={`repeat(auto-fill, minmax(${
             screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
           }, 1fr))`}
         >

govtool/frontend/src/consts/dRepDirectory/sorting.ts

@@ -1,7 +1,7 @@
 export const DREP_DIRECTORY_SORTING = [
   {
     key: "Activity",
-    label: "Activity",
+    label: "Voting Activity",
   },
   {
     key: "RegistrationDate",

govtool/frontend/src/i18n/locales/en.json

@@ -377,7 +377,7 @@
     }
   },
   "footer": {
-    "copyright": "© {{year}} Intersect MBO",
+    "copyright": "© {{year}} GovTool",
     "privacyPolicy": "Privacy policy",
     "termOfService": "Terms of Use"
   },

govtool/frontend/src/stories/Footer.stories.ts

@@ -21,7 +21,7 @@ export const FooterComponent: Story = {
 
     const nowDate = new Date();
     await expect(
-      canvas.getByText(`© ${nowDate.getFullYear()} Intersect MBO`),
+      canvas.getByText(`© ${nowDate.getFullYear()} GovTool`),
     ).toBeInTheDocument();
     await userEvent.click(canvas.getByTestId("privacy-policy-footer-link"));
     await expect(window.open).toHaveBeenCalledTimes(1);