chore: add ID field to user table and user identification card

Author: kastov

package-lock.json

@@ -59,7 +59,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.3.26",
+    "@remnawave/backend-contract": "2.3.27",
     "@simplewebauthn/browser": "^13.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",

package.json

@@ -41,6 +41,12 @@ export const useUserTableColumns = (
                 maxSize: 300,
                 size: 220
             },
+            {
+                accessorKey: 'id',
+                header: 'ID',
+                accessorFn: (originalRow) => originalRow.id,
+                size: 80
+            },
             {
                 accessorKey: 'status',
                 header: t('use-table-columns.status'),

src/features/dashboard/users/users-table/model/use-table-columns.tsx

@@ -9,7 +9,13 @@ import {
     Text,
     TextInput
 } from '@mantine/core'
-import { PiCheck, PiCopy, PiLinkDuotone, PiUserDuotone } from 'react-icons/pi'
+import {
+    PiCheck,
+    PiCopy,
+    PiIdentificationCardDuotone,
+    PiLinkDuotone,
+    PiUserDuotone
+} from 'react-icons/pi'
 import { ForwardRefComponent, HTMLMotionProps, Variants } from 'motion/react'
 import { HiIdentification, HiQuestionMarkCircle } from 'react-icons/hi'
 import { GetUserByUuidCommand } from '@remnawave/backend-contract'
@@ -47,6 +53,33 @@ export const UserIdentificationCard = (props: IProps) => {
                 }
             >
                 <Stack gap="md">
+                    <CopyButton timeout={2000} value={user.id.toString()}>
+                        {({ copied, copy }) => (
+                            <TextInput
+                                label="ID"
+                                leftSection={<PiIdentificationCardDuotone size="16px" />}
+                                onClick={copy}
+                                readOnly
+                                rightSection={
+                                    <ActionIcon
+                                        color={copied ? 'teal' : 'gray'}
+                                        onClick={copy}
+                                        variant="subtle"
+                                    >
+                                        {copied ? <PiCheck size="16px" /> : <PiCopy size="16px" />}
+                                    </ActionIcon>
+                                }
+                                styles={{
+                                    input: {
+                                        cursor: 'copy',
+                                        fontFamily: 'monospace'
+                                    }
+                                }}
+                                value={user.id.toString()}
+                            />
+                        )}
+                    </CopyButton>
+
                     <CopyButton timeout={2000} value={user.username}>
                         {({ copied, copy }) => (
                             <TextInput

src/shared/ui/forms/users/forms-components/user-identification-card.tsx

@@ -131,6 +131,8 @@ export const DetailedUserInfoDrawerWidget = () => {
                                 </Badge>
                             </Group>
 
+                            <CopyableFieldShared label="ID" value={user.id.toString()} />
+
                             <CopyableFieldShared
                                 label={t('detailed-user-info-drawer.widget.uuid')}
                                 value={user.uuid}