improved private resource modal

messages/en-US.json

@@ -2318,5 +2318,19 @@
     "resourceLoginPageDescription": "Customize the login page for individual resources",
     "enterConfirmation": "Enter confirmation",
     "blueprintViewDetails": "Details",
-    "defaultIdentityProvider": "Default Identity Provider"
+    "defaultIdentityProvider": "Default Identity Provider",
+    "editInternalResourceDialogNetworkSettings": "Network Settings",
+    "editInternalResourceDialogAccessPolicy": "Access Policy",
+    "editInternalResourceDialogAddRoles": "Add Roles",
+    "editInternalResourceDialogAddUsers": "Add Users",
+    "editInternalResourceDialogAddClients": "Add Clients",
+    "editInternalResourceDialogDestinationLabel": "Destination",
+    "editInternalResourceDialogDestinationDescription": "Specify the destination address for the internal resource. This can be a hostname, IP address, or CIDR range depending on the selected mode. Optionally set an internal DNS alias for easier identification.",
+    "editInternalResourceDialogPortRestrictionsDescription": "Restrict access to specific TCP/UDP ports or allow/block all ports.",
+    "editInternalResourceDialogTcp": "TCP",
+    "editInternalResourceDialogUdp": "UDP",
+    "editInternalResourceDialogIcmp": "ICMP",
+    "editInternalResourceDialogAccessControl": "Access Control",
+    "editInternalResourceDialogAccessControlDescription": "Control which roles, users, and machine clients have access to this resource when connected. Admins always have access.",
+    "editInternalResourceDialogPortRangeValidationError": "Port range must be \"*\" for all ports, or a comma-separated list of ports and ranges (e.g., \"80,443,8000-9000\"). Ports must be between 1 and 65535."
 }

src/components/ClientResourcesTable.tsx

@@ -329,8 +329,11 @@ export default function ClientResourcesTable({
                     orgId={orgId}
                     sites={sites}
                     onSuccess={() => {
-                        router.refresh();
+                        // Delay refresh to allow modal to close smoothly
-                        setEditingResource(null);
+                        setTimeout(() => {
+                            router.refresh();
+                            setEditingResource(null);
+                        }, 150);
                     }}
                 />
             )}
@@ -341,7 +344,10 @@ export default function ClientResourcesTable({
                 orgId={orgId}
                 sites={sites}
                 onSuccess={() => {
-                    router.refresh();
+                    // Delay refresh to allow modal to close smoothly
+                    setTimeout(() => {
+                        router.refresh();
+                    }, 150);
                 }}
             />
         </>

src/components/HorizontalTabs.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { cn } from "@app/lib/cn";
@@ -20,17 +20,22 @@ interface HorizontalTabsProps {
     children: React.ReactNode;
     items: TabItem[];
     disabled?: boolean;
+    clientSide?: boolean;
+    defaultTab?: number;
 }
 
 export function HorizontalTabs({
     children,
     items,
-    disabled = false
+    disabled = false,
+    clientSide = false,
+    defaultTab = 0
 }: HorizontalTabsProps) {
     const pathname = usePathname();
     const params = useParams();
     const { licenseStatus, isUnlocked } = useLicenseStatusContext();
     const t = useTranslations();
+    const [activeClientTab, setActiveClientTab] = useState(defaultTab);
 
     function hydrateHref(href: string) {
         return href
@@ -43,6 +48,73 @@ export function HorizontalTabs({
             .replace("{remoteExitNodeId}", params.remoteExitNodeId as string);
     }
 
+    // Client-side mode: render tabs as buttons with state management
+    if (clientSide) {
+        const childrenArray = React.Children.toArray(children);
+        const activeChild = childrenArray[activeClientTab] || null;
+
+        return (
+            <div className="space-y-3">
+                <div className="relative">
+                    <div className="overflow-x-auto scrollbar-hide">
+                        <div className="flex space-x-4 border-b min-w-max">
+                            {items.map((item, index) => {
+                                const isActive = activeClientTab === index;
+                                const isProfessional =
+                                    item.showProfessional && !isUnlocked();
+                                const isDisabled =
+                                    disabled ||
+                                    (isProfessional && !isUnlocked());
+
+                                return (
+                                    <button
+                                        key={index}
+                                        type="button"
+                                        onClick={() => {
+                                            if (!isDisabled) {
+                                                setActiveClientTab(index);
+                                            }
+                                        }}
+                                        className={cn(
+                                            "px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap relative",
+                                            isActive
+                                                ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.75 after:bg-primary after:rounded-full"
+                                                : "text-muted-foreground hover:text-foreground",
+                                            isDisabled && "cursor-not-allowed"
+                                        )}
+                                        disabled={isDisabled}
+                                        tabIndex={isDisabled ? -1 : undefined}
+                                        aria-disabled={isDisabled}
+                                    >
+                                        <div
+                                            className={cn(
+                                                "flex items-center space-x-2",
+                                                isDisabled && "opacity-60"
+                                            )}
+                                        >
+                                            {item.icon && item.icon}
+                                            <span>{item.title}</span>
+                                            {isProfessional && (
+                                                <Badge
+                                                    variant="outlinePrimary"
+                                                    className="ml-2"
+                                                >
+                                                    {t("licenseBadge")}
+                                                </Badge>
+                                            )}
+                                        </div>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+                <div className="space-y-6">{activeChild}</div>
+            </div>
+        );
+    }
+
+    // Server-side mode: original behavior with routing
     return (
         <div className="space-y-3">
             <div className="relative">

src/components/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-white dark:text-destructive-foreground hover:bg-destructive/90 ",
                 outline:
-                    "border border-input bg-card hover:bg-accent hover:text-accent-foreground ",
+                    "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground ",
                 outlinePrimary:
                     "border border-primary bg-card hover:bg-primary/10 text-primary ",
                 secondary:

src/lib/queries.ts

@@ -228,7 +228,7 @@ export const resourceQueries = {
             queryFn: async ({ signal, meta }) => {
                 const res = await meta!.api.get<
                     AxiosResponse<ListSiteResourceUsersResponse>
-                >(`/resource/${resourceId}/users`, { signal });
+                >(`/site-resource/${resourceId}/users`, { signal });
                 return res.data.data.users;
             }
         }),
@@ -238,7 +238,7 @@ export const resourceQueries = {
             queryFn: async ({ signal, meta }) => {
                 const res = await meta!.api.get<
                     AxiosResponse<ListSiteResourceRolesResponse>
-                >(`/resource/${resourceId}/roles`, { signal });
+                >(`/site-resource/${resourceId}/roles`, { signal });
 
                 return res.data.data.roles;
             }
@@ -249,7 +249,7 @@ export const resourceQueries = {
             queryFn: async ({ signal, meta }) => {
                 const res = await meta!.api.get<
                     AxiosResponse<ListSiteResourceClientsResponse>
-                >(`/resource/${resourceId}/clients`, { signal });
+                >(`/site-resource/${resourceId}/clients`, { signal });
 
                 return res.data.data.clients;
             }