homeio

1"use client";
2
3import { SectionDivider, Toggle } from "@/modules/settings/components/panel/controls";
4import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
5import type { NotificationSettingsDraft } from "@/modules/settings/components/panel/types";
6import { cn } from "@/lib/utils";
7
8type NotificationsSectionProps = {
9  draft: NotificationSettingsDraft;
10  onChange: (patch: Partial<NotificationSettingsDraft>) => void;
11};
12
13function ThresholdRow({
14  label,
15  description,
16  value,
17  unit,
18  onChange,
19}: {
20  label: string;
21  description?: string;
22  value: string;
23  unit: string;
24  onChange: (v: string) => void;
25}) {
26  return (
27    <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
28      <div className="min-w-0">
29        <div className="text-sm text-foreground">{label}</div>
30        {description && (
31          <div className="mt-0.5 text-[11px] text-muted-foreground/70">{description}</div>
32        )}
33      </div>
34      <div className="flex shrink-0 items-center gap-1.5">
35        <input
36          value={value}
37          onChange={(e) => onChange(e.target.value)}
38          type="number"
39          min={1}
40          className="h-8 w-20 rounded-lg border border-glass-border bg-background/55 px-3 text-right text-xs text-foreground focus:border-primary/40 focus:outline-none"
41        />
42        <span className="w-6 text-[11px] text-muted-foreground/60">{unit}</span>
43      </div>
44    </div>
45  );
46}
47
48export function NotificationsSection({ draft, onChange }: NotificationsSectionProps) {
49  return (
50    <div className="flex flex-col gap-1">
51      <SectionDivider title="Alert Types" />
52      <div className="flex flex-col gap-1.5">
53        {[
54          {
55            label: "System alerts",
56            description: "CPU overload, high temperature, low disk space",
57            key: "systemAlertsEnabled" as const,
58          },
59          {
60            label: "Update notifications",
61            description: "Homeio update availability in the desktop alert center",
62            key: "updateNotificationsEnabled" as const,
63          },
64          {
65            label: "Backup reports",
66            description: "Backup success and failure notifications",
67            key: "backupReportsEnabled" as const,
68          },
69        ].map(({ label, description, key }) => (
70          <div key={key} className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
71            <Toggle
72              label={label}
73              description={description}
74              enabled={draft[key]}
75              onToggle={() => onChange({ [key]: !draft[key] })}
76            />
77          </div>
78        ))}
79
80        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
81          <Toggle
82            label="Security events"
83            description="Failed logins, firewall blocks, certificate expiry"
84            enabled={draft.securityEventsEnabled}
85            onToggle={() => undefined}
86            disabled
87            disabledReason="Coming soon"
88          />
89        </div>
90      </div>
91
92      <SectionDivider title="Thresholds" />
93      <div className="flex flex-col gap-1.5">
94        <ThresholdRow
95          label="CPU usage"
96          description="Alert when CPU exceeds this level"
97          value={draft.cpuAlertThresholdPercent}
98          unit="%"
99          onChange={(v) => onChange({ cpuAlertThresholdPercent: v })}
100        />
101        <ThresholdRow
102          label="Memory usage"
103          description="Alert when RAM exceeds this level"
104          value={draft.memoryAlertThresholdPercent}
105          unit="%"
106          onChange={(v) => onChange({ memoryAlertThresholdPercent: v })}
107        />
108        <ThresholdRow
109          label="Disk space"
110          description="Alert when disk usage exceeds this level"
111          value={draft.diskAlertThresholdPercent}
112          unit="%"
113          onChange={(v) => onChange({ diskAlertThresholdPercent: v })}
114        />
115        <ThresholdRow
116          label="Temperature"
117          description="Alert when CPU temperature exceeds this level"
118          value={draft.temperatureAlertThresholdCelsius}
119          unit="°C"
120          onChange={(v) => onChange({ temperatureAlertThresholdCelsius: v })}
121        />
122      </div>
123    </div>
124  );
125}
126