Merge branch 'develop'

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "useTabs": true,
+  "tabWidth": 4,
+  "semi": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

src/components/views/home/ProjectsCount.tsx

@@ -52,7 +52,7 @@ const ProjectsCount = () => {
 		<RowStyled>
 			<Col md={4}>
 				<FlexCenter gap='10px'>
-					<H4>Projects Count </H4>
+					<H4>Active Projects Count</H4>
 					<IconWithTooltip
 						icon={<IconHelpFilled16 />}
 						direction={'top'}

src/components/views/home/TabContent.tsx

@@ -10,6 +10,7 @@ import MultisigSessionsCount from './MultisigSessionsCount';
 import RecurringDonationsCount from './RecurringDonationsCount';
 import RecurringDonationsTotalUsd from './RecurringDonationsTotalUsd';
 import DonationTokenStats from './DonationTokenStats';
+import VerificationDashboard from './VerificationDashboard';
 
 interface TabContentProps {
 	activeTab: string;
@@ -55,6 +56,11 @@ const TabContent: React.FC<TabContentProps> = ({ activeTab }) => {
 					<DonationBoxMetrics />
 				</>
 			)}
+			{activeTab === 'Verification' && (
+				<>
+					<VerificationDashboard />
+				</>
+			)}
 		</>
 	);
 };

src/components/views/home/Tabs.tsx

