@elyx-code/editor-ui 0.0.2

package/src/components/circular-image-upload/circular-image-upload.css

@@ -0,0 +1,69 @@
+.circular-profile-pic-container,
+.circular-profile-pic {
+  color: transparent;
+  transition: all 0.3s ease;
+  display: flex;
+  position: relative;
+  transition: all 0.3s ease;
+  margin-left: 5px;
+}
+
+.circular-profile-pic input {
+  display: none;
+}
+
+.standalone-profile-picture {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border-radius: 100px;
+  overflow: hidden;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
+}
+
+.circular-profile-pic img {
+  position: absolute;
+  object-fit: cover;
+  width: 120px;
+  height: 120px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
+  border-radius: 100px;
+  z-index: 0;
+}
+
+.circular-profile-pic .profile-pic_hover-label,
+.circular-profile-pic .profile-pic_loader-container,
+.circular-profile-pic .profile-pic_drag-label {
+  cursor: pointer;
+  height: 120px;
+  width: 120px;
+  text-align: center;
+}
+
+.circular-profile-pic .profile-pic_drag-label {
+  z-index: 1;
+}
+
+.circular-profile-pic:hover .profile-pic_hover-label,
+.circular-profile-pic .profile-pic_loader-container,
+.circular-profile-pic .profile-pic_dragover-active.profile-pic_drag-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 2;
+  color: rgb(250, 250, 250);
+  transition: background-color 0.2s ease-in-out;
+  border-radius: 100px;
+  margin-bottom: 0;
+}
+
+.circular-profile-pic .profile-pic_drag-label {
+  position: absolute;
+}
+
+.circular-profile-pic span {
+  display: inline-flex;
+  padding: 0.2em;
+  height: 2em;
+}

package/src/components/costs/CostsDialog.tsx

