@checkstack/auth-frontend 0.5.3 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @checkstack/auth-frontend
 
+## 0.5.5
+
+### Patch Changes
+
+- 223081d: Add icon support to PageLayout and improve mobile responsiveness
+
+  **PageLayout Icons:**
+
+  - Added required `icon` prop to `PageLayout` and `PageHeader` components that accepts a Lucide icon component reference
+  - Icons are rendered with consistent `h-6 w-6 text-primary` styling
+  - Updated all page components to include appropriate icons in their headers
+
+  **Mobile Layout Improvements:**
+
+  - Standardized responsive padding in main app shell (`p-3` on mobile, `p-6` on desktop)
+  - Added `CardHeaderRow` component for mobile-safe card headers with proper wrapping
+  - Improved `DateRangeFilter` responsive behavior with vertical stacking on mobile
+  - Migrated pages to use `PageLayout` for consistent responsive behavior
+
+- Updated dependencies [223081d]
+  - @checkstack/ui@0.5.0
+
+## 0.5.4
+
+### Patch Changes
+
+- Updated dependencies [db1f56f]
+- Updated dependencies [538e45d]
+  - @checkstack/common@0.6.0
+  - @checkstack/ui@0.4.1
+  - @checkstack/auth-common@0.5.3
+  - @checkstack/frontend-api@0.3.3
+
 ## 0.5.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "main": "src/index.tsx",
   "exports": {

package/src/components/ApplicationsTab.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Table,
@@ -70,7 +71,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
     refetch: refetchApplications,
   } = authClient.getApplications.useQuery(
     {},
-    { enabled: canManageApplications }
+    { enabled: canManageApplications },
   );
 
   // Mutations
@@ -88,7 +89,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create application"
+        error instanceof Error ? error.message : "Failed to create application",
       );
     },
   });
@@ -99,7 +100,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update application"
+        error instanceof Error ? error.message : "Failed to update application",
       );
     },
   });
@@ -112,7 +113,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete application"
+        error instanceof Error ? error.message : "Failed to delete application",
       );
     },
   });
@@ -129,7 +130,9 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
       },
       onError: (error) => {
         toast.error(
-          error instanceof Error ? error.message : "Failed to regenerate secret"
+          error instanceof Error
+            ? error.message
+            : "Failed to regenerate secret",
         );
       },
     });
@@ -148,7 +151,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
   const handleToggleApplicationRole = (
     appId: string,
     roleId: string,
-    currentRoles: string[]
+    currentRoles: string[],
   ) => {
     const newRoles = currentRoles.includes(roleId)
       ? currentRoles.filter((r) => r !== roleId)
@@ -173,14 +176,16 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
   return (
     <>
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>External Applications</CardTitle>
-          {canManageApplications && (
-            <Button onClick={() => setCreateAppDialogOpen(true)} size="sm">
-              <Plus className="h-4 w-4 mr-2" />
-              Create Application
-            </Button>
-          )}
+        <CardHeader>
+          <CardHeaderRow>
+            <CardTitle>External Applications</CardTitle>
+            {canManageApplications && (
+              <Button onClick={() => setCreateAppDialogOpen(true)} size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                Create Application
+              </Button>
+            )}
+          </CardHeaderRow>
         </CardHeader>
         <CardContent>
           <Alert variant="info" className="mb-4">
@@ -242,7 +247,7 @@ export const ApplicationsTab: React.FC<ApplicationsTabProps> = ({
                                   handleToggleApplicationRole(
                                     app.id,
                                     role.id,
-                                    app.roles
+                                    app.roles,
                                   )
                                 }
                               />

package/src/components/AuthSettingsPage.tsx

@@ -44,7 +44,7 @@ export const AuthSettingsPage: React.FC = () => {
       ["users", "roles", "teams", "strategies", "applications"].includes(tab)
     ) {
       setActiveTab(
-        tab as "users" | "roles" | "teams" | "strategies" | "applications"
+        tab as "users" | "roles" | "teams" | "strategies" | "applications",
       );
     }
 
@@ -94,7 +94,7 @@ export const AuthSettingsPage: React.FC = () => {
     refetch: refetchStrategies,
   } = authClient.getStrategies.useQuery(
     {},
-    { enabled: canManageStrategies.allowed }
+    { enabled: canManageStrategies.allowed },
   );
 
   const dataLoading =
@@ -191,6 +191,7 @@ export const AuthSettingsPage: React.FC = () => {
   return (
     <PageLayout
       title="Authentication Settings"
+      icon={Shield}
       loading={accessRulesLoading}
       allowed={isAllowed}
     >
@@ -199,7 +200,12 @@ export const AuthSettingsPage: React.FC = () => {
         activeTab={activeTab}
         onTabChange={(tabId) =>
           setActiveTab(
-            tabId as "users" | "roles" | "teams" | "strategies" | "applications"
+            tabId as
+              | "users"
+              | "roles"
+              | "teams"
+              | "strategies"
+              | "applications",
           )
         }
         className="mb-6"

package/src/components/RolesTab.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Table,
@@ -57,7 +58,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create role"
+        error instanceof Error ? error.message : "Failed to create role",
       );
     },
   });
@@ -69,7 +70,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update role"
+        error instanceof Error ? error.message : "Failed to update role",
       );
     },
   });
