@blocklet/ui-react 3.1.48 → 3.1.49

package/docs/components-user-management-user-sessions.md

@@ -0,0 +1,164 @@
+# UserSessions
+
+The `UserSessions` component renders a comprehensive data table for displaying and managing a user's login sessions. It provides a clear overview of all active, expired, and offline sessions across various devices, giving users control over their account security.
+
+The component is designed to be a plug-and-play solution for developers needing to implement session management features. It handles data fetching, pagination, UI rendering, and actions like logging out of specific sessions.
+
+## Features
+
+- **Session Filtering:** Users can easily filter sessions by their status: `online`, `expired`, or `offline`.
+- **Detailed Information:** Each session entry displays parsed user-agent data, including the operating system, device type (browser), and wallet OS.
+- **IP Geolocation:** Automatically resolves and displays the geographical region based on the last login IP address.
+- **Session Termination:** Allows users to terminate any session except the current one.
+- **Bulk Actions:** Includes a "Logout All" feature to terminate all sessions of a specific status.
+- **Responsive Design:** Adapts to different screen sizes, ensuring a consistent user experience on both desktop and mobile devices.
+
+## How It Works
+
+The `UserSessions` component operates by requesting session data from a developer-provided function. This design decouples the component from any specific backend implementation, offering greater flexibility.
+
+```d2
+direction: down
+
+User-Interaction: {
+  shape: c4-person
+  label: "User"
+}
+
+UserSessions-Component: {
+  label: "UserSessions Component"
+  shape: rectangle
+
+  Datatable: {
+    label: "Datatable"
+  }
+
+  Actions: {
+    label: "Logout / Logout All"
+  }
+}
+
+Application-Backend: {
+  label: "Application Backend"
+  shape: rectangle
+
+  API-Endpoint: {
+    label: "API Endpoint\n(e.g., /api/sessions)"
+  }
+
+  Database: {
+    shape: cylinder
+    label: "Session Storage"
+  }
+}
+
+User-Interaction -> UserSessions-Component.Datatable: "1. Views sessions"
+UserSessions-Component -> Application-Backend.API-Endpoint: "2. Calls `getUserSessions` prop"
+Application-Backend.API-Endpoint -> Database: "3. Fetches session data"
+Database -> Application-Backend.API-Endpoint: "4. Returns data"
+Application-Backend.API-Endpoint -> UserSessions-Component: "5. Resolves promise with list and paging"
+UserSessions-Component.Datatable -> User-Interaction: "6. Renders sessions"
+User-Interaction -> UserSessions-Component.Actions: "7. Clicks 'Logout'"
+UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. Sends logout request"
+Application-Backend.API-Endpoint -> Database: "9. Deletes session"
+UserSessions-Component -> Application-Backend.API-Endpoint: "10. Refreshes data"
+```
+
+## Usage
+
+To use the `UserSessions` component, you must provide a `user` object and a `getUserSessions` function. The `getUserSessions` function is responsible for fetching the session data from your backend service.
+
+```javascript Integration Example icon=lucide:code
+import { UserSessions } from '@arcblock/blocklet-ui-react';
+import { client } from './libs/client'; // Your API client instance
+
+// The user object for whom sessions are being displayed.
+const currentUser = {
+  did: 'z1...',
+  name: 'Alice',
+  // other user properties
+};
+
+/**
+ * This function fetches session data from your backend.
+ * The UserSessions component will call this function whenever it needs new data.
+ *
+ * @param {object} params - The query parameters.
+ * @param {number} params.page - The current page number.
+ * @param {number} params.pageSize - The number of items per page.
+ * @param {string} params.status - The session status to filter by ('online', 'expired', 'offline').
+ * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} A promise that resolves to the session data.
+ */
+const fetchUserSessions = async ({ page, pageSize, status }) => {
+  const response = await client.user.getSessions({
+    page,
+    pageSize,
+    status,
+  });
+
+  // Ensure the return format matches the component's requirements
+  return {
+    list: response?.list || [],
+    paging: {
+      total: response?.paging?.total || 0,
+    },
+  };
+};
+
+export default function MyAccountSessionsPage() {
+  return (
+    <div>
+      <h2>Manage Your Login Sessions</h2>
+      <UserSessions
+        user={currentUser}
+        getUserSessions={fetchUserSessions}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+The `UserSessions` component accepts the following props to customize its behavior and appearance.
+
+<x-field-group>
+  <x-field data-name="user" data-type="User" data-required="true">
+    <x-field-desc markdown>The user object for whom the sessions are being displayed. The component requires this to provide context for the session list.</x-field-desc>
+  </x-field>
+  <x-field data-name="getUserSessions" data-type="function" data-required="true">
+    <x-field-desc markdown>An asynchronous function responsible for fetching paginated session data from your backend. It receives an object with `page`, `pageSize`, and `status` and must return a `Promise` that resolves to an object with the shape `{ list: UserSession[], paging: { total: number } }`.</x-field-desc>
+  </x-field>
+  <x-field data-name="showAction" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>Controls the visibility of the "Actions" column, which contains the logout buttons. Set to `false` to create a read-only view.</x-field-desc>
+  </x-field>
+  <x-field data-name="showUser" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>Controls the visibility of the "User" column. This is useful in multi-user or administrative contexts where identifying the user for each session is necessary.</x-field-desc>
+  </x-field>
+  <x-field data-name="showOffline" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>Determines whether the "Offline" filter option is available in the UI. Offline sessions typically represent long-lived sessions that are not currently active.</x-field-desc>
+  </x-field>
+  <x-field data-name="showAppPid" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>Controls the visibility of the "App Pid" column, which can display a Blocklet's Program ID associated with the session.</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## Displayed Information
+
+The component renders the following information for each session in the data table:
+
+| Column | Description |
+| :--- | :--- |
+| **Platform** | The operating system and version derived from the session's user-agent string (e.g., `Windows/10`). |
+| **Device Type** | The browser or application used for the session (e.g., `Chrome/108.0.0`). |
+| **Wallet OS** | The operating system of the connected DID wallet, if available. |
+| **App Pid** | The Program ID of the Blocklet that created the session. (Visible if `showAppPid` is `true`). |
+| **User** | The user associated with the session. (Visible if `showUser` is `true`). |
+| **Created At** | The timestamp when the session was initially created. |
+| **Last Active** | The timestamp of the last activity. For expired sessions, this column shows "Expired". |
+| **Last Login IP** | The last known IP address for the session, along with its resolved geographical region. |
+| **Actions** | Provides a button to log out of the session. (Visible if `showAction` is `true`). |
+
+---
+
+For a complete user management interface, consider using the `UserSessions` component within the [UserCenter](./components-user-management-user-center.md) component.

package/docs/components-user-management-user-sessions.zh-TW.md

@@ -0,0 +1,164 @@
+# UserSessions
+
+`UserSessions` 元件會渲染一個全面的資料表，用於顯示和管理使用者的登入會話。它清晰地概覽了所有在各種裝置上的活躍、過期和離線會話，讓使用者能夠掌控其帳戶安全。
+
+此元件被設計為一個隨插即用的解決方案，供需要實作會話管理功能的開發人員使用。它處理資料擷取、分頁、UI 渲染以及登出特定會話等操作。
+
+## 功能
+
+- **會話篩選：** 使用者可以輕鬆地按會話狀態篩選：`online`、`expired` 或 `offline`。
+- **詳細資訊：** 每個會話條目都會顯示解析後的使用者代理資料，包括作業系統、裝置類型（瀏覽器）和錢包作業系統。
+- **IP 地理位置：** 根據上次登入的 IP 位址自動解析並顯示地理區域。
+- **終止會話：** 允許使用者終止除了當前會話以外的任何會話。
+- **批次操作：** 包含「全部登出」功能，以終止特定狀態下的所有會話。
+- **響應式設計：** 適應不同螢幕尺寸，確保在桌面和行動裝置上擁有一致的使用者體驗。
+
+## 運作方式
+
+`UserSessions` 元件透過向開發人員提供的函式請求會話資料來運作。這種設計將元件與任何特定的後端實作解耦，提供了更大的靈活性。
+
+```d2
+direction: down
+
+User-Interaction: {
+  shape: c4-person
+  label: "使用者"
+}
+
+UserSessions-Component: {
+  label: "UserSessions 元件"
+  shape: rectangle
+
+  Datatable: {
+    label: "資料表"
+  }
+
+  Actions: {
+    label: "登出 / 全部登出"
+  }
+}
+
+Application-Backend: {
+  label: "應用程式後端"
+  shape: rectangle
+
+  API-Endpoint: {
+    label: "API 端點\n(例如 /api/sessions)"
+  }
+
+  Database: {
+    shape: cylinder
+    label: "會話儲存"
+  }
+}
+
+User-Interaction -> UserSessions-Component.Datatable: "1. 查看會話"
+UserSessions-Component -> Application-Backend.API-Endpoint: "2. 呼叫 `getUserSessions` 屬性"
+Application-Backend.API-Endpoint -> Database: "3. 擷取會話資料"
+Database -> Application-Backend.API-Endpoint: "4. 回傳資料"
+Application-Backend.API-Endpoint -> UserSessions-Component: "5. 以列表和分頁解析 promise"
+UserSessions-Component.Datatable -> User-Interaction: "6. 渲染會話"
+User-Interaction -> UserSessions-Component.Actions: "7. 點擊「登出」"
+UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. 發送登出請求"
+Application-Backend.API-Endpoint -> Database: "9. 刪除會話"
+UserSessions-Component -> Application-Backend.API-Endpoint: "10. 重新整理資料"
+```
+
+## 使用方式
+
+要使用 `UserSessions` 元件，您必須提供一個 `user` 物件和一個 `getUserSessions` 函式。`getUserSessions` 函式負責從您的後端服務中擷取會話資料。
+
+```javascript 整合範例 icon=lucide:code
+import { UserSessions } from '@arcblock/blocklet-ui-react';
+import { client } from './libs/client'; // 您的 API 客戶端實例
+
+// 正在顯示其會話的使用者物件。
+const currentUser = {
+  did: 'z1...',
+  name: 'Alice',
+  // 其他使用者屬性
+};
+
+/**
+ * 此函式從您的後端擷取會話資料。
+ * 每當需要新資料時，UserSessions 元件將會呼叫此函式。
+ *
+ * @param {object} params - 查詢參數。
+ * @param {number} params.page - 當前頁碼。
+ * @param {number} params.pageSize - 每頁的項目數。
+ * @param {string} params.status - 用於篩選的會話狀態（'online'、'expired'、'offline'）。
+ * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} 一個解析為會話資料的 promise。
+ */
+const fetchUserSessions = async ({ page, pageSize, status }) => {
+  const response = await client.user.getSessions({
+    page,
+    pageSize,
+    status,
+  });
+
+  // 確保回傳格式符合元件的要求
+  return {
+    list: response?.list || [],
+    paging: {
+      total: response?.paging?.total || 0,
+    },
+  };
+};
+
+export default function MyAccountSessionsPage() {
+  return (
+    <div>
+      <h2>管理您的登入會話</h2>
+      <UserSessions
+        user={currentUser}
+        getUserSessions={fetchUserSessions}
+      />
+    </div>
+  );
+}
+```
+
+## 屬性
+
+`UserSessions` 元件接受以下屬性以自訂其行為和外觀。
+
+<x-field-group>
+  <x-field data-name="user" data-type="User" data-required="true">
+    <x-field-desc markdown>正在顯示其會話的使用者物件。元件需要此物件來為會話列表提供上下文。</x-field-desc>
+  </x-field>
+  <x-field data-name="getUserSessions" data-type="function" data-required="true">
+    <x-field-desc markdown>一個非同步函式，負責從您的後端擷取分頁的會話資料。它會接收一個包含 `page`、`pageSize` 和 `status` 的物件，並且必須回傳一個解析為 `{ list: UserSession[], paging: { total: number } }` 形狀物件的 `Promise`。</x-field-desc>
+  </x-field>
+  <x-field data-name="showAction" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>控制「操作」欄位的可見性，該欄位包含登出按鈕。設定為 `false` 可建立唯讀視圖。</x-field-desc>
+  </x-field>
+  <x-field data-name="showUser" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>控制「使用者」欄位的可見性。這在多使用者或管理情境中很有用，因為在這些情境下需要識別每個會話的使用者。</x-field-desc>
+  </x-field>
+  <x-field data-name="showOffline" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>決定「離線」篩選選項是否在 UI 中可用。離線會話通常代表目前不活躍的長期會話。</x-field-desc>
+  </x-field>
+  <x-field data-name="showAppPid" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>控制「App Pid」欄位的可見性，該欄位可以顯示與會話關聯的 Blocklet 的程式 ID。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## 顯示資訊
+
+此元件在資料表中為每個會話渲染以下資訊：
+
+| 欄位 | 說明 |
+| :--- | :--- |
+| **Platform** | 從會話的使用者代理字串中解析出的作業系統和版本（例如 `Windows/10`）。 |
+| **Device Type** | 用於此會話的瀏覽器或應用程式（例如 `Chrome/108.0.0`）。 |
+| **Wallet OS** | 已連接的 DID 錢包的作業系統（如果有的話）。 |
+| **App Pid** | 建立此會話的 Blocklet 的程式 ID。（如果 `showAppPid` 為 `true` 則可見）。 |
+| **User** | 與此會話關聯的使用者。（如果 `showUser` 為 `true` 則可見）。 |
+| **Created At** | 會話最初建立的時間戳。 |
+| **Last Active** | 上次活動的時間戳。對於已過期的會話，此欄位顯示「已過期」。 |
+| **Last Login IP** | 此會話的最後已知 IP 位址，及其解析出的地理區域。 |
+| **Actions** | 提供一個登出此會話的按鈕。（如果 `showAction` 為 `true` 則可見）。 |
+
+---
+
+若要獲得一個完整的使用者管理介面，請考慮在 [UserCenter](./components-user-management-user-center.md) 元件中使用 `UserSessions` 元件。

package/docs/components-user-management-user-sessions.zh.md

@@ -0,0 +1,164 @@
+# UserSessions
+
+`UserSessions` 组件渲染一个全面的数据表格，用于显示和管理用户的登录会话。它清晰地概览了用户在各种设备上的所有活跃、已过期和离线会话，让用户能够控制其账户安全。
+
+该组件被设计成一个即插即用的解决方案，供需要实现会话管理功能的开发者使用。它负责处理数据获取、分页、UI 渲染以及登出特定会话等操作。
+
+## 功能
+
+- **会话筛选：** 用户可以轻松按状态（`online`、`expired` 或 `offline`）筛选会话。
+- **详细信息：** 每个会话条目都会显示解析后的 user-agent 数据，包括操作系统、设备类型（浏览器）和钱包操作系统。
+- **IP 地理位置：** 根据上次登录的 IP 地址自动解析并显示地理区域。
+- **会话终止：** 允许用户终止除当前会话之外的任何会话。
+- **批量操作：** 包含“全部登出”功能，可终止特定状态下的所有会話。
+- **响应式设计：** 适应不同屏幕尺寸，确保在桌面和移动设备上提供一致的用户体验。
+
+## 工作原理
+
+`UserSessions` 组件通过调用开发者提供的函数来请求会话数据。这种设计将组件与任何特定的后端实现解耦，从而提供了更大的灵活性。
+
+```d2
+direction: down
+
+User-Interaction: {
+  shape: c4-person
+  label: "用户"
+}
+
+UserSessions-Component: {
+  label: "UserSessions 组件"
+  shape: rectangle
+
+  Datatable: {
+    label: "数据表格"
+  }
+
+  Actions: {
+    label: "登出 / 全部登出"
+  }
+}
+
+Application-Backend: {
+  label: "应用后端"
+  shape: rectangle
+
+  API-Endpoint: {
+    label: "API 端点\n(例如, /api/sessions)"
+  }
+
+  Database: {
+    shape: cylinder
+    label: "会话存储"
+  }
+}
+
+User-Interaction -> UserSessions-Component.Datatable: "1. 查看会话"
+UserSessions-Component -> Application-Backend.API-Endpoint: "2. 调用 `getUserSessions` 属性"
+Application-Backend.API-Endpoint -> Database: "3. 获取会话数据"
+Database -> Application-Backend.API-Endpoint: "4. 返回数据"
+Application-Backend.API-Endpoint -> UserSessions-Component: "5. 以列表和分页信息解析 Promise"
+UserSessions-Component.Datatable -> User-Interaction: "6. 渲染会话"
+User-Interaction -> UserSessions-Component.Actions: "7. 点击'登出'"
+UserSessions-Component.Actions -> Application-Backend.API-Endpoint: "8. 发送登出请求"
+Application-Backend.API-Endpoint -> Database: "9. 删除会话"
+UserSessions-Component -> Application-Backend.API-Endpoint: "10. 刷新数据"
+```
+
+## 用法
+
+要使用 `UserSessions` 组件，您必须提供一个 `user` 对象和一个 `getUserSessions` 函数。`getUserSessions` 函数负责从您的后端服务获取会话数据。
+
+```javascript Integration Example icon=lucide:code
+import { UserSessions } from '@arcblock/blocklet-ui-react';
+import { client } from './libs/client'; // 您的 API 客户端实例
+
+// 正在显示其会话的用户对象。
+const currentUser = {
+  did: 'z1...',
+  name: 'Alice',
+  // other user properties
+};
+
+/**
+ * 此函数从您的后端获取会话数据。
+ * UserSessions 组件在需要新数据时会调用此函数。
+ *
+ * @param {object} params - 查询参数。
+ * @param {number} params.page - 当前页码。
+ * @param {number} params.pageSize - 每页的项目数。
+ * @param {string} params.status - 用于筛选的会话状态（'online'、'expired'、'offline'）。
+ * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} 一个解析为会话数据的 Promise。
+ */
+const fetchUserSessions = async ({ page, pageSize, status }) => {
+  const response = await client.user.getSessions({
+    page,
+    pageSize,
+    status,
+  });
+
+  // 确保返回格式符合组件的要求
+  return {
+    list: response?.list || [],
+    paging: {
+      total: response?.paging?.total || 0,
+    },
+  };
+};
+
+export default function MyAccountSessionsPage() {
+  return (
+    <div>
+      <h2>管理您的登录会话</h2>
+      <UserSessions
+        user={currentUser}
+        getUserSessions={fetchUserSessions}
+      />
+    </div>
+  );
+}
+```
+
+## 属性
+
+`UserSessions` 组件接受以下属性以自定义其行为和外观。
+
+<x-field-group>
+  <x-field data-name="user" data-type="User" data-required="true">
+    <x-field-desc markdown>正在显示其会话的用户对象。组件需要此对象为会话列表提供上下文。</x-field-desc>
+  </x-field>
+  <x-field data-name="getUserSessions" data-type="function" data-required="true">
+    <x-field-desc markdown>一个异步函数，负责从您的后端获取分页的会话数据。它接收一个包含 `page`、`pageSize` 和 `status` 的对象，并且必须返回一个解析为 `{ list: UserSession[], paging: { total: number } }` 形状对象的 `Promise`。</x-field-desc>
+  </x-field>
+  <x-field data-name="showAction" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>控制包含登出按钮的“操作”列的可见性。设置为 `false` 可创建只读视图。</x-field-desc>
+  </x-field>
+  <x-field data-name="showUser" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>控制“用户”列的可见性。这在需要为每个会话识别用户的多用户或管理上下文中很有用。</x-field-desc>
+  </x-field>
+  <x-field data-name="showOffline" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>决定“离线”筛选选项在 UI 中是否可用。离线会话通常代表当前不活跃的长期会话。</x-field-desc>
+  </x-field>
+  <x-field data-name="showAppPid" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>控制“应用 Pid”列的可见性，该列可以显示与会话关联的 Blocklet 的程序 ID。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## 显示信息
+
+该组件在数据表格中为每个会话渲染以下信息：
+
+| 列 | 描述 |
+| :--- | :--- |
+| **平台** | 从会话的 user-agent 字符串派生的操作系统和版本（例如 `Windows/10`）。 |
+| **设备类型** | 用于会话的浏览器或应用程序（例如 `Chrome/108.0.0`）。 |
+| **钱包操作系统** | 连接的 DID 钱包的操作系统（如果可用）。 |
+| **应用 Pid** | 创建会话的 Blocklet 的程序 ID。（`showAppPid` 为 `true` 时可见）。 |
+| **用户** | 与会话关联的用户。（`showUser` 为 `true` 时可见）。 |
+| **创建于** | 会话最初创建时的时间戳。 |
+| **上次活跃** | 上次活动的时间戳。对于已过期的会话，此列显示“已过期”。 |
+| **上次登录 IP** | 会话的最后已知 IP 地址及其解析的地理区域。 |
+| **操作** | 提供一个用于登出该会话的按钮。（`showAction` 为 `true` 时可见）。 |
+
+---
+
+要获得完整的用户管理界面，请考虑在 [UserCenter](./components-user-management-user-center.md) 组件中使用 `UserSessions` 组件。

package/docs/components-user-management.ja.md

@@ -0,0 +1,76 @@
+# ユーザー管理
+
+ユーザー管理スイートは、ユーザー関連の重要な機能を取り扱うために設計された、事前構築済みのReactコンポーネントのコレクションを提供します。これらのコンポーネントは、アプリケーション内でのユーザープロファイル、セッション管理、組織切り替えの実装を簡素化し、一貫性のある信頼性の高いユーザーエクスペリエンスを保証します。
+
+このセクションでは、スイートで利用可能な主要コンポーネントの概要を説明します。詳細な実装ガイドとAPIリファレンスについては、以下にリンクされている特定のコンポーネントのドキュメントを参照してください。
+
+```d2
+direction: down
+
+User: {
+  shape: c4-person
+}
+
+Application: {
+  label: "Blocklet アプリケーション"
+  shape: rectangle
+  grid-columns: 1
+  grid-gap: 100
+
+  UserCenter: {
+    label: "UserCenter\n(プロファイルと設定)"
+  }
+
+  UserSessions: {
+    label: "UserSessions\n(ログインアクティビティ)"
+  }
+
+  OrgsSwitch: {
+    label: "OrgsSwitch\n(チームコンテキスト)"
+  }
+}
+
+User -> Application.UserCenter: "プロファイルを管理"
+User -> Application.UserSessions: "セッションを確認"
+User -> Application.OrgsSwitch: "組織を切り替え"
+```
+
+## コアコンポーネント
+
+このスイートは、それぞれがユーザー管理の特定の側面に対応する、いくつかの主要なコンポーネントで構成されています。
+
+<x-cards>
+  <x-card data-title="UserCenter" data-icon="lucide:user-cog" data-href="/components/user-management/user-center">
+    ユーザープロファイルの表示と管理を行うための包括的なコンポーネントです。ユーザー設定、パスポート管理、他のユーザーをフォローするなどのソーシャルインタラクションを処理する機能が含まれています。
+  </x-card>
+  <x-card data-title="UserSessions" data-icon="lucide:smartphone-nfc" data-href="/components/user-management/user-sessions">
+    ユーザーがさまざまなデバイスでのアクティブおよび過去のログインセッションを表示・管理できるようにする、セキュリティに重点を置いたコンポーネントで、アカウントのセキュリティを強化します。
+  </x-card>
+</x-cards>
+
+### 組織の切り替え
+
+`OrgsSwitch` コンポーネントは、複数の組織に所属するユーザー向けにドロップダウンメニューインターフェースを提供します。これにより、チームベースまたはマルチテナント機能を持つアプリケーションにとって重要な、シームレスなコンテキスト切り替えが可能になります。
+
+**主な機能：**
+
+*   **現在の組織の表示：** ユーザーの現在の組織コンテキストを明確に表示します。
+*   **組織リスト：** ユーザーが切り替え可能なすべての組織を一覧表示し、パフォーマンス向上のための無限スクロール機能を備えています。
+*   **検索機能：** 特定の組織を素早くフィルタリングして見つけるための検索バーが含まれています。
+*   **作成とナビゲーション：** 新しい組織を作成するオプションと、すべての組織を管理するための専用ページへのリンクを提供します。
+
+### ユーザーインタラクション用のフック
+
+ソーシャル機能の開発を容易にするため、このライブラリには複雑なロジックを抽象化するカスタムフックとコンテキストも含まれています。
+
+*   **`useFollow` フック**: このフックは、他のユーザーをフォローおよびアンフォローするための完全なロジックを管理します。APIリクエストと状態変更を処理し、現在のフォロー状態 (`followed`) と、`followUser` および `unfollowUser` 関数を返します。
+*   **`UserFollowersProvider` コンテキスト**: フォロー状態が複数のコンポーネント間でアクセス可能である必要があるアプリケーションの場合、このプロバイダーはコンポーネントツリーの一部をラップし、`useUserFollowersContext` フックを介してフォローの状態とアクションを利用可能にします。
+
+## まとめ
+
+このコンポーネントスイートは、ライブラリで構築されたあらゆるアプリケーションにおける堅牢なユーザー管理のために必要なビルディングブロックを提供します。これらのコンポーネントを使用することで、開発を加速し、アプリケーションがユーザーアカウント管理とセキュリティのベストプラクティスに従うことを保証できます。
+
+詳細な実装ガイドについては、特定のコンポーネントのドキュメントに進んでください。
+
+*   **次へ：** [UserCenter](./components-user-management-user-center.md)
+*   **関連項目：** [UserSessions](./components-user-management-user-sessions.md)

package/docs/components-user-management.md

@@ -0,0 +1,76 @@
+# User Management
+
+The User Management suite provides a collection of pre-built React components designed to handle essential user-related functionalities. These components simplify the implementation of user profiles, session management, and organization switching within your application, ensuring a consistent and reliable user experience.
+
+This section provides an overview of the main components available in the suite. For detailed implementation guides and API references, please refer to the specific component documentation linked below.
+
+```d2
+direction: down
+
+User: {
+  shape: c4-person
+}
+
+Application: {
+  label: "Blocklet Application"
+  shape: rectangle
+  grid-columns: 1
+  grid-gap: 100
+
+  UserCenter: {
+    label: "UserCenter\n(Profile & Settings)"
+  }
+
+  UserSessions: {
+    label: "UserSessions\n(Login Activity)"
+  }
+
+  OrgsSwitch: {
+    label: "OrgsSwitch\n(Team Context)"
+  }
+}
+
+User -> Application.UserCenter: "Manages profile"
+User -> Application.UserSessions: "Reviews sessions"
+User -> Application.OrgsSwitch: "Switches organization"
+```
+
+## Core Components
+
+The suite is composed of several key components, each addressing a specific aspect of user management.
+
+<x-cards>
+  <x-card data-title="UserCenter" data-icon="lucide:user-cog" data-href="/components/user-management/user-center">
+    A comprehensive component for displaying and managing user profiles. It includes features for handling user settings, passport management, and social interactions like following other users.
+  </x-card>
+  <x-card data-title="UserSessions" data-icon="lucide:smartphone-nfc" data-href="/components/user-management/user-sessions">
+    A security-focused component that allows users to view and manage their active and past login sessions across different devices, enhancing account security.
+  </x-card>
+</x-cards>
+
+### Organization Switching
+
+The `OrgsSwitch` component provides a dropdown menu interface for users who belong to multiple organizations. It allows for seamless context switching, which is critical for applications with team-based or multi-tenant features.
+
+**Key Features:**
+
+*   **Current Organization Display:** Clearly shows the user's current organizational context.
+*   **Organization List:** Lists all available organizations a user can switch to, complete with infinite scrolling for performance.
+*   **Search Functionality:** Includes a search bar to quickly filter and find a specific organization.
+*   **Creation and Navigation:** Provides options to create a new organization and a link to a dedicated page for managing all organizations.
+
+### Hooks for User Interaction
+
+To facilitate the development of social features, the library also includes custom hooks and contexts that abstract away complex logic.
+
+*   **`useFollow` hook**: This hook manages the complete logic for following and unfollowing other users. It handles the API requests and state changes, returning the current follow status (`followed`) and functions to `followUser` and `unfollowUser`.
+*   **`UserFollowersProvider` context**: For applications where follow status needs to be accessible across multiple components, this provider wraps a section of your component tree and makes the follow state and actions available via the `useUserFollowersContext` hook.
+
+## Summary
+
+This suite of components provides the necessary building blocks for robust user management in any application built with the library. By using these components, you can accelerate development and ensure your application follows best practices for user account management and security.
+
+For detailed implementation guides, please proceed to the specific component documentation.
+
+*   **Next:** [UserCenter](./components-user-management-user-center.md)
+*   **See Also:** [UserSessions](./components-user-management-user-sessions.md)