@arch-cadre/panel 0.0.1 → 1.0.2

package/dist/ui/rbac/pages/rbac-admin.mjs

@@ -0,0 +1,375 @@
+"use client";
+import { useTranslation } from "@arch-cadre/intl";
+import { Icon, toast } from "@arch-cadre/ui";
+import { Button } from "@arch-cadre/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@arch-cadre/ui/components/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@arch-cadre/ui/components/dialog";
+import { Input } from "@arch-cadre/ui/components/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow
+} from "@arch-cadre/ui/components/table";
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+import {
+  assignPermissionToRole,
+  assignPermissionToUser,
+  assignRoleToUser,
+  createPermission,
+  createRole,
+  deletePermission,
+  deleteRole,
+  getPermissions,
+  getRolePermissions,
+  getRoles,
+  getUserRbacData,
+  getUsers,
+  revokePermissionFromRole,
+  revokePermissionFromUser,
+  revokeRoleFromUser
+} from "../../../actions/rbac/index.mjs";
+export default function RbacAdminPage() {
+  const [roles, setRoles] = useState([]);
+  const [permissions, setPermissions] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { t } = useTranslation();
+  const [newRoleName, setNewRoleName] = useState("");
+  const [newPermissionName, setNewPermissionName] = useState("");
+  const [selectedRole, setSelectedRole] = useState(null);
+  const [rolePermissions, setRolePermissions] = useState([]);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [userRbacData, setUserRbacData] = useState({
+    roles: [],
+    directPermissions: [],
+    effectivePermissions: []
+  });
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [r, p, u] = await Promise.all([
+        getRoles(),
+        getPermissions(),
+        getUsers()
+      ]);
+      setRoles(r);
+      setPermissions(p);
+      setUsers(u);
+    } catch (e) {
+      console.error("[RBAC] Failed to load initial data:", e);
+      toast.error(t("Failed to load RBAC data."));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const loadRolePermissions = useCallback(async (roleId) => {
+    try {
+      const p = await getRolePermissions(roleId);
+      setRolePermissions(p);
+    } catch (e) {
+      console.error(`[RBAC] Failed to load permissions for role ${roleId}:`, e);
+      toast.error(t("Failed to load permissions for role."));
+    }
+  }, []);
+  const loadUserRbacData = useCallback(async (userId) => {
+    try {
+      const data = await getUserRbacData(userId);
+      setUserRbacData(data);
+    } catch (e) {
+      console.error(`[RBAC] Failed to load RBAC data for user ${userId}:`, e);
+      toast.error(t("Failed to load user RBAC data."));
+    }
+  }, []);
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+  useEffect(() => {
+    if (selectedRole?.id) {
+      loadRolePermissions(selectedRole.id);
+    }
+  }, [selectedRole?.id, loadRolePermissions]);
+  useEffect(() => {
+    if (selectedUser?.id) {
+      loadUserRbacData(selectedUser.id);
+    }
+  }, [selectedUser?.id, loadUserRbacData]);
+  const handleCreateRole = useCallback(async () => {
+    if (!newRoleName) return;
+    try {
+      await createRole(newRoleName);
+      setNewRoleName("");
+      toast.success(t("Role created."));
+      loadData();
+    } catch (_e) {
+      toast.error(t("Failed to create role."));
+    }
+  }, [newRoleName, loadData]);
+  const handleCreatePermission = useCallback(async () => {
+    if (!newPermissionName) return;
+    try {
+      await createPermission(newPermissionName);
+      setNewPermissionName("");
+      toast.success(t("Permission created."));
+      loadData();
+    } catch (_e) {
+      toast.error(t("Failed to create permission."));
+    }
+  }, [newPermissionName, loadData]);
+  const handleDeleteRole = useCallback(
+    async (id) => {
+      try {
+        await deleteRole(id);
+        toast.success(t("Role deleted."));
+        if (selectedRole?.id === id) setSelectedRole(null);
+        loadData();
+      } catch (_e) {
+        toast.error(t("Failed to delete role."));
+      }
+    },
+    [selectedRole, loadData]
+  );
+  const handleDeletePermission = useCallback(
+    async (id) => {
+      try {
+        await deletePermission(id);
+        toast.success(t("Permission deleted."));
+        loadData();
+      } catch (_e) {
+        toast.error(t("Failed to delete permission."));
+      }
+    },
+    [loadData]
+  );
+  const togglePermissionForRole = useCallback(
+    async (permId, hasIt) => {
+      if (!selectedRole) return;
+      try {
+        if (hasIt) {
+          await revokePermissionFromRole(selectedRole.id, permId);
+        } else {
+          await assignPermissionToRole(selectedRole.id, permId);
+        }
+        loadRolePermissions(selectedRole.id);
+      } catch (_e) {
+        toast.error(t("Action failed."));
+      }
+    },
+    [selectedRole, loadRolePermissions]
+  );
+  const toggleRoleForUser = useCallback(
+    async (roleId, hasIt) => {
+      if (!selectedUser) return;
+      try {
+        if (hasIt) {
+          await revokeRoleFromUser(selectedUser.id, roleId);
+        } else {
+          await assignRoleToUser(selectedUser.id, roleId);
+        }
+        loadUserRbacData(selectedUser.id);
+      } catch (_e) {
+        toast.error(t("Action failed."));
+      }
+    },
+    [selectedUser, loadUserRbacData]
+  );
+  const togglePermissionForUser = useCallback(
+    async (permId, hasIt) => {
+      if (!selectedUser) return;
+      try {
+        if (hasIt) {
+          await revokePermissionFromUser(selectedUser.id, permId);
+        } else {
+          await assignPermissionToUser(selectedUser.id, permId);
+        }
+        loadUserRbacData(selectedUser.id);
+      } catch (_e) {
+        toast.error(t("Action failed."));
+      }
+    },
+    [selectedUser, loadUserRbacData]
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-black tracking-tight flex items-center gap-2" }, t("Role-Based Access Control Manager")), /* @__PURE__ */ React.createElement("p", { className: "text-muted-foreground" }, t("Manage roles, permissions, and their relationships."))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-6 lg:grid-cols-3" }, /* @__PURE__ */ React.createElement(Card, { className: "border-primary/5 shadow-sm" }, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(CardTitle, null, t("Roles")), /* @__PURE__ */ React.createElement(CardDescription, null, t("System roles."))), /* @__PURE__ */ React.createElement(CardContent, { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      placeholder: t("New role..."),
+      value: newRoleName,
+      onChange: (e) => setNewRoleName(e.target.value)
+    }
+  ), /* @__PURE__ */ React.createElement(Button, { onClick: handleCreateRole }, t("Add"))), /* @__PURE__ */ React.createElement("div", { className: "border rounded-md max-h-[300px] overflow-auto" }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableBody, null, roles.map((role) => /* @__PURE__ */ React.createElement(
+    TableRow,
+    {
+      key: role.id,
+      className: selectedRole?.id === role.id ? "bg-primary/5" : ""
+    },
+    /* @__PURE__ */ React.createElement(
+      TableCell,
+      {
+        className: "font-medium cursor-pointer",
+        onClick: () => setSelectedRole(role)
+      },
+      role.name
+    ),
+    /* @__PURE__ */ React.createElement(TableCell, { className: "text-right" }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: () => handleDeleteRole(role.id)
+      },
+      /* @__PURE__ */ React.createElement(
+        Icon,
+        {
+          icon: "solar:trash-bin-trash-bold",
+          className: "size-4 text-destructive"
+        }
+      )
+    ))
+  ))))))), /* @__PURE__ */ React.createElement(Card, { className: "border-primary/5 shadow-sm" }, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(CardTitle, null, t("Permissions")), /* @__PURE__ */ React.createElement(CardDescription, null, t("System permissions."))), /* @__PURE__ */ React.createElement(CardContent, { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      placeholder: t("New permission..."),
+      value: newPermissionName,
+      onChange: (e) => setNewPermissionName(e.target.value)
+    }
+  ), /* @__PURE__ */ React.createElement(Button, { onClick: handleCreatePermission }, t("Add"))), /* @__PURE__ */ React.createElement("div", { className: "border rounded-md max-h-[300px] overflow-auto" }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableBody, null, permissions.map((perm) => /* @__PURE__ */ React.createElement(TableRow, { key: perm.id }, /* @__PURE__ */ React.createElement(TableCell, { className: "font-medium" }, perm.name), /* @__PURE__ */ React.createElement(TableCell, { className: "text-right" }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: () => handleDeletePermission(perm.id)
+    },
+    /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        icon: "solar:trash-bin-trash-bold",
+        className: "size-4 text-destructive"
+      }
+    )
+  ))))))))), /* @__PURE__ */ React.createElement(Card, { className: "border-primary/5 shadow-sm" }, /* @__PURE__ */ React.createElement(CardHeader, null, /* @__PURE__ */ React.createElement(CardTitle, null, t("Users")), /* @__PURE__ */ React.createElement(CardDescription, null, t("Manage user roles."))), /* @__PURE__ */ React.createElement(CardContent, { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "border rounded-md max-h-[358px] overflow-auto" }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableBody, null, users.map((user) => /* @__PURE__ */ React.createElement(
+    TableRow,
+    {
+      key: user.id,
+      className: selectedUser?.id === user.id ? "bg-primary/5" : ""
+    },
+    /* @__PURE__ */ React.createElement(
+      TableCell,
+      {
+        className: "font-medium cursor-pointer",
+        onClick: () => setSelectedUser(user)
+      },
+      /* @__PURE__ */ React.createElement("div", null, user.name),
+      /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground" }, user.email)
+    )
+  )))))))), /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: !!selectedRole,
+      onOpenChange: (open) => !open && setSelectedRole(null)
+    },
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogHeader, null, /* @__PURE__ */ React.createElement(DialogTitle, null, t("Edit Role: {roleName}", { roleName: selectedRole?.name })), /* @__PURE__ */ React.createElement(DialogDescription, null, t("Manage permissions for role {roleName}", {
+      roleName: selectedRole?.name
+    })), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2" }, permissions.map((perm) => {
+      const hasIt = rolePermissions.some((rp) => rp.id === perm.id);
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          key: perm.id,
+          variant: hasIt ? "default" : "outline",
+          size: "sm",
+          className: "justify-start gap-2 h-auto py-2 px-3 overflow-hidden",
+          onClick: () => togglePermissionForRole(perm.id, hasIt)
+        },
+        /* @__PURE__ */ React.createElement(
+          Icon,
+          {
+            icon: hasIt ? "solar:check-circle-bold" : "solar:circle-linear",
+            className: hasIt ? "text-primary-foreground" : "text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs" }, perm.name)
+      );
+    }))))
+  ), /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: !!selectedUser,
+      onOpenChange: (open) => !open && setSelectedUser(null)
+    },
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(DialogHeader, null, /* @__PURE__ */ React.createElement(DialogTitle, null, t("Management for {selectedUser}", {
+      selectedUser: selectedUser?.name
+    })), /* @__PURE__ */ React.createElement(DialogDescription, null, t("Manage roles and permissions for {selectedUser}", {
+      selectedUser: selectedUser?.name
+    })), /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-[10px] font-black uppercase text-muted-foreground tracking-widest mb-3" }, t("User Roles")), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2" }, roles.map((role) => {
+      const hasIt = userRbacData.roles.some(
+        (ur) => ur.id === role.id
+      );
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          key: role.id,
+          variant: hasIt ? "default" : "outline",
+          size: "sm",
+          className: "justify-start gap-2 h-auto py-2 px-3 overflow-hidden",
+          onClick: () => toggleRoleForUser(role.id, hasIt)
+        },
+        /* @__PURE__ */ React.createElement(
+          Icon,
+          {
+            icon: hasIt ? "solar:check-circle-bold" : "solar:circle-linear",
+            className: hasIt ? "text-primary-foreground" : "text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs" }, role.name)
+      );
+    }))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-[10px] font-black uppercase text-muted-foreground tracking-widest mb-3" }, t("Direct Permissions (User-specific)")), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2" }, permissions.map((perm) => {
+      const isDirect = userRbacData.directPermissions.some(
+        (up) => up.id === perm.id
+      );
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          key: perm.id,
+          variant: isDirect ? "default" : "outline",
+          size: "sm",
+          className: "justify-start gap-2 h-auto py-2 px-3 overflow-hidden",
+          onClick: () => togglePermissionForUser(perm.id, isDirect)
+        },
+        /* @__PURE__ */ React.createElement(
+          Icon,
+          {
+            icon: isDirect ? "solar:check-circle-bold" : "solar:circle-linear",
+            className: isDirect ? "text-primary-foreground" : "text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs" }, perm.name)
+      );
+    }))), /* @__PURE__ */ React.createElement("div", { className: "pt-4 border-t" }, /* @__PURE__ */ React.createElement("p", { className: "text-[10px] font-black uppercase text-muted-foreground tracking-widest mb-2" }, t("Effective Permissions (inherited + direct)")), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1" }, userRbacData.effectivePermissions.map((p) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: p.id,
+        className: "bg-muted px-2 py-0.5 rounded text-[9px] font-mono"
+      },
+      p.name
+    )), userRbacData.effectivePermissions.length === 0 && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] italic" }, t("No permissions")))))))
+  ), loading && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-background/50 backdrop-blur-sm flex items-center justify-center z-50" }, /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      icon: "svg-spinners:18-dots-indicator",
+      className: "size-12 text-primary"
+    }
+  )));
+}