@@ -82,7 +83,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete role"
+        error instanceof Error ? error.message : "Failed to delete role",
       );
     },
   });
@@ -103,16 +104,18 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     description?: string;
     accessRules: string[];
   }) => {
-    await (params.id ? updateRoleMutation.mutateAsync({
-        id: params.id,
-        name: params.name,
-        description: params.description,
-        accessRules: params.accessRules,
-      }) : createRoleMutation.mutateAsync({
-        name: params.name,
-        description: params.description,
-        accessRules: params.accessRules,
-      }));
+    await (params.id
+      ? updateRoleMutation.mutateAsync({
+          id: params.id,
+          name: params.name,
+          description: params.description,
+          accessRules: params.accessRules,
+        })
+      : createRoleMutation.mutateAsync({
+          name: params.name,
+          description: params.description,
+          accessRules: params.accessRules,
+        }));
   };
 
   const handleDeleteRole = () => {
@@ -123,14 +126,16 @@ export const RolesTab: React.FC<RolesTabProps> = ({
   return (
     <>
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>Role Management</CardTitle>
-          {canCreateRoles && (
-            <Button onClick={handleCreateRole} size="sm">
-              <Plus className="h-4 w-4 mr-2" />
-              Create Role
-            </Button>
-          )}
+        <CardHeader>
+          <CardHeaderRow>
+            <CardTitle>Role Management</CardTitle>
+            {canCreateRoles && (
+              <Button onClick={handleCreateRole} size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                Create Role
+              </Button>
+            )}
+          </CardHeaderRow>
         </CardHeader>
         <CardContent>
           {canReadRoles ? (

package/src/components/TeamAccessEditor.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Button,
@@ -77,7 +78,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
   const toast = useToast();
 
   const { allowed: canManageTeams } = accessApi.useAccess(
-    authAccess.teams.manage
+    authAccess.teams.manage,
   );
 
   const [expanded, setExpanded] = useState(initialExpanded);
@@ -90,7 +91,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
     refetch: refetchAccess,
   } = authClient.getResourceTeamAccess.useQuery(
     { resourceType, resourceId },
-    { enabled: expanded && !!resourceId }
+    { enabled: expanded && !!resourceId },
   );
 
   // Query: All teams
@@ -104,7 +105,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
     refetch: refetchSettings,
   } = authClient.getResourceAccessSettings.useQuery(
     { resourceType, resourceId },
-    { enabled: expanded && !!resourceId }
+    { enabled: expanded && !!resourceId },
   );
 
   const loading = accessLoading || teamsLoading || settingsLoading;
@@ -120,7 +121,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update access"
+        error instanceof Error ? error.message : "Failed to update access",
       );
     },
   });
@@ -133,7 +134,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to remove access"
+        error instanceof Error ? error.message : "Failed to remove access",
       );
     },
   });
@@ -145,7 +146,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update settings"
+        error instanceof Error ? error.message : "Failed to update settings",
       );
     },
   });
@@ -168,10 +169,10 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
 
   const handleUpdateAccess = (
     teamId: string,
-    updates: { canRead?: boolean; canManage?: boolean }
+    updates: { canRead?: boolean; canManage?: boolean },
   ) => {
     const currentAccess = (accessList as TeamAccess[]).find(
-      (a) => a.teamId === teamId
+      (a) => a.teamId === teamId,
     );
     setAccessMutation.mutate({
       resourceType,
@@ -199,7 +200,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
 
     // Check if this was the last team - if so, reset teamOnly
     const remainingTeams = (accessList as TeamAccess[]).filter(
-      (a) => a.teamId !== teamId
+      (a) => a.teamId !== teamId,
     );
     if (remainingTeams.length === 0 && teamOnly) {
       setSettingsMutation.mutate({
@@ -213,7 +214,7 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
   // Get teams that don't already have access
   const typedAccessList = accessList as TeamAccess[];
   const availableTeams = (teams as Team[]).filter(
-    (t) => !typedAccessList.some((a) => a.teamId === t.id)
+    (t) => !typedAccessList.some((a) => a.teamId === t.id),
   );
 
   const adding = setAccessMutation.isPending;
@@ -412,19 +413,21 @@ export const TeamAccessEditor: React.FC<TeamAccessEditorProps> = ({
   // Card mode (default)
   return (
     <Card>
-      <CardHeader className="flex flex-row items-center justify-between py-3">
-        <CardTitle className="text-base flex items-center gap-2">
-          <Shield className="h-4 w-4" />
-          Team Access Control
-        </CardTitle>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={() => setExpanded(false)}
-        >
-          Collapse
-        </Button>
+      <CardHeader>
+        <CardHeaderRow>
+          <CardTitle className="text-base flex items-center gap-2">
+            <Shield className="h-4 w-4" />
+            Team Access Control
+          </CardTitle>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setExpanded(false)}
+          >
+            Collapse
+          </Button>
+        </CardHeaderRow>
       </CardHeader>
       <CardContent className="space-y-4">
         {loading ? (

package/src/components/TeamsTab.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Table,
@@ -102,7 +103,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     refetch: refetchTeamDetail,
   } = authClient.getTeam.useQuery(
     { teamId: selectedTeamId ?? "" },
-    { enabled: !!selectedTeamId && membersDialogOpen }
+    { enabled: !!selectedTeamId && membersDialogOpen },
   );
 
   // Mutations
@@ -115,7 +116,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create team"
+        error instanceof Error ? error.message : "Failed to create team",
       );
     },
   });
@@ -129,7 +130,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update team"
+        error instanceof Error ? error.message : "Failed to update team",
       );
     },
   });
@@ -143,7 +144,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete team"
+        error instanceof Error ? error.message : "Failed to delete team",
       );
     },
   });
