add dev inputs

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

@@ -4,6 +4,7 @@ import PageTitle from '@/app/ui/page-title';
 import UploadSectionFile from '@/app/components/upload-section-file';
 import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
 import {StackedBarChart} from '@/app/components/StackedBarChart';
+import {TestComponent} from '@/app/components/test-component';
 
 const data = [
 	{
@@ -40,6 +41,7 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="image-protection" />
+			<TestComponent/>
 			<div className="split-blocks">
 				<ProtectionSummary fileType={FILE_TYPE}/>
 				<div className="protection-overview">

src/app/components/StackedBarChart.tsx

@@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
 import { pluralize } from '@/app/lib/pluralize';
+import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';
 
 type Files = {
 	data: {
@@ -31,10 +32,13 @@ export const StackedBarChart = ({ data }: Files) => {
 	const STROKE_COLOR = "#dfdede24";
 	const STROKE_WIDTH = 1;
 
-	const { totalChecks, totalViolations } = useMemo(() => ({
-		totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0),
-		totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0)
-	}), [data]);
+	/* 	const { totalChecks, totalViolations } = useMemo(() => ({
+					totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0),
+					totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0)
+		}), [data]); */
+
+	const totalChecks = useStoreWithDevtools(s => s.value1);
+	const totalViolations = useStoreWithDevtools(s => s.value2);
 
 	const renderBarWithPartialBorder = (props: BarShapeProps) => {
 		const { x, y, width, height, fill } = props;
@@ -208,13 +212,13 @@ export const StackedBarChart = ({ data }: Files) => {
 				<div className="protection-stat-total-info">
 					<div
 						className={`font-bold`}
-						style={{color: CHECKS_COLOR}}
+						style={{ color: CHECKS_COLOR }}
 					>
 						{totalChecks} {pluralizeCheks(totalChecks)}
 					</div>
 					<div
 						className={`font-bold`}
-						style={{color: VIOLATIONS_COLOR}}
+						style={{ color: VIOLATIONS_COLOR }}
 					>
 						{totalViolations} {pluralizeViolations(totalViolations)}
 					</div>

src/app/components/test-component.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';
+import { useTranslations } from 'next-intl';
+
+export function TestComponent() {
+	const t = useTranslations('Global');
+
+	const setText1 = useStoreWithDevtools(s => s.setValue1);
+	const setText2 = useStoreWithDevtools(s => s.setValue2);
+	const text1 = useStoreWithDevtools(s => s.value1);
+	const text2 = useStoreWithDevtools(s => s.value2);
+
+	return (
+		<div className="mb-4">
+			<div className='mb-2'>
+				<input
+					className='border rounded-md mr-1'
+					type="text"
+					onChange={(e) => {
+						setText1(Number(e.target.value))
+					}}
+				/>
+				<span>{t('check')} {text1}</span>
+			</div>
+			<div>
+				<input
+					className='border rounded-md mr-1'
+					type="text"
+					onChange={(e) => {
+						setText2(Number(e.target.value))
+					}}
+				/>
+				<span>{t('violation')} {text2}</span>
+			</div>
+		</div>
+	)
+}

src/app/stores/useStoreWithDevtools.ts

@@ -2,15 +2,27 @@ import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
 
 interface Store {
-	value: any
-	setValue: (value: any) => void
+	value1: number
+	setValue1: (value: number) => void
+	value2: number
+	setValue2: (value: number) => void
 }
 
 export const useStoreWithDevtools = create<Store>()(
 	devtools(
 		(set) => ({
-			value: 0,
-			setValue: (value) => set({ value }),
+			value1: 0,
+			setValue1: (value) => {
+				if ((typeof value === 'number')) {
+					set({ value1: value })
+				}
+			},
+			value2: 0,
+			setValue2: (value) => {
+				if ((typeof value === 'number')) {
+					set({ value2: value })
+				}
+			},
 		}),
 		{
 			name: 'DevStore', // имя для DevTools

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

@@ -2,10 +2,10 @@
 
 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';
 import { pluralize } from '@/app/lib/pluralize';
+import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';
 
 type FilesInfo = {
 	totalSize: number;
@@ -15,7 +15,9 @@ type FilesInfo = {
 
 export default function ProtectionSummary({ fileType }: { fileType: string }) {
 	const t = useTranslations('Global');
-	console.log(fileType);
+	const CHECKS = useStoreWithDevtools(s => s.value1);
+	const VIOLATIONS = useStoreWithDevtools(s => s.value2);
+
 
 	const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => {
 		switch (fileType) {
@@ -85,9 +87,6 @@ export default function ProtectionSummary({ fileType }: { fileType: string }) {
 		return pluralize(number, translate[0], translate[1], translate[2]);
 	};
 
-	const CHECKS = 6;
-	const VIOLATIONS = 2;
-
 	return (
 		<div className="protection-overview grow">
 			<h3>{t('protecting-your-content')}</h3>