update user files info

src/app/[locale]/pages/marking-audio/page.tsx

@@ -46,7 +46,7 @@ export default async function Page() {
 		<div>
 			<PageTitle title="audio-protection" />
 			<div className="split-blocks">
-				<ProtectionSummary />
+				<ProtectionSummary fileType={FILE_TYPE}/>
 				<div className="protection-overview">
 					<StackedBarChart data={data} />
 				</div>

src/app/[locale]/pages/marking-photo/page.tsx

@@ -41,7 +41,7 @@ export default async function Page() {
 		<div>
 			<PageTitle title="image-protection" />
 			<div className="split-blocks">
-				<ProtectionSummary />
+				<ProtectionSummary fileType={FILE_TYPE}/>
 				<div className="protection-overview">
 					<StackedBarChart data={data} />
 				</div>

src/app/[locale]/pages/marking-video/page.tsx

@@ -46,7 +46,7 @@ export default async function Page() {
 		<div>
 			<PageTitle title="video-protection" />
 			<div className="split-blocks">
-				<ProtectionSummary />
+				<ProtectionSummary fileType={FILE_TYPE}/>
 				<div className="protection-overview">
 					<StackedBarChart data={data} />
 				</div>

src/app/[locale]/pages/my-content/page.tsx

@@ -1,22 +1,13 @@
 import MyContentInfoBlock from '@/app/ui/my-content/my-content-info-block';
-import { PieChartComponent } from '@/app/components/PieChartComponent';
 import FilesTable from '@/app/ui/dashboard/files-table';
-
-const data = [
-	{ name: 'images', value: 33, color: '#f08c00' },
-	{ name: 'videos', value: 50, color: '#2f9e44' },
-	{ name: 'audios', value: 25, color: '#1971c2' },
-	{ name: 'documents', value: 25, color: '#a561e6' },
-];
+import MyContentPieChart from '@/app/ui/my-content/my-content-pie-chart';
 
 export default function Page() {
 	return (
 		<>
 			<div className="split-blocks">
 				<MyContentInfoBlock />
-				<div className="protection-overview">
-					<PieChartComponent data={data} />
-				</div>
+				<MyContentPieChart />
 			</div>
 			<FilesTable fileType={'all'} />
 		</>

src/app/actions/action.ts

@@ -29,3 +29,36 @@ export async function getUserData() {
 		console.error('error');
 	}
 }
+
+export async function getUserFilesInfo() {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 20005,
+				message_body: {
+					action: "user_files_info",
+					token: token
+				}
+			}),
+			headers: {
+				"Content-Type": "application/json",
+				"Accept": "application/json"
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
+			} else {
+				throw parsed.message_code;
+			}
+		}
+	} catch (error) {
+		console.error(`error: ${error}`);
+	}
+}

src/app/actions/auth.ts

@@ -69,8 +69,6 @@ export async function authorization(
 		};
 	}
 