package/dist/ui/session-manager/components/sessions-list.cjs

@@ -0,0 +1,160 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SessionsList = SessionsList;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _intl = require("@arch-cadre/intl");
+var _ui = require("@arch-cadre/ui");
+var _alertDialog = require("@arch-cadre/ui/components/alert-dialog");
+var _badge = require("@arch-cadre/ui/components/badge");
+var _button = require("@arch-cadre/ui/components/button");
+var _navigation = require("next/navigation");
+var _sessionManager = require("../../../actions/session-manager/index.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CORE_SESSION_KEYS = ["id", "createdAt", "expiresAt", "isCurrent", "userId"];
+function SessionsList({
+  sessions
+}) {
+  const router = (0, _navigation.useRouter)();
+  const [isPending, startTransition] = (0, _react.useTransition)();
+  const [revokingSessionId, setRevokingSessionId] = (0, _react.useState)(null);
+  const {
+    t
+  } = (0, _intl.useTranslation)();
+  const renderAugmentations = session => {
+    return Object.entries(session).filter(([key]) => !CORE_SESSION_KEYS.includes(key)).map(([key, value]) => {
+      if (key === "twoFactorVerified" || key === "two_factor_verified") {
+        return /* @__PURE__ */React.createElement(_badge.Badge, {
+          key,
+          variant: "outline",
+          className: (0, _ui.cn)(value ? "text-[10px] px-1.5 text-green-600 border-green-200" : "text-[10px] px-1.5 text-red-600 border-red-200")
+        }, /* @__PURE__ */React.createElement(_ui.Icon, {
+          icon: "solar:shield-check-broken",
+          className: "h-2.5 w-2.5 mr-0.5"
+        }), t("2FA"));
+      }
+      if (typeof value === "boolean" && value === false) return null;
+      return /* @__PURE__ */React.createElement(_badge.Badge, {
+        key,
+        variant: "outline",
+        className: "text-[10px] px-1.5 text-muted-foreground uppercase font-black tracking-widest"
+      }, t(key), typeof value !== "boolean" && `: ${value}`);
+    });
+  };
+  const handleRevokeSession = sessionId => {
+    setRevokingSessionId(sessionId);
+    startTransition(async () => {
+      const result = await (0, _sessionManager.revokeSessionAction)(sessionId);
+      if (result.error) {
+        _ui.toast.error(result.error);
+      } else {
+        _ui.toast.success(t("Session revoked successfully"));
+        router.refresh();
+      }
+      setRevokingSessionId(null);
+    });
+  };
+  const handleRevokeAllOther = () => {
+    startTransition(async () => {
+      const result = await (0, _sessionManager.revokeAllOtherSessionsAction)();
+      if (result.error) {
+        _ui.toast.error(result.error);
+      } else {
+        _ui.toast.success(t("All other sessions revoked successfully"));
+        router.refresh();
+      }
+    });
+  };
+  const isExpiringSoon = expiresAt => {
+    const now = /* @__PURE__ */new Date();
+    const diffDays = (expiresAt.getTime() - now.getTime()) / (1e3 * 60 * 60 * 24);
+    return diffDays < 7;
+  };
+  const otherSessions = sessions.filter(s => !s.isCurrent);
+  return /* @__PURE__ */React.createElement("div", {
+    className: "space-y-4"
+  }, otherSessions.length > 0 && /* @__PURE__ */React.createElement("div", {
+    className: "flex justify-end"
+  }, /* @__PURE__ */React.createElement(_alertDialog.AlertDialog, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogTrigger, {
+    asChild: true
+  }, /* @__PURE__ */React.createElement(_button.Button, {
+    variant: "outline",
+    size: "sm",
+    disabled: isPending
+  }, /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:logout-2-broken",
+    className: "h-4 w-4 mr-2"
+  }), t("Revoke All Other Sessions"))), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogContent, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogHeader, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogTitle, null, t("Revoke All Other Sessions?")), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogDescription, null, t("This will sign out all other devices. You will remain signed in on this device. This action cannot be undone."))), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogFooter, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogCancel, null, t("Cancel")), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogAction, {
+    onClick: handleRevokeAllOther,
+    disabled: isPending,
+    className: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+  }, isPending ? t("Revoking...") : t("Revoke All")))))), /* @__PURE__ */React.createElement("div", {
+    className: "space-y-3"
+  }, sessions.map(session => /* @__PURE__ */React.createElement("div", {
+    key: session.id,
+    className: (0, _ui.cn)("flex items-center justify-between p-4 rounded-lg border bg-card", session.isCurrent && "ring-2 ring-primary")
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "flex items-center gap-4"
+  }, /* @__PURE__ */React.createElement("div", {
+    className: (0, _ui.cn)("flex h-10 w-10 items-center justify-center rounded-full", session.isCurrent ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground")
+  }, /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:monitor-broken",
+    className: "h-5 w-5"
+  })), /* @__PURE__ */React.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "font-medium text-sm"
+  }, session.isCurrent ? t("Current Session") : t("Session")), session.isCurrent && /* @__PURE__ */React.createElement(_badge.Badge, {
+    variant: "secondary",
+    className: "text-[10px] px-1.5"
+  }, t("This device")), renderAugmentations(session)), /* @__PURE__ */React.createElement("div", {
+    className: "flex items-center gap-3 text-xs text-muted-foreground"
+  }, /* @__PURE__ */React.createElement("span", {
+    className: "flex items-center gap-1"
+  }, /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:clock-circle-broken",
+    className: "h-3 w-3"
+  }), t("Started {{ time }}", {
+    time: session.createdAt
+  })), /* @__PURE__ */React.createElement("span", {
+    className: "flex items-center gap-1"
+  }, /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:hourglass-line-broken",
+    className: (0, _ui.cn)("h-3 w-3", isExpiringSoon(session.expiresAt) && "text-orange-500")
+  }), t("Expires {{ time }}", {
+    time: session.expiresAt
+  }))))), !session.isCurrent && /* @__PURE__ */React.createElement(_alertDialog.AlertDialog, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogTrigger, {
+    asChild: true
+  }, /* @__PURE__ */React.createElement(_button.Button, {
+    variant: "ghost",
+    size: "sm",
+    className: "text-muted-foreground hover:text-destructive",
+    disabled: isPending && revokingSessionId === session.id
+  }, isPending && revokingSessionId === session.id ? /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:refresh-broken",
+    className: "h-4 w-4 animate-spin"
+  }) : /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:logout-2-broken",
+    className: "h-4 w-4 mr-1"
+  }), t("Revoke")))), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogContent, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogHeader, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogTitle, null, t("Revoke Session?")), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogDescription, null, t("This will sign out this device immediately. The session was started {{ time }}.", {
+    time: session.createdAt
+  }))), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogFooter, null, /* @__PURE__ */React.createElement(_alertDialog.AlertDialogCancel, null, t("Cancel")), /* @__PURE__ */React.createElement(_alertDialog.AlertDialogAction, {
+    onClick: () => handleRevokeSession(session.id),
+    disabled: isPending,
+    className: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+  }, isPending ? t("Revoking...") : t("Revoke")))))))), sessions.length === 0 && /* @__PURE__ */React.createElement("div", {
+    className: "text-center py-8 text-muted-foreground"
+  }, /* @__PURE__ */React.createElement(_ui.Icon, {
+    icon: "solar:devices-broken",
+    className: "h-12 w-12 mx-auto mb-3 opacity-50"
+  }), /* @__PURE__ */React.createElement("p", null, t("No active sessions found"))), sessions.length === 1 && sessions[0].isCurrent && /* @__PURE__ */React.createElement("p", {
+    className: "text-sm text-muted-foreground text-center py-4"
+  }, t("You only have one active session (this device).")));
+}

package/dist/ui/session-manager/components/sessions-list.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+type Session = {
+    id: string;
+    createdAt: Date;
+    expiresAt: Date;
+    isCurrent: boolean;
+    [key: string]: any;
+};
+interface SessionsListProps {
+    sessions: Session[];
+}
+export declare function SessionsList({ sessions }: SessionsListProps): React.JSX.Element;
+export {};