@@ -157,7 +158,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to add member"
+        error instanceof Error ? error.message : "Failed to add member",
       );
     },
   });
@@ -170,7 +171,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to remove member"
+        error instanceof Error ? error.message : "Failed to remove member",
       );
     },
   });
@@ -182,7 +183,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to promote to manager"
+        error instanceof Error ? error.message : "Failed to promote to manager",
       );
     },
   });
@@ -194,7 +195,9 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to remove manager role"
+        error instanceof Error
+          ? error.message
+          : "Failed to remove manager role",
       );
     },
   });
@@ -304,14 +307,16 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
   return (
     <>
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>Team Management</CardTitle>
-          {canManageTeams && (
-            <Button onClick={handleCreateTeam} size="sm">
-              <Plus className="h-4 w-4 mr-2" />
-              Create Team
-            </Button>
-          )}
+        <CardHeader>
+          <CardHeaderRow>
+            <CardTitle>Team Management</CardTitle>
+            {canManageTeams && (
+              <Button onClick={handleCreateTeam} size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                Create Team
+              </Button>
+            )}
+          </CardHeaderRow>
         </CardHeader>
         <CardContent>
           {canReadTeams ? (
@@ -463,7 +468,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
             <div className="space-y-4">
               {/* Add Member Form */}
               {(teamDetailData.managers.some((m) =>
-                users.some((u) => u.id === m.id)
+                users.some((u) => u.id === m.id),
               ) ||
                 canManageTeams) && (
                 <div className="flex gap-2">
@@ -508,7 +513,7 @@ export const TeamsTab: React.FC<TeamsTabProps> = ({
                 ) : (
                   teamDetailData.members.map((member) => {
                     const isManager = teamDetailData.managers.some(
-                      (m) => m.id === member.id
+                      (m) => m.id === member.id,
                     );
                     return (
                       <div

package/src/components/UsersTab.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Table,
@@ -53,7 +54,7 @@ export const UsersTab: React.FC<UsersTabProps> = ({
   const [createUserDialogOpen, setCreateUserDialogOpen] = useState(false);
 
   const hasCredentialStrategy = strategies.some(
-    (s) => s.id === "credential" && s.enabled
+    (s) => s.id === "credential" && s.enabled,
   );
 
   // Mutations
@@ -65,7 +66,7 @@ export const UsersTab: React.FC<UsersTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to delete user"
+        error instanceof Error ? error.message : "Failed to delete user",
       );
     },
   });
@@ -76,7 +77,7 @@ export const UsersTab: React.FC<UsersTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to update roles"
+        error instanceof Error ? error.message : "Failed to update roles",
       );
     },
   });
@@ -88,7 +89,7 @@ export const UsersTab: React.FC<UsersTabProps> = ({
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to create user"
+        error instanceof Error ? error.message : "Failed to create user",
       );
       throw error;
     },
@@ -102,7 +103,7 @@ export const UsersTab: React.FC<UsersTabProps> = ({
   const handleToggleRole = (
     userId: string,
     roleId: string,
-    currentRoles: string[]
+    currentRoles: string[],
   ) => {
     if (currentUserId === userId) {
       toast.error("You cannot update your own roles");
@@ -127,14 +128,16 @@ export const UsersTab: React.FC<UsersTabProps> = ({
   return (
     <>
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle>User Management</CardTitle>
-          {canCreateUsers && hasCredentialStrategy && (
-            <Button onClick={() => setCreateUserDialogOpen(true)} size="sm">
-              <Plus className="h-4 w-4 mr-2" />
-              Create User
-            </Button>
-          )}
+        <CardHeader>
+          <CardHeaderRow>
+            <CardTitle>User Management</CardTitle>
+            {canCreateUsers && hasCredentialStrategy && (
+              <Button onClick={() => setCreateUserDialogOpen(true)} size="sm">
+                <Plus className="h-4 w-4 mr-2" />
+                Create User
+              </Button>
+            )}
+          </CardHeaderRow>
         </CardHeader>
         <CardContent>
           <Alert variant="info" className="mb-4">
@@ -188,7 +191,7 @@ export const UsersTab: React.FC<UsersTabProps> = ({
                                     handleToggleRole(
                                       user.id,
                                       role.id,
-                                      user.roles
+                                      user.roles,
                                     )
                                   }
                                 />