@checkstack/maintenance-frontend 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @checkstack/maintenance-frontend
 
+## 0.4.4
+
+### 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
+  - @checkstack/auth-frontend@0.5.5
+  - @checkstack/dashboard-frontend@0.3.10
+
+## 0.4.3
+
+### Patch Changes
+
+- Updated dependencies [db1f56f]
+- Updated dependencies [538e45d]
+  - @checkstack/common@0.6.0
+  - @checkstack/ui@0.4.1
+  - @checkstack/dashboard-frontend@0.3.9
+  - @checkstack/auth-frontend@0.5.4
+  - @checkstack/catalog-common@1.2.4
+  - @checkstack/frontend-api@0.3.3
+  - @checkstack/maintenance-common@0.4.2
+  - @checkstack/signal-frontend@0.0.10
+
 ## 0.4.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/maintenance-frontend",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {

package/src/pages/MaintenanceConfigPage.tsx

@@ -57,11 +57,11 @@ const MaintenanceConfigPageContent: React.FC = () => {
   const toast = useToast();
 
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
-    maintenanceAccess.maintenance.manage
+    maintenanceAccess.maintenance.manage,
   );
 
   const [statusFilter, setStatusFilter] = useState<MaintenanceStatus | "all">(
-    "all"
+    "all",
   );
 
   // Editor state
@@ -82,7 +82,7 @@ const MaintenanceConfigPageContent: React.FC = () => {
     isLoading: maintenancesLoading,
     refetch: refetchMaintenances,
   } = maintenanceClient.listMaintenances.useQuery(
-    statusFilter === "all" ? {} : { status: statusFilter }
+    statusFilter === "all" ? {} : { status: statusFilter },
   );
 
   // Fetch systems with useQuery
@@ -124,7 +124,7 @@ const MaintenanceConfigPageContent: React.FC = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to complete"
+        error instanceof Error ? error.message : "Failed to complete",
       );
     },
   });
@@ -171,6 +171,7 @@ const MaintenanceConfigPageContent: React.FC = () => {
     <PageLayout
       title="Planned Maintenances"
       subtitle="Manage scheduled maintenance windows for systems"
+      icon={Wrench}
       loading={accessLoading}
       allowed={canManage}
       actions={
@@ -329,5 +330,5 @@ const MaintenanceConfigPageContent: React.FC = () => {
 };
 
 export const MaintenanceConfigPage = wrapInSuspense(
-  MaintenanceConfigPageContent
+  MaintenanceConfigPageContent,
 );

package/src/pages/MaintenanceDetailPage.tsx

@@ -21,6 +21,7 @@ import { catalogRoutes, CatalogApi } from "@checkstack/catalog-common";
 import {
   Card,
   CardHeader,
+  CardHeaderRow,
   CardTitle,
   CardContent,
   Badge,
@@ -55,7 +56,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
   const toast = useToast();
 
   const { allowed: canManage } = accessApi.useAccess(
-    maintenanceAccess.maintenance.manage
+    maintenanceAccess.maintenance.manage,
   );
 
   const [showUpdateForm, setShowUpdateForm] = useState(false);
@@ -67,7 +68,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
     refetch: refetchMaintenance,
   } = maintenanceClient.getMaintenance.useQuery(
     { id: maintenanceId ?? "" },
-    { enabled: !!maintenanceId }
+    { enabled: !!maintenanceId },
   );
 
   // Fetch systems with useQuery
@@ -85,7 +86,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Failed to complete"
+        error instanceof Error ? error.message : "Failed to complete",
       );
     },
   });
@@ -141,6 +142,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
     <PageLayout
       title={maintenance.title}
       subtitle="Maintenance details and status history"
+      icon={Wrench}
       loading={false}
       allowed={true}
       actions={
@@ -150,7 +152,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
               navigate(
                 resolveRoute(maintenanceRoutes.routes.systemHistory, {
                   systemId: sourceSystemId,
-                })
+                }),
               )
             }
           >
@@ -163,12 +165,12 @@ const MaintenanceDetailPageContent: React.FC = () => {
         {/* Maintenance Info Card */}
         <Card>
           <CardHeader className="border-b border-border">
-            <div className="flex items-center justify-between">
+            <CardHeaderRow>
               <div className="flex items-center gap-2">
                 <Wrench className="h-5 w-5 text-muted-foreground" />
                 <CardTitle>Maintenance Details</CardTitle>
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex flex-wrap items-center gap-2">
                 {getMaintenanceStatusBadge(maintenance.status)}
                 {canComplete && (
                   <Button
@@ -182,7 +184,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
                   </Button>
                 )}
               </div>
-            </div>
+            </CardHeaderRow>
           </CardHeader>
           <CardContent className="p-6 space-y-4">
             {maintenance.description && (
@@ -244,7 +246,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
         {/* Status Updates Timeline */}
         <Card>
           <CardHeader className="border-b border-border">
-            <div className="flex items-center justify-between">
+            <CardHeaderRow>
               <div className="flex items-center gap-2">
                 <MessageSquare className="h-5 w-5 text-muted-foreground" />
                 <CardTitle>Status Updates</CardTitle>
@@ -259,7 +261,7 @@ const MaintenanceDetailPageContent: React.FC = () => {
                   Add Update
                 </Button>
               )}
-            </div>
+            </CardHeaderRow>
           </CardHeader>
           <CardContent className="p-6">
             {/* Add Update Form */}
@@ -287,5 +289,5 @@ const MaintenanceDetailPageContent: React.FC = () => {
 };
 
 export const MaintenanceDetailPage = wrapInSuspense(
-  MaintenanceDetailPageContent
+  MaintenanceDetailPageContent,
 );

package/src/pages/SystemMaintenanceHistoryPage.tsx

@@ -36,7 +36,7 @@ const SystemMaintenanceHistoryPageContent: React.FC = () => {
   const { data: maintenancesData, isLoading: maintenancesLoading } =
     maintenanceClient.listMaintenances.useQuery(
       { systemId },
-      { enabled: !!systemId }
+      { enabled: !!systemId },
     );
 
   // Fetch systems with useQuery
@@ -82,13 +82,14 @@ const SystemMaintenanceHistoryPageContent: React.FC = () => {
     <PageLayout
       title={`Maintenance History: ${systemName}`}
       subtitle="All past and scheduled maintenances for this system"
+      icon={History}
       loading={loading}
       allowed={true}
       actions={
         <BackLink
           onClick={() =>
             navigate(
-              resolveRoute(catalogRoutes.routes.systemDetail, { systemId })
+              resolveRoute(catalogRoutes.routes.systemDetail, { systemId }),
             )
           }
         >
@@ -132,7 +133,7 @@ const SystemMaintenanceHistoryPageContent: React.FC = () => {
                       navigate(
                         `${resolveRoute(maintenanceRoutes.routes.detail, {
                           maintenanceId: m.id,
-                        })}?from=${systemId}`
+                        })}?from=${systemId}`,
                       )
                     }
                   >
@@ -173,5 +174,5 @@ const SystemMaintenanceHistoryPageContent: React.FC = () => {
 };
 
 export const SystemMaintenanceHistoryPage = wrapInSuspense(
-  SystemMaintenanceHistoryPageContent
+  SystemMaintenanceHistoryPageContent,
 );