@makolabs/ripple 1.2.4 → 1.2.9

package/dist/elements/pagination/Pagination.svelte

@@ -324,7 +324,7 @@
 				{#if template === 'full' && showPageNumbers}
 					{#if totalPages <= maxVisiblePages}
 						<!-- Show all pages if total is less than or equal to maxVisiblePages -->
-						{#each Array(totalPages) as page, i (page + i)}
+						{#each Array(totalPages) as page, i (page + '-' + i)}
 							{@const pageNum = i + 1}
 							<button
 								onclick={() => goToPage(pageNum)}

package/dist/layout/table/Table.svelte

@@ -44,7 +44,6 @@
 		headerActions
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: TableProps<any> = $props();
-
 	// Determine if we should use Card wrapper
 	const hasHeader = $derived(title !== undefined || subtitle !== undefined);
 

package/dist/layout/table/table.js

@@ -19,33 +19,33 @@ export const table = tv({
     variants: {
         size: {
             xs: {
-                th: 'px-2 py-1.5 text-xs',
+                th: 'px-2 py-1.5',
                 td: 'px-2 py-1.5 text-xs'
             },
             sm: {
-                th: 'px-3 py-2 text-xs',
+                th: 'px-3 py-2',
                 td: 'px-3 py-2 text-sm'
             },
             base: {
-                th: 'px-4 py-3 text-sm',
+                th: 'px-3 py-2',
                 td: 'px-4 py-3 text-sm'
             },
             lg: {
-                th: 'px-6 py-4 text-sm',
+                th: 'px-4 py-3',
                 td: 'px-6 py-4 text-base'
             },
             xl: {
-                th: 'px-8 py-5 text-base',
+                th: 'px-5 py-4',
                 td: 'px-8 py-5 text-base'
             },
             '2xl': {
-                th: 'px-10 py-6 text-lg',
+                th: 'px-6 py-5',
                 td: 'px-10 py-6 text-lg'
             }
         },
         color: {
             default: {
-                th: 'text-default-700 bg-default-50'
+                th: 'bg-gray-50'
             },
             [Color.PRIMARY]: {
                 th: 'text-primary-700 bg-primary-50',

package/dist/user-management/UserManagement.svelte

@@ -1,29 +1,31 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { PageHeader, MetricCard, Button, cn } from '../index.js';
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
 	import UserViewModal from './UserViewModal.svelte';
-	import type { User, UserManagementProps } from './user-management.js';
+	import type { User, UserManagementProps, Role, Permission } from './user-management.js';
 	import { SvelteSet } from 'svelte/reactivity';
+	import * as UserManagementAdapter from './adapters/UserManagement.remote.js';
 
 	let {
-		users = [],
-		totalUsers = 0,
-		loading = false,
-		currentPage = 1,
-		pageSize = 10,
-		roles = [],
-		permissions = [],
-		onPageChange,
-		onPageSizeChange,
-		onSort,
-		onCreateUser,
-		onUpdateUser,
-		onDeleteUser,
-		onDeleteUsers,
+		adapter = UserManagementAdapter,
+		roles: initialRoles = [],
+		permissions: initialPermissions = [],
 		class: className
 	}: UserManagementProps = $props();
 
+	// Internal state
+	let users = $state<User[]>([]);
+	let totalUsers = $state(0);
+	let loading = $state(false);
+	let currentPage = $state(1);
+	let pageSize = $state(10);
+	let sortBy = $state<string | null>(null);
+	let sortOrder = $state<'asc' | 'desc'>('desc');
+	let roles = $state<Role[]>(initialRoles);
+	let permissions = $state<Permission[]>(initialPermissions);
+
 	// Modal states
 	let showEditCreateModal = $state(false);
 	let showViewModal = $state(false);
@@ -37,15 +39,78 @@
 	const hasSelectedUsers = $derived(selectedUsers.size > 0);
 	const activeUsers = $derived(users.filter((u) => !!u.id));
 
+	// Load users from adapter (remote function)
+	async function loadUsers() {
+		try {
+			loading = true;
+			const result = await adapter.getUsers({
+				page: currentPage,
+				pageSize,
+				sortBy: sortBy || undefined,
+				sortOrder: sortOrder || 'desc'
+			});
+			users = result.users;
+			totalUsers = result.totalUsers;
+		} catch (error) {
+			console.error('Error loading users:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Handlers
+	async function handlePageChange(page: number) {
+		currentPage = page;
+		await loadUsers();
+	}
+
+	async function handlePageSizeChange(size: number) {
+		pageSize = size;
+		currentPage = 1; // Reset to first page when changing page size
+		await loadUsers();
+	}
+
+	async function handleSort(state: { column: string | null; direction: 'asc' | 'desc' | null }) {
+		if (state.column && state.direction) {
+			sortBy = state.column;
+			sortOrder = state.direction;
+			await loadUsers();
+		}
+	}
+
 	// Modal handlers
-	function openViewModal(user: User) {
+	async function openViewModal(user: User) {
 		selectedUser = user;
 		showViewModal = true;
+		// Fetch fresh permissions for the user
+		if (user.id) {
+			try {
+				const permissions = await adapter.getUserPermissions(user.id);
+				selectedUser = {
+					...user,
+					permissions
+				};
+			} catch (error) {
+				console.error('Error fetching user permissions:', error);
+			}
+		}
 	}
 
-	function openEditModal(user: User) {
+	async function openEditModal(user: User) {
 		selectedUser = user;
 		showEditCreateModal = true;
+		// Fetch fresh permissions for the user
+		if (user.id) {
+			try {
+				const permissions = await adapter.getUserPermissions(user.id);
+				selectedUser = {
+					...user,
+					permissions
+				};
+			} catch (error) {
+				console.error('Error fetching user permissions:', error);
+			}
+		}
 	}
 
 	function openCreateModal() {
@@ -62,10 +127,16 @@
 
 	// Save handlers
 	async function handleUserSave(user: User, mode: 'create' | 'edit') {
-		if (mode === 'create' && onCreateUser) {
-			await onCreateUser(user);
-		} else if (mode === 'edit' && onUpdateUser) {
-			await onUpdateUser(user.id, user);
+		try {
+			if (mode === 'create') {
+				await adapter.createUser(user);
+			} else {
+				await adapter.updateUser({ userId: user.id, userData: user });
+			}
+			await loadUsers();
+		} catch (error) {
+			console.error('Error saving user:', error);
+			throw error;
 		}
 	}
 
@@ -74,8 +145,12 @@
 		if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
 			return;
 		}
-		if (onDeleteUser) {
-			await onDeleteUser(userId);
+		try {
+			await adapter.deleteUser(userId);
+			await loadUsers();
+		} catch (error) {
+			console.error('Error deleting user:', error);
+			throw error;
 		}
 	}
 
@@ -89,13 +164,23 @@
 			return;
 		}
 
-		if (bulkAction === 'delete' && onDeleteUsers) {
-			await onDeleteUsers(userIds);
-			selectedUsers.clear();
-			selectedUsers = new SvelteSet(selectedUsers);
-			bulkAction = '';
+		if (bulkAction === 'delete') {
+			try {
+				await adapter.deleteUsers(userIds);
+				selectedUsers.clear();
+				bulkAction = '';
+				await loadUsers();
+			} catch (error) {
+				console.error('Error deleting users:', error);
+				throw error;
+			}
 		}
 	}
+
+	// Initialize on mount
+	onMount(async () => {
+		await loadUsers();
+	});
 </script>
 
 {#snippet PlusIcon()}
@@ -112,7 +197,7 @@
 		layout="horizontal"
 		class="mb-6"
 	>
-		<Button onclick={openCreateModal} color="primary" disabled={!onCreateUser}>
+		<Button onclick={openCreateModal} color="primary">
 			{@render PlusIcon()}
 			Add User
 		</Button>
@@ -156,9 +241,9 @@
 		{currentPage}
 		{pageSize}
 		{totalUsers}
-		{onPageChange}
-		{onPageSizeChange}
-		{onSort}
+		onPageChange={handlePageChange}
+		onPageSizeChange={handlePageSizeChange}
+		onSort={handleSort}
 		onView={openViewModal}
 		onEdit={openEditModal}
 		onDelete={handleDeleteUser}

package/dist/user-management/UserManagementTestWrapper.svelte

@@ -1,47 +1,33 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import UserManagement from './UserManagement.svelte';
 	import type { UserManagementProps } from './user-management.js';
+	import * as mockAdapter from './adapters/mockUserManagement.js';
+	import { resetState } from './adapters/mockUserManagement.js';
+	import type { User, Role, Permission } from './user-management.js';
 
-	interface Props extends UserManagementProps {
+	interface Props extends Omit<UserManagementProps, 'adapter'> {
 		testId?: string;
+		initialUsers?: User[];
+		roles?: Role[];
+		permissions?: Permission[];
+		simulateDelay?: boolean;
+		delayMs?: number;
 	}
 
-	let {
-		users = [],
-		totalUsers = 0,
-		loading = false,
-		currentPage = 1,
-		pageSize = 10,
-		roles = [],
-		permissions = [],
-		onPageChange = () => {},
-		onPageSizeChange = () => {},
-		onSort,
-		onCreateUser,
-		onUpdateUser,
-		onDeleteUser,
-		onDeleteUsers,
-		testId,
-		...rest
-	}: Props = $props();
+	let { testId, initialUsers, roles, permissions, simulateDelay, delayMs, ...rest }: Props =
+		$props();
+
+	// Initialize mock adapter with provided data
+	onMount(async () => {
+		await resetState({
+			initialUsers,
+			simulateDelay,
+			delayMs
+		});
+	});
 </script>
 
 <div data-testid={testId}>
-	<UserManagement
-		{users}
-		{totalUsers}
-		{loading}
-		{currentPage}
-		{pageSize}
-		{roles}
-		{permissions}
-		{onPageChange}
-		{onPageSizeChange}
-		{onSort}
-		{onCreateUser}
-		{onUpdateUser}
-		{onDeleteUser}
-		{onDeleteUsers}
-		{...rest}
-	/>
+	<UserManagement adapter={mockAdapter} {roles} {permissions} {...rest} />
 </div>

package/dist/user-management/UserManagementTestWrapper.svelte.d.ts

@@ -1,6 +1,12 @@
 import type { UserManagementProps } from './user-management.js';
-interface Props extends UserManagementProps {
+import type { User, Role, Permission } from './user-management.js';
+interface Props extends Omit<UserManagementProps, 'adapter'> {
     testId?: string;
+    initialUsers?: User[];
+    roles?: Role[];
+    permissions?: Permission[];
+    simulateDelay?: boolean;
+    delayMs?: number;
 }
 declare const UserManagementTestWrapper: import("svelte").Component<Props, {}, "">;
 type UserManagementTestWrapper = ReturnType<typeof UserManagementTestWrapper>;

package/dist/user-management/UserModal.svelte

@@ -25,23 +25,75 @@
 	let formData = $state<Partial<User>>({
 		first_name: '',
 		last_name: '',
-		username: '',
 		email_addresses: [{ email_address: '' }],
 		phone_numbers: [],
 		role: '',
 		permissions: []
 	});
 
+	// Helper function to detect role from permissions
+	function detectRoleFromPermissions(userPermissions: string[]): string {
+		if (!roles || roles.length === 0 || !userPermissions || userPermissions.length === 0) {
+			return '';
+		}
+
+		// First, try to find an exact match (all role permissions match user permissions)
+		for (const role of roles) {
+			if (role.permissions && role.permissions.length > 0) {
+				const rolePermissions = role.permissions;
+				// Check if all role permissions are present in user permissions
+				const allPermissionsMatch = rolePermissions.every((perm) => userPermissions.includes(perm));
+				// Also check if the counts match (to avoid partial matches)
+				if (allPermissionsMatch && rolePermissions.length === userPermissions.length) {
+					return role.value;
+				}
+			}
+		}
+
+		// If no exact match, try to find a role where all of its permissions are in user's permissions
+		// This handles cases where user has additional permissions beyond the role
+		for (const role of roles) {
+			if (role.permissions && role.permissions.length > 0) {
+				const allRolePermissionsInUser = role.permissions.every((perm) =>
+					userPermissions.includes(perm)
+				);
+				if (allRolePermissionsInUser) {
+					return role.value;
+				}
+			}
+		}
+
+		// Last resort: find any role where at least one permission matches
+		// (for cases where permissions might be partially matching)
+		for (const role of roles) {
+			if (role.permissions && role.permissions.length > 0) {
+				const hasMatchingPermission = role.permissions.some((perm) =>
+					userPermissions.includes(perm)
+				);
+				if (hasMatchingPermission) {
+					return role.value;
+				}
+			}
+		}
+
+		return '';
+	}
+
 	// Initialize form data when user changes
 	$effect(() => {
 		if (open && user) {
+			// Detect role from permissions if role is not already set
+			let detectedRole = user.role || '';
+			if (!detectedRole && user.permissions && user.permissions.length > 0) {
+				detectedRole = detectRoleFromPermissions(user.permissions);
+			}
+
 			formData = {
 				first_name: user.first_name || '',
 				last_name: user.last_name || '',
-				username: user.username || '',
 				email_addresses: user.email_addresses || [{ email_address: '' }],
 				phone_numbers: user.phone_numbers || [],
-				role: user.role || '',
+				role: detectedRole,
 				permissions: user.permissions || []
 			};
 		} else if (open && !user) {
@@ -49,7 +101,6 @@
 			formData = {
 				first_name: '',
 				last_name: '',
-				username: '',
 				email_addresses: [{ email_address: '' }],
 				phone_numbers: [],
 				role: '',
@@ -91,7 +142,6 @@
 				id: user?.id || '',
 				first_name: formData.first_name,
 				last_name: formData.last_name,
-				username: formData.username,
 				email_addresses: formData.email_addresses,
 				phone_numbers: formData.phone_numbers,
 				role: formData.role,
@@ -194,20 +244,6 @@
 					<p class="mt-1 text-xs text-red-500">{formErrors.email}</p>
 				{/if}
 			</div>
-
-			<!-- Username (Optional) -->
-			<div>
-				<label for="username" class="mb-1 block text-sm font-medium text-gray-700">
-					Username
-				</label>
-				<input
-					id="username"
-					type="text"
-					bind:value={formData.username}
-					class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
-					placeholder="username"
-				/>
-			</div>
 		</div>
 
 		<!-- Right Column: Permissions & Role -->

package/dist/user-management/UserViewModal.svelte

@@ -127,12 +127,6 @@
 										{getUserDisplayName(user)}
 									</p>
 								</div>
-								{#if user?.username}
-									<div>
-										<span class="text-xs text-gray-500">Username</span>
-										<p class="text-sm">{user.username}</p>
-									</div>
-								{/if}
 								<div>
 									<span class="text-xs text-gray-500">User ID</span>
 									<p class="font-mono text-xs break-all">{user?.id || 'N/A'}</p>

package/dist/user-management/adapters/UserManagement.remote.d.ts

@@ -0,0 +1,68 @@
+/**
+ * User Management Remote Functions
+ *
+ * Complete implementation template for user management remote functions.
+ * This follows the same pattern as users.remote.ts and is designed to be
+ * used as-is in SvelteKit applications like sharkfin-frontend.
+ *
+ * Configuration:
+ * - Set environment variables: CLERK_SECRET_KEY, ADMIN_API_KEY, PRIVATE_BASE_AUTH_URL, ALLOWED_ORG_ID
+ * - Configure CLIENT_ID via ADMIN_CONFIG or env variable (CLIENT_ID)
+ * - Adjust permission prefix filter via PERMISSION_PREFIX env variable
+ *
+ * @see https://svelte.dev/docs/kit/remote-functions
+ *
+ * Usage in your app:
+ * ```svelte
+ * <script>
+ *   import { UserManagement } from '@makolabs/ripple';
+ *   import * as adapter from '../UserManagement.remote';
+ * </script>
+ *
+ * <UserManagement adapter={adapter} />
+ * ```
+ */
+import type { User } from '../user-management.js';
+import type { GetUsersOptions, GetUsersResult } from './types.js';
+/**
+ * Get users with pagination and sorting
+ *
+ * Transforms adapter options to Clerk API format
+ */
+export declare const getUsers: import("@sveltejs/kit").RemoteQueryFunction<GetUsersOptions, GetUsersResult>;
+/**
+ * Create a new user
+ *
+ * Creates user in Clerk, optionally adds to organization, and creates admin key with permissions
+ */
+export declare const createUser: import("@sveltejs/kit").RemoteCommand<Partial<User>, Promise<User>>;
+/**
+ * Update an existing user
+ */
+export declare const updateUser: import("@sveltejs/kit").RemoteCommand<{
+    userId: string;
+    userData: Partial<User>;
+}, Promise<User>>;
+/**
+ * Delete a single user
+ */
+export declare const deleteUser: import("@sveltejs/kit").RemoteCommand<string, Promise<void>>;
+/**
+ * Delete multiple users
+ */
+export declare const deleteUsers: import("@sveltejs/kit").RemoteCommand<string[], Promise<void>>;
+/**
+ * Get permissions for a specific user
+ *
+ * Uses 'sub' (userId) parameter in admin API calls
+ */
+export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, string[]>;
+/**
+ * Update permissions for a specific user
+ *
+ * Uses 'sub' (userId) parameter in admin API calls
+ */
+export declare const updateUserPermissions: import("@sveltejs/kit").RemoteCommand<{
+    userId: string;
+    permissions: string[];
+}, Promise<void>>;