@checkstack/maintenance-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,96 @@
+# @checkstack/maintenance-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- d20d274: Initial release of all @checkstack packages. Rebranded from Checkmate to Checkstack with new npm organization @checkstack and domain checkstack.dev.
+- Updated dependencies [d20d274]
+  - @checkstack/catalog-common@0.0.2
+  - @checkstack/common@0.0.2
+  - @checkstack/frontend-api@0.0.2
+  - @checkstack/maintenance-common@0.0.2
+  - @checkstack/signal-frontend@0.0.2
+  - @checkstack/ui@0.0.2
+
+## 0.1.2
+
+### Patch Changes
+
+- 97a6a23: Improve incident and maintenance detail page layout consistency and navigation
+
+  **Layout consistency:**
+
+  - Incident detail page now matches maintenance detail page structure
+  - Both use PageLayout wrapper with consistent card layout
+  - Affected systems moved into main details card with server icons
+  - Standardized padding, spacing, and description/date formatting
+
+  **Back navigation with system context:**
+
+  - Detail pages now track source system via `?from=systemId` query parameter
+  - "Back to History" navigates to the correct system's history page
+  - Works when navigating from system panels, history pages, or system detail page
+  - Falls back to first affected system if no query param present
+
+- 32ea706: ### User Menu Loading State Fix
+
+  Fixed user menu items "popping in" one after another due to independent async permission checks.
+
+  **Changes:**
+
+  - Added `UserMenuItemsContext` interface with `permissions` and `hasCredentialAccount` to `@checkstack/frontend-api`
+  - `LoginNavbarAction` now pre-fetches all permissions and credential account info before rendering the menu
+  - All user menu item components now use the passed context for synchronous permission checks instead of async hooks
+  - Uses `qualifyPermissionId` helper for fully-qualified permission IDs
+
+  **Result:** All menu items appear simultaneously when the user menu opens.
+
+- Updated dependencies [52231ef]
+- Updated dependencies [b0124ef]
+- Updated dependencies [54cc787]
+- Updated dependencies [a65e002]
+- Updated dependencies [ae33df2]
+- Updated dependencies [32ea706]
+  - @checkstack/ui@0.1.2
+  - @checkstack/common@0.2.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/catalog-common@0.1.2
+  - @checkstack/maintenance-common@0.1.2
+  - @checkstack/signal-frontend@0.1.1
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [0f8cc7d]
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/catalog-common@0.1.1
+  - @checkstack/maintenance-common@0.1.1
+  - @checkstack/ui@0.1.1
+
+## 0.1.0
+
+### Minor Changes
+
+- eff5b4e: Add standalone maintenance scheduling plugin
+
+  - New `@checkstack/maintenance-common` package with Zod schemas, permissions, oRPC contract, and extension slots
+  - New `@checkstack/maintenance-backend` package with Drizzle schema, service, and oRPC router
+  - New `@checkstack/maintenance-frontend` package with admin page and system detail panel
+  - Shared `DateTimePicker` component added to `@checkstack/ui`
+  - Database migrations for maintenances, maintenance_systems, and maintenance_updates tables
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [4dd644d]
+- Updated dependencies [b55fae6]
+- Updated dependencies [b354ab3]
+  - @checkstack/maintenance-common@0.1.0
+  - @checkstack/ui@0.1.0
+  - @checkstack/common@0.1.0
+  - @checkstack/catalog-common@0.1.0
+  - @checkstack/signal-frontend@0.1.0
+  - @checkstack/frontend-api@0.0.2

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@checkstack/maintenance-frontend",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/catalog-common": "workspace:*",
+    "@checkstack/common": "workspace:*",
+    "@checkstack/frontend-api": "workspace:*",
+    "@checkstack/maintenance-common": "workspace:*",
+    "@checkstack/signal-frontend": "workspace:*",
+    "@checkstack/ui": "workspace:*",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/tsconfig": "workspace:*",
+    "@checkstack/scripts": "workspace:*"
+  }
+}

package/src/api.ts

@@ -0,0 +1,10 @@
+import { createApiRef } from "@checkstack/frontend-api";
+import { MaintenanceApi } from "@checkstack/maintenance-common";
+import type { InferClient } from "@checkstack/common";
+
+// MaintenanceApiClient type inferred from the client definition
+export type MaintenanceApiClient = InferClient<typeof MaintenanceApi>;
+
+export const maintenanceApiRef = createApiRef<MaintenanceApiClient>(
+  "plugin.maintenance.api"
+);

