Merge pull request #2121 from Fredkiss3/feat/device-approvals

feat: device approvals
add pretty apple device names
2026-04-26 07:52:24 +00:00 · 2026-01-15 21:33:31 -08:00 · 2026-01-15 17:59:45 -08:00 · 2026-01-15 23:25:05 +01:00 · 2026-01-15 03:46:25 +01:00 · 2026-01-15 03:40:30 +01:00
47 changed files with 2029 additions and 325 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -50,4 +50,5 @@ dynamic/
 *.mmdb
 scratch/
 tsconfig.json
-hydrateSaas.ts
+hydrateSaas.ts
+CLAUDE.md
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -257,6 +257,8 @@
    "accessRolesSearch": "Search roles...",
    "accessRolesAdd": "Add Role",
    "accessRoleDelete": "Delete Role",
+    "accessApprovalsManage": "Manage Approvals",
+    "accessApprovalsDescription": "Manage approval requests in the organization",
    "description": "Description",
    "inviteTitle": "Open Invitations",
    "inviteDescription": "Manage invitations for other users to join the organization",
@@ -450,6 +452,18 @@
    "selectDuration": "Select duration",
    "selectResource": "Select Resource",
    "filterByResource": "Filter By Resource",
+    "selectApprovalState": "Select Approval State",
+    "filterByApprovalState": "Filter By Approval State",
+    "approvalListEmpty": "No approvals",
+    "approvalState": "Approval State",
+    "approve": "Approve",
+    "approved": "Approved",
+    "denied": "Denied",
+    "deniedApproval": "Denied Approval",
+    "all": "All",
+    "deny": "Deny",
+    "viewDetails": "View Details",
+    "requestingNewDeviceApproval": "requested a new device",
    "resetFilters": "Reset Filters",
    "totalBlocked": "Requests Blocked By Pangolin",
    "totalRequests": "Total Requests",
@@ -729,16 +743,28 @@
    "countries": "Countries",
    "accessRoleCreate": "Create Role",
    "accessRoleCreateDescription": "Create a new role to group users and manage their permissions.",
+    "accessRoleEdit": "Edit Role",
+    "accessRoleEditDescription": "Edit role information.",
    "accessRoleCreateSubmit": "Create Role",
    "accessRoleCreated": "Role created",
    "accessRoleCreatedDescription": "The role has been successfully created.",
    "accessRoleErrorCreate": "Failed to create role",
    "accessRoleErrorCreateDescription": "An error occurred while creating the role.",
+    "accessRoleUpdateSubmit": "Update Role",
+    "accessRoleUpdated": "Role updated",
+    "accessRoleUpdatedDescription": "The role has been successfully updated.",
+    "accessApprovalUpdated": "Approval processed",
+    "accessApprovalApprovedDescription": "Set Approval Request decision to approved.",
+    "accessApprovalDeniedDescription": "Set Approval Request decision to denied.",
+    "accessRoleErrorUpdate": "Failed to update role",
+    "accessRoleErrorUpdateDescription": "An error occurred while updating the role.",
+    "accessApprovalErrorUpdate": "Failed to process approval",
+    "accessApprovalErrorUpdateDescription": "An error occurred while processing the approval.",
    "accessRoleErrorNewRequired": "New role is required",
    "accessRoleErrorRemove": "Failed to remove role",
    "accessRoleErrorRemoveDescription": "An error occurred while removing the role.",
    "accessRoleName": "Role Name",
-    "accessRoleQuestionRemove": "You're about to delete the {name} role. You cannot undo this action.",
+    "accessRoleQuestionRemove": "You're about to delete the `{name}` role. You cannot undo this action.",
    "accessRoleRemove": "Remove Role",
    "accessRoleRemoveDescription": "Remove a role from the organization",
    "accessRoleRemoveSubmit": "Remove Role",
@@ -1193,6 +1219,7 @@
    "sidebarOverview": "Overview",
    "sidebarHome": "Home",
    "sidebarSites": "Sites",
+    "sidebarApprovals": "Approval Requests",
    "sidebarResources": "Resources",
    "sidebarProxyResources": "Public",
    "sidebarClientResources": "Private",
@@ -1308,6 +1335,7 @@
    "refreshError": "Failed to refresh data",
    "verified": "Verified",
    "pending": "Pending",
+    "pendingApproval": "Pending Approval",
    "sidebarBilling": "Billing",
    "billing": "Billing",
    "orgBillingDescription": "Manage billing information and subscriptions",
@@ -1551,6 +1579,8 @@
    "IntervalSeconds": "Healthy Interval",
    "timeoutSeconds": "Timeout (sec)",
    "timeIsInSeconds": "Time is in seconds",
+    "requireDeviceApproval": "Require Device Approvals",
+    "requireDeviceApprovalDescription": "Users with this role need their devices approved by an admin before they can access resources",
    "retryAttempts": "Retry Attempts",
    "expectedResponseCodes": "Expected Response Codes",
    "expectedResponseCodesDescription": "HTTP status code that indicates healthy status. If left blank, 200-300 is considered healthy.",