@@ -19,6 +19,7 @@ const Tabs: React.FC<TabsProps> = ({ setActiveTab, activeTab }) => {
 				'Projects',
 				'Multisig',
 				'Optional Donation Box',
+				'Verification',
 			].map(tab => (
 				<Tab
 					key={tab}

src/components/views/home/VerificationDashboard.tsx

@@ -0,0 +1,158 @@
+import {
+	H2,
+	H4,
+	H6,
+	IconHelpFilled16,
+	neutralColors,
+	Subline,
+} from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import React, { useState } from 'react';
+import { Col, Row } from '../../styled-components/grid';
+import {
+	firstOfNextMonth,
+	firstOfThisMonth,
+	formatAmount,
+} from '../../../lib/helpers';
+import { IconWithTooltip } from '../../IconWithTooltip';
+import { Flex, FlexCenter } from '../../styled-components/flex';
+import DatePicker from '../../DatePicker';
+import CheckBox from '../../CheckBox';
+import { useVouchesCount } from '../../../hooks/useVouchesCount';
+import { GIVETH_VERIFIERS_ORG_ID } from '../../../lib/constants';
+import Spinner from '../../Spinner';
+import VerificationChart from './charts/VerificationChart';
+import VerificationCommentsPieChart from './charts/VerificationCommentsPieChart';
+import VerificationAttestorsPieChart from './charts/VerificationAttestorsPieChart';
+
+const VerificationDashboard = () => {
+	const [fromDate, setFromDate] = useState(firstOfThisMonth());
+	const [toDate, setToDate] = useState(firstOfNextMonth());
+	const [showComment, setShowComment] = useState(true);
+
+	const { vouchCountInfo, loading } = useVouchesCount(
+		fromDate,
+		toDate,
+		GIVETH_VERIFIERS_ORG_ID,
+	);
+
+	return (
+		<>
+			<RowStyled>
+				<Col>
+					<FlexCenter gap='10px'>
+						<H4>Vouches made by Giveth Verifiers</H4>
+						<IconWithTooltip
+							icon={<IconHelpFilled16 />}
+							direction={'top'}
+						>
+							<TooltipBody>
+								Total number of vouches made by Giveth Verifiers
+								on ALL projects on Giveth
+							</TooltipBody>
+						</IconWithTooltip>
+					</FlexCenter>
+				</Col>
+			</RowStyled>
+			<RowStyled>
+				<Col md={6}>
+					From: <DatePicker date={fromDate} setDate={setFromDate} />
+				</Col>
+				<Col md={6}>
+					To: <DatePicker date={toDate} setDate={setToDate} />
+				</Col>
+			</RowStyled>
+			<RowStyled>
+				<Col>
+					<FilterRows gap='10px' wrap={1}>
+						<H6>Filters:</H6>
+						<CheckBox
+							checked={showComment}
+							onChange={setShowComment}
+							label='Show vouches with comments info'
+							size={16}
+						/>
+					</FilterRows>
+				</Col>
+			</RowStyled>
+			<RowStyled>
+				<Col md={showComment ? 6 : 12}>
+					<FlexCenter gap='10px' direction='column'>
+						<H6>Total Vouches:</H6>
+						{loading ? (
+							<Spinner />
+						) : (
+							<H2>{formatAmount(vouchCountInfo?.total || 0)}</H2>
+						)}
+					</FlexCenter>
+				</Col>
+				{showComment && (
+					<Col md={6}>
+						<FlexCenter gap='10px' direction='column'>
+							<H6>Total Vouches with Comments:</H6>
+							{loading ? (
+								<Spinner />
+							) : (
+								<H2>
+									{formatAmount(
+										vouchCountInfo?.totalWithComments || 0,
+									)}
+								</H2>
+							)}
+						</FlexCenter>
+					</Col>
+				)}
+			</RowStyled>
+			<RowStyled>
+				<Col>
+					{loading ? (
+						<Spinner />
+					) : (
+						<VerificationChart
+							vouchCountsPerMonth={vouchCountInfo?.totalPerMonth!}
+							showWithComments={showComment}
+						/>
+					)}
+				</Col>
+			</RowStyled>
+			<RowStyled>
+				<Col>
+					{loading ? (
+						<Spinner />
+					) : (
+						<VerificationCommentsPieChart
+							vouchCounts={vouchCountInfo}
+						/>
+					)}
+				</Col>
+			</RowStyled>
+			<RowStyled>
+				<Col>
+					<VerificationAttestorsPieChart
+						fromDate={fromDate}
+						toDate={toDate}
+					/>
+				</Col>
+			</RowStyled>
+		</>
+	);
+};
+
+const TooltipBody = styled(Subline)`
+	color: ${neutralColors.gray[100]};
+	width: 260px;
+`;
+
+const RowStyled = styled(Row)`
+	margin-top: 40px;
+	margin-bottom: 40px;
+`;
+
+const FilterRows = styled(Flex)`
+	margin-top: -16px;
+	padding: 16px 24px;
+	border-radius: 8px;
+	background-color: ${neutralColors.gray[200]};
+`;
+
+export default VerificationDashboard;

src/components/views/home/charts/VerificationAttestorsPieChart.tsx

@@ -0,0 +1,109 @@
+import { FC } from 'react';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+import styled from 'styled-components';
+import {
+	H5,
+	IconHelpFilled16,
+	neutralColors,
+	Subline,
+} from '@giveth/ui-design-system';
+import { IconWithTooltip } from '../../../IconWithTooltip';
+import { FlexCenter } from '../../../styled-components/flex';
+import { useAttestorsVouchesCountToSource } from '../../../../hooks/useAttestorsVouchesCountToSource';
+import {
+	GIVETH_SOURCE,
+	GIVETH_VERIFIERS_ORG_ID,
+} from '../../../../lib/constants';
+import Spinner from '../../../Spinner';
+
+interface IProps {
+	fromDate: Date;
+	toDate: Date;
+}
+
+const VerificationAttestorsPieChart: FC<IProps> = ({ fromDate, toDate }) => {
+	const { attestorsVouchesCountInfo, loading } =
+		useAttestorsVouchesCountToSource(
+			fromDate,
+			toDate,
+			GIVETH_VERIFIERS_ORG_ID,
+			GIVETH_SOURCE,
+		);
+
+	const data = attestorsVouchesCountInfo?.vouchCountByUser?.map(
+		({ attestorId, totalCount, countWithComments }) => ({
+			name: attestorId,
+			y: totalCount,
+			countWithComments,
+		}),
+	);
+
+	const options = {
+		chart: {
+			plotBackgroundColor: null,
+			type: 'pie',
+		},
+		title: {
+			text: null,
+		},
+		tooltip: {
+			enabled: true,
+			formatter: function (this: any): string {
+				const percentageWithComments =
+					(this.point.countWithComments / this.point.y) * 100;
+				return `
+					Total Vouches: ${this.point.y}<br>
+					Vouches with Comments: ${
+						this.point.countWithComments
+					} (${percentageWithComments.toFixed(1)}%)
+				`;
+			},
+		},
+		series: [
+			{
+				colorByPoint: true,
+				data: data,
+			},
+		],
+		plotOptions: {
+			pie: {
+				allowPointSelect: true,
+				cursor: 'pointer',
+				dataLabels: {
+					enabled: true,
+					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+				},
+			},
+		},
+	};
+
+	return loading ? (
+		<Spinner />
+	) : (
+		<Container>
+			<FlexCenter gap='10px'>
+				<H5>Distribution of Vouches by Attestors to GIVETH</H5>
+				<IconWithTooltip icon={<IconHelpFilled16 />} direction={'top'}>
+					<TooltipBody>
+						This chart displays the count of vouches made by
+						attestors to GIVETH during the selected timeframe.
+					</TooltipBody>
+				</IconWithTooltip>
+			</FlexCenter>
+			<HighchartsReact highcharts={Highcharts} options={options} />
+		</Container>
+	);
+};
+
+const TooltipBody = styled(Subline)`
+	color: ${neutralColors.gray[100]};
+	width: 270px;
+`;
+
+const Container = styled.div`
+	margin-top: 50px;
+	text-align: center;
+`;
+
+export default VerificationAttestorsPieChart;