package/src/components/MaintenanceEditor.tsx

@@ -0,0 +1,317 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { useApi } from "@checkstack/frontend-api";
+import { maintenanceApiRef } from "../api";
+import type {
+  MaintenanceWithSystems,
+  MaintenanceUpdate,
+} from "@checkstack/maintenance-common";
+import type { System } from "@checkstack/catalog-common";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+  Textarea,
+  Checkbox,
+  useToast,
+  DateTimePicker,
+  StatusUpdateTimeline,
+} from "@checkstack/ui";
+import { Plus, MessageSquare, Loader2, AlertCircle } from "lucide-react";
+import { MaintenanceUpdateForm } from "./MaintenanceUpdateForm";
+import { getMaintenanceStatusBadge } from "../utils/badges";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  maintenance?: MaintenanceWithSystems;
+  systems: System[];
+  onSave: () => void;
+}
+
+export const MaintenanceEditor: React.FC<Props> = ({
+  open,
+  onOpenChange,
+  maintenance,
+  systems,
+  onSave,
+}) => {
+  const api = useApi(maintenanceApiRef);
+  const toast = useToast();
+
+  // Maintenance fields
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [startAt, setStartAt] = useState<Date>(new Date());
+  const [endAt, setEndAt] = useState<Date>(new Date());
+  const [selectedSystemIds, setSelectedSystemIds] = useState<Set<string>>(
+    new Set()
+  );
+  const [saving, setSaving] = useState(false);
+
+  // Status update fields
+  const [updates, setUpdates] = useState<MaintenanceUpdate[]>([]);
+  const [loadingUpdates, setLoadingUpdates] = useState(false);
+  const [showUpdateForm, setShowUpdateForm] = useState(false);
+
+  const loadMaintenanceDetails = useCallback(
+    async (id: string) => {
+      setLoadingUpdates(true);
+      try {
+        const detail = await api.getMaintenance({ id });
+        if (detail) {
+          setUpdates(detail.updates);
+        }
+      } catch (error) {
+        console.error("Failed to load maintenance details:", error);
+      } finally {
+        setLoadingUpdates(false);
+      }
+    },
+    [api]
+  );
+
+  // Reset form when maintenance changes
+  useEffect(() => {
+    if (maintenance) {
+      setTitle(maintenance.title);
+      setDescription(maintenance.description ?? "");
+      setStartAt(new Date(maintenance.startAt));
+      setEndAt(new Date(maintenance.endAt));
+      setSelectedSystemIds(new Set(maintenance.systemIds));
+      // Load full maintenance with updates
+      loadMaintenanceDetails(maintenance.id);
+    } else {
+      // Default to 1 hour from now to 2 hours from now
+      const now = new Date();
+      const start = new Date(now.getTime() + 60 * 60 * 1000);
+      const end = new Date(now.getTime() + 2 * 60 * 60 * 1000);
+      setTitle("");
+      setDescription("");
+      setStartAt(start);
+      setEndAt(end);
+      setSelectedSystemIds(new Set());
+      setUpdates([]);
+      setShowUpdateForm(false);
+    }
+  }, [maintenance, open, loadMaintenanceDetails]);
+
+  const handleSystemToggle = (systemId: string) => {
+    setSelectedSystemIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(systemId)) {
+        next.delete(systemId);
+      } else {
+        next.add(systemId);
+      }
+      return next;
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      toast.error("Title is required");
+      return;
+    }
+    if (selectedSystemIds.size === 0) {
+      toast.error("At least one system must be selected");
+      return;
+    }
+    if (endAt <= startAt) {
+      toast.error("End date must be after start date");
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (maintenance) {
+        await api.updateMaintenance({
+          id: maintenance.id,
+          title,
+          description: description || undefined,
+          startAt,
+          endAt,
+          systemIds: [...selectedSystemIds],
+        });
+        toast.success("Maintenance updated");
+      } else {
+        await api.createMaintenance({
+          title,
+          description,
+          startAt,
+          endAt,
+          systemIds: [...selectedSystemIds],
+        });
+        toast.success("Maintenance created");
+      }
+      onSave();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to save";
+      toast.error(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleUpdateSuccess = () => {
+    if (maintenance) {
+      loadMaintenanceDetails(maintenance.id);
+    }
+    setShowUpdateForm(false);
+    // Notify parent to refresh list (status may have changed)
+    onSave();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="xl">
+        <DialogHeader>
+          <DialogTitle>
+            {maintenance ? "Edit Maintenance" : "Create Maintenance"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="grid gap-6 py-4 max-h-[70vh] overflow-y-auto">
+          {/* Basic Info Section */}
+          <div className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="title">Title</Label>
+              <Input
+                id="title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Database maintenance"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Details about the maintenance..."
+                rows={3}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="grid gap-2">
+                <Label>Start Date & Time</Label>
+                <DateTimePicker value={startAt} onChange={setStartAt} />
+              </div>
+              <div className="grid gap-2">
+                <Label>End Date & Time</Label>
+                <DateTimePicker
+                  value={endAt}
+                  onChange={setEndAt}
+                  minDate={startAt}
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-2">
+              <Label>Affected Systems</Label>
+              <div className="max-h-36 overflow-y-auto border rounded-md p-3 space-y-2">
+                {systems.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    No systems available
+                  </p>
+                ) : (
+                  systems.map((system) => (
+                    <div
+                      key={system.id}
+                      className="flex items-center space-x-2 p-2 rounded hover:bg-accent cursor-pointer"
+                      onClick={() => handleSystemToggle(system.id)}
+                    >
+                      <Checkbox
+                        id={`system-${system.id}`}
+                        checked={selectedSystemIds.has(system.id)}
+                      />
+                      <Label
+                        htmlFor={`system-${system.id}`}
+                        className="cursor-pointer flex-1"
+                      >
+                        {system.name}
+                      </Label>
+                    </div>
+                  ))
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {selectedSystemIds.size} system(s) selected
+              </p>
+            </div>
+          </div>
+
+          {/* Status Updates Section - Only show when editing */}
+          {maintenance && (
+            <div className="border-t pt-4">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-2">
+                  <MessageSquare className="h-4 w-4 text-muted-foreground" />
+                  <Label className="text-base font-medium">
+                    Status Updates
+                  </Label>
+                </div>
+                {!showUpdateForm && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowUpdateForm(true)}
+                  >
+                    <Plus className="h-4 w-4 mr-1" />
+                    Add Update
+                  </Button>
+                )}
+              </div>
+
+              {/* Add Update Form */}
+              {showUpdateForm && (
+                <div className="mb-4">
+                  <MaintenanceUpdateForm
+                    maintenanceId={maintenance.id}
+                    onSuccess={handleUpdateSuccess}
+                    onCancel={() => setShowUpdateForm(false)}
+                  />
+                </div>
+              )}
+
+              {/* Updates List */}
+              {loadingUpdates ? (
+                <div className="flex justify-center py-4">
+                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                </div>
+              ) : updates.length === 0 ? (
+                <div className="flex flex-col items-center py-6 text-muted-foreground">
+                  <AlertCircle className="h-8 w-8 mb-2" />
+                  <p className="text-sm">No status updates yet</p>
+                </div>
+              ) : (
+                <StatusUpdateTimeline
+                  updates={updates}
+                  renderStatusBadge={getMaintenanceStatusBadge}
+                  showTimeline={false}
+                  maxHeight="max-h-48"
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={saving}>
+            {saving ? "Saving..." : maintenance ? "Update" : "Create"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/MaintenanceMenuItems.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Wrench } from "lucide-react";
+import type { UserMenuItemsContext } from "@checkstack/frontend-api";
+import { DropdownMenuItem } from "@checkstack/ui";
+import { qualifyPermissionId, resolveRoute } from "@checkstack/common";
+import {
+  maintenanceRoutes,
+  permissions,
+  pluginMetadata,
+} from "@checkstack/maintenance-common";
+
+export const MaintenanceMenuItems = ({
+  permissions: userPerms,
+}: UserMenuItemsContext) => {
+  const qualifiedId = qualifyPermissionId(
+    pluginMetadata,
+    permissions.maintenanceManage
+  );
+  const canManage = userPerms.includes("*") || userPerms.includes(qualifiedId);
+
+  if (!canManage) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(maintenanceRoutes.routes.config)}>
+      <DropdownMenuItem icon={<Wrench className="w-4 h-4" />}>
+        Maintenances
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/components/MaintenanceUpdateForm.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { useApi } from "@checkstack/frontend-api";
+import { maintenanceApiRef } from "../api";
+import type { MaintenanceStatus } from "@checkstack/maintenance-common";
+import {
+  Button,
+  Textarea,
+  Label,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  useToast,
+} from "@checkstack/ui";
+import { Loader2 } from "lucide-react";
+
+interface MaintenanceUpdateFormProps {
+  maintenanceId: string;
+  onSuccess: () => void;
+  onCancel?: () => void;
+}
+
+/**
+ * Reusable form for adding status updates to a maintenance.
+ * Used in both MaintenanceDetailPage and MaintenanceEditor.
+ */
+export const MaintenanceUpdateForm: React.FC<MaintenanceUpdateFormProps> = ({
+  maintenanceId,
+  onSuccess,
+  onCancel,
+}) => {
+  const api = useApi(maintenanceApiRef);
+  const toast = useToast();
+
+  const [message, setMessage] = useState("");
+  const [statusChange, setStatusChange] = useState<MaintenanceStatus | "">("");
+  const [isPosting, setIsPosting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!message.trim()) {
+      toast.error("Update message is required");
+      return;
+    }
+
+    setIsPosting(true);
+    try {
+      await api.addUpdate({
+        maintenanceId,
+        message,
+        statusChange: statusChange || undefined,
+      });
+      toast.success("Update posted");
+      setMessage("");
+      setStatusChange("");
+      onSuccess();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to post update";
+      toast.error(errorMessage);
+    } finally {
+      setIsPosting(false);
+    }
+  };
+
+  return (
+    <div className="p-4 bg-muted/30 rounded-lg border space-y-3">
+      <div className="grid gap-2">
+        <Label htmlFor="updateMessage">Update Message</Label>
+        <Textarea
+          id="updateMessage"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Describe the status update..."
+          rows={2}
+        />
+      </div>
+      <div className="grid gap-2">
+        <Label>Change Status (Optional)</Label>
+        <Select
+          value={statusChange || "__keep_current__"}
+          onValueChange={(v) =>
+            setStatusChange(
+              v === "__keep_current__" ? "" : (v as MaintenanceStatus)
+            )
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Keep current status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__keep_current__">Keep Current</SelectItem>
+            <SelectItem value="scheduled">Scheduled</SelectItem>
+            <SelectItem value="in_progress">In Progress</SelectItem>
+            <SelectItem value="completed">Completed</SelectItem>
+            <SelectItem value="cancelled">Cancelled</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex gap-2 justify-end">
+        {onCancel && (
+          <Button variant="outline" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+        <Button
+          size="sm"
+          onClick={handleSubmit}
+          disabled={isPosting || !message.trim()}
+        >
+          {isPosting ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+              Posting...
+            </>
+          ) : (
+            "Post Update"
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/SystemMaintenanceBadge.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
+import { maintenanceApiRef } from "../api";
+import {
+  MAINTENANCE_UPDATED,
+  type MaintenanceWithSystems,
+} from "@checkstack/maintenance-common";
+import { Badge } from "@checkstack/ui";
+
+type Props = SlotContext<typeof SystemStateBadgesSlot>;
+
+/**
+ * Displays a maintenance badge for a system when it has an active maintenance.
+ * Shows nothing if no active maintenance.
+ * Listens for realtime updates via signals.
+ */
+export const SystemMaintenanceBadge: React.FC<Props> = ({ system }) => {
+  const api = useApi(maintenanceApiRef);
+  const [hasActiveMaintenance, setHasActiveMaintenance] = useState(false);
+
+  const refetch = useCallback(() => {
+    if (!system?.id) return;
+
+    api
+      .getMaintenancesForSystem({ systemId: system.id })
+      .then((maintenances: MaintenanceWithSystems[]) => {
+        const active = maintenances.some((m) => m.status === "in_progress");
+        setHasActiveMaintenance(active);
+      })
+      .catch(console.error);
+  }, [system?.id, api]);
+
+  // Initial fetch
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  // Listen for realtime maintenance updates
+  useSignal(MAINTENANCE_UPDATED, ({ systemIds }) => {
+    if (system?.id && systemIds.includes(system.id)) {
+      refetch();
+    }
+  });
+
+  if (!hasActiveMaintenance) return;
+  return <Badge variant="warning">Under Maintenance</Badge>;
+};