realbox edit components

2025-05-24 23:02:52 +05:00
parent 417ab7dd74
commit ce2b8f3a62
7 changed files with 227 additions and 257 deletions
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "cross-env NEXT_PUBLIC_API_URL=https://cpcargo.uz next dev --port=3080",
+    "dev": "cross-env NEXT_PUBLIC_API_URL=https://cpost.felixits.uz next dev --port=3080",
    "build": "next build",
-    "build:dev": "cross-env NEXT_PUBLIC_API_URL=https://cpcargo.uz next build",
+    "build:dev": "cross-env NEXT_PUBLIC_API_URL=https://cpost.felixits.uz next build",
    "build:prod": "cross-env NEXT_PUBLIC_API_URL=https://api.cpost-express.uz next build",
    "start": "next start",
    "lint": "next lint",
--- a/src/data/real-box/real-box.model.ts
+++ b/src/data/real-box/real-box.model.ts
@@ -1,74 +1,44 @@
 export type BoxStatus = 'READY_TO_INVOICE' | 'READY';
+
 export const BoxStatusList: BoxStatus[] = ['READY_TO_INVOICE', 'READY'];

-export interface IBox {
-    packetNetWeight: string;
-    totalNetWeight: string;
-    cargoId: string;
-    passportName: string;
-    id: number;
-    partyName: string;
-    boxType: string;
-    name: string;
-    volume: string;
-    boxWeight: number;
-    brutto: number;
-    hasInvoice: boolean;
-    totalItems: number;
-    status: BoxStatus;
-    totalBrutto: number;
-}
-
-export interface IBoxDetail {
-    packet: {
-        id: number;
-        cargoId: string;
-        packetNetWeight: number;
-        passportName: string;
-        totalItems: number;
-        totalNetWeight: number;
-        partyName: string;
-        partyId: string;
-        boxType: string;
-        name: string;
-        volume: string;
-        boxWeight: number;
-        brutto: number;
-        hasInvoice: boolean;
-        status: BoxStatus;
-    };
-    client: {
-        passportId: number;
-        passportName: string;
-    };
-    items: [
-        {
-            id: number;
-            partyName: string;
+export interface IRealBox {
    boxName: string;
-            cargoId: string;
-            trekId: string;
-            name: string;
-            nameRu: string;
-            amount: number;
-            weight: number;
-            price: number;
-            totalPrice: number;
-            hasImage: boolean;
-            imageUrl: string | null;
-            packetName: string;
-            status: BoxStatus;
-        },
-    ];
+    id: number;
+    packetsCount: number;
+    partyName: string;
 }

-export type RealCreateBoxBodyType = {
-    partyName: string,
-    packetDtos: number[]
-};
+export interface IRealBoxDetail {
+    message: string;
+    data: {
+        boxName: string;
+        party: {
+            id: number;
+            name: string;
+        };
+        packets: Array<{
+            id: number;
+            packetName: string;
+        }>;
+    };
+}

-export type UpdateRealBoxBodyType = {
-    boxId: string,
-    partyName: string,
-    packetDtos: number[]
-};
+export interface RealCreateBoxBodyType {
+    partyName: string;
+    packetDtos: number[];
+}
+
+export interface UpdateRealBoxBodyType {
+    boxId: string;
+    partyName: string;
+    packetDtos: number[];
+}
+
+export interface FormValues {
+    partyName: string;
+    paketIds: Array<{ id: string | number }>;
+    id?: number;
+    boxId?: string;
+    partyId?: number;
+}
--- a/src/data/real-box/real-box.requests.ts
+++ b/src/data/real-box/real-box.requests.ts
@@ -2,7 +2,7 @@ import { IBox, UpdateBoxBodyType, IBoxDetail, BoxStatus } from '@/data/box/box.m
 import { CommonResponseType, PageAble } from '@/helpers/types';
 import { request } from '@/services/request';
 import axios from 'axios';
-import { RealCreateBoxBodyType, UpdateRealBoxBodyType } from './real-box.model';
+import { IRealBox, IRealBoxDetail, RealCreateBoxBodyType, UpdateRealBoxBodyType } from './real-box.model';

 export const real_box_requests = {
    async getAll(params?: {
@@ -10,27 +10,31 @@ export const real_box_requests = {
        sort?: string;
        direction?: string;
        cargoId?: string;
+        boxName?: string,
        partyId?: string | number;
        status?: BoxStatus;
    }) {
-        return request.get<CommonResponseType<PageAble<IBox>>>('/boxes/list', { params });
+        return request.get<CommonResponseType<PageAble<IRealBox>>>('/boxes/list', { params });
    },
    async create({ ...body }: RealCreateBoxBodyType) {
        return request.post<CommonResponseType>('/boxes/create', body);
    },
    async update({ boxId, ...body }: UpdateRealBoxBodyType) {
-        return request.put<CommonResponseType>('/packets/update', body, {
+        return request.put<CommonResponseType>('/boxes/change', body, {
            params: { boxId },
        });
    },
-    async find(params: { packetId?: number | string }) {
-        return request.get<CommonResponseType<IBoxDetail>>('/packets/find', { params });
+    async find(params: { boxId?: number | string }) {
+        return request.get<any>(`/boxes/find/${params.boxId}`,);
    },
-    async delete(params: { packetId: number | string }) {
-        return request.delete<CommonResponseType>('/packets/delete', { params });
+    async delete(params: { boxId: number | string }) {
+        return request.delete<CommonResponseType>('/boxes/delete', { params });
    },
-    async downloadExcel(params: { packetId: number | string }) {
-        return request.get<Blob>('/packets/download', { params, responseType: 'blob' });
+    async downloadExcel(params: { boxId: number | string }) {
+        return request.get<Blob>(`/boxes/download/`, { params });
+    },
+    async downloadQrCode(params: { boxId: number | string }) {
+        return request.get(`/qr/${params.boxId}`, { responseType: 'blob' });
    },
    async translateWithGoogleApi(params: { text: string }): Promise<string> {
        const response = await axios.post('https://translation.googleapis.com/language/translate/v2', undefined, {
--- a/src/routes/private/boxes-create/DashboardEditBox.tsx
+++ b/src/routes/private/boxes-create/DashboardEditBox.tsx
@@ -71,6 +71,7 @@ const DashboardEditBoxPage = (props: Props) => {
        }
    );

+    console.log(getOneBox, "pkets");

    if (getOneBox.loading || !getOneBox.data) {
        return <Loader p={8} size={96} />;
--- a/src/routes/private/real-boxes-create/DashboardCreateRealBox.tsx
+++ b/src/routes/private/real-boxes-create/DashboardCreateRealBox.tsx
@@ -1,25 +1,25 @@
 'use client';

 import BaseButton from '@/components/ui-kit/BaseButton';
+import BaseIconButton from '@/components/ui-kit/BaseIconButton';
 import { party_requests } from '@/data/party/party.requests';
+import { box_requests } from '@/data/box/box.requests';
+import { real_box_requests } from '@/data/real-box/real-box.requests';
 import { pageLinks } from '@/helpers/constants';
 import { notifyUnknownError } from '@/services/notification';
 import { Box, FormHelperText, Grid, Stack, Typography, styled } from '@mui/material';
+import { AddCircleRounded, Close } from '@mui/icons-material';
 import { useSearchParams } from 'next/navigation';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import BaseIconButton from '@/components/ui-kit/BaseIconButton';
-import { AddCircleRounded, Close } from '@mui/icons-material';
-import useRequest from '@/hooks/useRequest';
-import { useMyTranslation } from '@/hooks/useMyTranslation';
+import AsyncSelect from 'react-select/async';
 import { selectDefaultStyles } from '@/components/ui-kit/BaseReactSelect';
 import { useAuthContext } from '@/context/auth-context';
 import { useMyNavigation } from '@/hooks/useMyNavigation';
-import AsyncSelect from 'react-select/async';
-import { box_requests } from '@/data/box/box.requests';
-import { real_box_requests } from '@/data/real-box/real-box.requests';
-
+import { useMyTranslation } from '@/hooks/useMyTranslation';
+import { FormValues, RealCreateBoxBodyType, UpdateRealBoxBodyType } from '@/data/real-box/real-box.model';
 import get from 'lodash.get';
+import useRequest from '@/hooks/useRequest';

 const StyledCreateBox = styled(Box)`
  .item-row {
@@ -34,36 +34,24 @@ const StyledCreateBox = styled(Box)`
  }
 `;

-type Props = {
+interface Props {
    partiesData?: { value: number; label: string }[];
    initialValues?: {
-        id: number;
-        boxId: string;
-        box_name: string;
-        partyId: number;
-        partyName: string;
-        packetId: string;
-        products_list: {
-            id: number;
-            price: number | string;
-            cargoId: string;
-            trekId: string;
-            name: string;
-            nameRu: string;
-            amount: number;
-            weight: number;
-        }[];
+        id?: number;
+        boxId?: string;
+        partyId?: number;
+        partyName?: string;
+        paketIds?: Array<{ id: number; packetName: string }>;
    };
-};
+}

 const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
    const { user, isAdmin: isAdminUser } = useAuthContext();
-    const editMode = !!initialValues && !!initialValues.id;
-    const isAdmin = isAdminUser && editMode;
+    const editMode = !!initialValues?.id;
    const t = useMyTranslation();
    const params = useSearchParams();
-    const navigation = useMyNavigation();
-    const [partyId, setPartyId] = useState<number | string>("");
+    const { push } = useMyNavigation();
+    const [partyId, setPartyId] = useState<number | string>('');
    const [loading, setLoading] = useState(false);
    const helperRef = useRef<{
        finished: boolean;
@@ -82,20 +70,41 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
        control,
        handleSubmit,
        setValue,
+        reset,
        formState: { errors },
-    } = useForm<any>({
+    } = useForm<FormValues>({
        defaultValues: {
-            partyId: params.get('party_id') ? +params.get('party_id')! : '',
-            paketIds: editMode
-                ? [{ id: initialValues?.partyId }]
+            partyName: initialValues?.partyName || '',
+            paketIds: initialValues?.paketIds
+                ? initialValues.paketIds.map((paket) => ({ id: paket.id }))
                : params.get('party_id')
                    ? [{ id: +params.get('party_id')! }]
                    : [{ id: '' }],
-            ...initialValues,
+            id: initialValues?.id,
+            boxId: initialValues?.boxId,
+            partyId: initialValues?.partyId,
        },
    });

-    const pakets = useFieldArray({
+    // Reset form when initialValues change (for edit mode)
+    useEffect(() => {
+        if (initialValues) {
+            reset({
+                partyName: initialValues.partyName || '',
+                paketIds: initialValues.paketIds
+                    ? initialValues.paketIds.map((paket) => ({ id: paket.id }))
+                    : [{ id: '' }],
+                id: initialValues.id,
+                boxId: initialValues.boxId,
+                partyId: initialValues.partyId,
+            });
+            if (initialValues.partyId) {
+                setPartyId(initialValues.partyId);
+            }
+        }
+    }, [initialValues, reset]);
+
+    const { fields, append, remove } = useFieldArray({
        control,
        name: 'paketIds',
        keyName: 'key',
@@ -109,37 +118,34 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                partyId: partyId,
            }),
        {
-            selectData(data) {
-                return data?.data?.data;
+            selectData: (data) => data?.data?.data ?? [],
+            enabled: !!partyId,
        },
-        }
    );

-    const { data: list } = useMemo(() => {
-        if (getBoxesQuery.data?.data) {
-            return {
-                data: getBoxesQuery.data.data.filter((box: any) => box.status === 'READY_TO_INVOICE'),
-            };
-        }
-        return { data: [] };
-    }, [getBoxesQuery, partyId]);
+    const list = useMemo(() => {
+        return getBoxesQuery.data?.data.filter((box: any) => box.status === 'READY_TO_INVOICE') ?? [];
+    }, [getBoxesQuery.data]);

    useEffect(() => {
        if (partyId) {
            getBoxesQuery.refetch();
        }
-    }, [partyId]);
+    }, [partyId, getBoxesQuery.refetch]);

-    const { data: defaultParties } = useRequest(() => party_requests.getAll({ status: 'COLLECTING' }), {
+    const { data: defaultParties } = useRequest(
+        () => party_requests.getAll({ status: 'COLLECTING' }),
+        {
            enabled: true,
-        selectData(data) {
-            return data.data.data.data.map(p => ({ value: p.id, label: p.name }));
-        },
-        onSuccess(data) {
+            selectData: (data) =>
+                data.data.data.data.map((p: any) => ({ value: p.id, label: p.name })),
+            onSuccess: (data) => {
                if (!editMode && data?.data?.data?.data?.[0]) {
-                helperRef.current.settedDefaultParty = data.data.data.data[0];
-                setValue('partyId', data.data.data.data[0].id);
-                setValue('paketIds[0].id', data.data.data.data[0].id);
+                    const defaultParty = data.data.data.data[0];
+                    helperRef.current.settedDefaultParty = defaultParty;
+                    setValue('partyName', defaultParty.name);
+                    setValue('paketIds.0.id', defaultParty.id); // Use dot notation
+                    setPartyId(defaultParty.id);
                }
                helperRef.current.partyFinished = true;
                if (helperRef.current.clientFinished) {
@@ -147,16 +153,17 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                }
            },
            placeholderData: [],
-    });
+        },
+    );

-    const onSubmit = handleSubmit(async values => {
+    const onSubmit = handleSubmit(async (values) => {
        try {
            setLoading(true);
-            const packetDtos = values.paketIds.map((paket: any) => paket.id).filter((id: any) => id);
+            const packetDtos = values.paketIds.map((paket) => Number(paket.id)).filter((id) => id);

            if (editMode) {
                const updateBody: UpdateRealBoxBodyType = {
-                    boxId: initialValues?.boxId,
+                    boxId: initialValues!.boxId!,
                    partyName: values.partyName,
                    packetDtos,
                };
@@ -169,7 +176,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                await real_box_requests.create(createBody);
            }

-            navigation.push(pageLinks.dashboard.boxes.index);
+            push(pageLinks.dashboard.real_boxes.index);
        } catch (error) {
            notifyUnknownError(error);
        } finally {
@@ -177,18 +184,25 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
        }
    });

-    const partyOptions = (inputValue: string) => {
-        return party_requests.getAll({ status: 'COLLECTING', partyName: inputValue }).then(res => {
-            return res.data.data.data.map(p => ({ label: p.name, value: p.id }));
+    const partyOptions = async (inputValue: string) => {
+        try {
+            const res = await party_requests.getAll({
+                status: 'COLLECTING',
+                partyName: inputValue,
            });
+            return res.data.data.data.map((p: any) => ({ label: p.name, value: p.id }));
+        } catch (error) {
+            notifyUnknownError(error);
+            return [];
+        }
    };

    const appendPaket = () => {
-        pakets.append({ id: '' });
+        append({ id: '' });
    };

    const removePaket = (index: number) => {
-        pakets.remove(index);
+        remove(index);
    };

    return (
@@ -201,31 +215,31 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                backgroundColor: '#fff',
            }}
        >
-            <Box component={'form'} onSubmit={onSubmit}>
-                <Typography variant='h5' mb={3.5}>
+            <Box component="form" onSubmit={onSubmit}>
+                <Typography variant="h5" mb={3.5}>
                    {editMode ? t('update_box') : t('create_box')}
                </Typography>

                <Grid container columnSpacing={2.5} rowSpacing={3} mb={3.5}>
                    <Grid item xs={12}>
-                        <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
+                        <Typography fontSize="18px" fontWeight={500} color="#5D5850" mb={2}>
                            {t('party_name')}
                        </Typography>
                        <Controller
-                            name='partyId'
+                            name="partyName"
                            control={control}
                            rules={{ required: requiredText }}
                            render={({ field }) => (
                                <AsyncSelect
                                    onChange={(newValue: any) => {
-                                        field.onChange(newValue.value);
-                                        setPartyId(newValue.value);
+                                        field.onChange(newValue?.label ?? '');
+                                        setPartyId(newValue?.value ?? '');
                                    }}
                                    defaultValue={
                                        editMode
                                            ? {
-                                                value: initialValues.partyId,
-                                                label: initialValues.partyName,
+                                                value: initialValues?.partyId,
+                                                label: initialValues?.partyName,
                                            }
                                            : partiesData?.length
                                                ? {
@@ -239,12 +253,15 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                    loadingMessage={() => t('loading')}
                                    onBlur={field.onBlur}
                                    name={field.name}
-                                    defaultOptions={defaultParties!}
+                                    defaultOptions={defaultParties ?? []}
                                    loadOptions={partyOptions}
                                    placeholder={t('enter_party_name_to_find')}
                                />
                            )}
                        />
+                        {!!errors.partyName && (
+                            <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
+                        )}
                    </Grid>

                    <Grid item xs={12}>
@@ -256,10 +273,10 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                padding: '24px',
                            }}
                        >
-                            <Typography fontSize={'18px'} fontWeight={500} color='#5D5850' mb={2}>
+                            <Typography fontSize="18px" fontWeight={500} color="#5D5850" mb={2}>
                                {t('packet')}
                            </Typography>
-                            {pakets.fields.map((field, index) => (
+                            {fields.map((field, index) => (
                                <Box key={field.key} className="item-row" mb={2}>
                                    <Box className="item-row-field" flex={1}>
                                        <Controller
@@ -269,13 +286,15 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                            render={({ field: paketField }) => (
                                                <AsyncSelect
                                                    onChange={(newValue: any) => {
-                                                        paketField.onChange(newValue?.value);
+                                                        paketField.onChange(newValue?.value ?? '');
                                                    }}
                                                    defaultValue={
-                                                        editMode && index === 0 && initialValues.packetId
+                                                        editMode && initialValues?.paketIds?.[index]
                                                            ? {
-                                                                value: initialValues.packetId,
-                                                                label: initialValues.box_name || `Box ${initialValues.packetId}`,
+                                                                value: initialValues.paketIds[index].id,
+                                                                label:
+                                                                    initialValues.paketIds[index].packetName ||
+                                                                    `Box ${initialValues.paketIds[index].id}`,
                                                            }
                                                            : null
                                                    }
@@ -284,19 +303,15 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                                    loadingMessage={() => t('loading')}
                                                    onBlur={paketField.onBlur}
                                                    name={paketField.name}
-                                                    defaultOptions={
-                                                        list.length > 0
-                                                            ? list.map((box: any) => ({
+                                                    defaultOptions={list.map((box: any) => ({
                                                        value: box.id,
                                                        label: box.box_name || box.name || `Box ${box.id}`,
-                                                            }))
-                                                            : []
-                                                    }
+                                                    }))}
                                                    loadOptions={async (inputValue: string) => {
-                                                        if (!partyId || partyId === '') return [];
+                                                        if (!partyId) return [];
                                                        try {
                                                            const res = await box_requests.getAll({
-                                                                partyId: partyId,
+                                                                partyId,
                                                            });
                                                            return res.data.data.data.map((box: any) => ({
                                                                label: box.box_name || box.name || `Box ${box.id}`,
@@ -315,7 +330,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                            <FormHelperText sx={{ color: 'red' }}>{requiredText}</FormHelperText>
                                        )}
                                    </Box>
-                                    {pakets.fields.length > 1 && (
+                                    {fields.length > 1 && (
                                        <Box className="item-row-field">
                                            <BaseIconButton
                                                size="small"
@@ -329,7 +344,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                    )}
                                </Box>
                            ))}
-                            <Stack alignItems={'center'} mt={2}>
+                            <Stack alignItems="center" mt={2}>
                                <BaseButton
                                    sx={{ backgroundColor: '#239D5F' }}
                                    startIcon={<AddCircleRounded />}
@@ -342,7 +357,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                    </Grid>
                </Grid>

-                <BaseButton type='submit' colorVariant='blue' loading={loading}>
+                <BaseButton type="submit" colorVariant="blue" loading={loading}>
                    {editMode ? t('update') : t('create')}
                </BaseButton>
            </Box>
@@ -351,14 +366,3 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
 };

 export default DashboardCreateRealBoxPage;
-
-export type RealCreateBoxBodyType = {
-    partyName: string;
-    packetDtos: number[];
-};
-
-export type UpdateRealBoxBodyType = {
-    boxId: string;
-    partyName: string;
-    packetDtos: number[];
-};
--- a/src/routes/private/real-boxes-create/DashboardEditRealBox.tsx
+++ b/src/routes/private/real-boxes-create/DashboardEditRealBox.tsx
@@ -1,12 +1,11 @@
 'use client';

 import Loader from '@/components/common/Loader';
-import { box_requests } from '@/data/box/box.requests';
 import useRequest from '@/hooks/useRequest';
-import DashboardCreateBoxPage from '@/routes/private/boxes-create/DashboardCreateBox';
 import { useParams } from 'next/navigation';
-import React from 'react';
+import React, { useEffect } from 'react';
 import DashboardCreateRealBoxPage from './DashboardCreateRealBox';
+import { real_box_requests } from '@/data/real-box/real-box.requests';

 type Props = {};

@@ -16,70 +15,39 @@ const DashboardEditRealBoxPage = (props: Props) => {

    const getOneBox = useRequest(
        () => {
-            return box_requests.find({ packetId: box_id });
+            return real_box_requests.find({ boxId: box_id });
        },
        {
            selectData(data) {
-                const boxData = data.data.data;
+                const boxData = data.data; // ⬅️ Faqat data.data, data.data.data emas
+                if (!boxData) return null;
+                console.log(boxData.data, 'boxdata');

                return {
-                    id: +box_id,
-                    box_name: boxData.packet.name,
-                    net_weight: +boxData.packet.brutto,
-                    box_weight: +boxData.packet.boxWeight,
-                    box_type: boxData.packet.boxType,
-                    box_size: boxData.packet.volume,
-                    passportName: boxData.packet.passportName,
-                    status: boxData.packet.status,
-                    packetId: box_id,
-
-                    partyId: +boxData.packet.partyId,
-                    partyName: boxData.packet.partyName,
-
-                    // client_id: boxData.client?.passportId,
-                    passportId: boxData.client?.passportId,
-                    client_id: boxData.packet?.cargoId,
-                    clientId: boxData.client?.passportId,
-                    clientName: boxData.client?.passportName,
-
-                    products_list: [
-                        ...boxData.items.map(item => {
-                            let name = item.name;
-                            let nameRu = item.nameRu;
-
-                            // try {
-                            //     name = item.name.split(' / ')[0];
-                            //     nameRu = item.name.split(' / ')[1];
-                            // } catch (error) {
-                            //     console.error('prepare edit values error', error);
-                            // }
-
-                            return {
-                                id: item.id,
-                                price: item.price,
-
-                                cargoId: item.cargoId,
-                                trekId: item.trekId,
-                                name: name,
-                                nameRu: nameRu,
-                                amount: +item.amount,
-                                weight: +item.weight,
-                            };
-                        }),
-                    ],
+                    id: box_id,
+                    boxId: box_id!,
+                    partyId: boxData.data.party.id, // ⬅️ To‘g‘ri yo‘l
+                    partyName: boxData.data.party.name!,
+                    paketIds: boxData.data.packets!
                };
            },
        }
    );


+    useEffect(() => {
+        getOneBox.refetch()
+    }, [box_id])
+
+    console.log(getOneBox);
+
    if (getOneBox.loading || !getOneBox.data) {
        return <Loader p={8} size={96} />;
    }

    return (
        <>
-            <DashboardCreateRealBoxPage />
+            <DashboardCreateRealBoxPage initialValues={getOneBox.data as any} />
        </>
    );
 };
--- a/src/routes/private/real-boxes/DashboardRealBoxesPage.tsx
+++ b/src/routes/private/real-boxes/DashboardRealBoxesPage.tsx
@@ -10,6 +10,7 @@ import BasePagination from '@/components/ui-kit/BasePagination';
 import { useAuthContext } from '@/context/auth-context';
 import { BoxStatus, BoxStatusList, IBox } from '@/data/box/box.model';
 import { box_requests } from '@/data/box/box.requests';
+import { IRealBox } from '@/data/real-box/real-box.model';
 import { real_box_requests } from '@/data/real-box/real-box.requests';
 import { DEFAULT_PAGE_SIZE, pageLinks } from '@/helpers/constants';
 import useDebouncedInput from '@/hooks/useDebouncedInput';
@@ -23,6 +24,7 @@ import { getBoxStatusStyles, getStatusColor } from '@/theme/getStatusBoxStyles';
 import { Add, QrCode, AddCircleOutline, Circle, Delete, Download, Edit, FilterList, FilterListOff, Search, PlusOne } from '@mui/icons-material';
 import { Box, Button, Stack, Tooltip, Typography } from '@mui/material';
 import { useRouter } from 'next/navigation';
+import { log } from 'node:console';
 import React, { useEffect, useMemo, useState } from 'react';

 type Props = {};
@@ -84,6 +86,7 @@ const DashboardRealBoxesPage = (props: Props) => {
            };
        }
    }, [getBoxesQuery]);
+
    const loading = getBoxesQuery.loading;
    const handleChange = (newPage: number) => {
        setTimeout(() => {
@@ -102,7 +105,7 @@ const DashboardRealBoxesPage = (props: Props) => {

        try {
            setDeleteIds(p => [...p, id]);
-            await box_requests.delete({ packetId: id });
+            await real_box_requests.delete({ boxId: id });
            getBoxesQuery.refetch();
        } catch (error) {
            notifyUnknownError(error);
@@ -116,7 +119,7 @@ const DashboardRealBoxesPage = (props: Props) => {

        try {
            setDownloadIds(p => [...p, id]);
-            const response = await box_requests.downloadExcel({ packetId: id });
+            const response = await real_box_requests.downloadExcel({ boxId: id });
            const file = new File([response.data], 'Box-excel.xlsx', { type: response.data.type });
            file_service.download(file);
        } catch (error) {
@@ -126,6 +129,23 @@ const DashboardRealBoxesPage = (props: Props) => {
        }
    };

+    const onDownloadQrCode = async (id: number) => {
+        if (downloadIds.includes(id)) return;
+
+        try {
+            setDownloadIds(p => [...p, id]);
+            const response = await real_box_requests.downloadQrCode({ boxId: id });
+            console.log(response, "rres");
+            const file = new File([response.data], 'qr.png', { type: response.data.type });
+            file_service.download(file);
+        } catch (error) {
+            notifyUnknownError(error);
+            console.log(error);
+        } finally {
+            setDownloadIds(prev => prev.filter(i => i !== id));
+        }
+    };
+
    const onChangeStatus = async (id: number, newStatus: BoxStatus) => {
        if (changeStatusIds.includes(id)) return;

@@ -149,7 +169,7 @@ const DashboardRealBoxesPage = (props: Props) => {
    }, [keyword]);

    // No, PartyName, PacketName, PartyTozaOg'irlik, CountOfItems, WeightOfItems, CargoID, PassportNameFamily - PacketStatusForInvoice
-    const columns: ColumnData<IBox>[] = [
+    const columns: ColumnData<IRealBox>[] = [
        {
            label: t('No'),
            width: 100,
@@ -161,9 +181,12 @@ const DashboardRealBoxesPage = (props: Props) => {
            label: t("qr_code"),
            width: 120,
            renderCell: data => {
-                return <Button>
+                return <Button
+                    onClick={() =>
+                        onDownloadQrCode(data.id)
+                    }>
                    <QrCode />
-                </Button>;
+                </Button >;
            },
        },
        {
@@ -177,12 +200,12 @@ const DashboardRealBoxesPage = (props: Props) => {
            },
        },
        {
-            dataKey: 'cargoId',
+            dataKey: 'boxName',
            label: t('cargo_id'),
            width: 120,
        },
        {
-            dataKey: 'partyName',
+            dataKey: "boxName",
            label: t('party_name'),
            width: 120,
        },
@@ -197,7 +220,7 @@ const DashboardRealBoxesPage = (props: Props) => {
        //     width: 120,
        // },
        {
-            dataKey: 'totalItems',
+            dataKey: 'packetsCount',
            label: t('count_of_items'),
            width: 120,
        },
@@ -360,7 +383,7 @@ const DashboardRealBoxesPage = (props: Props) => {
                    </Stack>
                </Stack>
                <Box mb={6}>
-                    <MyTable columns={columns} data={list} loading={loading} />
+                    <MyTable columns={columns as any} data={list} loading={loading} />
                </Box>
                <Stack direction={'row'} justifyContent={'center'}>
                    <BasePagination page={page} pageSize={pageSize} totalCount={totalElements} onChange={handleChange} />