Add progress indicator in pledges screen

PalisadoesFoundation · Jun 30, 2024 · 48e1212 · 48e1212
1 parent 0e409f4
commit 48e1212
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 13 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -392,7 +392,10 @@
     "lowestAmount": "Lowest Amount",
     "latestEndDate": "Latest End Date",
     "earliestEndDate": "Earliest End Date",
-    "campaigns": "Campaigns"
+    "campaigns": "Campaigns",
+    "pledges": "Pledges",
+    "endsOn": "Ends on",
+    "raised": "Raised"
   },
   "orgPost": {
     "title": "Posts",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -398,7 +398,10 @@
     "lowestAmount": "Montant le plus bas",
     "latestEndDate": "Date de fin la plus récente",
     "earliestEndDate": "Date de fin la plus proche",
-    "campaigns": "Campagnes"
+    "campaigns": "Campagnes",
+    "pledges": "Promesses de dons",
+    "endsOn": "Se termine le",
+    "raised": "Levé"
   },
   "orgPost": {
     "title": "Des postes",

diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json
@@ -398,7 +398,10 @@
     "lowestAmount": "सबसे कम राशि",
     "latestEndDate": "नवीनतम समाप्ति तिथि",
     "earliestEndDate": "सबसे प्रारंभिक समाप्ति तिथि",
-    "campaigns": "अभियान"
+    "campaigns": "अभियान",
+    "pledges": "प्रतिज्ञाएँ",
+    "endsOn": "पर समाप्त होता है",
+    "raised": "उठाया गया"
   },
   "orgPost": {
     "title": "पदों",

diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json
@@ -526,7 +526,10 @@
     "lowestAmount": "Cantidad más baja",
     "latestEndDate": "Fecha de finalización más reciente",
     "earliestEndDate": "Fecha de finalización más cercana",
-    "campaigns": "Campañas"
+    "campaigns": "Campañas",
+    "pledges": "Compromisos",
+    "endsOn": "Finaliza el",
+    "raised": "Recaudado"
   },
 
   "orgPost": {

diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -398,7 +398,10 @@
     "lowestAmount": "最低金额",
     "latestEndDate": "最新结束日期",
     "earliestEndDate": "最早结束日期",
-    "campaigns": "活动"
+    "campaigns": "活动",
+    "pledges": "承诺",
+    "endsOn": "结束于",
+    "raised": "筹集到"
   },
   "orgPost": {
     "title": "帖子",

diff --git a/src/GraphQl/Queries/fundQueries.ts b/src/GraphQl/Queries/fundQueries.ts
@@ -58,6 +58,9 @@ export const FUND_CAMPAIGN = gql`
 export const FUND_CAMPAIGN_PLEDGE = gql`
   query GetFundraisingCampaignById($id: ID!, $orderBy: PledgeOrderByInput) {
     getFundraisingCampaignById(id: $id, orderBy: $orderBy) {
+      name
+      fundingGoal
+      currency
       startDate
       endDate
       pledges {

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
@@ -58,7 +58,8 @@
 
 .btnsContainer {
   display: flex;
-  margin: 2rem 0 2.5rem 0;
+  gap: 0.8rem;
+  margin: 2.2rem 0 0.8rem 0;
 }
 
 .btnsContainer .input {
@@ -125,3 +126,76 @@
 .noOutline input {
   outline: none;
 }
+
+.overviewContainer {
+  display: flex;
+  gap: 7rem;
+  width: 100%;
+  justify-content: space-between;
+  margin: 1.5rem 0 0 0;
+  padding: 1.25rem 2rem;
+  background-color: rgba(255, 255, 255, 0.591);
+
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  border-radius: 0.5rem;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.75rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.titleContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.raisedAmount {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+}
+
+.progressContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.progress {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.endpoints {
+  display: flex;
+  position: relative;
+  font-size: 0.85rem;
+}
+
+.start {
+  position: absolute;
+  top: 0px;
+}
+
+.end {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -11,7 +11,14 @@ import { currencySymbols } from 'utils/currency';
 import styles from './FundCampaignPledge.module.css';
 import PledgeDeleteModal from './PledgeDeleteModal';
 import PledgeModal from './PledgeModal';
-import { Breadcrumbs, Link, Stack, Typography } from '@mui/material';
+import {
+  Breadcrumbs,
+  LinearProgress,
+  Link,
+  Stack,
+  Typography,
+  linearProgressClasses,
+} from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 import Avatar from 'components/Avatar/Avatar';
 import type { GridCellParams, GridColDef } from '@mui/x-data-grid';
@@ -20,6 +27,15 @@ import type {
   InterfacePledgeVolunteer,
   InterfaceQueryFundCampaignsPledges,
 } from 'utils/interfaces';
+import { styled } from '@mui/system';
+
+interface InterfaceCampaignInfo {
+  name: string;
+  goal: number;
+  startDate: Date;
+  endDate: Date;
+  currency: string;
+}
 
 enum Modal {
   SAME = 'same',
@@ -47,6 +63,18 @@ const dataGridStyle = {
   },
 };
 
+const BorderLinearProgress = styled(LinearProgress)(() => ({
+  height: 15,
+  borderRadius: 4,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: '#e0e0e0',
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: '#31bb6b',
+  },
+}));
+
 const fundCampaignPledge = (): JSX.Element => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'pledges',
@@ -58,6 +86,14 @@ const fundCampaignPledge = (): JSX.Element => {
     return <Navigate to={'/'} replace />;
   }
 
+  const [campaignInfo, setCampaignInfo] = useState<InterfaceCampaignInfo>({
+    name: '',
+    goal: 0,
+    startDate: new Date(),
+    endDate: new Date(),
+    currency: '',
+  });
+
   const [modalState, setModalState] = useState<{ [key in Modal]: boolean }>({
     [Modal.SAME]: false,
     [Modal.DELETE]: false,
@@ -113,6 +149,18 @@ const fundCampaignPledge = (): JSX.Element => {
     );
   }, [pledgeData, searchTerm]);
 
+  useEffect(() => {
+    if (pledgeData) {
+      setCampaignInfo({
+        name: pledgeData.getFundraisingCampaignById.name,
+        goal: pledgeData.getFundraisingCampaignById.fundingGoal,
+        startDate: pledgeData.getFundraisingCampaignById.startDate,
+        endDate: pledgeData.getFundraisingCampaignById.endDate,
+        currency: pledgeData.getFundraisingCampaignById.currency,
+      });
+    }
+  }, [pledgeData]);
+
   useEffect(() => {
     refetchPledge();
   }, [sortBy, refetchPledge]);
@@ -228,7 +276,7 @@ const fundCampaignPledge = (): JSX.Element => {
     },
     {
       field: 'amount',
-      headerName: 'Pledge Amount',
+      headerName: 'Pledged',
       flex: 1,
       minWidth: 100,
       align: 'center',
@@ -251,6 +299,31 @@ const fundCampaignPledge = (): JSX.Element => {
         );
       },
     },
+    {
+      field: 'paid',
+      headerName: 'Paid',
+      flex: 1,
+      minWidth: 100,
+      align: 'center',
+      headerAlign: 'center',
+      headerClassName: `${styles.tableHeader}`,
+      sortable: false,
+      renderCell: (params: GridCellParams) => {
+        return (
+          <div
+            className="d-flex justify-content-center fw-bold"
+            data-testid="paidCell"
+          >
+            {
+              currencySymbols[
+                params.row.currency as keyof typeof currencySymbols
+              ]
+            }
+            0
+          </div>
+        );
+      },
+    },
     {
       field: 'action',
       headerName: 'Action',
@@ -294,7 +367,7 @@ const fundCampaignPledge = (): JSX.Element => {
 
   return (
     <div>
-      <Breadcrumbs aria-label="breadcrumb" className="ms-1 mt-2">
+      <Breadcrumbs aria-label="breadcrumb" className="ms-1">
         <Link
           underline="hover"
           color="inherit"
@@ -317,8 +390,28 @@ const fundCampaignPledge = (): JSX.Element => {
         >
           {t('campaigns')}
         </Link>
-        <Typography color="text.primary">Fund Campaign Pledges</Typography>
+        <Typography color="text.primary">{t('pledges')}</Typography>
       </Breadcrumbs>
+
+      <div className={styles.overviewContainer}>
+        <div className={styles.titleContainer}>
+          <h3>{campaignInfo?.name}</h3>
+          <span>
+            {t('endsOn')} {campaignInfo?.endDate.toString()}
+          </span>
+        </div>
+        <div className={styles.progressContainer}>
+          <div className={styles.raisedAmount}>$1,000 {t('raised')}</div>
+          <div className={styles.progress}>
+            <BorderLinearProgress variant="determinate" value={50} />
+            <div className={styles.endpoints}>
+              <div className={styles.start}>$0</div>
+              <div className={styles.end}>${campaignInfo?.goal}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
         <div className={`${styles.input} mb-1`}>
           <Form.Control
@@ -396,7 +489,7 @@ const fundCampaignPledge = (): JSX.Element => {
 
       <DataGrid
         disableColumnMenu
-        columnBuffer={5}
+        columnBuffer={6}
         hideFooter={true}
         getRowId={(row) => row._id}
         components={{

diff --git a/src/screens/FundCampaignPledge/PledgesMocks.ts b/src/screens/FundCampaignPledge/PledgesMocks.ts
@@ -18,6 +18,9 @@ export const MOCKS = [
     result: {
       data: {
         getFundraisingCampaignById: {
+          name: 'Campaign Name',
+          fundingGoal: 1000,
+          currency: 'USD',
           startDate: '2024-01-01',
           endDate: '2024-08-08',
           pledges: [
@@ -67,6 +70,9 @@ export const MOCKS = [
     result: {
       data: {
         getFundraisingCampaignById: {
+          name: 'Campaign Name',
+          fundingGoal: 1000,
+          currency: 'USD',
           startDate: '2024-01-01',
           endDate: '2024-08-08',
           pledges: [
@@ -116,6 +122,9 @@ export const MOCKS = [
     result: {
       data: {
         getFundraisingCampaignById: {
+          name: 'Campaign Name',
+          fundingGoal: 1000,
+          currency: 'USD',
           startDate: '2024-01-01',
           endDate: '2024-08-08',
           pledges: [
@@ -165,6 +174,9 @@ export const MOCKS = [
     result: {
       data: {
         getFundraisingCampaignById: {
+          name: 'Campaign Name',
+          fundingGoal: 1000,
+          currency: 'USD',
           startDate: '2024-01-01',
           endDate: '2024-08-08',
           pledges: [
@@ -422,6 +434,9 @@ export const EMPTY_MOCKS = [
     result: {
       data: {
         getFundraisingCampaignById: {
+          name: 'Campaign Name',
+          fundingGoal: 1000,
+          currency: 'USD',
           startDate: '2024-01-01',
           endDate: '2024-01-01',
           pledges: [],

diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx
@@ -313,6 +313,7 @@ const orgFundCampaign = (): JSX.Element => {
         </Link>
         <Typography color="text.primary">FundRaising Campaign</Typography>
       </Breadcrumbs>
+
       <div className={styles.btnsContainer}>
         <div className={styles.input}>
           <Form.Control