feat(web): user detail page (#18230)

feat: user detail page
2025-11-14 17:36:12 +00:00 · 2025-05-12 16:50:26 -04:00 · 2025-05-12 16:50:26 -04:00 · 3066c8198c
commit 3066c8198c
parent eb8dfa283e
20 changed files with 640 additions and 160 deletions
--- a/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
+++ b/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
@ -44,7 +44,7 @@
  </ModalBody>

  <ModalFooter>
-    <div class="flex gap-3 w-full my-3">
+    <div class="flex gap-3 w-full">
      {#if !hideCancelButton}
        <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
          {cancelText}
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@ -61,7 +61,7 @@
      </Button>
      {#if $user.isAdmin}
        <Button
-          href={AppRoute.ADMIN_USER_MANAGEMENT}
+          href={AppRoute.ADMIN_USERS}
          onclick={onClose}
          color="dark-gray"
          size="sm"
--- a/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte
@ -8,7 +8,7 @@
 </script>

 <SideBarSection ariaLabel={$t('primary')}>
-  <SideBarLink title={$t('users')} routeId={AppRoute.ADMIN_USER_MANAGEMENT} icon={mdiAccountMultipleOutline} />
+  <SideBarLink title={$t('users')} routeId={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
  <SideBarLink title={$t('jobs')} routeId={AppRoute.ADMIN_JOBS} icon={mdiSync} />
  <SideBarLink title={$t('settings')} routeId={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
  <SideBarLink title={$t('external_libraries')} routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@ -13,7 +13,7 @@ export enum AssetAction {
 }

 export enum AppRoute {
-  ADMIN_USER_MANAGEMENT = '/admin/user-management',
+  ADMIN_USERS = '/admin/users',
  ADMIN_LIBRARY_MANAGEMENT = '/admin/library-management',
  ADMIN_SETTINGS = '/admin/system-settings',
  ADMIN_STATS = '/admin/server-status',
--- a/web/src/lib/modals/UserEditModal.svelte
+++ b/web/src/lib/modals/UserEditModal.svelte
@ -1,40 +1,32 @@
 <script lang="ts">
  import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
  import { userInteraction } from '$lib/stores/user.svelte';
  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
  import { handleError } from '$lib/utils/handle-error';
  import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiAccountEditOutline, mdiLockSmart, mdiOnepassword } from '@mdi/js';
+  import { mdiAccountEditOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

  interface Props {
    user: UserAdminResponseDto;
-    canResetPassword?: boolean;
-    onClose: (
-      data?:
-        | { action: 'update'; data: UserAdminResponseDto }
-        | { action: 'resetPassword'; data: string }
-        | { action: 'resetPinCode' },
-    ) => void;
+    onClose: (data?: UserAdminResponseDto) => void;
  }

-  let { user, canResetPassword = true, onClose }: Props = $props();
+  let { user, onClose }: Props = $props();

  let quotaSize = $state(user.quotaSizeInBytes === null ? null : convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB));
-  let newPassword = $state<string>('');

-  const previousQutoa = user.quotaSizeInBytes;
+  const previousQuota = user.quotaSizeInBytes;

  let quotaSizeWarning = $derived(
-    previousQutoa !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
+    previousQuota !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
      !!quotaSize &&
      userInteraction.serverInfo &&
      convertToBytes(Number(quotaSize), ByteUnit.GiB) > userInteraction.serverInfo.diskSizeRaw,
  );

-  const editUser = async () => {
+  const handleEditUser = async () => {
    try {
      const { id, email, name, storageLabel } = user;
      const newUser = await updateUserAdmin({
@ -47,76 +39,15 @@
        },
      });

-      onClose({ action: 'update', data: newUser });
+      onClose(newUser);
    } catch (error) {
      handleError(error, $t('errors.unable_to_update_user'));
    }
  };

-  const resetPassword = async () => {
-    const isConfirmed = await modalManager.openDialog({
-      prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      newPassword = generatePassword();
-
-      await updateUserAdmin({
-        id: user.id,
-        userAdminUpdateDto: {
-          password: newPassword,
-          shouldChangePassword: true,
-        },
-      });
-
-      onClose({ action: 'resetPassword', data: newPassword });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_reset_password'));
-    }
-  };
-
-  const resetUserPincode = async () => {
-    const isConfirmed = await modalManager.openDialog({
-      prompt: $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } }),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
-
-      onClose({ action: 'resetPinCode' });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_reset_pin_code'));
-    }
-  };
-
-  // TODO move password reset server-side
-  function generatePassword(length: number = 16) {
-    let generatedPassword = '';
-
-    const characterSet = '0123456789' + 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + ',.-{}+!#$%/()=?';
-
-    for (let i = 0; i < length; i++) {
-      let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
-      randomNumber = randomNumber / 2 ** 32;
-      randomNumber = Math.floor(randomNumber * characterSet.length);
-
-      generatedPassword += characterSet[randomNumber];
-    }
-
-    return generatedPassword;
-  }
-
  const onSubmit = async (event: Event) => {
    event.preventDefault();
-    await editUser();
+    await handleEditUser();
  };
 </script>

@ -172,34 +103,11 @@
  </ModalBody>

  <ModalFooter>
-    <div class="w-full">
-      <div class="flex gap-3 w-full">
-        {#if canResetPassword}
-          <Button
-            shape="round"
-            color="warning"
-            variant="filled"
-            fullWidth
-            onclick={resetPassword}
-            leadingIcon={mdiOnepassword}
-          >
-            {$t('reset_password')}</Button
-          >
-        {/if}
-
-        <Button
-          shape="round"
-          color="warning"
-          variant="filled"
-          fullWidth
-          onclick={resetUserPincode}
-          leadingIcon={mdiLockSmart}>{$t('reset_pin_code')}</Button
-        >
-      </div>
-
-      <div class="w-full mt-4">
-        <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
-      </div>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()}
+        >{$t('cancel')}</Button
+      >
+      <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
    </div>
  </ModalFooter>
 </Modal>
--- a/web/src/routes/admin/+page.ts
+++ b/web/src/routes/admin/+page.ts
@ -3,5 +3,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';

 export const load = (() => {
-  redirect(302, AppRoute.ADMIN_USER_MANAGEMENT);
+  redirect(302, AppRoute.ADMIN_USERS);
 }) satisfies PageLoad;
--- a/web/src/routes/admin/user-management/+page.ts
+++ b/web/src/routes/admin/user-management/+page.ts
@ -1,18 +1,5 @@
-import { authenticate, requestServerInfo } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { searchUsersAdmin } from '@immich/sdk';
+import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';

-export const load = (async () => {
-  await authenticate({ admin: true });
-  await requestServerInfo();
-  const allUsers = await searchUsersAdmin({ withDeleted: true });
-  const $t = await getFormatter();
-
-  return {
-    allUsers,
-    meta: {
-      title: $t('admin.user_management'),
-    },
-  };
-}) satisfies PageLoad;
+export const load = (() => redirect(307, AppRoute.ADMIN_USERS)) satisfies PageLoad;
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@ -6,7 +6,7 @@
    NotificationType,
    notificationController,
  } from '$lib/components/shared-components/notification/notification';
-  import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
+  import { AppRoute } from '$lib/constants';
  import { modalManager } from '$lib/managers/modal-manager.svelte';
  import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
  import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
@ -18,7 +18,7 @@
  import { websocketEvents } from '$lib/stores/websocket';
  import { getByteUnitString } from '$lib/utils/byte-units';
  import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, Link } from '@immich/ui';
  import { mdiDeleteRestore, mdiInfinity, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
  import { DateTime } from 'luxon';
  import { onMount } from 'svelte';
@ -64,20 +64,9 @@
  };

  const handleEdit = async (dto: UserAdminResponseDto) => {
-    const result = await modalManager.show(UserEditModal, { user: dto, canResetPassword: dto.id !== $user.id });
-    switch (result?.action) {
-      case 'resetPassword': {
-        await modalManager.show(PasswordResetSuccess, { newPassword: result.data });
-        break;
-      }
-      case 'update': {
-        await refresh();
-        break;
-      }
-      case 'resetPinCode': {
-        notificationController.show({ type: NotificationType.Info, message: $t('pin_code_reset_successfully') });
-        break;
-      }
+    const result = await modalManager.show(UserEditModal, { user: dto });
+    if (result) {
+      await refresh();
    }
  };

@ -123,7 +112,7 @@
                    : 'bg-immich-bg dark:bg-immich-dark-gray/50'}"
              >
                <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm"
-                  >{immichUser.email}</td
+                  ><Link href="{AppRoute.ADMIN_USERS}/{immichUser.id}">{immichUser.email}</Link></td
                >
                <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{immichUser.name}</td>
                <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
--- a/web/src/routes/admin/users/+page.ts
+++ b/web/src/routes/admin/users/+page.ts
@ -0,0 +1,18 @@
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { searchUsersAdmin } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+  await authenticate({ admin: true });
+  await requestServerInfo();
+  const allUsers = await searchUsersAdmin({ withDeleted: true });
+  const $t = await getFormatter();
+
+  return {
+    allUsers,
+    meta: {
+      title: $t('admin.user_management'),
+    },
+  };
+}) satisfies PageLoad;
--- a/web/src/routes/admin/users/[id]/+page.svelte
+++ b/web/src/routes/admin/users/[id]/+page.svelte
@ -0,0 +1,343 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import StatsCard from '$lib/components/admin-page/server-stats/stats-card.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { AppRoute } from '$lib/constants';
+  import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
+  import UserEditModal from '$lib/modals/UserEditModal.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { user as authUser } from '$lib/stores/user.store';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateUserAdmin } from '@immich/sdk';
+  import {
+    Button,
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Code,
+    Container,
+    Field,
+    getByteUnitString,
+    Heading,
+    HStack,
+    Icon,
+    Stack,
+    Switch,
+    Text,
+  } from '@immich/ui';
+  import {
+    mdiAccountOutline,
+    mdiCameraIris,
+    mdiChartPie,
+    mdiChartPieOutline,
+    mdiCheckCircle,
+    mdiFeatureSearchOutline,
+    mdiLockSmart,
+    mdiOnepassword,
+    mdiPencilOutline,
+    mdiPlayCircle,
+    mdiTrashCanOutline,
+  } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  let user = $derived(data.user);
+  const userPreferences = $derived(data.userPreferences);
+  const userStatistics = $derived(data.userStatistics);
+
+  const TiB = 1024 ** 4;
+  const usage = $derived(user.quotaUsageInBytes ?? 0);
+  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usage, usage > TiB ? 2 : 0));
+
+  const usedBytes = $derived(user.quotaUsageInBytes ?? 0);
+  const availableBytes = $derived(user.quotaSizeInBytes ?? 1);
+  let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
+  let canResetPassword = $derived($authUser.id !== user.id);
+  let newPassword = $state<string>('');
+
+  const handleEdit = async () => {
+    const result = await modalManager.show(UserEditModal, { user: { ...user } });
+    if (result) {
+      user = result;
+    }
+  };
+
+  const handleDelete = async () => {
+    const result = await modalManager.show(UserDeleteConfirmModal, { user });
+    if (result) {
+      await goto(AppRoute.ADMIN_USERS);
+    }
+  };
+
+  const getUsageClass = () => {
+    if (usedPercentage >= 95) {
+      return 'bg-red-500';
+    }
+
+    if (usedPercentage > 80) {
+      return 'bg-yellow-500';
+    }
+
+    return 'bg-immich-primary dark:bg-immich-dark-primary';
+  };
+
+  const handleResetPassword = async () => {
+    const isConfirmed = await modalManager.openDialog({
+      prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
+    try {
+      newPassword = generatePassword();
+
+      await updateUserAdmin({
+        id: user.id,
+        userAdminUpdateDto: {
+          password: newPassword,
+          shouldChangePassword: true,
+        },
+      });
+
+      await modalManager.show(PasswordResetSuccess, { newPassword });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_reset_password'));
+    }
+  };
+
+  const handleResetUserPinCode = async () => {
+    const isConfirmed = await modalManager.openDialog({
+      prompt: $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } }),
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
+    try {
+      await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
+
+      notificationController.show({ type: NotificationType.Info, message: $t('pin_code_reset_successfully') });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_reset_pin_code'));
+    }
+  };
+
+  // TODO move password reset server-side
+  function generatePassword(length: number = 16) {
+    let generatedPassword = '';
+
+    const characterSet = '0123456789' + 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + ',.-{}+!#$%/()=?';
+
+    for (let i = 0; i < length; i++) {
+      let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
+      randomNumber = randomNumber / 2 ** 32;
+      randomNumber = Math.floor(randomNumber * characterSet.length);
+
+      generatedPassword += characterSet[randomNumber];
+    }
+
+    return generatedPassword;
+  }
+</script>
+
+<UserPageLayout title={data.meta.title} admin>
+  {#snippet buttons()}
+    <HStack gap={0}>
+      {#if canResetPassword}
+        <Button
+          color="secondary"
+          size="small"
+          variant="ghost"
+          leadingIcon={mdiOnepassword}
+          onclick={handleResetPassword}
+        >
+          <Text class="hidden md:block">{$t('reset_password')}</Text>
+        </Button>
+      {/if}
+
+      <Button
+        color="secondary"
+        size="small"
+        variant="ghost"
+        leadingIcon={mdiLockSmart}
+        onclick={handleResetUserPinCode}
+      >
+        <Text class="hidden md:block">{$t('reset_pin_code')}</Text>
+      </Button>
+      <Button
+        color="secondary"
+        size="small"
+        variant="ghost"
+        leadingIcon={mdiPencilOutline}
+        onclick={() => handleEdit()}
+      >
+        <Text class="hidden md:block">{$t('edit_user')}</Text>
+      </Button>
+      <Button
+        color="danger"
+        size="small"
+        variant="ghost"
+        leadingIcon={mdiTrashCanOutline}
+        onclick={() => handleDelete()}
+      >
+        <Text class="hidden md:block">{$t('delete_user')}</Text>
+      </Button>
+    </HStack>
+  {/snippet}
+  <div>
+    <Container size="large" center>
+      <div class="grid gap-4 grod-cols-1 lg:grid-cols-2 w-full">
+        <div class="col-span-full flex gap-4 items-center my-4">
+          <UserAvatar {user} size="md" />
+          <Heading tag="h1" size="large">{user.name}</Heading>
+        </div>
+        <div class="col-span-full">
+          <div class="flex flex-col lg:flex-row gap-4 w-full">
+            <StatsCard icon={mdiCameraIris} title={$t('photos').toUpperCase()} value={userStatistics.images} />
+            <StatsCard icon={mdiPlayCircle} title={$t('videos').toUpperCase()} value={userStatistics.videos} />
+            <StatsCard
+              icon={mdiChartPie}
+              title={$t('storage').toUpperCase()}
+              value={statsUsage}
+              unit={statsUsageUnit}
+            />
+          </div>
+        </div>
+        <div>
+          <Card color="secondary">
+            <CardHeader>
+              <div class="flex items-center gap-2">
+                <Icon icon={mdiAccountOutline} size="1.5rem" />
+                <CardTitle>{$t('profile')}</CardTitle>
+              </div>
+            </CardHeader>
+            <CardBody>
+              <Stack gap={2}>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('name')}</Heading>
+                  <Text>{user.name}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('email')}</Heading>
+                  <Text>{user.email}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
+                  <Text>{user.createdAt}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
+                  <Text>{user.updatedAt}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('id')}</Heading>
+                  <Code>{user.id}</Code>
+                </div>
+              </Stack>
+            </CardBody>
+          </Card>
+        </div>
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2">
+              <Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
+              <CardTitle>{$t('features')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div>
+              <Stack gap={2}>
+                <Field readOnly label={$t('email_notifications')}>
+                  <Switch checked={userPreferences.emailNotifications.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('folders')}>
+                  <Switch checked={userPreferences.folders.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('memories')}>
+                  <Switch checked={userPreferences.memories.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('people')}>
+                  <Switch checked={userPreferences.people.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('rating')}>
+                  <Switch checked={userPreferences.ratings.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('shared_links')}>
+                  <Switch checked={userPreferences.sharedLinks.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('show_supporter_badge')}>
+                  <Switch checked={userPreferences.purchase.showSupportBadge} color="primary" />
+                </Field>
+                <Field readOnly label={$t('tags')}>
+                  <Switch checked={userPreferences.tags.enabled} color="primary" />
+                </Field>
+              </Stack>
+            </div>
+          </CardBody>
+        </Card>
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2">
+              <Icon icon={mdiChartPieOutline} size="1.5rem" />
+              <CardTitle>{$t('storage_quota')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div>
+              {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                <Text>
+                  {$t('storage_usage', {
+                    values: {
+                      used: getByteUnitString(usedBytes, $locale, 3),
+                      available: getByteUnitString(availableBytes, $locale, 3),
+                    },
+                  })}
+                </Text>
+              {:else}
+                <Text class="flex items-center gap-1">
+                  <Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
+                  {$t('unlimited')}
+                </Text>
+              {/if}
+            </div>
+
+            {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+              <div
+                class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
+                title={$t('storage_usage', {
+                  values: {
+                    used: getByteUnitString(usedBytes, $locale, 3),
+                    available: getByteUnitString(availableBytes, $locale, 3),
+                  },
+                })}
+              >
+                <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+                <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                  <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
+                </div>
+              </div>
+            {/if}
+          </CardBody>
+        </Card>
+      </div>
+    </Container>
+  </div>
+</UserPageLayout>
--- a/web/src/routes/admin/users/[id]/+page.ts
+++ b/web/src/routes/admin/users/[id]/+page.ts
@ -0,0 +1,31 @@
+import { AppRoute } from '$lib/constants';
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getUserPreferencesAdmin, getUserStatisticsAdmin, searchUsersAdmin } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+  await authenticate({ admin: true });
+  await requestServerInfo();
+  const [user] = await searchUsersAdmin({ id: params.id }).catch(() => []);
+  if (!user) {
+    redirect(302, AppRoute.ADMIN_USERS);
+  }
+
+  const [userPreferences, userStatistics] = await Promise.all([
+    getUserPreferencesAdmin({ id: user.id }),
+    getUserStatisticsAdmin({ id: user.id }),
+  ]);
+
+  const $t = await getFormatter();
+
+  return {
+    user,
+    userPreferences,
+    userStatistics,
+    meta: {
+      title: $t('admin.user_details'),
+    },
+  };
+}) satisfies PageLoad;