diff --git a/package.json b/package.json index 723ac60..510cee5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-admin-panel-frontend", - "version": "0.5.0", + "version": "0.6.0", "private": true, "scripts": { "dev": "next dev -p 2996", diff --git a/src/app/actions/usersActions.ts b/src/app/actions/usersActions.ts index 45ffbb4..e5ea692 100644 --- a/src/app/actions/usersActions.ts +++ b/src/app/actions/usersActions.ts @@ -28,6 +28,43 @@ export async function fetchUsesData(page: number, size: number, sortBy?: string, } }); + if (response.ok) { + const parsed = await response.json(); + + if (parsed.message_code === 0) { + return parsed.message_body.message_body; + } else { + return null; + } + + } else { + throw new Error(`${response.status}`); + } + } catch (error) { + return null; + } +} + +export async function fetchUsesInfo(userInfo: number) { + console.log('fetchUsesInfo'); + + try { + const response = await fetch(`${API_BASE_URL}/api/admin/get-users`, { + method: 'POST', + body: JSON.stringify({ + version: 1, + msg_id: 30014, + message_body: { + action: 'getIngoById', + user_id: userInfo + } + }), + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json' + } + }); + if (response.ok) { const parsed = await response.json(); diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index e380267..22102d4 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -31,9 +31,9 @@ padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; - color: v.$p-color; + color: var(--primary-color); background-color: v.$white; - border: 2px solid v.$p-color; + border: 2px solid var(--primary-color); border-radius: 0.375rem; box-shadow: 0 1px 2px 0 v.$shadow-1; transition: background-color 0.2s; @@ -56,7 +56,7 @@ margin-top: 0.5rem; transform-origin: top right; background-color: v.$white; - border: 2px solid v.$p-color; + border: 2px solid var(--primary-color); border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), @@ -74,7 +74,7 @@ font-size: 0.875rem; text-align: left; transition: background-color 0.2s ease; - color: v.$p-color; + color: var(--primary-color); &:hover { background-color: #dbeafe; @@ -128,7 +128,7 @@ position: fixed; height: 100vh; overflow-y: auto; - z-index: 1000; + z-index: 100; .admin-nav { padding: 16px 0; @@ -807,7 +807,7 @@ border: 2px solid v.$border-color-1; border-radius: 10px; box-shadow: 0 1px 2px #0000000d; - color: v.$p-color; + color: var(--primary-color); .icon { width: 18px; @@ -834,7 +834,7 @@ border: 2px solid v.$border-color-1; padding: 0.25rem 0.75rem; border-radius: 10px; - color: v.$p-color; + color: var(--primary-color); &:disabled { opacity: 0.5; @@ -842,7 +842,7 @@ } &.current { - background-color: v.$p-color; + background-color: var(--primary-color); color: v.$white; } @@ -1230,7 +1230,7 @@ border: 2px solid v.$border-color-1; border-radius: 10px; box-shadow: 0 1px 2px #0000000d; - color: v.$p-color; + color: var(--primary-color); cursor: pointer; .icon { @@ -1256,7 +1256,7 @@ border: 2px solid v.$border-color-1; padding: 0.25rem 0.75rem; border-radius: 10px; - color: v.$p-color; + color: var(--primary-color); cursor: pointer; &:disabled { @@ -1265,7 +1265,7 @@ } &.current { - background-color: v.$p-color; + background-color: var(--primary-color); color: v.$white; } @@ -1276,4 +1276,155 @@ } } } +} + +.modal-wrapper { + position: fixed; + z-index: 101; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: v.$bg-darkening; + + .modal-window { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + background: v.$white; + color: v.$text-p; + border-radius: 20px; + box-shadow: 0px 4px 20px v.$shadow-1; + + &:has(.modal-window-view-user) { + padding: 0; + background: transparent; + } + } +} + +.modal-window-view-user { + border-radius: 20px; + overflow: hidden; + + &-content { + padding: 10px; + max-height: calc(90vh - 80px); + overflow-y: auto; + background: v.$white; + + &-wrapper { + height: 100%; + max-height: 80vh; + + &.image { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + } + + .image-section { + display: flex; + align-items: center; + justify-content: center; + min-height: 400px; + background: #fafafa; + border-radius: 12px; + position: relative; + } + + .image-container { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); + } + } + + .user-info-wrapper { + display: flex; + gap: 15px; + margin-bottom: 15px; + + @media (max-width: 875px) { + flex-direction: column; + } + } + + .user-info-card { + background: #ffffff; + border: 1px solid v.$border-color-1; + border-radius: 12px; + padding: 0; + overflow: hidden; + min-width: 400px; + width: 100%; + + @media (max-width: 470px) { + min-width: auto; + } + + .info-header { + background: var(--primary-color); + color: white; + padding: 16px 20px; + border-bottom: 1px solid v.$border-color-1; + + h4 { + margin: 0; + font-size: 16px; + font-weight: 600; + } + } + + .info-item { + padding: 6px 10px; + border-bottom: 1px solid #f1f5f9; + width: 100%; + + &.image { + text-align: center; + max-width: 200px; + display: flex; + margin: 0 auto; + + img { + width: 100%; + } + } + } + + .info-label { + font-size: 14px; + color: #64748b; + font-weight: 500; + flex-shrink: 0; + } + + .info-value { + font-weight: 600; + color: #1e293b; + text-align: left; + word-break: break-word; + /* max-width: 150px; */ + } + + .status-badges { + padding: 12px 20px; + border-bottom: 1px solid #f1f5f9; + } + } + } } \ No newline at end of file diff --git a/src/app/ui/users/tanstak-users-table.tsx b/src/app/ui/users/tanstak-users-table.tsx index e1b3b5f..30f257b 100644 --- a/src/app/ui/users/tanstak-users-table.tsx +++ b/src/app/ui/users/tanstak-users-table.tsx @@ -20,6 +20,8 @@ import { toast } from 'sonner'; import { useUsersData } from '@/app/hooks/react-query/useUsersData'; import { TransformedUser } from '@/app/hooks/react-query/useUsersData'; import { useDebouncedCallback } from 'use-debounce'; +import { fetchUsesInfo } from '@/app/actions/usersActions'; +import { UserInfoModalWindow } from '@/app/ui/users/user-info-modal-window'; // Форматирование даты из timestamp const formatDate = (timestamp: number) => { @@ -395,7 +397,7 @@ export default function TanstakUsersTable() {