--- a/server/auth/actions.ts
+++ b/server/auth/actions.ts
@@ -129,7 +129,9 @@ export enum ActionsEnum {
    getBlueprint = "getBlueprint",
    applyBlueprint = "applyBlueprint",
    viewLogs = "viewLogs",
-    exportLogs = "exportLogs"
+    exportLogs = "exportLogs",
+    listApprovals = "listApprovals",
+    updateApprovals = "updateApprovals"
 }

 export async function checkUserActionPermission(
--- a/server/db/ios_models.json
+++ b/server/db/ios_models.json
@@ -0,0 +1,150 @@
+{
+  "iPad1,1": "iPad",
+  "iPad2,1": "iPad 2",
+  "iPad2,2": "iPad 2",
+  "iPad2,3": "iPad 2",
+  "iPad2,4": "iPad 2",
+  "iPad3,1": "iPad 3rd Gen",
+  "iPad3,3": "iPad 3rd Gen",
+  "iPad3,2": "iPad 3rd Gen",
+  "iPad3,4": "iPad 4th Gen",
+  "iPad3,5": "iPad 4th Gen",
+  "iPad3,6": "iPad 4th Gen",
+  "iPad6,11": "iPad 9.7 5th Gen",
+  "iPad6,12": "iPad 9.7 5th Gen",
+  "iPad7,5": "iPad 9.7 6th Gen",
+  "iPad7,6": "iPad 9.7 6th Gen",
+  "iPad7,11": "iPad 10.2 7th Gen",
+  "iPad7,12": "iPad 10.2 7th Gen",
+  "iPad11,6": "iPad 10.2 8th Gen",
+  "iPad11,7": "iPad 10.2 8th Gen",
+  "iPad12,1": "iPad 10.2 9th Gen",
+  "iPad12,2": "iPad 10.2 9th Gen",
+  "iPad13,18": "iPad 10.9 10th Gen",
+  "iPad13,19": "iPad 10.9 10th Gen",
+  "iPad4,1": "iPad Air",
+  "iPad4,2": "iPad Air",
+  "iPad4,3": "iPad Air",
+  "iPad5,3": "iPad Air 2",
+  "iPad5,4": "iPad Air 2",
+  "iPad11,3": "iPad Air 3rd Gen",
+  "iPad11,4": "iPad Air 3rd Gen",
+  "iPad13,1": "iPad Air 4th Gen",
+  "iPad13,2": "iPad Air 4th Gen",
+  "iPad13,16": "iPad Air 5th Gen",
+  "iPad13,17": "iPad Air 5th Gen",
+  "iPad14,8": "iPad Air M2 11",
+  "iPad14,9": "iPad Air M2 11",
+  "iPad14,10": "iPad Air M2 13",
+  "iPad14,11": "iPad Air M2 13",
+  "iPad2,5": "iPad mini",
+  "iPad2,6": "iPad mini",
+  "iPad2,7": "iPad mini",
+  "iPad4,4": "iPad mini 2",
+  "iPad4,5": "iPad mini 2",
+  "iPad4,6": "iPad mini 2",
+  "iPad4,7": "iPad mini 3",
+  "iPad4,8": "iPad mini 3",
+  "iPad4,9": "iPad mini 3",
+  "iPad5,1": "iPad mini 4",
+  "iPad5,2": "iPad mini 4",
+  "iPad11,1": "iPad mini 5th Gen",
+  "iPad11,2": "iPad mini 5th Gen",
+  "iPad14,1": "iPad mini 6th Gen",
+  "iPad14,2": "iPad mini 6th Gen",
+  "iPad6,7": "iPad Pro 12.9",
+  "iPad6,8": "iPad Pro 12.9",
+  "iPad6,3": "iPad Pro 9.7",
+  "iPad6,4": "iPad Pro 9.7",
+  "iPad7,3": "iPad Pro 10.5",
+  "iPad7,4": "iPad Pro 10.5",
+  "iPad7,1": "iPad Pro 12.9",
+  "iPad7,2": "iPad Pro 12.9",
+  "iPad8,1": "iPad Pro 11",
+  "iPad8,2": "iPad Pro 11",
+  "iPad8,3": "iPad Pro 11",
+  "iPad8,4": "iPad Pro 11",
+  "iPad8,5": "iPad Pro 12.9",
+  "iPad8,6": "iPad Pro 12.9",
+  "iPad8,7": "iPad Pro 12.9",
+  "iPad8,8": "iPad Pro 12.9",
+  "iPad8,9": "iPad Pro 11",
+  "iPad8,10": "iPad Pro 11",
+  "iPad8,11": "iPad Pro 12.9",
+  "iPad8,12": "iPad Pro 12.9",
+  "iPad13,4": "iPad Pro 11",
+  "iPad13,5": "iPad Pro 11",
+  "iPad13,6": "iPad Pro 11",
+  "iPad13,7": "iPad Pro 11",
+  "iPad13,8": "iPad Pro 12.9",
+  "iPad13,9": "iPad Pro 12.9",
+  "iPad13,10": "iPad Pro 12.9",
+  "iPad13,11": "iPad Pro 12.9",
+  "iPad14,3": "iPad Pro 11",
+  "iPad14,4": "iPad Pro 11",
+  "iPad14,5": "iPad Pro 12.9",
+  "iPad14,6": "iPad Pro 12.9",
+  "iPad16,3": "iPad Pro M4 11",
+  "iPad16,4": "iPad Pro M4 11",
+  "iPad16,5": "iPad Pro M4 13",
+  "iPad16,6": "iPad Pro M4 13",
+  "iPhone1,1": "iPhone",
+  "iPhone1,2": "iPhone 3G",
+  "iPhone2,1": "iPhone 3GS",
+  "iPhone3,1": "iPhone 4",
+  "iPhone3,2": "iPhone 4",
+  "iPhone3,3": "iPhone 4",
+  "iPhone4,1": "iPhone 4S",
+  "iPhone5,1": "iPhone 5",
+  "iPhone5,2": "iPhone 5",
+  "iPhone5,3": "iPhone 5c",
+  "iPhone5,4": "iPhone 5c",
+  "iPhone6,1": "iPhone 5s",
+  "iPhone6,2": "iPhone 5s",
+  "iPhone7,2": "iPhone 6",
+  "iPhone7,1": "iPhone 6 Plus",
+  "iPhone8,1": "iPhone 6s",
+  "iPhone8,2": "iPhone 6s Plus",
+  "iPhone8,4": "iPhone SE",
+  "iPhone9,1": "iPhone 7",
+  "iPhone9,3": "iPhone 7",
+  "iPhone9,2": "iPhone 7 Plus",
+  "iPhone9,4": "iPhone 7 Plus",
+  "iPhone10,1": "iPhone 8",
+  "iPhone10,4": "iPhone 8",
+  "iPhone10,2": "iPhone 8 Plus",
+  "iPhone10,5": "iPhone 8 Plus",
+  "iPhone10,3": "iPhone X",
+  "iPhone10,6": "iPhone X",
+  "iPhone11,2": "iPhone Xs",
+  "iPhone11,6": "iPhone Xs Max",
+  "iPhone11,8": "iPhone XR",
+  "iPhone12,1": "iPhone 11",
+  "iPhone12,3": "iPhone 11 Pro",
+  "iPhone12,5": "iPhone 11 Pro Max",
+  "iPhone12,8": "iPhone SE",
+  "iPhone13,1": "iPhone 12 mini",
+  "iPhone13,2": "iPhone 12",
+  "iPhone13,3": "iPhone 12 Pro",
+  "iPhone13,4": "iPhone 12 Pro Max",
+  "iPhone14,4": "iPhone 13 mini",
+  "iPhone14,5": "iPhone 13",
+  "iPhone14,2": "iPhone 13 Pro",
+  "iPhone14,3": "iPhone 13 Pro Max",
+  "iPhone14,6": "iPhone SE",
+  "iPhone14,7": "iPhone 14",
+  "iPhone14,8": "iPhone 14 Plus",
+  "iPhone15,2": "iPhone 14 Pro",
+  "iPhone15,3": "iPhone 14 Pro Max",
+  "iPhone15,4": "iPhone 15",
+  "iPhone15,5": "iPhone 15 Plus",
+  "iPhone16,1": "iPhone 15 Pro",
+  "iPhone16,2": "iPhone 15 Pro Max",
+  "iPod1,1": "iPod touch Original",
+  "iPod2,1": "iPod touch 2nd",
+  "iPod3,1": "iPod touch 3rd Gen",
+  "iPod4,1": "iPod touch 4th",
+  "iPod5,1": "iPod touch 5th",
+  "iPod7,1": "iPod touch 6th Gen",
+  "iPod9,1": "iPod touch 7th Gen"
+}
--- a/server/db/mac_models.json
+++ b/server/db/mac_models.json
@@ -0,0 +1,201 @@
+{
+  "PowerMac4,4": "eMac",
+  "PowerMac6,4": "eMac",
+  "PowerBook2,1": "iBook",
+  "PowerBook2,2": "iBook",
+  "PowerBook4,1": "iBook",
+  "PowerBook4,2": "iBook",
+  "PowerBook4,3": "iBook",
+  "PowerBook6,3": "iBook",
+  "PowerBook6,5": "iBook",
+  "PowerBook6,7": "iBook",
+  "iMac,1": "iMac",
+  "PowerMac2,1": "iMac",
+  "PowerMac2,2": "iMac",
+  "PowerMac4,1": "iMac",
+  "PowerMac4,2": "iMac",
+  "PowerMac4,5": "iMac",
+  "PowerMac6,1": "iMac",
+  "PowerMac6,3*": "iMac",
+  "PowerMac6,3": "iMac",
+  "PowerMac8,1": "iMac",
+  "PowerMac8,2": "iMac",
+  "PowerMac12,1": "iMac",
+  "iMac4,1": "iMac",
+  "iMac4,2": "iMac",
+  "iMac5,2": "iMac",
+  "iMac5,1": "iMac",
+  "iMac6,1": "iMac",
+  "iMac7,1": "iMac",
+  "iMac8,1": "iMac",
+  "iMac9,1": "iMac",
+  "iMac10,1": "iMac",
+  "iMac11,1": "iMac",
+  "iMac11,2": "iMac",
+  "iMac11,3": "iMac",
+  "iMac12,1": "iMac",
+  "iMac12,2": "iMac",
+  "iMac13,1": "iMac",
+  "iMac13,2": "iMac",
+  "iMac14,1": "iMac",
+  "iMac14,3": "iMac",
+  "iMac14,2": "iMac",
+  "iMac14,4": "iMac",
+  "iMac15,1": "iMac",
+  "iMac16,1": "iMac",
+  "iMac16,2": "iMac",
+  "iMac17,1": "iMac",
+  "iMac18,1": "iMac",
+  "iMac18,2": "iMac",
+  "iMac18,3": "iMac",
+  "iMac19,2": "iMac",
+  "iMac19,1": "iMac",
+  "iMac20,1": "iMac",
+  "iMac20,2": "iMac",
+  "iMac21,2": "iMac",
+  "iMac21,1": "iMac",
+  "iMacPro1,1": "iMac Pro",
+  "PowerMac10,1": "Mac mini",
+  "PowerMac10,2": "Mac mini",
+  "Macmini1,1": "Mac mini",
+  "Macmini2,1": "Mac mini",
+  "Macmini3,1": "Mac mini",
+  "Macmini4,1": "Mac mini",
+  "Macmini5,1": "Mac mini",
+  "Macmini5,2": "Mac mini",
+  "Macmini5,3": "Mac mini",
+  "Macmini6,1": "Mac mini",
+  "Macmini6,2": "Mac mini",
+  "Macmini7,1": "Mac mini",
+  "Macmini8,1": "Mac mini",
+  "ADP3,2": "Mac mini",
+  "Macmini9,1": "Mac mini",
+  "Mac14,3": "Mac mini",
+  "Mac14,12": "Mac mini",
+  "MacPro1,1*": "Mac Pro",
+  "MacPro2,1": "Mac Pro",
+  "MacPro3,1": "Mac Pro",
+  "MacPro4,1": "Mac Pro",
+  "MacPro5,1": "Mac Pro",
+  "MacPro6,1": "Mac Pro",
+  "MacPro7,1": "Mac Pro",
+  "N/A*": "Power Macintosh",
+  "PowerMac1,1": "Power Macintosh",
+  "PowerMac3,1": "Power Macintosh",
+  "PowerMac3,3": "Power Macintosh",
+  "PowerMac3,4": "Power Macintosh",
+  "PowerMac3,5": "Power Macintosh",
+  "PowerMac3,6": "Power Macintosh",
+  "Mac13,1": "Mac Studio",
+  "Mac13,2": "Mac Studio",
+  "MacBook1,1": "MacBook",
+  "MacBook2,1": "MacBook",
+  "MacBook3,1": "MacBook",
+  "MacBook4,1": "MacBook",
+  "MacBook5,1": "MacBook",
+  "MacBook5,2": "MacBook",
+  "MacBook6,1": "MacBook",
+  "MacBook7,1": "MacBook",
+  "MacBook8,1": "MacBook",
+  "MacBook9,1": "MacBook",
+  "MacBook10,1": "MacBook",
+  "MacBookAir1,1": "MacBook Air",
+  "MacBookAir2,1": "MacBook Air",
+  "MacBookAir3,1": "MacBook Air",
+  "MacBookAir3,2": "MacBook Air",
+  "MacBookAir4,1": "MacBook Air",
+  "MacBookAir4,2": "MacBook Air",
+  "MacBookAir5,1": "MacBook Air",
+  "MacBookAir5,2": "MacBook Air",
+  "MacBookAir6,1": "MacBook Air",
+  "MacBookAir6,2": "MacBook Air",
+  "MacBookAir7,1": "MacBook Air",
+  "MacBookAir7,2": "MacBook Air",
+  "MacBookAir8,1": "MacBook Air",
+  "MacBookAir8,2": "MacBook Air",
+  "MacBookAir9,1": "MacBook Air",
+  "MacBookAir10,1": "MacBook Air",
+  "Mac14,2": "MacBook Air",
+  "MacBookPro1,1": "MacBook Pro",
+  "MacBookPro1,2": "MacBook Pro",
+  "MacBookPro2,2": "MacBook Pro",
+  "MacBookPro2,1": "MacBook Pro",
+  "MacBookPro3,1": "MacBook Pro",
+  "MacBookPro4,1": "MacBook Pro",
+  "MacBookPro5,1": "MacBook Pro",
+  "MacBookPro5,2": "MacBook Pro",
+  "MacBookPro5,5": "MacBook Pro",
+  "MacBookPro5,4": "MacBook Pro",
+  "MacBookPro5,3": "MacBook Pro",
+  "MacBookPro7,1": "MacBook Pro",
+  "MacBookPro6,2": "MacBook Pro",
+  "MacBookPro6,1": "MacBook Pro",
+  "MacBookPro8,1": "MacBook Pro",
+  "MacBookPro8,2": "MacBook Pro",
+  "MacBookPro8,3": "MacBook Pro",
+  "MacBookPro9,2": "MacBook Pro",
+  "MacBookPro9,1": "MacBook Pro",
+  "MacBookPro10,1": "MacBook Pro",
+  "MacBookPro10,2": "MacBook Pro",
+  "MacBookPro11,1": "MacBook Pro",
+  "MacBookPro11,2": "MacBook Pro",
+  "MacBookPro11,3": "MacBook Pro",
+  "MacBookPro12,1": "MacBook Pro",
+  "MacBookPro11,4": "MacBook Pro",
+  "MacBookPro11,5": "MacBook Pro",
+  "MacBookPro13,1": "MacBook Pro",
+  "MacBookPro13,2": "MacBook Pro",
+  "MacBookPro13,3": "MacBook Pro",
+  "MacBookPro14,1": "MacBook Pro",
+  "MacBookPro14,2": "MacBook Pro",
+  "MacBookPro14,3": "MacBook Pro",
+  "MacBookPro15,2": "MacBook Pro",
+  "MacBookPro15,1": "MacBook Pro",
+  "MacBookPro15,3": "MacBook Pro",
+  "MacBookPro15,4": "MacBook Pro",
+  "MacBookPro16,1": "MacBook Pro",
+  "MacBookPro16,3": "MacBook Pro",
+  "MacBookPro16,2": "MacBook Pro",
+  "MacBookPro16,4": "MacBook Pro",
+  "MacBookPro17,1": "MacBook Pro",
+  "MacBookPro18,3": "MacBook Pro",
+  "MacBookPro18,4": "MacBook Pro",
+  "MacBookPro18,1": "MacBook Pro",
+  "MacBookPro18,2": "MacBook Pro",
+  "Mac14,7": "MacBook Pro",
+  "Mac14,9": "MacBook Pro",
+  "Mac14,5": "MacBook Pro",
+  "Mac14,10": "MacBook Pro",
+  "Mac14,6": "MacBook Pro",
+  "PowerMac1,2": "Power Macintosh",
+  "PowerMac5,1": "Power Macintosh",
+  "PowerMac7,2": "Power Macintosh",
+  "PowerMac7,3": "Power Macintosh",
+  "PowerMac9,1": "Power Macintosh",
+  "PowerMac11,2": "Power Macintosh",
+  "PowerBook1,1": "PowerBook",
+  "PowerBook3,1": "PowerBook",
+  "PowerBook3,2": "PowerBook",
+  "PowerBook3,3": "PowerBook",
+  "PowerBook3,4": "PowerBook",
+  "PowerBook3,5": "PowerBook",
+  "PowerBook6,1": "PowerBook",
+  "PowerBook5,1": "PowerBook",
+  "PowerBook6,2": "PowerBook",
+  "PowerBook5,2": "PowerBook",
+  "PowerBook5,3": "PowerBook",
+  "PowerBook6,4": "PowerBook",
+  "PowerBook5,4": "PowerBook",
+  "PowerBook5,5": "PowerBook",
+  "PowerBook6,8": "PowerBook",
+  "PowerBook5,6": "PowerBook",
+  "PowerBook5,7": "PowerBook",
+  "PowerBook5,8": "PowerBook",
+  "PowerBook5,9": "PowerBook",
+  "RackMac1,1": "Xserve",
+  "RackMac1,2": "Xserve",
+  "RackMac3,1": "Xserve",
+  "Xserve1,1": "Xserve",
+  "Xserve2,1": "Xserve",
+  "Xserve3,1": "Xserve"
+}
--- a/server/db/names.ts
+++ b/server/db/names.ts
@@ -16,6 +16,24 @@ if (!dev) {
 }
 export const names = JSON.parse(readFileSync(file, "utf-8"));

+// Load iOS and Mac model mappings
+let iosModelsFile: string;
+let macModelsFile: string;
+if (!dev) {
+    iosModelsFile = join(__DIRNAME, "ios_models.json");
+    macModelsFile = join(__DIRNAME, "mac_models.json");
+} else {
+    iosModelsFile = join("server/db/ios_models.json");
+    macModelsFile = join("server/db/mac_models.json");
+}
+
+const iosModels: Record<string, string> = JSON.parse(
+    readFileSync(iosModelsFile, "utf-8")
+);
+const macModels: Record<string, string> = JSON.parse(
+    readFileSync(macModelsFile, "utf-8")
+);
+
 export async function getUniqueClientName(orgId: string): Promise<string> {
    let loops = 0;
    while (true) {
@@ -159,3 +177,29 @@ export function generateName(): string {
    // clean out any non-alphanumeric characters except for dashes
    return name.replace(/[^a-z0-9-]/g, "");
 }
+
+export function getMacDeviceName(macIdentifier?: string | null): string | null {
+    if (macIdentifier && macModels[macIdentifier]) {
+        return macModels[macIdentifier];
+    }
+    return null;
+}
+
+export function getIosDeviceName(iosIdentifier?: string | null): string | null {
+    if (iosIdentifier && iosModels[iosIdentifier]) {
+        return iosModels[iosIdentifier];
+    }
+    return null;
+}
+
+export function getUserDeviceName(
+    model: string | null,
+    fallBack: string | null
+): string {
+    return (
+        getMacDeviceName(model) ||
+        getIosDeviceName(model) ||
+        fallBack ||
+        "Unknown Device"
+    );
+}
--- a/server/db/pg/schema/privateSchema.ts
+++ b/server/db/pg/schema/privateSchema.ts
@@ -10,7 +10,15 @@ import {
    index
 } from "drizzle-orm/pg-core";
 import { InferSelectModel } from "drizzle-orm";
-import { domains, orgs, targets, users, exitNodes, sessions } from "./schema";
+import {
+    domains,
+    orgs,
+    targets,
+    users,
+    exitNodes,
+    sessions,
+    clients
+} from "./schema";

 export const certificates = pgTable("certificates", {
    certId: serial("certId").primaryKey(),
@@ -289,6 +297,33 @@ export const accessAuditLog = pgTable(
    ]
 );

+export const approvals = pgTable("approvals", {
+    approvalId: serial("approvalId").primaryKey(),
+    timestamp: integer("timestamp").notNull(), // this is EPOCH time in seconds
+    orgId: varchar("orgId")
+        .references(() => orgs.orgId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
+    clientId: integer("clientId").references(() => clients.clientId, {
+        onDelete: "cascade"
+    }), // clients reference user devices (in this case)
+    userId: varchar("userId")
+        .references(() => users.userId, {
+            // optionally tied to a user and in this case delete when the user deletes
+            onDelete: "cascade"
+        })
+        .notNull(),
+    decision: varchar("decision")
+        .$type<"approved" | "denied" | "pending">()
+        .default("pending")
+        .notNull(),
+    type: varchar("type")
+        .$type<"user_device" /*| 'proxy' // for later */>()
+        .notNull()
+});
+
+export type Approval = InferSelectModel<typeof approvals>;
 export type Limit = InferSelectModel<typeof limits>;
 export type Account = InferSelectModel<typeof account>;
 export type Certificate = InferSelectModel<typeof certificates>;
--- a/server/db/pg/schema/schema.ts
+++ b/server/db/pg/schema/schema.ts
@@ -365,7 +365,8 @@ export const roles = pgTable("roles", {
        .notNull(),
    isAdmin: boolean("isAdmin"),
    name: varchar("name").notNull(),
-    description: varchar("description")
+    description: varchar("description"),
+    requireDeviceApproval: boolean("requireDeviceApproval").default(false)
 });

 export const roleActions = pgTable("roleActions", {
@@ -691,7 +692,10 @@ export const clients = pgTable("clients", {
    lastHolePunch: integer("lastHolePunch"),
    maxConnections: integer("maxConnections"),
    archived: boolean("archived").notNull().default(false),
-    blocked: boolean("blocked").notNull().default(false)
+    blocked: boolean("blocked").notNull().default(false),
+    approvalState: varchar("approvalState").$type<
+        "pending" | "approved" | "denied"
+    >()
 });

 export const clientSitesAssociationsCache = pgTable(
--- a/server/db/sqlite/schema/privateSchema.ts
+++ b/server/db/sqlite/schema/privateSchema.ts
@@ -6,7 +6,7 @@ import {
    sqliteTable,
    text
 } from "drizzle-orm/sqlite-core";
-import { domains, exitNodes, orgs, sessions, users } from "./schema";
+import { clients, domains, exitNodes, orgs, sessions, users } from "./schema";

 export const certificates = sqliteTable("certificates", {
    certId: integer("certId").primaryKey({ autoIncrement: true }),
@@ -289,6 +289,31 @@ export const accessAuditLog = sqliteTable(
    ]
 );

+export const approvals = sqliteTable("approvals", {
+    approvalId: integer("approvalId").primaryKey({ autoIncrement: true }),
+    timestamp: integer("timestamp").notNull(), // this is EPOCH time in seconds
+    orgId: text("orgId")
+        .references(() => orgs.orgId, {
+            onDelete: "cascade"
+        })
+        .notNull(),
+    clientId: integer("clientId").references(() => clients.clientId, {
+        onDelete: "cascade"
+    }), // olms reference user devices clients
+    userId: text("userId").references(() => users.userId, {
+        // optionally tied to a user and in this case delete when the user deletes
+        onDelete: "cascade"
+    }),
+    decision: text("decision")
+        .$type<"approved" | "denied" | "pending">()
+        .default("pending")
+        .notNull(),
+    type: text("type")
+        .$type<"user_device" /*| 'proxy' // for later */>()
+        .notNull()
+});
+
+export type Approval = InferSelectModel<typeof approvals>;
 export type Limit = InferSelectModel<typeof limits>;
 export type Account = InferSelectModel<typeof account>;
 export type Certificate = InferSelectModel<typeof certificates>;
--- a/server/db/sqlite/schema/schema.ts
+++ b/server/db/sqlite/schema/schema.ts
@@ -387,7 +387,10 @@ export const clients = sqliteTable("clients", {
    // endpoint: text("endpoint"),
    lastHolePunch: integer("lastHolePunch"),
    archived: integer("archived", { mode: "boolean" }).notNull().default(false),
-    blocked: integer("blocked", { mode: "boolean" }).notNull().default(false)
+    blocked: integer("blocked", { mode: "boolean" }).notNull().default(false),
+    approvalState: text("approvalState").$type<
+        "pending" | "approved" | "denied"
+    >()
 });

 export const clientSitesAssociationsCache = sqliteTable(
@@ -604,7 +607,10 @@ export const roles = sqliteTable("roles", {
        .notNull(),
    isAdmin: integer("isAdmin", { mode: "boolean" }),
    name: text("name").notNull(),
-    description: text("description")
+    description: text("description"),
+    requireDeviceApproval: integer("requireDeviceApproval", {
+        mode: "boolean"
+    }).default(false)
 });

 export const roleActions = sqliteTable("roleActions", {
--- a/server/lib/calculateUserClientsForOrgs.ts
+++ b/server/lib/calculateUserClientsForOrgs.ts
@@ -1,21 +1,24 @@
+import { listExitNodes } from "#dynamic/lib/exitNodes";
+import { build } from "@server/build";
 import {
+    approvals,
    clients,
    db,
    olms,
    orgs,
    roleClients,
    roles,
+    Transaction,
    userClients,
-    userOrgs,
-    Transaction
+    userOrgs
 } from "@server/db";
-import { eq, and, notInArray } from "drizzle-orm";
-import { listExitNodes } from "#dynamic/lib/exitNodes";
-import { getNextAvailableClientSubnet } from "@server/lib/ip";
-import logger from "@server/logger";
-import { rebuildClientAssociationsFromClient } from "./rebuildClientAssociations";
-import { sendTerminateClient } from "@server/routers/client/terminate";
 import { getUniqueClientName } from "@server/db/names";
+import { getNextAvailableClientSubnet } from "@server/lib/ip";
+import { isLicensedOrSubscribed } from "@server/lib/isLicencedOrSubscribed";
+import logger from "@server/logger";
+import { sendTerminateClient } from "@server/routers/client/terminate";
+import { and, eq, notInArray, type InferInsertModel } from "drizzle-orm";
+import { rebuildClientAssociationsFromClient } from "./rebuildClientAssociations";

 export async function calculateUserClientsForOrgs(
    userId: string,
@@ -38,13 +41,15 @@ export async function calculateUserClientsForOrgs(
        const allUserOrgs = await transaction
            .select()
            .from(userOrgs)
+            .innerJoin(roles, eq(roles.roleId, userOrgs.roleId))
            .where(eq(userOrgs.userId, userId));

-        const userOrgIds = allUserOrgs.map((uo) => uo.orgId);
+        const userOrgIds = allUserOrgs.map(({ userOrgs: uo }) => uo.orgId);

        // For each OLM, ensure there's a client in each org the user is in
        for (const olm of userOlms) {
-            for (const userOrg of allUserOrgs) {
+            for (const userRoleOrg of allUserOrgs) {
+                const { userOrgs: userOrg, roles: role } = userRoleOrg;
                const orgId = userOrg.orgId;

                const [org] = await transaction
@@ -182,21 +187,46 @@ export async function calculateUserClientsForOrgs(

                const niceId = await getUniqueClientName(orgId);

+                const isOrgLicensed = await isLicensedOrSubscribed(
+                    userOrg.orgId
+                );
+                const requireApproval =
+                    build !== "oss" &&
+                    isOrgLicensed &&
+                    role.requireDeviceApproval;
+
+                const newClientData: InferInsertModel<typeof clients> = {
+                    userId,
+                    orgId: userOrg.orgId,
+                    exitNodeId: randomExitNode.exitNodeId,
+                    name: olm.name || "User Client",
+                    subnet: updatedSubnet,
+                    olmId: olm.olmId,
+                    type: "olm",
+                    niceId,
+                    approvalState: requireApproval ? "pending" : null
+                };
+
                // Create the client
                const [newClient] = await transaction
                    .insert(clients)
-                    .values({
-                        userId,
-                        orgId: userOrg.orgId,
-                        exitNodeId: randomExitNode.exitNodeId,
-                        name: olm.name || "User Client",
-                        subnet: updatedSubnet,
-                        olmId: olm.olmId,
-                        type: "olm",
-                        niceId
-                    })
+                    .values(newClientData)
                    .returning();

+                // create approval request
+                if (requireApproval) {
+                    await transaction
+                        .insert(approvals)
+                        .values({
+                            timestamp: Math.floor(new Date().getTime() / 1000),
+                            orgId: userOrg.orgId,
+                            clientId: newClient.clientId,
+                            userId,
+                            type: "user_device"
+                        })
+                        .returning();
+                }
+
                await rebuildClientAssociationsFromClient(
                    newClient,
                    transaction
--- a/server/private/routers/approvals/index.ts
+++ b/server/private/routers/approvals/index.ts
@@ -0,0 +1,15 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+export * from "./listApprovals";
+export * from "./processPendingApproval";
--- a/server/private/routers/approvals/listApprovals.ts
+++ b/server/private/routers/approvals/listApprovals.ts
@@ -0,0 +1,188 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import logger from "@server/logger";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+import type { Request, Response, NextFunction } from "express";
+import { build } from "@server/build";
+import { getOrgTierData } from "@server/lib/billing";
+import { TierId } from "@server/lib/billing/tiers";
+import { approvals, clients, db, users, type Approval } from "@server/db";
+import { eq, isNull, sql, not, and, desc } from "drizzle-orm";
+import response from "@server/lib/response";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string()
+});
+
+const querySchema = z.strictObject({
+    limit: z
+        .string()
+        .optional()
+        .default("1000")
+        .transform(Number)
+        .pipe(z.int().nonnegative()),
+    offset: z
+        .string()
+        .optional()
+        .default("0")
+        .transform(Number)
+        .pipe(z.int().nonnegative()),
+    approvalState: z
+        .enum(["pending", "approved", "denied", "all"])
+        .optional()
+        .default("all")
+        .catch("all")
+});
+
+async function queryApprovals(
+    orgId: string,
+    limit: number,
+    offset: number,
+    approvalState: z.infer<typeof querySchema>["approvalState"]
+) {
+    let state: Array<Approval["decision"]> = [];
+    switch (approvalState) {
+        case "pending":
+            state = ["pending"];
+            break;
+        case "approved":
+            state = ["approved"];
+            break;
+        case "denied":
+            state = ["denied"];
+            break;
+        default:
+            state = ["approved", "denied", "pending"];
+    }
+
+    const res = await db
+        .select({
+            approvalId: approvals.approvalId,
+            orgId: approvals.orgId,
+            clientId: approvals.clientId,
+            decision: approvals.decision,
+            type: approvals.type,
+            user: {
+                name: users.name,
+                userId: users.userId,
+                username: users.username
+            }
+        })
+        .from(approvals)
+        .innerJoin(users, and(eq(approvals.userId, users.userId)))
+        .leftJoin(
+            clients,
+            and(
+                eq(approvals.clientId, clients.clientId),
+                not(isNull(clients.userId)) // only user devices
+            )
+        )
+        .where(
+            and(
+                eq(approvals.orgId, orgId),
+                sql`${approvals.decision} in ${state}`
+            )
+        )
+        .orderBy(
+            sql`CASE ${approvals.decision} WHEN 'pending' THEN 0 ELSE 1 END`,
+            desc(approvals.timestamp)
+        )
+        .limit(limit)
+        .offset(offset);
+    return res;
+}
+
+export type ListApprovalsResponse = {
+    approvals: NonNullable<Awaited<ReturnType<typeof queryApprovals>>>;
+    pagination: { total: number; limit: number; offset: number };
+};
+
+export async function listApprovals(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const parsedQuery = querySchema.safeParse(req.query);
+        if (!parsedQuery.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedQuery.error).toString()
+                )
+            );
+        }
+        const { limit, offset, approvalState } = parsedQuery.data;
+
+        const { orgId } = parsedParams.data;
+
+        if (build === "saas") {
+            const { tier } = await getOrgTierData(orgId);
+            const subscribed = tier === TierId.STANDARD;
+            if (!subscribed) {
+                return next(
+                    createHttpError(
+                        HttpCode.FORBIDDEN,
+                        "This organization's current plan does not support this feature."
+                    )
+                );
+            }
+        }
+
+        const approvalsList = await queryApprovals(
+            orgId.toString(),
+            limit,
+            offset,
+            approvalState
+        );
+
+        const [{ count }] = await db
+            .select({ count: sql<number>`count(*)` })
+            .from(approvals);
+
+        return response<ListApprovalsResponse>(res, {
+            data: {
+                approvals: approvalsList,
+                pagination: {
+                    total: count,
+                    limit,
+                    offset
+                }
+            },
+            success: true,
+            error: false,
+            message: "Approvals retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}
--- a/server/private/routers/approvals/processPendingApproval.ts
+++ b/server/private/routers/approvals/processPendingApproval.ts
@@ -0,0 +1,142 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import logger from "@server/logger";
+import HttpCode from "@server/types/HttpCode";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";
+
+import { build } from "@server/build";
+import { approvals, clients, db, orgs, type Approval } from "@server/db";
+import { getOrgTierData } from "@server/lib/billing";
+import { TierId } from "@server/lib/billing/tiers";
+import response from "@server/lib/response";
+import { and, eq, type InferInsertModel } from "drizzle-orm";
+import type { NextFunction, Request, Response } from "express";
+
+const paramsSchema = z.strictObject({
+    orgId: z.string(),
+    approvalId: z.string().transform(Number).pipe(z.int().positive())
+});
+
+const bodySchema = z.strictObject({
+    decision: z.enum(["approved", "denied"])
+});
+
+export type ProcessApprovalResponse = Approval;
+
+export async function processPendingApproval(
+    req: Request,
+    res: Response,
+    next: NextFunction
+) {
+    try {
+        const parsedParams = paramsSchema.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error).toString()
+                )
+            );
+        }
+
+        const parsedBody = bodySchema.safeParse(req.body);
+
+        if (!parsedBody.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedBody.error).toString()
+                )
+            );
+        }
+
+        const { orgId, approvalId } = parsedParams.data;
+
+        if (build === "saas") {
+            const { tier } = await getOrgTierData(orgId);
+            const subscribed = tier === TierId.STANDARD;
+            if (!subscribed) {
+                return next(
+                    createHttpError(
+                        HttpCode.FORBIDDEN,
+                        "This organization's current plan does not support this feature."
+                    )
+                );
+            }
+        }
+
+        const updateData = parsedBody.data;
+
+        const approval = await db
+            .select()
+            .from(approvals)
+            .where(
+                and(
+                    eq(approvals.approvalId, approvalId),
+                    eq(approvals.decision, "pending")
+                )
+            )
+            .innerJoin(orgs, eq(approvals.orgId, approvals.orgId))
+            .limit(1);
+
+        if (approval.length === 0) {
+            return next(
+                createHttpError(
+                    HttpCode.NOT_FOUND,
+                    `Pending Approval with ID ${approvalId} not found`
+                )
+            );
+        }
+
+        const [updatedApproval] = await db
+            .update(approvals)
+            .set(updateData)
+            .where(eq(approvals.approvalId, approvalId))
+            .returning();
+
+        // Update user device approval state too
+        if (
+            updatedApproval.type === "user_device" &&
+            updatedApproval.clientId
+        ) {
+            const updateDataBody: Partial<InferInsertModel<typeof clients>> = {
+                approvalState: updateData.decision
+            };
+
+            if (updateData.decision === "denied") {
+                updateDataBody.blocked = true;
+            }
+
+            await db
+                .update(clients)
+                .set(updateDataBody)
+                .where(eq(clients.clientId, updatedApproval.clientId));
+        }
+
+        return response(res, {
+            data: updatedApproval,
+            success: true,
+            error: false,
+            message: "Approval updated successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}
--- a/server/private/routers/external.ts
+++ b/server/private/routers/external.ts
@@ -24,6 +24,7 @@ import * as generateLicense from "./generatedLicense";
 import * as logs from "#private/routers/auditLogs";
 import * as misc from "#private/routers/misc";
 import * as reKey from "#private/routers/re-key";
+import * as approval from "#private/routers/approvals";

 import {
    verifyOrgAccess,
@@ -311,6 +312,24 @@ authenticated.get(
    loginPage.getLoginPage
 );

+authenticated.get(
+    "/org/:orgId/approvals",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyUserHasAction(ActionsEnum.listApprovals),
+    logActionAudit(ActionsEnum.listApprovals),
+    approval.listApprovals
+);
+
+authenticated.put(
+    "/org/:orgId/approvals/:approvalId",
+    verifyValidLicense,
+    verifyOrgAccess,
+    verifyUserHasAction(ActionsEnum.updateApprovals),
+    logActionAudit(ActionsEnum.updateApprovals),
+    approval.processPendingApproval
+);
+
 authenticated.get(
    "/org/:orgId/login-page-branding",
    verifyValidLicense,
--- a/server/private/routers/loginPage/getLoginPageBranding.ts
+++ b/server/private/routers/loginPage/getLoginPageBranding.ts
@@ -29,11 +29,9 @@ import { getOrgTierData } from "#private/lib/billing";
 import { TierId } from "@server/lib/billing/tiers";
 import { build } from "@server/build";

-const paramsSchema = z
-    .object({
-        orgId: z.string()
-    })
-    .strict();
+const paramsSchema = z.strictObject({
+    orgId: z.string()
+});

 export async function getLoginPageBranding(
    req: Request,
--- a/server/routers/auth/verifyDeviceWebAuth.ts
+++ b/server/routers/auth/verifyDeviceWebAuth.ts
@@ -10,6 +10,7 @@ import { eq, and, gt } from "drizzle-orm";
 import { encodeHexLowerCase } from "@oslojs/encoding";
 import { sha256 } from "@oslojs/crypto/sha2";
 import { unauthorized } from "@server/auth/unauthorizedResponse";
+import { getIosDeviceName, getMacDeviceName } from "@server/db/names";

 const bodySchema = z
    .object({
@@ -120,6 +121,11 @@ export async function verifyDeviceWebAuth(
            );
        }

+        const deviceName =
+            getMacDeviceName(deviceCode.deviceName) ||
+            getIosDeviceName(deviceCode.deviceName) ||
+            deviceCode.deviceName;
+
        // If verify is false, just return metadata without verifying
        if (!verify) {
            return response<VerifyDeviceWebAuthResponse>(res, {
@@ -129,7 +135,7 @@ export async function verifyDeviceWebAuth(
                    metadata: {
                        ip: deviceCode.ip,
                        city: deviceCode.city,
-                        deviceName: deviceCode.deviceName,
+                        deviceName: deviceName,
                        applicationName: deviceCode.applicationName,
                        createdAt: deviceCode.createdAt
                    }
--- a/server/routers/client/blockClient.ts
+++ b/server/routers/client/blockClient.ts
@@ -73,7 +73,7 @@ export async function blockClient(
            // Block the client
            await trx
                .update(clients)
-                .set({ blocked: true })
+                .set({ blocked: true, approvalState: "denied" })
                .where(eq(clients.clientId, clientId));

            // Send terminate signal if there's an associated OLM and it's connected
--- a/server/routers/client/getClient.ts
+++ b/server/routers/client/getClient.ts
@@ -1,7 +1,7 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
 import { db, olms } from "@server/db";
-import { clients } from "@server/db";
+import { clients, fingerprints } from "@server/db";
 import { eq, and } from "drizzle-orm";
 import response from "@server/lib/response";
 import HttpCode from "@server/types/HttpCode";
@@ -10,6 +10,7 @@ import logger from "@server/logger";
 import stoi from "@server/lib/stoi";
 import { fromError } from "zod-validation-error";
 import { OpenAPITags, registry } from "@server/openApi";
+import { getUserDeviceName } from "@server/db/names";

 const getClientSchema = z.strictObject({
    clientId: z
@@ -29,6 +30,7 @@ async function query(clientId?: number, niceId?: string, orgId?: string) {
            .from(clients)
            .where(eq(clients.clientId, clientId))
            .leftJoin(olms, eq(clients.clientId, olms.clientId))
+            .leftJoin(fingerprints, eq(olms.olmId, fingerprints.olmId))
            .limit(1);
        return res;
    } else if (niceId && orgId) {
@@ -37,6 +39,7 @@ async function query(clientId?: number, niceId?: string, orgId?: string) {
            .from(clients)
            .where(and(eq(clients.niceId, niceId), eq(clients.orgId, orgId)))
            .leftJoin(olms, eq(clients.clientId, olms.clientId))
+            .leftJoin(fingerprints, eq(olms.olmId, fingerprints.olmId))
            .limit(1);
        return res;
    }
@@ -105,8 +108,16 @@ export async function getClient(
            );
        }

+        // Replace name with device name if OLM exists
+        let clientName = client.clients.name;
+        if (client.olms) {
+            const model = client.fingerprints?.deviceModel || null;
+            clientName = getUserDeviceName(model, client.clients.name);
+        }
+
        const data: GetClientResponse = {
            ...client.clients,
+            name: clientName,
            olmId: client.olms ? client.olms.olmId : null
        };

--- a/server/routers/client/listClients.ts
+++ b/server/routers/client/listClients.ts
@@ -5,7 +5,8 @@ import {
    roleClients,
    sites,
    userClients,
-    clientSitesAssociationsCache
+    clientSitesAssociationsCache,
+    fingerprints
 } from "@server/db";
 import logger from "@server/logger";
 import HttpCode from "@server/types/HttpCode";
@@ -27,6 +28,7 @@ import { fromError } from "zod-validation-error";
 import { OpenAPITags, registry } from "@server/openApi";
 import NodeCache from "node-cache";
 import semver from "semver";
+import { getUserDeviceName } from "@server/db/names";

 const olmVersionCache = new NodeCache({ stdTTL: 3600 });

@@ -137,14 +139,17 @@ function queryClients(
            userEmail: users.email,
            niceId: clients.niceId,
            agent: olms.agent,
+            approvalState: clients.approvalState,
            olmArchived: olms.archived,
            archived: clients.archived,
-            blocked: clients.blocked
+            blocked: clients.blocked,
+            deviceModel: fingerprints.deviceModel
        })
        .from(clients)
        .leftJoin(orgs, eq(clients.orgId, orgs.orgId))
        .leftJoin(olms, eq(clients.clientId, olms.clientId))
        .leftJoin(users, eq(clients.userId, users.userId))
+        .leftJoin(fingerprints, eq(olms.olmId, fingerprints.olmId))
        .where(and(...conditions));
 }

@@ -163,21 +168,22 @@ async function getSiteAssociations(clientIds: number[]) {
        .where(inArray(clientSitesAssociationsCache.clientId, clientIds));
 }

-type OlmWithUpdateAvailable = Awaited<ReturnType<typeof queryClients>>[0] & {
+type ClientWithSites = Omit<
+    Awaited<ReturnType<typeof queryClients>>[0],
+    "deviceModel"
+> & {
+    sites: Array<{
+        siteId: number;
+        siteName: string | null;
+        siteNiceId: string | null;
+    }>;
    olmUpdateAvailable?: boolean;
 };

+type OlmWithUpdateAvailable = ClientWithSites;
+
 export type ListClientsResponse = {
-    clients: Array<
-        Awaited<ReturnType<typeof queryClients>>[0] & {
-            sites: Array<{
-                siteId: number;
-                siteName: string | null;
-                siteNiceId: string | null;
-            }>;
-            olmUpdateAvailable?: boolean;
-        }
-    >;
+    clients: Array<ClientWithSites>;
    pagination: { total: number; limit: number; offset: number };
 };

@@ -307,11 +313,17 @@ export async function listClients(
            >
        );

-        // Merge clients with their site associations
-        const clientsWithSites = clientsList.map((client) => ({
-            ...client,
-            sites: sitesByClient[client.clientId] || []
-        }));
+        // Merge clients with their site associations and replace name with device name
+        const clientsWithSites = clientsList.map((client) => {
+            const model = client.deviceModel || null;
+            const newName = getUserDeviceName(model, client.name);
+            const { deviceModel, ...clientWithoutDeviceModel } = client;
+            return {
+                ...clientWithoutDeviceModel,
+                name: newName,
+                sites: sitesByClient[client.clientId] || []
+            };
+        });

        const latestOlVersionPromise = getLatestOlmVersion();

@@ -350,7 +362,7 @@ export async function listClients(

        return response<ListClientsResponse>(res, {
            data: {
-                clients: clientsWithSites,
+                clients: olmsWithUpdates,
                pagination: {
                    total: totalCount,
                    limit,
--- a/server/routers/client/unblockClient.ts
+++ b/server/routers/client/unblockClient.ts
@@ -71,7 +71,7 @@ export async function unblockClient(
        // Unblock the client
        await db
            .update(clients)
-            .set({ blocked: false })
+            .set({ blocked: false, approvalState: null })
            .where(eq(clients.clientId, clientId));

        return response(res, {
--- a/server/routers/external.ts
+++ b/server/routers/external.ts
@@ -586,6 +586,14 @@ authenticated.get(
    verifyUserHasAction(ActionsEnum.listRoles),
    role.listRoles
 );
+
+authenticated.post(
+    "/org/:orgId/role/:roleId",
+    verifyOrgAccess,
+    verifyUserHasAction(ActionsEnum.updateRole),
+    logActionAudit(ActionsEnum.updateRole),
+    role.updateRole
+);
 // authenticated.get(
 //     "/role/:roleId",
 //     verifyRoleAccess,
--- a/server/routers/integration.ts
+++ b/server/routers/integration.ts
@@ -467,6 +467,14 @@ authenticated.put(
    role.createRole
 );

+authenticated.post(
+    "/org/:orgId/role/:roleId",
+    verifyApiKeyOrgAccess,
+    verifyApiKeyHasAction(ActionsEnum.updateRole),
+    logActionAudit(ActionsEnum.updateRole),
+    role.updateRole
+);
+
 authenticated.get(
    "/org/:orgId/roles",
    verifyApiKeyOrgAccess,
--- a/server/routers/olm/getUserOlm.ts
+++ b/server/routers/olm/getUserOlm.ts
@@ -1,6 +1,6 @@
 import { NextFunction, Request, Response } from "express";
 import { db } from "@server/db";
-import { olms, clients } from "@server/db";
+import { olms, clients, fingerprints } from "@server/db";
 import { eq, and } from "drizzle-orm";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
@@ -9,6 +9,7 @@ import { z } from "zod";
 import { fromError } from "zod-validation-error";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
+import { getUserDeviceName } from "@server/db/names";

 const paramsSchema = z
    .object({
@@ -61,12 +62,14 @@ export async function getUserOlm(
        const { olmId, userId } = parsedParams.data;
        const { orgId } = parsedQuery.data;

-        const [olm] = await db
+        const [result] = await db
            .select()
            .from(olms)
-            .where(and(eq(olms.userId, userId), eq(olms.olmId, olmId)));
+            .where(and(eq(olms.userId, userId), eq(olms.olmId, olmId)))
+            .leftJoin(fingerprints, eq(olms.olmId, fingerprints.olmId))
+            .limit(1);

-        if (!olm) {
+        if (!result || !result.olms) {
            return next(
                createHttpError(
                    HttpCode.NOT_FOUND,
@@ -75,6 +78,8 @@ export async function getUserOlm(
            );
        }

+        const olm = result.olms;
+
        // If orgId is provided and olm has a clientId, fetch the client to check blocked status
        let blocked: boolean | undefined;
        if (orgId && olm.clientId) {
@@ -92,9 +97,13 @@ export async function getUserOlm(
            blocked = client?.blocked ?? false;
        }

+        // Replace name with device name
+        const model = result.fingerprints?.deviceModel || null;
+        const newName = getUserDeviceName(model, olm.name);
+
        const responseData = blocked !== undefined 
-            ? { ...olm, blocked }
-            : olm;
+            ? { ...olm, name: newName, blocked }
+            : { ...olm, name: newName };

        return response(res, {
            data: responseData,
--- a/server/routers/olm/listUserOlms.ts
+++ b/server/routers/olm/listUserOlms.ts
@@ -1,5 +1,5 @@
 import { NextFunction, Request, Response } from "express";
-import { db } from "@server/db";
+import { db, fingerprints } from "@server/db";
 import { olms } from "@server/db";
 import { eq, count, desc } from "drizzle-orm";
 import HttpCode from "@server/types/HttpCode";
@@ -9,6 +9,7 @@ import { z } from "zod";
 import { fromError } from "zod-validation-error";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
+import { getUserDeviceName } from "@server/db/names";

 const querySchema = z.object({
    limit: z
@@ -99,22 +100,30 @@ export async function listUserOlms(
        const total = totalCountResult?.count || 0;

        // Get OLMs for the current user (including archived OLMs)
-        const userOlms = await db
-            .select({
-                olmId: olms.olmId,
-                dateCreated: olms.dateCreated,
-                version: olms.version,
-                name: olms.name,
-                clientId: olms.clientId,
-                userId: olms.userId,
-                archived: olms.archived
-            })
+        const list = await db
+            .select()
            .from(olms)
            .where(eq(olms.userId, userId))
+            .leftJoin(fingerprints, eq(olms.olmId, fingerprints.olmId))
            .orderBy(desc(olms.dateCreated))
            .limit(limit)
            .offset(offset);

+        const userOlms = list.map((item) => {
+            const model = item.fingerprints?.deviceModel || null;
+            const newName = getUserDeviceName(model, item.olms.name);
+
+            return {
+                olmId: item.olms.olmId,
+                dateCreated: item.olms.dateCreated,
+                version: item.olms.version,
+                name: newName,
+                clientId: item.olms.clientId,
+                userId: item.olms.userId,
+                archived: item.olms.archived
+            };
+        });
+
        return response<ListUserOlmsResponse>(res, {
            data: {
                olms: userOlms,
--- a/server/routers/role/createRole.ts
+++ b/server/routers/role/createRole.ts
@@ -10,6 +10,8 @@ import { fromError } from "zod-validation-error";
 import { ActionsEnum } from "@server/auth/actions";
 import { eq, and } from "drizzle-orm";
 import { OpenAPITags, registry } from "@server/openApi";
+import { build } from "@server/build";
+import { isLicensedOrSubscribed } from "@server/lib/isLicencedOrSubscribed";

 const createRoleParamsSchema = z.strictObject({
    orgId: z.string()
@@ -17,7 +19,8 @@ const createRoleParamsSchema = z.strictObject({

 const createRoleSchema = z.strictObject({
    name: z.string().min(1).max(255),
-    description: z.string().optional()
+    description: z.string().optional(),
+    requireDeviceApproval: z.boolean().optional()
 });

 export const defaultRoleAllowedActions: ActionsEnum[] = [
@@ -97,6 +100,11 @@ export async function createRole(
            );
        }

+        const isLicensed = await isLicensedOrSubscribed(orgId);
+        if (build === "oss" || !isLicensed) {
+            roleData.requireDeviceApproval = undefined;
+        }
+
        await db.transaction(async (trx) => {
            const newRole = await trx
                .insert(roles)
--- a/server/routers/role/listRoles.ts
+++ b/server/routers/role/listRoles.ts
@@ -1,15 +1,13 @@
-import { Request, Response, NextFunction } from "express";
-import { z } from "zod";
-import { db } from "@server/db";
-import { roles, orgs } from "@server/db";
+import { db, orgs, roles } from "@server/db";
 import response from "@server/lib/response";
-import HttpCode from "@server/types/HttpCode";
-import createHttpError from "http-errors";
-import { sql, eq } from "drizzle-orm";
 import logger from "@server/logger";
-import { fromError } from "zod-validation-error";
-import stoi from "@server/lib/stoi";
 import { OpenAPITags, registry } from "@server/openApi";
+import HttpCode from "@server/types/HttpCode";
+import { eq, sql } from "drizzle-orm";
+import { NextFunction, Request, Response } from "express";
+import createHttpError from "http-errors";
+import { z } from "zod";
+import { fromError } from "zod-validation-error";

 const listRolesParamsSchema = z.strictObject({
    orgId: z.string()
@@ -38,7 +36,8 @@ async function queryRoles(orgId: string, limit: number, offset: number) {
            isAdmin: roles.isAdmin,
            name: roles.name,
            description: roles.description,
-            orgName: orgs.name
+            orgName: orgs.name,
+            requireDeviceApproval: roles.requireDeviceApproval
        })
        .from(roles)
        .leftJoin(orgs, eq(roles.orgId, orgs.orgId))
--- a/server/routers/role/updateRole.ts
+++ b/server/routers/role/updateRole.ts
@@ -1,6 +1,6 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db } from "@server/db";
+import { db, orgs, type Role } from "@server/db";
 import { roles } from "@server/db";
 import { eq } from "drizzle-orm";
 import response from "@server/lib/response";
@@ -8,20 +8,28 @@ import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
 import logger from "@server/logger";
 import { fromError } from "zod-validation-error";
+import { build } from "@server/build";
+import { isLicensedOrSubscribed } from "@server/lib/isLicencedOrSubscribed";

 const updateRoleParamsSchema = z.strictObject({
+    orgId: z.string(),
    roleId: z.string().transform(Number).pipe(z.int().positive())
 });

 const updateRoleBodySchema = z
    .strictObject({
        name: z.string().min(1).max(255).optional(),
-        description: z.string().optional()
+        description: z.string().optional(),
+        requireDeviceApproval: z.boolean().optional()
    })
    .refine((data) => Object.keys(data).length > 0, {
        error: "At least one field must be provided for update"
    });

+export type UpdateRoleBody = z.infer<typeof updateRoleBodySchema>;
+
+export type UpdateRoleResponse = Role;
+
 export async function updateRole(
    req: Request,
    res: Response,
@@ -48,13 +56,14 @@ export async function updateRole(
            );
        }

-        const { roleId } = parsedParams.data;
+        const { roleId, orgId } = parsedParams.data;
        const updateData = parsedBody.data;

        const role = await db
            .select()
            .from(roles)
            .where(eq(roles.roleId, roleId))
+            .innerJoin(orgs, eq(roles.orgId, orgs.orgId))
            .limit(1);

        if (role.length === 0) {
@@ -66,7 +75,7 @@ export async function updateRole(
            );
        }

-        if (role[0].isAdmin) {
+        if (role[0].roles.isAdmin) {
            return next(
                createHttpError(
                    HttpCode.FORBIDDEN,
@@ -75,6 +84,11 @@ export async function updateRole(
            );
        }

+        const isLicensed = await isLicensedOrSubscribed(orgId);
+        if (build === "oss" || !isLicensed) {
+            updateData.requireDeviceApproval = undefined;
+        }
+
        const updatedRole = await db
            .update(roles)
            .set(updateData)
--- a/src/app/[orgId]/settings/(private)/access/approvals/page.tsx
+++ b/src/app/[orgId]/settings/(private)/access/approvals/page.tsx
@@ -0,0 +1,52 @@
+import { ApprovalFeed } from "@app/components/ApprovalFeed";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";
+import type { ApprovalItem } from "@app/lib/queries";
+import OrgProvider from "@app/providers/OrgProvider";
+import type { GetOrgResponse } from "@server/routers/org";
+import type { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+
+export interface ApprovalFeedPageProps {
+    params: Promise<{ orgId: string }>;
+}
+
+export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
+    const params = await props.params;
+
+    let approvals: ApprovalItem[] = [];
+    const res = await internal
+        .get<
+            AxiosResponse<{ approvals: ApprovalItem[] }>
+        >(`/org/${params.orgId}/approvals`, await authCookieHeader())
+        .catch((e) => {});
+
+    if (res && res.status === 200) {
+        approvals = res.data.data.approvals;
+    }
+
+    let org: GetOrgResponse | null = null;
+    const orgRes = await getCachedOrg(params.orgId);
+
+    if (orgRes && orgRes.status === 200) {
+        org = orgRes.data.data;
+    }
+
+    const t = await getTranslations();
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("accessApprovalsManage")}
+                description={t("accessApprovalsDescription")}
+            />
+            <OrgProvider org={org}>
+                <div className="container mx-auto max-w-12xl">
+                    <ApprovalFeed orgId={params.orgId} />
+                </div>
+            </OrgProvider>
+        </>
+    );
+}
--- a/src/app/[orgId]/settings/(private)/idp/create/page.tsx
+++ b/src/app/[orgId]/settings/(private)/idp/create/page.tsx
@@ -1,5 +1,6 @@
 "use client";

+import AutoProvisionConfigWidget from "@app/components/private/AutoProvisionConfigWidget";
 import {
    SettingsContainer,
    SettingsSection,
@@ -10,6 +11,10 @@ import {
    SettingsSectionHeader,
    SettingsSectionTitle
 } from "@app/components/Settings";
+import HeaderTitle from "@app/components/SettingsSectionTitle";
+import { StrategySelect } from "@app/components/StrategySelect";
+import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
+import { Button } from "@app/components/ui/button";
 import {
    Form,
    FormControl,
@@ -19,29 +24,21 @@ import {
    FormLabel,
    FormMessage
 } from "@app/components/ui/form";
-import HeaderTitle from "@app/components/SettingsSectionTitle";
-import { z } from "zod";
-import { createElement, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { Input } from "@app/components/ui/input";
-import { Button } from "@app/components/ui/button";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { useParams, useRouter } from "next/navigation";
-import { Checkbox } from "@app/components/ui/checkbox";
-import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { InfoIcon, ExternalLink } from "lucide-react";
-import { StrategySelect } from "@app/components/StrategySelect";
-import { SwitchInput } from "@app/components/SwitchInput";
-import { Badge } from "@app/components/ui/badge";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ListRolesResponse } from "@server/routers/role";
+import { AxiosResponse } from "axios";
+import { InfoIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import AutoProvisionConfigWidget from "@app/components/private/AutoProvisionConfigWidget";
-import { AxiosResponse } from "axios";
-import { ListRolesResponse } from "@server/routers/role";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";

 export default function Page() {
    const { env } = useEnvContext();
--- a/src/app/[orgId]/settings/access/roles/page.tsx
+++ b/src/app/[orgId]/settings/access/roles/page.tsx
@@ -2,12 +2,12 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import { GetOrgResponse } from "@server/routers/org";
-import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
 import { ListRolesResponse } from "@server/routers/role";
-import RolesTable, { RoleRow } from "../../../../../components/RolesTable";
+import RolesTable, { type RoleRow } from "@app/components/RolesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
+import { getCachedOrg } from "@app/lib/api/getCachedOrg";

 type RolesPageProps = {
    params: Promise<{ orgId: string }>;
@@ -47,14 +47,7 @@ export default async function RolesPage(props: RolesPageProps) {
    }

    let org: GetOrgResponse | null = null;
-    const getOrg = cache(async () =>
-        internal
-            .get<
-                AxiosResponse<GetOrgResponse>
-            >(`/org/${params.orgId}`, await authCookieHeader())
-            .catch((e) => {})
-    );
-    const orgRes = await getOrg();
+    const orgRes = await getCachedOrg(params.orgId);

    if (orgRes && orgRes.status === 200) {
        org = orgRes.data.data;
--- a/src/app/[orgId]/settings/clients/machine/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/page.tsx
@@ -61,7 +61,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
            niceId: client.niceId,
            agent: client.agent,
            archived: client.archived || false,
-            blocked: client.blocked || false
+            blocked: client.blocked || false,
+            approvalState: client.approvalState ?? "approved"
        };
    };

--- a/src/app/[orgId]/settings/clients/user/page.tsx
+++ b/src/app/[orgId]/settings/clients/user/page.tsx
@@ -4,7 +4,7 @@ import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { ListClientsResponse } from "@server/routers/client";
 import { getTranslations } from "next-intl/server";
-import type { ClientRow } from "@app/components/MachineClientsTable";
+import type { ClientRow } from "@app/components/UserDevicesTable";
 import UserDevicesTable from "@app/components/UserDevicesTable";

 type ClientsPageProps = {
@@ -57,7 +57,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
            niceId: client.niceId,
            agent: client.agent,
            archived: client.archived || false,
-            blocked: client.blocked || false
+            blocked: client.blocked || false,
+            approvalState: client.approvalState
        };
    };

--- a/src/app/[orgId]/settings/sites/page.tsx
+++ b/src/app/[orgId]/settings/sites/page.tsx
@@ -2,10 +2,9 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListSitesResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
-import SitesTable, { SiteRow } from "../../../../components/SitesTable";
+import SitesTable, { SiteRow } from "@app/components/SitesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import SitesBanner from "@app/components/SitesBanner";
-import SitesSplashCard from "../../../../components/SitesSplashCard";
 import { getTranslations } from "next-intl/server";

 type SitesPageProps = {
--- a/src/app/navigation.tsx
+++ b/src/app/navigation.tsx
@@ -2,27 +2,27 @@ import { SidebarNavItem } from "@app/components/SidebarNav";
 import { Env } from "@app/lib/types/env";
 import { build } from "@server/build";
 import {
-    Settings,
-    Users,
-    Link as LinkIcon,
-    Waypoints,
+    ChartLine,
    Combine,
+    CreditCard,
    Fingerprint,
+    Globe,
+    GlobeLock,
    KeyRound,
+    Laptop,
+    Link as LinkIcon,
+    Logs, // Added from 'dev' branch
+    MonitorUp,
+    ReceiptText,
+    ScanEye, // Added from 'dev' branch
+    Server,
+    Settings,
+    SquareMousePointer,
    TicketCheck,
    User,
-    Globe, // Added from 'dev' branch
-    MonitorUp, // Added from 'dev' branch
-    Server,
-    ReceiptText,
-    CreditCard,
-    Logs,
-    SquareMousePointer,
-    ScanEye,
-    GlobeLock,
-    Smartphone,
-    Laptop,
-    ChartLine
+    UserCog,
+    Users,
+    Waypoints
 } from "lucide-react";

 export type SidebarNavSection = {
@@ -123,7 +123,7 @@ export const orgNavSections = (env?: Env): SidebarNavSection[] => [
                href: "/{orgId}/settings/access/roles",
                icon: <Users className="size-4 flex-none" />
            },
-            ...(build == "saas" || env?.flags.useOrgOnlyIdp
+            ...(build === "saas" || env?.flags.useOrgOnlyIdp
                ? [
                      {
                          title: "sidebarIdentityProviders",
@@ -132,6 +132,15 @@ export const orgNavSections = (env?: Env): SidebarNavSection[] => [
                      }
                  ]
                : []),
+            ...(build !== "oss"
+                ? [
+                      {
+                          title: "sidebarApprovals",
+                          href: "/{orgId}/settings/access/approvals",
+                          icon: <UserCog className="size-4 flex-none" />
+                      }
+                  ]
+                : []),
            {
                title: "sidebarShareableLinks",
                href: "/{orgId}/settings/share-links",
--- a/src/components/ApprovalFeed.tsx
+++ b/src/components/ApprovalFeed.tsx
@@ -0,0 +1,243 @@
+"use client";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
+import {
+    approvalFiltersSchema,
+    approvalQueries,
+    type ApprovalItem
+} from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, Ban, Check, LaptopMinimal, RefreshCw } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Fragment, useActionState } from "react";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Card, CardHeader } from "./ui/card";
+import { Label } from "./ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "./ui/select";
+import { Separator } from "./ui/separator";
+
+export type ApprovalFeedProps = {
+    orgId: string;
+};
+
+export function ApprovalFeed({ orgId }: ApprovalFeedProps) {
+    const searchParams = useSearchParams();
+    const path = usePathname();
+    const t = useTranslations();
+
+    const router = useRouter();
+
+    const filters = approvalFiltersSchema.parse(
+        Object.fromEntries(searchParams.entries())
+    );
+
+    const { data, isFetching, refetch } = useQuery(
+        approvalQueries.listApprovals(orgId, filters)
+    );
+
+    const approvals = data?.approvals ?? [];
+
+    return (
+        <div className="flex flex-col gap-5">
+            <Card className="">
+                <CardHeader className="flex flex-col sm:flex-row sm:items-end lg:items-end gap-2 ">
+                    <div className="flex flex-col items-start gap-2 w-48 mb-0">
+                        <Label htmlFor="approvalState">
+                            {t("filterByApprovalState")}
+                        </Label>
+                        <Select
+                            onValueChange={(newValue) => {
+                                const newSearch = new URLSearchParams(
+                                    searchParams
+                                );
+                                newSearch.set("approvalState", newValue);
+
+                                router.replace(
+                                    `${path}?${newSearch.toString()}`
+                                );
+                            }}
+                            value={filters.approvalState ?? "all"}
+                        >
+                            <SelectTrigger
+                                id="approvalState"
+                                className="w-full"
+                            >
+                                <SelectValue
+                                    placeholder={t("selectApprovalState")}
+                                />
+                            </SelectTrigger>
+                            <SelectContent className="w-full">
+                                <SelectItem value="pending">
+                                    {t("pending")}
+                                </SelectItem>
+                                <SelectItem value="approved">
+                                    {t("approved")}
+                                </SelectItem>
+                                <SelectItem value="denied">
+                                    {t("denied")}
+                                </SelectItem>
+                                <SelectItem value="all">{t("all")}</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <Button
+                        variant="outline"
+                        onClick={() => {
+                            refetch();
+                        }}
+                        disabled={isFetching}
+                        className="lg:static gap-2"
+                    >
+                        <RefreshCw
+                            className={cn(
+                                "size-4",
+                                isFetching && "animate-spin"
+                            )}
+                        />
+                        {t("refresh")}
+                    </Button>
+                </CardHeader>
+            </Card>
+            <Card>
+                <CardHeader>
+                    <ul className="flex flex-col gap-4">
+                        {approvals.map((approval, index) => (
+                            <Fragment key={approval.approvalId}>
+                                <li>
+                                    <ApprovalRequest
+                                        approval={approval}
+                                        orgId={orgId}
+                                        onSuccess={() => refetch()}
+                                    />
+                                </li>
+                                {index < approvals.length - 1 && <Separator />}
+                            </Fragment>
+                        ))}
+
+                        {approvals.length === 0 && (
+                            <li className="flex justify-center items-center p-4 text-muted-foreground">
+                                {t("approvalListEmpty")}
+                            </li>
+                        )}
+                    </ul>
+                </CardHeader>
+            </Card>
+        </div>
+    );
+}
+
+type ApprovalRequestProps = {
+    approval: ApprovalItem;
+    orgId: string;
+    onSuccess?: () => void;
+};
+
+function ApprovalRequest({ approval, orgId, onSuccess }: ApprovalRequestProps) {
+    const t = useTranslations();
+
+    const [_, formAction, isSubmitting] = useActionState(onSubmit, null);
+    const api = createApiClient(useEnvContext());
+
+    async function onSubmit(_previousState: any, formData: FormData) {
+        const decision = formData.get("decision");
+        const res = await api
+            .put(`/org/${orgId}/approvals/${approval.approvalId}`, { decision })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("accessApprovalErrorUpdate"),
+                    description: formatAxiosError(
+                        e,
+                        t("accessApprovalErrorUpdateDescription")
+                    )
+                });
+            });
+        if (res && res.status === 200) {
+            const result = res.data.data;
+            toast({
+                variant: "default",
+                title: t("accessApprovalUpdated"),
+                description:
+                    result.decision === "approved"
+                        ? t("accessApprovalApprovedDescription")
+                        : t("accessApprovalDeniedDescription")
+            });
+
+            onSuccess?.();
+        }
+    }
+
+    return (
+        <div className="flex items-center justify-between gap-4 flex-wrap">
+            <div className="inline-flex items-start md:items-center gap-2">
+                <LaptopMinimal className="size-4 text-muted-foreground flex-none relative top-2 sm:top-0" />
+                <span>
+                    <span className="text-primary">
+                        {approval.user.username}
+                    </span>
+                    &nbsp;
+                    {approval.type === "user_device" && (
+                        <span>{t("requestingNewDeviceApproval")}</span>
+                    )}
+                </span>
+            </div>
+            <div className="inline-flex gap-2">
+                {approval.decision === "pending" && (
+                    <form action={formAction} className="inline-flex gap-2">
+                        <Button
+                            value="approved"
+                            name="decision"
+                            className="gap-2"
+                            type="submit"
+                            loading={isSubmitting}
+                        >
+                            <Check className="size-4 flex-none" />
+                            {t("approve")}
+                        </Button>
+                        <Button
+                            value="denied"
+                            name="decision"
+                            variant="destructive"
+                            className="gap-2"
+                            type="submit"
+                            loading={isSubmitting}
+                        >
+                            <Ban className="size-4 flex-none" />
+                            {t("deny")}
+                        </Button>
+                    </form>
+                )}
+                {approval.decision === "approved" && (
+                    <Badge variant="green">{t("approved")}</Badge>
+                )}
+                {approval.decision === "denied" && (
+                    <Badge variant="red">{t("denied")}</Badge>
+                )}
+
+                <Button
+                    variant="outline"
+                    onClick={() => {}}
+                    className="gap-2"
+                    asChild
+                >
+                    <Link href={"#"}>
+                        {t("viewDetails")}
+                        <ArrowRight className="size-4 flex-none" />
+                    </Link>
+                </Button>
+            </div>
+        </div>
+    );
+}
--- a/src/components/CreateRoleForm.tsx
+++ b/src/components/CreateRoleForm.tsx
@@ -1,21 +1,5 @@
 "use client";

-import { Button } from "@app/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage
-} from "@app/components/ui/form";
-import { Input } from "@app/components/ui/input";
-import { toast } from "@app/hooks/useToast";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AxiosResponse } from "axios";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
 import {
    Credenza,
    CredenzaBody,
@@ -26,17 +10,37 @@ import {
    CredenzaHeader,
    CredenzaTitle
 } from "@app/components/Credenza";
-import { useOrgContext } from "@app/hooks/useOrgContext";
-import { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { build } from "@server/build";
+import type { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
+import { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
+import { useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
+import { CheckboxWithLabel } from "./ui/checkbox";

 type CreateRoleFormProps = {
    open: boolean;
    setOpen: (open: boolean) => void;
-    afterCreate?: (res: CreateRoleResponse) => Promise<void>;
+    afterCreate?: (res: CreateRoleResponse) => void;
 };

 export default function CreateRoleForm({
@@ -46,35 +50,35 @@ export default function CreateRoleForm({
 }: CreateRoleFormProps) {
    const { org } = useOrgContext();
    const t = useTranslations();
+    const { isPaidUser } = usePaidStatus();

    const formSchema = z.object({
-        name: z.string({ message: t("nameRequired") }).max(32),
-        description: z.string().max(255).optional()
+        name: z
+            .string({ message: t("nameRequired") })
+            .min(1)
+            .max(32),
+        description: z.string().max(255).optional(),
+        requireDeviceApproval: z.boolean().optional()
    });

-    const [loading, setLoading] = useState(false);
-
    const api = createApiClient(useEnvContext());

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            name: "",
-            description: ""
+            description: "",
+            requireDeviceApproval: false
        }
    });

-    async function onSubmit(values: z.infer<typeof formSchema>) {
-        setLoading(true);
+    const [loading, startTransition] = useTransition();

+    async function onSubmit(values: z.infer<typeof formSchema>) {
        const res = await api
-            .put<AxiosResponse<CreateRoleResponse>>(
-                `/org/${org?.org.orgId}/role`,
-                {
-                    name: values.name,
-                    description: values.description
-                } as CreateRoleBody
-            )
+            .put<
+                AxiosResponse<CreateRoleResponse>
+            >(`/org/${org?.org.orgId}/role`, values satisfies CreateRoleBody)
            .catch((e) => {
                toast({
                    variant: "destructive",
@@ -97,12 +101,8 @@ export default function CreateRoleForm({
                setOpen(false);
            }

-            if (afterCreate) {
-                afterCreate(res.data.data);
-            }
+            afterCreate?.(res.data.data);
        }
-
-        setLoading(false);
    }

    return (
@@ -111,7 +111,6 @@ export default function CreateRoleForm({
                open={open}
                onOpenChange={(val) => {
                    setOpen(val);
-                    setLoading(false);
                    form.reset();
                }}
            >
@@ -125,7 +124,9 @@ export default function CreateRoleForm({
                    <CredenzaBody>
                        <Form {...form}>
                            <form
-                                onSubmit={form.handleSubmit(onSubmit)}
+                                onSubmit={form.handleSubmit((values) =>
+                                    startTransition(() => onSubmit(values))
+                                )}
                                className="space-y-4"
                                id="create-role-form"
                            >
@@ -159,6 +160,56 @@ export default function CreateRoleForm({
                                        </FormItem>
                                    )}
                                />
+                                {build !== "oss" && (
+                                    <div className="pt-3">
+                                        <PaidFeaturesAlert />
+
+                                        <FormField
+                                            control={form.control}
+                                            name="requireDeviceApproval"
+                                            render={({ field }) => (
+                                                <FormItem className="my-2">
+                                                    <FormControl>
+                                                        <CheckboxWithLabel
+                                                            {...field}
+                                                            disabled={
+                                                                !isPaidUser
+                                                            }
+                                                            value="on"
+                                                            checked={form.watch(
+                                                                "requireDeviceApproval"
+                                                            )}
+                                                            onCheckedChange={(
+                                                                checked
+                                                            ) => {
+                                                                if (
+                                                                    checked !==
+                                                                    "indeterminate"
+                                                                ) {
+                                                                    form.setValue(
+                                                                        "requireDeviceApproval",
+                                                                        checked
+                                                                    );
+                                                                }
+                                                            }}
+                                                            label={t(
+                                                                "requireDeviceApproval"
+                                                            )}
+                                                        />
+                                                    </FormControl>
+
+                                                    <FormDescription>
+                                                        {t(
+                                                            "requireDeviceApprovalDescription"
+                                                        )}
+                                                    </FormDescription>
+
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                )}
                            </form>
                        </Form>
                    </CredenzaBody>
--- a/src/components/Credenza.tsx
+++ b/src/components/Credenza.tsx
@@ -2,8 +2,6 @@

 import * as React from "react";

-import { cn } from "@app/lib/cn";
-import { useMediaQuery } from "@app/hooks/useMediaQuery";
 import {
    Dialog,
    DialogClose,
@@ -14,16 +12,9 @@ import {
    DialogTitle,
    DialogTrigger
 } from "@/components/ui/dialog";
-import {
-    Drawer,
-    DrawerClose,
-    DrawerContent,
-    DrawerDescription,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerTitle,
-    DrawerTrigger
-} from "@/components/ui/drawer";
+import { DrawerClose } from "@/components/ui/drawer";
+import { useMediaQuery } from "@app/hooks/useMediaQuery";
+import { cn } from "@app/lib/cn";
 import {
    Sheet,
    SheetContent,
@@ -78,10 +69,7 @@ const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
    const CredenzaClose = isDesktop ? DialogClose : DrawerClose;

    return (
-        <CredenzaClose
-            className={cn("mb-3 mt-3 md:mt-0 md:mb-0", className)}
-            {...props}
-        >
+        <CredenzaClose className={cn("", className)} {...props}>
            {children}
        </CredenzaClose>
    );
@@ -172,14 +160,13 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {

 const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
    const isDesktop = useMediaQuery(desktop);
-    // const isDesktop = true;

    const CredenzaFooter = isDesktop ? DialogFooter : SheetFooter;

    return (
        <CredenzaFooter
            className={cn(
-                "mt-8 md:mt-0 -mx-6 px-6 pt-4 border-t border-border",
+                "mt-8 md:mt-0 -mx-6 px-6 py-4 border-t border-border",
                className
            )}
            {...props}
@@ -191,12 +178,12 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {

 export {
    Credenza,
-    CredenzaTrigger,
+    CredenzaBody,
    CredenzaClose,
    CredenzaContent,
    CredenzaDescription,
+    CredenzaFooter,
    CredenzaHeader,
    CredenzaTitle,
-    CredenzaBody,
-    CredenzaFooter
+    CredenzaTrigger
 };
--- a/src/components/DeviceLoginForm.tsx
+++ b/src/components/DeviceLoginForm.tsx
@@ -159,7 +159,7 @@ export default function DeviceLoginForm({
        const cleanedInitialCode = initialCode.replace(/-/g, "").toUpperCase();
        if (cleanedInitialCode && cleanedInitialCode.length === 8) {
            setValidatingInitialCode(true);
-            validateCode(cleanedInitialCode, true).finally(() => {
+            validateCode(cleanedInitialCode, false).finally(() => {
                setValidatingInitialCode(false);
            });
        }
--- a/src/components/DismissableBanner.tsx
+++ b/src/components/DismissableBanner.tsx
@@ -71,10 +71,10 @@ export const DismissableBanner = ({
    }

    return (
-        <Card className="mb-6 relative border-primary/30 bg-gradient-to-br from-primary/10 via-background to-background overflow-hidden">
+        <Card className="mb-6 relative border-primary/30 bg-linear-to-br from-primary/10 via-background to-background overflow-hidden">
            <button
                onClick={handleDismiss}
-                className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors"
+                className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors cursor-pointer"
                aria-label={t("dismiss")}
            >
                <X className="w-4 h-4 text-muted-foreground" />
@@ -91,7 +91,7 @@ export const DismissableBanner = ({
                        </p>
                    </div>
                    {children && (
-                        <div className="flex flex-wrap gap-3 lg:flex-shrink-0 lg:justify-end">
+                        <div className="flex flex-wrap gap-3 lg:shrink-0 lg:justify-end">
                            {children}
                        </div>
                    )}
--- a/src/components/EditRoleForm.tsx
+++ b/src/components/EditRoleForm.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { build } from "@server/build";
+import type { Role } from "@server/db";
+import type {
+    CreateRoleBody,
+    CreateRoleResponse,
+    UpdateRoleBody,
+    UpdateRoleResponse
+} from "@server/routers/role";
+import { AxiosResponse } from "axios";
+import { useTranslations } from "next-intl";
+import { useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
+import { CheckboxWithLabel } from "./ui/checkbox";
+
+type CreateRoleFormProps = {
+    role: Role;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onSuccess?: (res: CreateRoleResponse) => void;
+};
+
+export default function EditRoleForm({
+    open,
+    role,
+    setOpen,
+    onSuccess
+}: CreateRoleFormProps) {
+    const { org } = useOrgContext();
+    const t = useTranslations();
+    const { isPaidUser } = usePaidStatus();
+
+    const formSchema = z.object({
+        name: z
+            .string({ message: t("nameRequired") })
+            .min(1)
+            .max(32),
+        description: z.string().max(255).optional(),
+        requireDeviceApproval: z.boolean().optional()
+    });
+
+    const api = createApiClient(useEnvContext());
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: role.name,
+            description: role.description ?? "",
+            requireDeviceApproval: role.requireDeviceApproval ?? false
+        }
+    });
+
+    const [loading, startTransition] = useTransition();
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const res = await api
+            .post<
+                AxiosResponse<UpdateRoleResponse>
+            >(`/org/${org?.org.orgId}/role/${role.roleId}`, values satisfies UpdateRoleBody)
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("accessRoleErrorUpdate"),
+                    description: formatAxiosError(
+                        e,
+                        t("accessRoleErrorUpdateDescription")
+                    )
+                });
+            });
+
+        if (res && res.status === 200) {
+            toast({
+                variant: "default",
+                title: t("accessRoleUpdated"),
+                description: t("accessRoleUpdatedDescription")
+            });
+
+            if (open) {
+                setOpen(false);
+            }
+
+            onSuccess?.(res.data.data);
+        }
+    }
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    form.reset();
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>{t("accessRoleEdit")}</CredenzaTitle>
+                        <CredenzaDescription>
+                            {t("accessRoleEditDescription")}
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit((values) =>
+                                    startTransition(() => onSubmit(values))
+                                )}
+                                className="space-y-4"
+                                id="create-role-form"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>
+                                                {t("accessRoleName")}
+                                            </FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="description"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>
+                                                {t("description")}
+                                            </FormLabel>
+                                            <FormControl>
+                                                <Input {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                {build !== "oss" && (
+                                    <div className="pt-3">
+                                        <PaidFeaturesAlert />
+
+                                        <FormField
+                                            control={form.control}
+                                            name="requireDeviceApproval"
+                                            render={({ field }) => (
+                                                <FormItem className="my-2">
+                                                    <FormControl>
+                                                        <CheckboxWithLabel
+                                                            {...field}
+                                                            disabled={
+                                                                !isPaidUser
+                                                            }
+                                                            value="on"
+                                                            checked={form.watch(
+                                                                "requireDeviceApproval"
+                                                            )}
+                                                            onCheckedChange={(
+                                                                checked
+                                                            ) => {
+                                                                if (
+                                                                    checked !==
+                                                                    "indeterminate"
+                                                                ) {
+                                                                    form.setValue(
+                                                                        "requireDeviceApproval",
+                                                                        checked
+                                                                    );
+                                                                }
+                                                            }}
+                                                            label={t(
+                                                                "requireDeviceApproval"
+                                                            )}
+                                                        />
+                                                    </FormControl>
+
+                                                    <FormDescription>
+                                                        {t(
+                                                            "requireDeviceApprovalDescription"
+                                                        )}
+                                                    </FormDescription>
+
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </div>
+                                )}
+                            </form>
+                        </Form>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">{t("close")}</Button>
+                        </CredenzaClose>
+                        <Button
+                            type="submit"
+                            form="create-role-form"
+                            loading={loading}
+                            disabled={loading}
+                        >
+                            {t("accessRoleUpdateSubmit")}
+                        </Button>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+}
--- a/src/components/MachineClientsTable.tsx
+++ b/src/components/MachineClientsTable.tsx
@@ -1,9 +1,8 @@
 "use client";

 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { DataTable } from "@app/components/ui/data-table";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "@app/components/ui/button";
+import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -16,7 +15,6 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
 import {
    ArrowRight,
    ArrowUpDown,
-    ArrowUpRight,
    MoreHorizontal,
    CircleSlash
 } from "lucide-react";
@@ -25,7 +23,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
 import { Badge } from "./ui/badge";
-import { InfoPopup } from "./ui/info-popup";

 export type ClientRow = {
    id: number;
@@ -45,6 +42,7 @@ export type ClientRow = {
    agent: string | null;
    archived?: boolean;
    blocked?: boolean;
+    approvalState: "approved" | "pending" | "denied";
 };

 type ClientTableProps = {
@@ -214,7 +212,10 @@ export default function MachineClientsTable({
                                </Badge>
                            )}
                            {r.blocked && (
-                                <Badge variant="destructive" className="flex items-center gap-1">
+                                <Badge
+                                    variant="destructive"
+                                    className="flex items-center gap-1"
+                                >
                                    <CircleSlash className="h-3 w-3" />
                                    {t("blocked")}
                                </Badge>
@@ -410,7 +411,9 @@ export default function MachineClientsTable({
                                        }}
                                    >
                                        <span>
-                                            {clientRow.archived ? "Unarchive" : "Archive"}
+                                            {clientRow.archived
+                                                ? "Unarchive"
+                                                : "Archive"}
                                        </span>
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
@@ -424,7 +427,9 @@ export default function MachineClientsTable({
                                        }}
                                    >
                                        <span>
-                                            {clientRow.blocked ? "Unblock" : "Block"}
+                                            {clientRow.blocked
+                                                ? "Unblock"
+                                                : "Block"}
                                        </span>
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
@@ -539,15 +544,27 @@ export default function MachineClientsTable({
                                value: "blocked"
                            }
                        ],
-                        filterFn: (row: ClientRow, selectedValues: (string | number | boolean)[]) => {
+                        filterFn: (
+                            row: ClientRow,
+                            selectedValues: (string | number | boolean)[]
+                        ) => {
                            if (selectedValues.length === 0) return true;
                            const rowArchived = row.archived || false;
                            const rowBlocked = row.blocked || false;
                            const isActive = !rowArchived && !rowBlocked;
-                            
-                            if (selectedValues.includes("active") && isActive) return true;
-                            if (selectedValues.includes("archived") && rowArchived) return true;
-                            if (selectedValues.includes("blocked") && rowBlocked) return true;
+
+                            if (selectedValues.includes("active") && isActive)
+                                return true;
+                            if (
+                                selectedValues.includes("archived") &&
+                                rowArchived
+                            )
+                                return true;
+                            if (
+                                selectedValues.includes("blocked") &&
+                                rowBlocked
+                            )
+                                return true;
                            return false;
                        },
                        defaultValues: ["active"] // Default to showing active clients
--- a/src/components/RolesTable.tsx
+++ b/src/components/RolesTable.tsx
@@ -1,27 +1,27 @@
 "use client";

-import { ColumnDef } from "@tanstack/react-table";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
-} from "@app/components/ui/dropdown-menu";
-import { Button } from "@app/components/ui/button";
-import { ArrowUpDown, Crown, MoreHorizontal } from "lucide-react";
-import { useState } from "react";
-import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { useOrgContext } from "@app/hooks/useOrgContext";
-import { toast } from "@app/hooks/useToast";
-import { RolesDataTable } from "@app/components/RolesDataTable";
-import { Role } from "@server/db";
 import CreateRoleForm from "@app/components/CreateRoleForm";
 import DeleteRoleForm from "@app/components/DeleteRoleForm";
-import { createApiClient } from "@app/lib/api";
+import { RolesDataTable } from "@app/components/RolesDataTable";
+import { Button } from "@app/components/ui/button";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { Role } from "@server/db";
+import { ArrowRight, ArrowUpDown, Link, MoreHorizontal } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem
+} from "./ui/dropdown-menu";
+import EditRoleForm from "./EditRoleForm";

 export type RoleRow = Role;

@@ -29,27 +29,26 @@ type RolesTableProps = {
    roles: RoleRow[];
 };

-export default function UsersTable({ roles: r }: RolesTableProps) {
+export default function UsersTable({ roles }: RolesTableProps) {
    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [editingRole, setEditingRole] = useState<RoleRow | null>(null);
+    const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
    const router = useRouter();

-    const [roles, setRoles] = useState<RoleRow[]>(r);
-
-    const [roleToRemove, setUserToRemove] = useState<RoleRow | null>(null);
+    const [roleToRemove, setRoleToRemove] = useState<RoleRow | null>(null);

    const api = createApiClient(useEnvContext());

    const { org } = useOrgContext();
+    const { isPaidUser } = usePaidStatus();

    const t = useTranslations();
-    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isRefreshing, startTransition] = useTransition();

    const refreshData = async () => {
        console.log("Data refreshed");
-        setIsRefreshing(true);
        try {
-            await new Promise((resolve) => setTimeout(resolve, 200));
            router.refresh();
        } catch (error) {
            toast({
@@ -57,8 +56,6 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                description: t("refreshError"),
                variant: "destructive"
            });
-        } finally {
-            setIsRefreshing(false);
        }
    };

@@ -86,26 +83,74 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
            friendlyName: t("description"),
            header: () => <span className="p-3">{t("description")}</span>
        },
+        // {
+        //     id: "actions",
+        //     enableHiding: false,
+        //     header: () => <span className="p-3"></span>,
+        //     cell: ({ row }) => {
+        //         const roleRow = row.original;
+
+        //         return (
+        //             <div className="flex items-center gap-2 justify-end">
+        //                 <Button
+        //                     variant={"outline"}
+        //                     disabled={roleRow.isAdmin || false}
+        //                     onClick={() => {
+        //                         setIsDeleteModalOpen(true);
+        //                         setUserToRemove(roleRow);
+        //                     }}
+        //                 >
+        //                     {t("accessRoleDelete")}
+        //                 </Button>
+        //             </div>
+        //         );
+        //     }
+        // },
        {
            id: "actions",
            enableHiding: false,
            header: () => <span className="p-3"></span>,
            cell: ({ row }) => {
                const roleRow = row.original;
-
                return (
-                    <div className="flex items-center gap-2 justify-end">
-                        <Button
-                            variant={"outline"}
-                            disabled={roleRow.isAdmin || false}
-                            onClick={() => {
-                                setIsDeleteModalOpen(true);
-                                setUserToRemove(roleRow);
-                            }}
-                        >
-                            {t("accessRoleDelete")}
-                        </Button>
-                    </div>
+                    !roleRow.isAdmin && (
+                        <div className="flex items-center gap-2 justify-end">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            {t("openMenu")}
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setRoleToRemove(roleRow);
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        <span className="text-red-500">
+                                            {t("delete")}
+                                        </span>
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                            <Button
+                                variant={"outline"}
+                                onClick={() => {
+                                    setEditingRole(roleRow);
+                                    setIsEditDialogOpen(true);
+                                }}
+                            >
+                                {t("edit")}
+                            </Button>
+                        </div>
+                    )
                );
            }
        }
@@ -113,11 +158,29 @@ export default function UsersTable({ roles: r }: RolesTableProps) {

    return (
        <>
+            {editingRole && (
+                <EditRoleForm
+                    role={editingRole}
+                    open={isEditDialogOpen}
+                    key={editingRole.roleId}
+                    setOpen={setIsEditDialogOpen}
+                    onSuccess={() => {
+                        // Delay refresh to allow modal to close smoothly
+                        setTimeout(() => {
+                            startTransition(async () => {
+                                await refreshData().then(() =>
+                                    setEditingRole(null)
+                                );
+                            });
+                        }, 150);
+                    }}
+                />
+            )}
            <CreateRoleForm
                open={isCreateModalOpen}
                setOpen={setIsCreateModalOpen}
-                afterCreate={async (role) => {
-                    setRoles((prev) => [...prev, role]);
+                afterCreate={() => {
+                    startTransition(refreshData);
                }}
            />

@@ -127,10 +190,11 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                    setOpen={setIsDeleteModalOpen}
                    roleToDelete={roleToRemove}
                    afterDelete={() => {
-                        setRoles((prev) =>
-                            prev.filter((r) => r.roleId !== roleToRemove.roleId)
-                        );
-                        setUserToRemove(null);
+                        startTransition(async () => {
+                            await refreshData().then(() =>
+                                setRoleToRemove(null)
+                            );
+                        });
                    }}
                />
            )}
@@ -141,7 +205,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
                createRole={() => {
                    setIsCreateModalOpen(true);
                }}
-                onRefresh={refreshData}
+                onRefresh={() => startTransition(refreshData)}
                isRefreshing={isRefreshing}
            />
        </>
--- a/src/components/UserDevicesTable.tsx
+++ b/src/components/UserDevicesTable.tsx
@@ -1,9 +1,8 @@
 "use client";

 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { DataTable } from "@app/components/ui/data-table";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Button } from "@app/components/ui/button";
+import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
    DropdownMenu,
    DropdownMenuContent,
@@ -24,9 +23,11 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
-import { Badge } from "./ui/badge";
-import { InfoPopup } from "./ui/info-popup";
 import ClientDownloadBanner from "./ClientDownloadBanner";
+import { Badge } from "./ui/badge";
+import { build } from "@server/build";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { t } from "@faker-js/faker/dist/airline-DF6RqYmq";

 export type ClientRow = {
    id: number;
@@ -44,6 +45,7 @@ export type ClientRow = {
    userEmail: string | null;
    niceId: string;
    agent: string | null;
+    approvalState: "approved" | "pending" | "denied" | null;
    archived?: boolean;
    blocked?: boolean;
 };
@@ -210,11 +212,22 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                </Badge>
                            )}
                            {r.blocked && (
-                                <Badge variant="destructive" className="flex items-center gap-1">
+                                <Badge
+                                    variant="destructive"
+                                    className="flex items-center gap-1"
+                                >
                                    <CircleSlash className="h-3 w-3" />
                                    {t("blocked")}
                                </Badge>
                            )}
+                            {r.approvalState === "pending" && (
+                                <Badge
+                                    variant="outlinePrimary"
+                                    className="flex items-center gap-1"
+                                >
+                                    {t("pendingApproval")}
+                                </Badge>
+                            )}
                        </div>
                    );
                }
@@ -272,33 +285,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                    );
                }
            },
-            // {
-            //     accessorKey: "siteName",
-            //     header: ({ column }) => {
-            //         return (
-            //             <Button
-            //                 variant="ghost"
-            //                 onClick={() =>
-            //                     column.toggleSorting(column.getIsSorted() === "asc")
-            //                 }
-            //             >
-            //                 Site
-            //                 <ArrowUpDown className="ml-2 h-4 w-4" />
-            //             </Button>
-            //         );
-            //     },
-            //     cell: ({ row }) => {
-            //         const r = row.original;
-            //         return (
-            //             <Link href={`/${r.orgId}/settings/sites/${r.siteId}`}>
-            //                 <Button variant="outline">
-            //                     {r.siteName}
-            //                     <ArrowUpRight className="ml-2 h-4 w-4" />
-            //                 </Button>
-            //             </Link>
-            //         );
-            //     }
-            // },
            {
                accessorKey: "online",
                friendlyName: "Connectivity",
@@ -460,7 +446,11 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                        }
                                    }}
                                >
-                                    <span>{clientRow.archived ? "Unarchive" : "Archive"}</span>
+                                    <span>
+                                        {clientRow.archived
+                                            ? "Unarchive"
+                                            : "Archive"}
+                                    </span>
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                    onClick={() => {
@@ -472,7 +462,11 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                        }
                                    }}
                                >
-                                    <span>{clientRow.blocked ? "Unblock" : "Block"}</span>
+                                    <span>
+                                        {clientRow.blocked
+                                            ? "Unblock"
+                                            : "Block"}
+                                    </span>
                                </DropdownMenuItem>
                                {!clientRow.userId && (
                                    // Machine client - also show delete option
@@ -482,7 +476,9 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                            setIsDeleteModalOpen(true);
                                        }}
                                    >
-                                        <span className="text-red-500">Delete</span>
+                                        <span className="text-red-500">
+                                            Delete
+                                        </span>
                                    </DropdownMenuItem>
                                )}
                            </DropdownMenuContent>
@@ -570,32 +566,65 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                        options: [
                            {
                                id: "active",
-                                label: t("active") || "Active",
+                                label: t("active"),
                                value: "active"
                            },
+                            {
+                                id: "pending",
+                                label: t("pendingApproval"),
+                                value: "pending"
+                            },
+                            {
+                                id: "denied",
+                                label: t("deniedApproval"),
+                                value: "denied"
+                            },
                            {
                                id: "archived",
-                                label: t("archived") || "Archived",
+                                label: t("archived"),
                                value: "archived"
                            },
                            {
                                id: "blocked",
-                                label: t("blocked") || "Blocked",
+                                label: t("blocked"),
                                value: "blocked"
                            }
                        ],
-                        filterFn: (row: ClientRow, selectedValues: (string | number | boolean)[]) => {
+                        filterFn: (
+                            row: ClientRow,
+                            selectedValues: (string | number | boolean)[]
+                        ) => {
                            if (selectedValues.length === 0) return true;
-                            const rowArchived = row.archived || false;
-                            const rowBlocked = row.blocked || false;
+                            const rowArchived = row.archived;
+                            const rowBlocked = row.blocked;
+                            const approvalState = row.approvalState;
                            const isActive = !rowArchived && !rowBlocked;
-                            
-                            if (selectedValues.includes("active") && isActive) return true;
-                            if (selectedValues.includes("archived") && rowArchived) return true;
-                            if (selectedValues.includes("blocked") && rowBlocked) return true;
+
+                            if (selectedValues.includes("active") && isActive)
+                                return true;
+                            if (
+                                selectedValues.includes("pending") &&
+                                approvalState === "pending"
+                            )
+                                return true;
+                            if (
+                                selectedValues.includes("denied") &&
+                                approvalState === "denied"
+                            )
+                                return true;
+                            if (
+                                selectedValues.includes("archived") &&
+                                rowArchived
+                            )
+                                return true;
+                            if (
+                                selectedValues.includes("blocked") &&
+                                rowBlocked
+                            )
+                                return true;
                            return false;
                        },
-                        defaultValues: ["active"] // Default to showing active clients
+                        defaultValues: ["active", "pending"] // Default to showing active clients
                    }
                ]}
            />
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -30,7 +30,8 @@ const checkboxVariants = cva(
 );

 interface CheckboxProps
-    extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    extends
+        React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
        VariantProps<typeof checkboxVariants> {}

 const Checkbox = React.forwardRef<
@@ -49,17 +50,18 @@ const Checkbox = React.forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;

-interface CheckboxWithLabelProps
-    extends React.ComponentPropsWithoutRef<typeof Checkbox> {
+interface CheckboxWithLabelProps extends React.ComponentPropsWithoutRef<
+    typeof Checkbox
+> {
    label: string;
 }

 const CheckboxWithLabel = React.forwardRef<
-    React.ElementRef<typeof Checkbox>,
+    React.ComponentRef<typeof Checkbox>,
    CheckboxWithLabelProps
 >(({ className, label, id, ...props }, ref) => {
    return (
-        <div className={cn("flex items-center space-x-2", className)}>
+        <div className={cn("flex items-center gap-x-2", className)}>
            <Checkbox id={id} ref={ref} {...props} />
            <label
                htmlFor={id}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -15,7 +15,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;

 const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentRef<typeof DialogPrimitive.Overlay>,
    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
    <DialogPrimitive.Overlay
@@ -30,7 +30,7 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentRef<typeof DialogPrimitive.Content>,
    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
    <DialogPortal>
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -1,5 +1,11 @@
 import { build } from "@server/build";
+import type { QueryRequestAnalyticsResponse } from "@server/routers/auditLogs";
 import type { ListClientsResponse } from "@server/routers/client";
+import type { ListDomainsResponse } from "@server/routers/domain";
+import type {
+    GetResourceWhitelistResponse,
+    ListResourceNamesResponse
+} from "@server/routers/resource";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
 import type {
@@ -7,20 +13,14 @@ import type {
    ListSiteResourceRolesResponse,
    ListSiteResourceUsersResponse
 } from "@server/routers/siteResource";
+import type { ListTargetsResponse } from "@server/routers/target";
 import type { ListUsersResponse } from "@server/routers/user";
 import type ResponseT from "@server/types/Response";
 import { keepPreviousData, queryOptions } from "@tanstack/react-query";
-import type { AxiosInstance, AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import z from "zod";
 import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
-import type { QueryRequestAnalyticsResponse } from "@server/routers/auditLogs";
-import type {
-    GetResourceWhitelistResponse,
-    ListResourceNamesResponse
-} from "@server/routers/resource";
-import type { ListTargetsResponse } from "@server/routers/target";
-import type { ListDomainsResponse } from "@server/routers/domain";

 export type ProductUpdate = {
    link: string | null;
@@ -322,3 +322,47 @@ export const resourceQueries = {
            }
        })
 };
+
+export const approvalFiltersSchema = z.object({
+    approvalState: z
+        .enum(["pending", "approved", "denied", "all"])
+        .optional()
+        .catch("all")
+});
+
+export type ApprovalItem = {
+    approvalId: number;
+    orgId: string;
+    clientId: number | null;
+    decision: "pending" | "approved" | "denied";
+    type: "user_device";
+    user: {
+        name: string | null;
+        userId: string;
+        username: string;
+    };
+};
+
+export const approvalQueries = {
+    listApprovals: (
+        orgId: string,
+        filters: z.infer<typeof approvalFiltersSchema>
+    ) =>
+        queryOptions({
+            queryKey: ["APPROVALS", orgId, filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const sp = new URLSearchParams();
+
+                if (filters.approvalState) {
+                    sp.set("approvalState", filters.approvalState);
+                }
+
+                const res = await meta!.api.get<
+                    AxiosResponse<{ approvals: ApprovalItem[] }>
+                >(`/org/${orgId}/approvals?${sp.toString()}`, {
+                    signal
+                });
+                return res.data.data;
+            }
+        })
+};
Author	SHA1	Message	Date
Milo Schwartz	06aaa7c680	Merge pull request #2121 from Fredkiss3/feat/device-approvals feat: device approvals	2026-01-15 21:33:31 -08:00
miloschwartz	ff5e12655f	add pretty apple device names	2026-01-15 17:59:45 -08:00
Fred KISSIE	6d90d734f4	🏷️ fix types	2026-01-15 23:25:05 +01:00
Fred KISSIE	9749a272ec	🏷️fix types	2026-01-15 03:46:25 +01:00
Fred KISSIE	b76a50238e	🏷️ fix types	2026-01-15 03:40:30 +01:00
Fred KISSIE	a4f3963a5a	♻️update approval filter & set approval to denied when blocked	2026-01-15 03:34:42 +01:00
Fred KISSIE	fb51f42f35	♻️ set `approval` & `blocked` work in tandem	2026-01-15 01:33:52 +01:00
Fred KISSIE	c910a715bd	♻️ set blocked to true if `approvalState` is set to denied	2026-01-15 01:12:38 +01:00
Fred KISSIE	9040f9b82a	♻️ set approval state nullable	2026-01-15 01:03:02 +01:00
Fred KISSIE	fc0ec0d754	🐛 remove unused approval state	2026-01-15 00:28:30 +01:00
Fred KISSIE	b3569174b6	🐛 fix sqlite type	2026-01-15 00:20:45 +01:00
Fred KISSIE	0cae624995	🏷️ fix types	2026-01-14 23:57:16 +01:00
Fred KISSIE	cbf184342b	Merge branch 'dev' into feat/device-approvals	2026-01-14 23:08:40 +01:00
Fred KISSIE	ce123a7f1a	💬 make the message more descriptive	2026-01-14 03:37:47 +01:00
Fred KISSIE	0c5daa7173	✨ process approvals on the frontend	2026-01-14 03:31:49 +01:00
Fred KISSIE	bc20a34a49	✨process approval endpoint	2026-01-14 03:00:40 +01:00
Fred KISSIE	d5b6a426a9	💄 filter by approval state	2026-01-14 02:24:11 +01:00
Fred KISSIE	4c78e93143	💄 show approval state in the user device uI	2026-01-14 01:59:51 +01:00
Fred KISSIE	30943010e6	♻️ sort by pending first	2026-01-14 00:37:48 +01:00
Fred KISSIE	dd5ca10226	♻️ empty data	2026-01-14 00:35:35 +01:00
Fred KISSIE	262376aa75	✨ approval list UI	2026-01-10 02:37:50 +01:00
Fred KISSIE	19c3efc9e9	🚧 working on the approval feed	2026-01-09 02:20:08 +01:00
Fred KISSIE	7164721ee0	🐛 insert timestamp correctly	2026-01-09 01:50:56 +01:00
Fred KISSIE	74b16809ec	♻️ update endpoint to only return relevant data	2026-01-09 01:40:15 +01:00
Fred KISSIE	220723d25f	♻️ component refactor	2026-01-09 01:33:52 +01:00
Fred KISSIE	fdb03c9626	♻️ list approvals with client & user data	2026-01-09 01:33:40 +01:00
Fred KISSIE	a81bbb9192	✨ create approval request and mark client approval as pending if the user's role requires it	2026-01-09 01:18:15 +01:00
Fred KISSIE	7a4aff8e4b	🗃️ use `clientId` and fix bad column name for decision and add `userId`	2026-01-09 01:17:05 +01:00
Fred KISSIE	2d0dd067b8	♻️ refactor	2026-01-08 03:41:09 +01:00
Fred KISSIE	3ab25f5ff1	♻️ refactor	2026-01-08 03:38:55 +01:00
Fred KISSIE	39bebea5f7	✨ create & update role with device approval	2026-01-08 03:33:03 +01:00
Fred KISSIE	abfe476cb9	🚧 wip	2026-01-06 02:02:09 +01:00
Fred KISSIE	bbca200ceb	🙈 do not include claude.md in gitignore	2026-01-06 01:51:54 +01:00
Fred KISSIE	cb21cab117	🚧 add device approval in the roles page	2026-01-06 01:51:33 +01:00
Fred KISSIE	1f80845a7a	🗃️ move approval state to client directly where it makes more sense	2026-01-05 22:49:42 +01:00
Fred KISSIE	0f2b94307f	Merge branch 'dev' into feat/device-approvals	2026-01-05 16:54:18 +01:00
Fred KISSIE	e983e1166a	🚧 wip: approval tables in DB	2025-12-20 00:05:33 +01:00
Fred KISSIE	009b86c33b	Merge branch 'dev' into feat/device-approvals	2025-12-19 20:03:05 +01:00
Fred KISSIE	a5775a0f4f	🗃️ create `approvals` table	2025-12-19 00:00:10 +01:00