@checkstack/maintenance-frontend 0.0.2

package/src/components/SystemMaintenancePanel.tsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { Link } from "react-router-dom";
+import { useApi, type SlotContext } from "@checkstack/frontend-api";
+import { useSignal } from "@checkstack/signal-frontend";
+import { resolveRoute } from "@checkstack/common";
+import { SystemDetailsSlot } from "@checkstack/catalog-common";
+import { maintenanceApiRef } from "../api";
+import {
+  maintenanceRoutes,
+  MAINTENANCE_UPDATED,
+  type MaintenanceWithSystems,
+} from "@checkstack/maintenance-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+  LoadingSpinner,
+  Button,
+} from "@checkstack/ui";
+import { Wrench, Clock, Calendar, History, ChevronRight } from "lucide-react";
+import { formatDistanceToNow, format } from "date-fns";
+
+type Props = SlotContext<typeof SystemDetailsSlot>;
+
+/**
+ * Panel shown on system detail pages displaying active/upcoming maintenances.
+ * Listens for realtime updates via signals.
+ */
+export const SystemMaintenancePanel: React.FC<Props> = ({ system }) => {
+  const api = useApi(maintenanceApiRef);
+  const [maintenances, setMaintenances] = useState<MaintenanceWithSystems[]>(
+    []
+  );
+  const [loading, setLoading] = useState(true);
+
+  const refetch = useCallback(() => {
+    if (!system?.id) return;
+
+    api
+      .getMaintenancesForSystem({ systemId: system.id })
+      .then(setMaintenances)
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, [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 (loading) {
+    return (
+      <Card>
+        <CardContent className="p-6 flex justify-center">
+          <LoadingSpinner />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (maintenances.length === 0) {
+    // Show a subtle card with just the history button when no active maintenances
+    return (
+      <Card className="border-border/50">
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Wrench className="h-4 w-4" />
+              <span className="text-sm">No active maintenances</span>
+            </div>
+            <Button variant="ghost" size="sm" asChild>
+              <Link
+                to={resolveRoute(maintenanceRoutes.routes.systemHistory, {
+                  systemId: system.id,
+                })}
+              >
+                <History className="h-4 w-4 mr-1" />
+                View History
+              </Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "in_progress": {
+        return <Badge variant="warning">In Progress</Badge>;
+      }
+      case "scheduled": {
+        return <Badge variant="info">Scheduled</Badge>;
+      }
+      default: {
+        return <Badge>{status}</Badge>;
+      }
+    }
+  };
+
+  return (
+    <Card className="border-warning/30 bg-warning/5">
+      <CardHeader className="border-b border-border bg-warning/10">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Wrench className="h-5 w-5 text-warning" />
+            <CardTitle className="text-lg font-semibold">
+              Planned Maintenance
+            </CardTitle>
+          </div>
+          <Button variant="ghost" size="sm" asChild>
+            <Link
+              to={resolveRoute(maintenanceRoutes.routes.systemHistory, {
+                systemId: system.id,
+              })}
+            >
+              <History className="h-4 w-4 mr-1" />
+              View History
+            </Link>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4 space-y-3">
+        {maintenances.map((m) => (
+          <Link
+            key={m.id}
+            to={`${resolveRoute(maintenanceRoutes.routes.detail, {
+              maintenanceId: m.id,
+            })}?from=${system.id}`}
+            className="block p-3 rounded-lg border border-border bg-background hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-start justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <h4 className="font-medium text-foreground">{m.title}</h4>
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              </div>
+              {getStatusBadge(m.status)}
+            </div>
+            {m.description && (
+              <p className="text-sm text-muted-foreground mb-2">
+                {m.description}
+              </p>
+            )}
+            <div className="flex gap-4 text-xs text-muted-foreground">
+              <div className="flex items-center gap-1">
+                <Calendar className="h-3 w-3" />
+                <span>{format(new Date(m.startAt), "MMM d, HH:mm")}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                <span>
+                  {m.status === "scheduled"
+                    ? `Starts ${formatDistanceToNow(new Date(m.startAt), {
+                        addSuffix: true,
+                      })}`
+                    : `Ends ${formatDistanceToNow(new Date(m.endAt), {
+                        addSuffix: true,
+                      })}`}
+                </span>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,71 @@
+import {
+  createFrontendPlugin,
+  createSlotExtension,
+  rpcApiRef,
+  type ApiRef,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import { maintenanceApiRef, type MaintenanceApiClient } from "./api";
+import {
+  maintenanceRoutes,
+  MaintenanceApi,
+  pluginMetadata,
+  permissions,
+} from "@checkstack/maintenance-common";
+import {
+  SystemDetailsTopSlot,
+  SystemStateBadgesSlot,
+} from "@checkstack/catalog-common";
+import { MaintenanceConfigPage } from "./pages/MaintenanceConfigPage";
+import { SystemMaintenanceHistoryPage } from "./pages/SystemMaintenanceHistoryPage";
+import { MaintenanceDetailPage } from "./pages/MaintenanceDetailPage";
+import { SystemMaintenancePanel } from "./components/SystemMaintenancePanel";
+import { SystemMaintenanceBadge } from "./components/SystemMaintenanceBadge";
+import { MaintenanceMenuItems } from "./components/MaintenanceMenuItems";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: maintenanceRoutes.routes.config,
+      element: <MaintenanceConfigPage />,
+      title: "Maintenances",
+      permission: permissions.maintenanceManage,
+    },
+    {
+      route: maintenanceRoutes.routes.systemHistory,
+      element: <SystemMaintenanceHistoryPage />,
+      title: "System Maintenance History",
+    },
+    {
+      route: maintenanceRoutes.routes.detail,
+      element: <MaintenanceDetailPage />,
+      title: "Maintenance Details",
+    },
+  ],
+  apis: [
+    {
+      ref: maintenanceApiRef,
+      factory: (deps: {
+        get: <T>(ref: ApiRef<T>) => T;
+      }): MaintenanceApiClient => {
+        const rpcApi = deps.get(rpcApiRef);
+        return rpcApi.forPlugin(MaintenanceApi);
+      },
+    },
+  ],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "maintenance.user-menu.items",
+      component: MaintenanceMenuItems,
+    }),
+    createSlotExtension(SystemStateBadgesSlot, {
+      id: "maintenance.system-maintenance-badge",
+      component: SystemMaintenanceBadge,
+    }),
+    createSlotExtension(SystemDetailsTopSlot, {
+      id: "maintenance.system-details-top.panel",
+      component: SystemMaintenancePanel,
+    }),
+  ],
+});

package/src/pages/MaintenanceConfigPage.tsx

@@ -0,0 +1,347 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  useApi,
+  rpcApiRef,
+  permissionApiRef,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { maintenanceApiRef } from "../api";
+import type {
+  MaintenanceWithSystems,
+  MaintenanceStatus,
+} from "@checkstack/maintenance-common";
+import { CatalogApi, type System } from "@checkstack/catalog-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  LoadingSpinner,
+  EmptyState,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  useToast,
+  ConfirmationModal,
+  PageLayout,
+} from "@checkstack/ui";
+import {
+  Plus,
+  Wrench,
+  Calendar,
+  Trash2,
+  Edit2,
+  Clock,
+  CheckCircle2,
+} from "lucide-react";
+import { format } from "date-fns";
+import { MaintenanceEditor } from "../components/MaintenanceEditor";
+import { getMaintenanceStatusBadge } from "../utils/badges";
+
+const MaintenanceConfigPageContent: React.FC = () => {
+  const api = useApi(maintenanceApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const catalogApi = useMemo(() => rpcApi.forPlugin(CatalogApi), [rpcApi]);
+  const toast = useToast();
+
+  const { allowed: canManage, loading: permissionLoading } =
+    permissionApi.useResourcePermission("maintenance", "manage");
+
+  const [maintenances, setMaintenances] = useState<MaintenanceWithSystems[]>(
+    []
+  );
+  const [systems, setSystems] = useState<System[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState<MaintenanceStatus | "all">(
+    "all"
+  );
+
+  // Editor state
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingMaintenance, setEditingMaintenance] = useState<
+    MaintenanceWithSystems | undefined
+  >();
+
+  // Delete confirmation state
+  const [deleteId, setDeleteId] = useState<string | undefined>();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Complete confirmation state
+  const [completeId, setCompleteId] = useState<string | undefined>();
+  const [isCompleting, setIsCompleting] = useState(false);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [maintenanceList, systemList] = await Promise.all([
+        api.listMaintenances(
+          statusFilter === "all" ? undefined : { status: statusFilter }
+        ),
+        catalogApi.getSystems(),
+      ]);
+      setMaintenances(maintenanceList);
+      setSystems(systemList);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to load";
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [statusFilter]);
+
+  // Handle ?action=create URL parameter (from command palette)
+  useEffect(() => {
+    if (searchParams.get("action") === "create" && canManage) {
+      setEditingMaintenance(undefined);
+      setEditorOpen(true);
+      // Clear the URL param after opening
+      searchParams.delete("action");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams, canManage, setSearchParams]);
+
+  const handleCreate = () => {
+    setEditingMaintenance(undefined);
+    setEditorOpen(true);
+  };
+
+  const handleEdit = (m: MaintenanceWithSystems) => {
+    setEditingMaintenance(m);
+    setEditorOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+
+    setIsDeleting(true);
+    try {
+      await api.deleteMaintenance({ id: deleteId });
+      toast.success("Maintenance deleted");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to delete";
+      toast.error(message);
+    } finally {
+      setIsDeleting(false);
+      setDeleteId(undefined);
+    }
+  };
+
+  const handleComplete = async () => {
+    if (!completeId) return;
+
+    setIsCompleting(true);
+    try {
+      await api.closeMaintenance({ id: completeId });
+      toast.success("Maintenance completed");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to complete";
+      toast.error(message);
+    } finally {
+      setIsCompleting(false);
+      setCompleteId(undefined);
+    }
+  };
+
+  const handleSave = () => {
+    setEditorOpen(false);
+    loadData();
+  };
+
+  const getSystemNames = (systemIds: string[]): string => {
+    const names = systemIds
+      .map((id) => systems.find((s) => s.id === id)?.name ?? id)
+      .slice(0, 3);
+    if (systemIds.length > 3) {
+      names.push(`+${systemIds.length - 3} more`);
+    }
+    return names.join(", ");
+  };
+
+  const canComplete = (status: MaintenanceStatus) =>
+    status !== "completed" && status !== "cancelled";
+
+  return (
+    <PageLayout
+      title="Planned Maintenances"
+      subtitle="Manage scheduled maintenance windows for systems"
+      loading={permissionLoading}
+      allowed={canManage}
+      actions={
+        <Button onClick={handleCreate}>
+          <Plus className="h-4 w-4 mr-2" />
+          Create Maintenance
+        </Button>
+      }
+    >
+      <Card>
+        <CardHeader className="border-b border-border">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Wrench className="h-5 w-5 text-muted-foreground" />
+              <CardTitle>Maintenances</CardTitle>
+            </div>
+            <Select
+              value={statusFilter}
+              onValueChange={(v) =>
+                setStatusFilter(v as MaintenanceStatus | "all")
+              }
+            >
+              <SelectTrigger className="w-40">
+                <SelectValue placeholder="Filter by status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Statuses</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>
+        </CardHeader>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-12 flex justify-center">
+              <LoadingSpinner />
+            </div>
+          ) : maintenances.length === 0 ? (
+            <EmptyState
+              title="No maintenances found"
+              description="Create your first planned maintenance to get started."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Title</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Systems</TableHead>
+                  <TableHead>Schedule</TableHead>
+                  <TableHead className="w-32">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {maintenances.map((m) => (
+                  <TableRow key={m.id}>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{m.title}</p>
+                        {m.description && (
+                          <p className="text-sm text-muted-foreground truncate max-w-xs">
+                            {m.description}
+                          </p>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>{getMaintenanceStatusBadge(m.status)}</TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {getSystemNames(m.systemIds)}
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm space-y-1">
+                        <div className="flex items-center gap-1 text-muted-foreground">
+                          <Calendar className="h-3 w-3" />
+                          <span>
+                            {format(new Date(m.startAt), "MMM d, HH:mm")}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1 text-muted-foreground">
+                          <Clock className="h-3 w-3" />
+                          <span>
+                            {format(new Date(m.endAt), "MMM d, HH:mm")}
+                          </span>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEdit(m)}
+                        >
+                          <Edit2 className="h-4 w-4" />
+                        </Button>
+                        {canComplete(m.status) && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCompleteId(m.id)}
+                          >
+                            <CheckCircle2 className="h-4 w-4 text-success" />
+                          </Button>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setDeleteId(m.id)}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <MaintenanceEditor
+        open={editorOpen}
+        onOpenChange={setEditorOpen}
+        maintenance={editingMaintenance}
+        systems={systems}
+        onSave={handleSave}
+      />
+
+      <ConfirmationModal
+        isOpen={!!deleteId}
+        onClose={() => setDeleteId(undefined)}
+        title="Delete Maintenance"
+        message="Are you sure you want to delete this maintenance? This action cannot be undone."
+        confirmText="Delete"
+        variant="danger"
+        onConfirm={handleDelete}
+        isLoading={isDeleting}
+      />
+
+      <ConfirmationModal
+        isOpen={!!completeId}
+        onClose={() => setCompleteId(undefined)}
+        title="Complete Maintenance"
+        message="Are you sure you want to mark this maintenance as completed?"
+        confirmText="Complete"
+        variant="info"
+        onConfirm={handleComplete}
+        isLoading={isCompleting}
+      />
+    </PageLayout>
+  );
+};
+
+export const MaintenanceConfigPage = wrapInSuspense(
+  MaintenanceConfigPageContent
+);