Am/wip treasury (#450)

* feat: new treasury upload

* feat: update

* feat: last chart

* fix visual details

* fix: small fixes

* fix: new icons

* fix: default coin icon

* fix: smaller icons

* fix: hide pagination

* fix: remove old icons

* fix: remove filter button

Co-authored-by: Alexis Munoz <alexismn86@gmail.com>

.gitignore

@@ -46,3 +46,4 @@ yarn-error.log*
 .vercel
 
 **/sitemap.xml
+.vscode/settings.json

pkg/app/src/components/Charts/areaChart.tsx

@@ -10,60 +10,62 @@ interface ComponentProps {
 	series: any
 	height: number
 	width?: number
+	options?: any
 }
 
-export function AreaChart({ categories, series, height }: ComponentProps) {
+export function AreaChart({ categories, series, height, options = null }: ComponentProps) {
 	const theme = useTheme()
 
 	const chartOptions: ApexOptions = useMemo(
-		() => ({
-			chart: {
-				background: 'transparent',
-				stacked: false,
-				toolbar: {
-					show: false,
+		() =>
+			options || {
+				chart: {
+					background: 'transparent',
+					stacked: false,
+					toolbar: {
+						show: false,
+					},
 				},
-			},
-			colors: [theme.palette.primary.main],
-			dataLabels: {
-				enabled: false,
-			},
-			fill: {
-				colors: [alpha(theme.palette.primary.main, 0.2)],
-			},
-			grid: {
-				borderColor: 'transparent',
-				strokeDashArray: 0,
-			},
-			stroke: {
-				curve: 'smooth',
-			},
-			theme: {
-				mode: theme.palette.mode,
-			},
-			xaxis: {
-				type: 'datetime',
-				axisBorder: {
-					show: false,
+				colors: [theme.palette.primary.main],
+				dataLabels: {
+					enabled: false,
 				},
-				axisTicks: {
-					show: false,
+				fill: {
+					colors: [alpha(theme.palette.primary.main, 0.2)],
 				},
-				categories: categories,
+				grid: {
+					borderColor: 'transparent',
+					strokeDashArray: 0,
+				},
+				stroke: {
+					curve: 'smooth',
+				},
+				theme: {
+					mode: theme.palette.mode,
+				},
+				xaxis: {
+					type: 'datetime',
+					axisBorder: {
+						show: false,
+					},
+					axisTicks: {
+						show: false,
+					},
+					categories: categories,
 
-				labels: {
-					show: false,
+					labels: {
+						show: false,
+					},
 				},
-			},
-			tooltip: {
-				x: {
-					format: 'dd/MM/yy',
+				tooltip: {
+					x: {
+						format: 'dd/MM/yy',
+					},
+				},
+				yaxis: {
+					show: false,
 				},
 			},
-			yaxis: {
-				show: false,
-			},
-		}),
 		[categories],
 	)
 

pkg/app/src/components/Charts/radialBar.tsx

@@ -4,11 +4,15 @@ import type { ApexOptions } from 'apexcharts'
 import { Chart } from './chart'
 
 interface ComponentProps {
-	color: string
+	colors: string[]
+	labels?: string[]
 	series: any
+	height?: number
+	plotOptions?: any
+	stroke?: any
 }
 
-export function RadialChart({ color, series }: ComponentProps) {
+export function RadialChart({ colors, series, labels, height = 160, plotOptions = {}, stroke = {} }: ComponentProps) {
 	const theme = useTheme()
 
 	const chartOptions: ApexOptions = {
@@ -19,11 +23,12 @@ export function RadialChart({ color, series }: ComponentProps) {
 				show: false,
 			},
 		},
-		colors: [color],
+		colors: colors,
 		fill: {
 			opacity: 1,
 		},
-		labels: [],
+		stroke: stroke,
+		labels: labels || [],
 		plotOptions: {
 			radialBar: {
 				dataLabels: {
@@ -43,11 +48,12 @@ export function RadialChart({ color, series }: ComponentProps) {
 					background: theme.palette.background.default,
 				},
 			},
+			...plotOptions,
 		},
 		theme: {
 			mode: theme.palette.mode,
 		},
 	}
 
-	return <Chart height={160} options={chartOptions} series={series} type="radialBar" />
+	return <Chart height={height} options={chartOptions} series={series} type="radialBar" />
 }

pkg/app/src/components/TabPanels/Organization/modules/radialChartContainer.tsx

@@ -23,7 +23,7 @@ export function RadialChartContainer({ color, series, type, count }: ComponentPr
 				left={{ md: 20 }}
 				bottom={{ xs: 15, md: 0 }}
 			>
-				<RadialChart color={color} series={series} />
+				<RadialChart colors={[color]} series={series} />
 			</Stack>
 			<Stack
 				direction="column"

pkg/app/src/components/TabPanels/Treasury/modules/asset.tsx

@@ -0,0 +1,29 @@
+// libs
+import { Stack, Paper, Box, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+
+interface ComponentProps {
+	name: string
+	quantity: number
+	image: string
+}
+
+export function Asset({ name, quantity, image }: ComponentProps) {
+	const theme = useTheme()
+
+	return (
+		<Stack component={Paper} padding={4} spacing={6} sx={{ boxShadow: 'none', textAlign: 'center' }}>
+			<Box mb={2}>
+				<img src={`/svg/coins/${image}.svg`} style={{ margin: 'auto', height: '40px' }} />
+			</Box>
+			<Box style={{ marginTop: 0 }}>
+				<Typography variant="h6">{quantity.toLocaleString()}</Typography>
+			</Box>
+			<Box style={{ marginTop: 0 }}>
+				<Typography variant="caption" sx={{ fontWeight: 'bold', color: theme.palette.text.primary }}>
+					{name}
+				</Typography>
+			</Box>
+		</Stack>
+	)
+}

pkg/app/src/components/TabPanels/Treasury/modules/assets.tsx

@@ -0,0 +1,40 @@
+// libs
+import { Grid, Box, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import React, { useState, useMemo, useEffect } from 'react'
+
+// Subscriptions
+import { getAssetsSubscription, TreasuryAsset } from '../modules/mock-data'
+
+// modules
+import { Asset } from './asset'
+
+interface ComponentProps {
+	address: string
+}
+
+export function Assets({ address }: ComponentProps) {
+	const { t } = useTranslation()
+
+	const [assetsData, setAssetsData] = useState<TreasuryAsset[]>([])
+
+	useEffect(() => {
+		const data = getAssetsSubscription()
+		setAssetsData(data)
+	}, [])
+
+	return (
+		<>
+			<Box py={3}>
+				<Typography variant="h5">{t('page:organisations:treasury:assets')}</Typography>
+			</Box>
+			<Grid container spacing={3}>
+				{assetsData.map(({ name, quantity, image }) => (
+					<Grid item xs={3} key={name}>
+						<Asset name={name} quantity={quantity} image={image}></Asset>
+					</Grid>
+				))}
+			</Grid>
+		</>
+	)
+}

pkg/app/src/components/TabPanels/Treasury/modules/chartLabel.tsx

@@ -0,0 +1,35 @@
+// libs
+import { Grid, Typography, Box } from '@mui/material'
+import React from 'react'
+import { useTheme } from '@mui/material/styles'
+
+interface ComponentProps {
+	name: string
+	color: string
+}
+
+export function ChartLabel({ name, color }: ComponentProps) {
+	const theme = useTheme()
+
+	return (
+		<Grid container>
+			<Grid item xs={3}>
+				<Box
+					sx={{
+						marginTop: '4px',
+						backgroundColor: color,
+						borderRadius: '50%',
+						width: '15px',
+						height: '15px',
+						marginRight: 0,
+					}}
+				/>
+			</Grid>
+			<Grid item xs={9}>
+				<Typography variant="caption" sx={{ fontWeight: 'bold', color: theme.palette.text.primary }}>
+					{name}
+				</Typography>
+			</Grid>
+		</Grid>
+	)
+}