Update admin page (#389)

Giving-Coupons · Nov 4, 2022 · ff15dcd · ff15dcd
2 parents 5ddf3dc + a2b7630
commit ff15dcd
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/frontend/components/campaigns/dashboard/CampaignCouponsCard.tsx b/frontend/components/campaigns/dashboard/CampaignCouponsCard.tsx
@@ -52,7 +52,7 @@ const CampaignCouponsCard = ({ campaign, coupons }: Props) => {
         </Button>
 
         <Button actionType="primary" onClick={() => router.push(`/admin/campaigns/${campaign.id}/coupons`)}>
-          View unredeemed
+          Download for distribution
         </Button>
       </Stack>
 

diff --git a/frontend/components/campaigns/dashboard/CampaignDonationBreakdownCard.tsx b/frontend/components/campaigns/dashboard/CampaignDonationBreakdownCard.tsx
@@ -16,6 +16,7 @@ import {
   charityContainerSx,
   charityItemSx,
   donationTableHeaderSx,
+  givingSgLinkSx,
   logoSx,
 } from '../../../styles/components/campaigns/dashboard/CampaignDashboardStyles';
 import { CampaignCharityData, CampaignCharityDonationData } from '../../../types/campaignCharities';
@@ -58,10 +59,8 @@ const CharityDonationLabel = (campaignCharity: CampaignCharityData) => (
     <Stack sx={charityItemSx} component="div">
       <Typography variant="h4">{campaignCharity.charity.name}</Typography>
 
-      <MuiLink component={Link} href={campaignCharity.givingSgUrl}>
-        <Typography variant="caption" color="info.main">
-          GivingSg Campaign
-        </Typography>
+      <MuiLink sx={givingSgLinkSx} component={Link} href={campaignCharity.givingSgUrl}>
+        <Typography variant="caption">GivingSg Campaign</Typography>
       </MuiLink>
     </Stack>
   </Stack>

diff --git a/frontend/components/campaigns/dashboard/CampaignInfoCard.tsx b/frontend/components/campaigns/dashboard/CampaignInfoCard.tsx
@@ -35,8 +35,10 @@ const CampaignInfoCard = ({ campaign }: Props) => {
     });
   };
 
+  const numOfRedeemedCoupons = campaign.coupons.filter((coupon) => coupon.redemptionId != null).length;
+
   return (
-    <Grid container columnSpacing={2}>
+    <Grid container columnSpacing={2} rowSpacing={2}>
       <Grid item xs={12} md={6}>
         <Box sx={campaignImageSx} component="img" src={campaign.imageBase64} />
       </Grid>
@@ -78,6 +80,8 @@ const CampaignInfoCard = ({ campaign }: Props) => {
           <Stack sx={campaignInfoItemSx} component="div" spacing={1}>
             <Typography variant="h4">{`${campaign.coupons.length} coupons in total`}</Typography>
 
+            <Typography variant="h5">{`${numOfRedeemedCoupons} of ${campaign.coupons.length} coupons redeemed`}</Typography>
+
             <Stack component="div" direction="row" spacing={2}>
               <CampaignMoneyInfoIcon
                 tooltipTitle="Promised Amount"

diff --git a/frontend/components/campaigns/dashboard/CampaignLoading.tsx b/frontend/components/campaigns/dashboard/CampaignLoading.tsx
@@ -1,10 +1,10 @@
 import { Grid, Skeleton } from '@mui/material';
 import { Stack } from '@mui/system';
-import { sectionSx } from '../../../styles/components/campaigns/dashboard/CampaignDashboardStyles';
+import { containerSx, sectionSx } from '../../../styles/components/campaigns/dashboard/CampaignDashboardStyles';
 import CampaignCard from './CampaignCard';
 
 const CampaignLoading = () => (
-  <Grid container>
+  <Grid sx={containerSx} container>
     <Grid item sm={12} md={8}>
       <Stack sx={sectionSx} spacing={2}>
         <Grid container columnSpacing={2}>

diff --git a/frontend/pages/admin/campaigns/[campaignId]/index.tsx b/frontend/pages/admin/campaigns/[campaignId]/index.tsx
@@ -12,7 +12,7 @@ import CampaignPrimaryDonorCard from '../../../../components/campaigns/dashboard
 import api from '../../../../frontendApis';
 import CampaignsAPI from '../../../../frontendApis/campaigns';
 import useAdminLoginCheck from '../../../../hooks/useAdminLogInCheck';
-import { sectionSx } from '../../../../styles/components/campaigns/dashboard/CampaignDashboardStyles';
+import { containerSx, sectionSx } from '../../../../styles/components/campaigns/dashboard/CampaignDashboardStyles';
 import { CampaignAdminData } from '../../../../types/campaigns';
 import { Nullable } from '../../../../types/utils';
 
@@ -43,7 +43,7 @@ const AdminCampaign = () => {
         )}
 
         {campaign && !error && (
-          <Grid container>
+          <Grid sx={containerSx} container rowSpacing={4}>
             <Grid item xs={12} md={8}>
               <Stack sx={sectionSx} component="div" spacing={4}>
                 <CampaignInfoCard campaign={campaign} />

diff --git a/frontend/styles/components/campaigns/dashboard/CampaignDashboardStyles.ts b/frontend/styles/components/campaigns/dashboard/CampaignDashboardStyles.ts
@@ -2,15 +2,13 @@ import { SxProps } from '@mui/system';
 import { theme } from '../../../../utils/theme';
 
 export const containerSx: SxProps = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  width: '100%',
-  paddingBottom: '16px',
+  paddingTop: 4,
+  paddingBottom: 4,
 };
 
 export const sectionSx: SxProps = {
-  padding: '40px',
+  paddingLeft: 4,
+  paddingRight: 4,
 };
 
 export const cardSx: SxProps = {
@@ -31,6 +29,16 @@ export const charityItemSx: SxProps = {
   justifyContent: 'space-evenly',
 };
 
+export const givingSgLinkSx: SxProps = {
+  color: theme.palette.info.main,
+  textDecoration: 'none',
+  '&:hover': {
+    cursor: 'pointer',
+    color: theme.palette.info.dark,
+    textDecoration: 'none',
+  },
+};
+
 export const primaryDonorItemSx: SxProps = {
   width: '100%',
   alignItems: 'center',
@@ -44,7 +52,7 @@ export const avatarSx: SxProps = {
 
 export const logoSx: SxProps = {
   height: '32px',
-  width: 'auto',
+  width: '32px',
   objectFit: 'contain',
 };