-	console.log(`${API_BASE_URL}/api/v1/data`);
-
 	try {
 		const { email, password } = validatedFields.data;
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {

src/app/components/PieChartComponent.tsx

@@ -3,12 +3,13 @@
 import { useTranslations } from 'next-intl';
 import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 
-export const PieChartComponent = ({ data }: {
+export const PieChartComponent = ({ data, show }: {
 	data: {
 		name: string,
 		value: number,
 		color: string
-	}[]
+	}[],
+	show: number | string
 }) => {
 	const t = useTranslations('Global');
 
@@ -19,7 +20,7 @@ export const PieChartComponent = ({ data }: {
 			<ResponsiveContainer width={200} height={200}>
 				<PieChart>
 					<text x={100} y={75} className="pie-char-text">
-						0
+						{show}
 					</text>
 					<text x={100} y={100} className="pie-char-text">
 						{t('out-of')}

src/app/components/upload-section-file.tsx

@@ -294,6 +294,7 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
 			if (chunkStatus.message_body.missing_chunks === 0) {
 				setIsFileUploaded(true);
 				await queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
+				await queryClient.invalidateQueries({ queryKey: ['userFilesInfo'] });
 			} else {
 				throw new Error('Not all chunks were uploaded');
 			}

src/app/lib/convertBytes.ts

@@ -0,0 +1,15 @@
+export function convertBytes(bytes: number) {
+	const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+	if (bytes === 0) return '0 B';
+
+	let i = 0;
+	let value = bytes;
+
+	while (value >= 1024 && i < units.length - 1) {
+		value /= 1024;
+		i++;
+	}
+
+	return `${value.toFixed(1)} ${units[i]}`;
+}

src/app/lib/prefetch-queries.ts

@@ -1,5 +1,5 @@
 import { QueryClient } from '@tanstack/react-query';
-import { getUserData } from '@/app/actions/action';
+import { getUserData, getUserFilesInfo } from '@/app/actions/action';
 import { getUserFilesData } from '@/app/actions/fileEntity';
 
 export async function prefetchLayoutQueries(queryClient: QueryClient) {
@@ -16,5 +16,9 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) {
 			},
 			staleTime: 30 * 1000
 		}),
+		queryClient.prefetchQuery({
+			queryKey: ['userFilesInfo'],
+			queryFn: () => getUserFilesInfo()
+		}),
 	]);
 }

src/app/ui/dashboard/protection-overview.tsx

@@ -1,29 +1,30 @@
 'use client'
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { PieChartComponent } from '@/app/components/PieChartComponent';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import { useQuery } from '@tanstack/react-query';
-import { getUserFilesData } from '@/app/actions/fileEntity';
-
-
-const data = [
-	{ name: 'images', value: 33, color: '#f08c00' },
-	{ name: 'videos', value: 50, color: '#2f9e44' },
-	{ name: 'audios', value: 25, color: '#1971c2' },
-];
-
+import { getUserFilesInfo } from '@/app/actions/action';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 type FilesInfo = {
-	totalSize: string;
+	totalSize: number;
 	totalCount: number;
+	imageQuantity: number;
+	videoQuantity: number;
+	audioQuantity: number;
 };
 
 
 export default function ProtectionOverview() {
 	const [isOpen, setIsOpen] = useState(false);
+	const [filesCount, setFilesCount] = useState([
+		{ name: 'images', value: 0, color: '#f08c00' },
+		{ name: 'videos', value: 0, color: '#2f9e44' },
+		{ name: 'audios', value: 0, color: '#1971c2' },
+	]);
 	const t = useTranslations('Global');
 	const [openDropDownList, setOpenDropDownList] = useState(false);
 	const dropDownList = useRef(null);
@@ -37,26 +38,55 @@ export default function ProtectionOverview() {
 		isError,
 		error,
 	} = useQuery<{
-		formattedTotalSize: string,
-		totalCount: number
+		all_files_size: number,
+		all_files_quantity: number,
+		images_quantity: number,
+		videos_quantity: number,
+		audios_quantity: number
 	}, Error, FilesInfo>({
-		queryKey: ['userFilesData'],
-		queryFn: getUserFilesData,
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
 		select: (data): FilesInfo => {
 			if (!data) {
 				return {
-					totalSize: '0',
-					totalCount: 0
+					totalSize: 0,
+					totalCount: 0,
+					imageQuantity: 0,
+					videoQuantity: 0,
+					audioQuantity: 0,
 				}
 			}
 
 			return {
-				totalSize: data.formattedTotalSize,
-				totalCount: (data.totalCount)
+				totalSize: data.all_files_size,
+				totalCount: data.all_files_quantity,
+				imageQuantity: data.images_quantity,
+				videoQuantity: data.videos_quantity,
+				audioQuantity: data.audios_quantity,
 			}
 		},
 	});
 
+	useEffect(() => {
+		setFilesCount([
+			{
+				name: 'images',
+				value: filesInfo?.imageQuantity ? filesInfo?.imageQuantity : 0,
+				color: '#f08c00'
+			},
+			{
+				name: 'videos',
+				value: filesInfo?.videoQuantity ? filesInfo?.videoQuantity : 0,
+				color: '#2f9e44'
+			},
+			{
+				name: 'audios',
+				value: filesInfo?.audioQuantity ? filesInfo?.audioQuantity : 0,
+				color: '#1971c2'
+			},
+		])
+	}, [filesInfo]);
+
 	return (
 		<div className="protection-overview">
 			<h3>{t('protecting-your-content')}</h3>
@@ -115,11 +145,11 @@ export default function ProtectionOverview() {
 				)}
 				{isOpen ? (
 					<div className="protection-stat total-usage">
-						<PieChartComponent data={data} />
+						<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
 					</div>
 				) : (
 					<div className="protection-stat total-usage">
-						<div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
+						<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
 						<div className="protection-stat-label">
 							{t('disk-space-used')}
 						</div>

src/app/ui/dashboard/stats-grid.tsx

@@ -1,8 +1,24 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import {convertBytes} from '@/app/lib/convertBytes';
+
 export default function StatsGrid() {
 	const t = useTranslations("Global");
 
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
 	return (
 		<div className="block-wrapper stats-wrapper">
 			<h3>
@@ -30,10 +46,10 @@ export default function StatsGrid() {
 					{t('images')}
 				</div>
 				<div className="stats-item second-row">
-					0
+					{filesInfo.images_quantity ? filesInfo.images_quantity : 0}
 				</div>
 				<div className="stats-item second-row">
-					0
+					{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
 				</div>
 				<div className="stats-item second-row">
 					0
@@ -47,10 +63,10 @@ export default function StatsGrid() {
 					{t('videos')}
 				</div>
 				<div className="stats-item">
-					0
+					{filesInfo.videos_quantity ? filesInfo.videos_quantity : 0}
 				</div>
 				<div className="stats-item">
-					0
+					{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
 				</div>
 				<div className="stats-item">
 					0
@@ -64,10 +80,10 @@ export default function StatsGrid() {
 					{t('audios')}
 				</div>
 				<div className="stats-item last-row">
-					0
+					{filesInfo.audios_quantity ? filesInfo.audios_quantity : 0}
 				</div>
 				<div className="stats-item last-row">
-					0
+					{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
 				</div>
 				<div className="stats-item last-row">
 					0

src/app/ui/marking-page/protection-summary.tsx

@@ -3,15 +3,43 @@
 import { useTranslations } from 'next-intl';
 import { useQuery } from '@tanstack/react-query';
 import { getUserFilesData } from '@/app/actions/fileEntity';
+import { getUserFilesInfo } from '@/app/actions/action';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 type FilesInfo = {
-	totalSize: string;
+	totalSize: number;
 	totalCount: number;
 };
 
 
-export default function ProtectionSummary() {
+export default function ProtectionSummary({ fileType }: { fileType: string }) {
 	const t = useTranslations('Global');
+	console.log(fileType);
+
+	const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => {
+		switch (fileType) {
+			case 'image':
+				return {
+					totalSize: 'images_size',
+					totalCount: 'images_quantity'
+				};
+			case 'video':
+				return {
+					totalSize: 'videos_size',
+					totalCount: 'videos_quantity'
+				};
+			case 'audio':
+				return {
+					totalSize: 'audios_size',
+					totalCount: 'audios_quantity'
+				};
+			default:
+				return {
+					totalSize: 'all_files_size',
+					totalCount: 'all_files_quantity'
+				};
+		}
+	};
 
 	const {
 		data: filesInfo,
@@ -19,24 +47,26 @@ export default function ProtectionSummary() {
 		isError,
 		error,
 	} = useQuery<{
-		formattedTotalSize: string,
-		totalCount: number
+		all_files_size: number,
+		all_files_quantity: number
 	}, Error, FilesInfo>({
-		queryKey: ['userFilesData'],
-		queryFn: getUserFilesData,
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
 		select: (data): FilesInfo => {
 			if (!data) {
 				return {
-					totalSize: '0',
+					totalSize: 0,
 					totalCount: 0
 				}
 			}
 
+			const fields = getFileTypeFields(fileType);
+
 			return {
-				totalSize: data.formattedTotalSize,
-				totalCount: (data.totalCount)
+				totalSize: data[fields.totalSize as keyof typeof data],
+				totalCount: data[fields.totalCount as keyof typeof data]
+			}
 		}
-		},
 	});
 
 
@@ -56,7 +86,7 @@ export default function ProtectionSummary() {
 					<div className="protection-stat-label">{t('violations')}</div>
 				</div>
 				<div className="protection-stat total-usage">
-					<div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
+					<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
 					<div className="protection-stat-label">
 						{t('disk-space-used')}
 					</div>

src/app/ui/my-content/my-content-info-block.tsx

@@ -1,6 +1,72 @@
+'use client'
+
 import { IconDocument, IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import { useTranslations } from 'next-intl';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 export default function MyContentInfoBlock() {
+	const t = useTranslations('Global');
+
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
+	const fileTypeSizePercents = () => {
+		if (!filesInfo?.all_files_size) {
+			return {
+				images: 0,
+				videos: 0,
+				audios: 0,
+				documents: 0,
+			};
+		}
+
+		const sizes = {
+			images: filesInfo.images_size || 0,
+			videos: filesInfo.videos_size || 0,
+			audios: filesInfo.audios_size || 0,
+			documents: filesInfo.documents_size || 0,
+		};
+
+		const total = filesInfo.all_files_size;
+
+		const rawPercents = {
+			images: (sizes.images / total) * 100,
+			videos: (sizes.videos / total) * 100,
+			audios: (sizes.audios / total) * 100,
+			documents: (sizes.documents / total) * 100,
+		};
+
+		const roundedPercents = {
+			images: Math.floor(rawPercents.images),
+			videos: Math.floor(rawPercents.videos),
+			audios: Math.floor(rawPercents.audios),
+			documents: Math.floor(rawPercents.documents),
+		};
+
+		const remainder = 100 - Object.values(roundedPercents).reduce((a, b) => a + b, 0);
+
+		const fractions = Object.entries(rawPercents).map(([key, value]) => ({
+			key,
+			fraction: value - Math.floor(value)
+		})).sort((a, b) => b.fraction - a.fraction);
+
+		const result = { ...roundedPercents };
+		for (let i = 0; i < remainder; i++) {
+			result[fractions[i].key as keyof typeof result]++;
+		}
+
+		return result;
+	};
+
 	return (
 		<div className="block-wrapper auto grow">
 			<div className="file-stats-container">
@@ -11,13 +77,17 @@ export default function MyContentInfoBlock() {
 								<IconImageFile />
 							</div>
 							<div className="file-stat-info">
-								<h4 className="file-stat-title">Image</h4>
-								<span className="file-stat-usage">0%</span>
+								<h4 className="file-stat-title">{t('images')}</h4>
+								<span className="file-stat-usage">{fileTypeSizePercents().images}%</span>
 							</div>
 						</div>
 						<div className="file-stat-details">
-							<span className="file-stat-count">0 files</span>
-							<span className="file-stat-size">0 GB</span>
+							<span className="file-stat-count">
+								{filesInfo.images_quantity ? filesInfo.images_quantity : 0} {t('files')}
+							</span>
+							<span className="file-stat-size">
+								{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
+							</span>
 						</div>
 					</div>
 
@@ -27,13 +97,17 @@ export default function MyContentInfoBlock() {
 								<IconVideoFile />
 							</div>
 							<div className="file-stat-info">
-								<h4 className="file-stat-title">Videos</h4>
-								<span className="file-stat-usage">0%</span>
+								<h4 className="file-stat-title">{t('videos')}</h4>
+								<span className="file-stat-usage">{fileTypeSizePercents().videos}%</span>
 							</div>
 						</div>
 						<div className="file-stat-details">
-							<span className="file-stat-count">0 files</span>
-							<span className="file-stat-size">0 GB</span>
+							<span className="file-stat-count">
+								{filesInfo.videos_quantity ? filesInfo.videos_quantity : 0} {t('files')}
+							</span>
+							<span className="file-stat-size">
+								{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
+							</span>
 						</div>
 					</div>
 
@@ -43,13 +117,17 @@ export default function MyContentInfoBlock() {
 								<IconAudioFile />
 							</div>
 							<div className="file-stat-info">
-								<h4 className="file-stat-title">Audios</h4>
-								<span className="file-stat-usage">0%</span>
+								<h4 className="file-stat-title">{t('audios')}</h4>
+								<span className="file-stat-usage">{fileTypeSizePercents().audios}%</span>
 							</div>
 						</div>
 						<div className="file-stat-details">
-							<span className="file-stat-count">0 files</span>
-							<span className="file-stat-size">0 GB</span>
+							<span className="file-stat-count">
+								{filesInfo.audios_quantity ? filesInfo.audios_quantity : 0} {t('files')}
+							</span>
+							<span className="file-stat-size">
+								{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
+							</span>
 						</div>
 					</div>
 
@@ -59,13 +137,17 @@ export default function MyContentInfoBlock() {
 								<IconDocument />
 							</div>
 							<div className="file-stat-info">
-								<h4 className="file-stat-title">Documents</h4>
-								<span className="file-stat-usage">0%</span>
+								<h4 className="file-stat-title">{t('documents')}</h4>
+								<span className="file-stat-usage">{fileTypeSizePercents().documents}%</span>
 							</div>
 						</div>
 						<div className="file-stat-details">
-							<span className="file-stat-count">0 files</span>
-							<span className="file-stat-size">0 GB</span>
+							<span className="file-stat-count">
+								{filesInfo.documents_quantity ? filesInfo.documents_quantity : 0} {t('files')}
+							</span>
+							<span className="file-stat-size">
+								{filesInfo.documents_size ? convertBytes(filesInfo.documents_size) : 0}
+							</span>
 						</div>
 					</div>
 				</div>

src/app/ui/my-content/my-content-pie-chart.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { PieChartComponent } from '@/app/components/PieChartComponent';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import { useState, useEffect } from 'react';
+import {convertBytes} from '@/app/lib/convertBytes';
+
+
+type FilesInfo = {
+	totalSize: number;
+	totalCount: number;
+	imageQuantity: number;
+	videoQuantity: number;
+	audioQuantity: number;
+	documentQuantity: number;
+};
+
+export default function MyContentPieChart() {
+	const [filesCount, setFilesCount] = useState([
+		{ name: 'images', value: 0, color: '#f08c00' },
+		{ name: 'videos', value: 0, color: '#2f9e44' },
+		{ name: 'audios', value: 0, color: '#1971c2' },
+		{ name: 'documents', value: 0, color: '#a561e6' },
+	]);
+
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery<{
+		all_files_size: number,
+		all_files_quantity: number,
+		images_quantity: number,
+		videos_quantity: number,
+		audios_quantity: number,
+		documents_quantity: number,
+	}, Error, FilesInfo>({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+		select: (data): FilesInfo => {
+			if (!data) {
+				return {
+					totalSize: 0,
+					totalCount: 0,
+					imageQuantity: 0,
+					videoQuantity: 0,
+					audioQuantity: 0,
+					documentQuantity: 0
+				}
+			}
+
+			return {
+				totalSize: data.all_files_size,
+				totalCount: data.all_files_quantity,
+				imageQuantity: data.images_quantity,
+				videoQuantity: data.videos_quantity,
+				audioQuantity: data.audios_quantity,
+				documentQuantity: data.documents_quantity,
+			}
+		},
+	});
+
+	useEffect(() => {
+		setFilesCount([
+			{
+				name: 'images',
+				value: filesInfo?.imageQuantity ? filesInfo?.imageQuantity : 0,
+				color: '#f08c00'
+			},
+			{
+				name: 'videos',
+				value: filesInfo?.videoQuantity ? filesInfo?.videoQuantity : 0,
+				color: '#2f9e44'
+			},
+			{
+				name: 'audios',
+				value: filesInfo?.audioQuantity ? filesInfo?.audioQuantity : 0,
+				color: '#1971c2'
+			},
+			{
+				name: 'documents',
+				value: filesInfo?.documentQuantity ? filesInfo?.documentQuantity : 0,
+				color: '#a561e6'
+			},
+		])
+	}, [filesInfo]);
+
+	return (
+		<div className="protection-overview">
+			<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
+		</div>
+	)
+}

src/app/ui/payment/payment-tabs.tsx

@@ -9,7 +9,6 @@ import PaymentTabTransactionHistory from './payment-tab-transaction-history';
 export default function PaymentTabs() {
 	let [selectedTab, setSelectedTab] = useState('1');
 	function switchTabsHandler(tab: string) {
-		console.log('click');
 		setSelectedTab(tab);
 	}
 	return (