frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update user files info

Browse Source
This commit is contained in:
smanylov
2026-01-07 13:03:50 +07:00
parent 5597fe42a2
commit aa0f9398eb
16 changed files with 371 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/dashboard/protection-overview.tsx
+51 -21
View File
@@ -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
+22 -6
View File
@@ -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
+41 -11
View File
@@ -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
+98 -16
View File
@@ -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
+95
View File
@@ -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
-1
View File
@@ -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 (