@@ -0,0 +1,459 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import Chart from 'chart.js/auto';
+import { getAccessToken } from '../../auth';
+import Button from '../../lib/button/Button';
+import { formatCurrency } from '../../localization';
+import { resolveResourceNameFromType } from '../publishing/utils';
+import { getProject } from '@elyx-code/project-logic-tree';
+import {
+	calculatePercentageDifference,
+	daysUntil,
+	firstDayOfCurrentMonth,
+	firstDayOfNextMonth,
+	formatDate,
+	formatDateShort,
+	getMonthRange,
+} from '../../utils/date';
+import HelpIconButton from '../dialogs/help/help-icon/HelpIconButton';
+import HistoryIcon from '../../assets/versions.svg';
+import axios from 'axios';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../../config';
+import { useWorkspaceStore } from '../../store/workspace';
+import { EditorService } from '../../services/editor';
+
+interface ICostsDialogProps {
+	project: EditorService;
+	onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+// updated initChart to take the canvas element in:
+function initChart(costs: any, canvas: HTMLCanvasElement): Chart {
+	Logger.log('initChart', costs);
+	const color_1 = '#FFC9C9';
+	const color_2 = '#E8FFED';
+	const color_3 = '#D8F0FF';
+	const color_4 = '#FFF7B1';
+	const color_5 = '#EFD6FF';
+
+	const darker_color_1 = '#ffa8a8';
+	const darker_color_2 = '#affabf';
+	const darker_color_3 = '#a2dafc';
+	const darker_color_4 = '#fcf081';
+	const darker_color_5 = '#dba1ff';
+
+	const colors = {
+		color_1,
+		color_2,
+		color_3,
+		color_4,
+		color_5,
+		darker_color_1,
+		darker_color_2,
+		darker_color_3,
+		darker_color_4,
+		darker_color_5,
+	};
+
+	const currentDate = new Date();
+
+	let usedLightColors = 0;
+	let usedDarkColors = 0;
+
+	const data = {
+		labels: costs.timePeriods.map((timePeriod: any) => {
+			const date = new Date(timePeriod.start);
+			return date < currentDate
+				? formatDateShort(date)
+				: '*' + formatDateShort(date);
+		}),
+		datasets: costs.datasets.map((dataset: any) => {
+			const backgroundColor = dataset.estimate
+				? colors[`color_${usedLightColors + 1}` as keyof typeof colors]
+				: colors[`darker_color_${usedDarkColors + 1}` as keyof typeof colors];
+
+			if (dataset.estimate) {
+				usedLightColors++;
+			} else {
+				usedDarkColors++;
+			}
+
+			const data = dataset.data.map((dataPoint: any) => dataPoint.cost.amount);
+
+			const resolvedLabel = dataset.estimate
+				? 'Estimate - ' + resolveResourceNameFromType(dataset.value)
+				: resolveResourceNameFromType(dataset.value);
+
+			return {
+				label: resolvedLabel,
+				data: data,
+				backgroundColor: backgroundColor,
+			};
+		}),
+	};
+
+	Logger.log('canvas', canvas);
+
+	return new Chart(canvas as HTMLCanvasElement, {
+		type: 'bar',
+		data: data,
+		options: {
+			plugins: {
+				title: {
+					display: false,
+					text: 'Monthly Project Costs',
+				},
+				legend: {
+					labels: {
+						filter: (item: any) => !item.text.includes('Estimate - '),
+					},
+				},
+			},
+			maintainAspectRatio: false,
+			responsive: true,
+			scales: {
+				x: {
+					stacked: true,
+				},
+				y: {
+					stacked: true,
+				},
+			},
+		},
+	});
+}
+
+const CostsDialog: React.FC<ICostsDialogProps> = ({ onClose, project }) => {
+	// 1) ref to the <canvas> element
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	// 2) ref to the Chart instance
+	const chartRef = useRef<Chart | null>(null);
+	const [costs, setCosts] = useState<any | null>(null);
+	const [lastMonthCost, setLastMonthCost] = useState<any | null>(null);
+	const [loading, setLoading] = useState<boolean>(true);
+	const { id: projectId } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const fetchCosts = async () => {
+		if (projectId) {
+			const startDate = firstDayOfCurrentMonth();
+			const endDate = firstDayOfNextMonth();
+
+			const response = await axios.get(
+				`${envConfig.API_BASE_URL}/pricing-service/v1/costs/${projectId}?startDate=${formatDate(
+					startDate
+				)}&endDate=${formatDate(endDate)}`,
+				{
+					headers: {
+						Authorization: 'Bearer ' + (await getAccessToken()),
+					},
+				}
+			);
+
+			return response.data.data;
+		}
+	};
+
+	const fetchLastMonthCosts = async () => {
+		if (projectId) {
+			const referenceDate = new Date();
+			referenceDate.setDate(1);
+			referenceDate.setMonth(referenceDate.getMonth() - 1);
+			const dateRange = getMonthRange(referenceDate);
+			const endDate = firstDayOfCurrentMonth();
+
+			const response = await axios.get(
+				`${envConfig.API_BASE_URL}/pricing-service/v1/costs/${projectId}?startDate=${formatDate(
+					dateRange.startDate
+				)}&endDate=${formatDate(endDate)}`,
+				{
+					headers: {
+						Authorization: 'Bearer ' + (await getAccessToken()),
+					},
+				}
+			);
+
+			return response.data.data;
+		}
+	};
+
+	useEffect(() => {
+		let isMounted = true;
+
+		async function init() {
+			Logger.log('init');
+			setLoading(true);
+			const [thisMonth, prevMonth] = await Promise.all([
+				fetchCosts(),
+				fetchLastMonthCosts(),
+			]);
+			if (!isMounted) return;
+
+			setCosts(thisMonth);
+			setLastMonthCost(prevMonth);
+			setLoading(false);
+
+			// destroy any existing chart on that canvas
+			if (chartRef.current) {
+				chartRef.current.destroy();
+				chartRef.current = null;
+			}
+
+			// only initialise if we have a real canvas
+			if (canvasRef.current) {
+				chartRef.current = initChart(thisMonth, canvasRef.current);
+			}
+		}
+
+		init();
+
+		return () => {
+			isMounted = false;
+			// cleanup: destroy the chart instance if it exists
+			if (chartRef.current) {
+				chartRef.current.destroy();
+				chartRef.current = null;
+			}
+		};
+	}, [projectId]);
+
+	const costsHaveLoaded = !!lastMonthCost && !!costs;
+	const nextBillingDate = firstDayOfNextMonth();
+	const daysLeftUntilNextBilling = daysUntil(nextBillingDate);
+	const percentageDifferenceBetweenMonths = calculatePercentageDifference(
+		parseInt(lastMonthCost?.totalSoFar?.amount),
+		parseInt(costs?.totalEndOfPeriodEstimate?.amount)
+	);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+				<button className='dialog_back_button' onClick={onClose}>
+					<i className='fa-solid fa-arrow-left' />
+				</button>
+				<h1 style={{ margin: '0px', fontWeight: 500, fontSize: '28px' }}>
+					Project costs
+				</h1>
+				<HelpIconButton article='costs-calculation' project={project} />
+			</div>
+			<a
+				style={{
+					display: 'flex',
+					gap: '6px',
+					marginLeft: '42px',
+					textDecoration: 'none',
+					alignItems: 'center',
+				}}
+				href='#'
+				onClick={(event) => {
+					event.preventDefault();
+					navigate(`${project?.editorBasePath}/transaction-history`);
+				}}
+			>
+				<img src={HistoryIcon} alt='History' />
+				<p style={{ margin: '0px', color: 'rgba(0,0,0,0.7)' }}>
+					Billing history
+				</p>
+			</a>
+			<div style={{ flex: 1, margin: '0 42px', marginTop: '30px' }}>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						minHeight: '80%',
+						height: '100%',
+					}}
+				>
+					<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+						<h3
+							style={{
+								display: 'flex',
+								gap: '6px',
+								fontWeight: 'normal',
+								margin: '0px',
+							}}
+						>
+							Monthly project costs
+						</h3>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							-
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Tax included
+						</p>
+					</span>
+					<div
+						style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+					>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							<u>Note:</u> After the current date, the costs are estimated based
+							on the current usage. Dates are marked with a{' '}
+							<b style={{ color: 'black' }}>*</b>
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Your monthly bill is calculated and issued on the last day of the
+							month based on the usage.
+						</p>
+					</div>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'start',
+							alignItems: 'center',
+							marginTop: '24px',
+							gap: '24px',
+							marginBottom: '14px',
+						}}
+					>
+						<span style={{ color: 'rgba(0,0,0,0.54)' }}>
+							<h5 style={{ margin: '0px', fontWeight: 500 }}>Last month:</h5>
+							<h3 style={{ margin: '0px', fontWeight: 500, fontSize: '22px' }}>
+								{!lastMonthCost?.totalSoFar?.amount
+									? '$ -'
+									: formatCurrency(lastMonthCost?.totalSoFar?.amount, 'USD')}
+							</h3>
+						</span>
+						<span>
+							<h5 style={{ margin: '0px', fontWeight: 500 }}>
+								Current month so far:
+							</h5>
+							<h3 style={{ margin: '0px', fontWeight: 500, fontSize: '22px' }}>
+								{!costs?.totalSoFar?.amount
+									? '$ -'
+									: formatCurrency(costs?.totalSoFar?.amount, 'USD')}
+							</h3>
+						</span>
+						<span style={{ color: 'rgba(0,0,0,0.54)' }}>
+							<h5 style={{ margin: '0px', fontWeight: 500 }}>
+								Forecast at end of month:
+							</h5>
+							<span
+								style={{ display: 'flex', gap: '6px', alignItems: 'self-end' }}
+							>
+								<h3
+									style={{ margin: '0px', fontWeight: 500, fontSize: '22px' }}
+								>
+									{!costs?.totalEndOfPeriodEstimate?.amount
+										? '$ -'
+										: formatCurrency(
+												costs?.totalEndOfPeriodEstimate?.amount,
+												'USD'
+										  )}
+								</h3>
+								<p
+									style={{
+										margin: '0px',
+										fontSize: '12px',
+										color: 'rgba(0,0,0,0.54)',
+										paddingBottom: '4px',
+									}}
+								>
+									{costsHaveLoaded
+										? percentageDifferenceBetweenMonths > 0
+											? `Up ${percentageDifferenceBetweenMonths.toFixed(2)}%`
+											: `Down ${percentageDifferenceBetweenMonths * -1}%`
+										: ''}
+								</p>
+							</span>
+						</span>
+						<span style={{ color: 'rgba(0,0,0,0.54)' }}>
+							<h5 style={{ margin: '0px', fontWeight: 500 }}>Next bill:</h5>
+							<span
+								style={{ display: 'flex', gap: '6px', alignItems: 'self-end' }}
+							>
+								<h3
+									style={{ margin: '0px', fontWeight: 500, fontSize: '22px' }}
+								>
+									{daysLeftUntilNextBilling === 0
+										? 'Today'
+										: `${daysLeftUntilNextBilling} days`}
+								</h3>
+								<p
+									style={{
+										margin: '0px',
+										fontSize: '12px',
+										color: 'rgba(0,0,0,0.54)',
+										paddingBottom: '4px',
+									}}
+								>{`on ${nextBillingDate.toDateString()}`}</p>
+							</span>
+						</span>
+					</div>
+					<div style={{ maxHeight: '380px', width: '100%', height: '100%' }}>
+						{loading && (
+							<Box
+								sx={{
+									display: 'flex',
+									flexDirection: 'column',
+									gap: 6,
+									height: '100%',
+									width: '100%',
+									alignItems: 'center',
+									justifyContent: 'center',
+								}}
+							>
+								<CircularProgress size={120} thickness={2} />
+
+								<Typography variant='h6'>Loading costs data...</Typography>
+							</Box>
+						)}
+						<canvas ref={canvasRef} id='costs-chart' />
+					</div>
+				</div>
+			</div>
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button onClick={() => navigate('editor/' + projectId)}>Back</Button>
+			</div>
+		</div>
+	);
+};
+
+export default CostsDialog;