vibecarbon 0.1.0

package/carbon/src/client/pages/admin/Notifications.tsx

@@ -0,0 +1,603 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle2,
+  Info,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+import { useState } from 'react';
+import { PageHeader } from '@/components/PageHeader';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { supabase } from '@/lib/supabase';
+import { ContentPanel } from '../../components/ContentPanel';
+
+type NotificationType = 'info' | 'warning' | 'error' | 'success';
+type NotificationVisibility = 'all' | 'authenticated' | 'public';
+
+type AdminNotification = {
+  id: string;
+  title: string;
+  message?: string;
+  type: NotificationType;
+  visibility: NotificationVisibility;
+  dismissible: boolean;
+  organizationId?: string;
+  startsAt?: string;
+  endsAt?: string;
+  actionLabel?: string;
+  actionUrl?: string;
+  isActive: boolean;
+  createdBy?: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+type NotificationFormData = {
+  title: string;
+  message: string;
+  type: NotificationType;
+  visibility: NotificationVisibility;
+  dismissible: boolean;
+  isActive: boolean;
+  actionLabel: string;
+  actionUrl: string;
+};
+
+const defaultFormData: NotificationFormData = {
+  title: '',
+  message: '',
+  type: 'info',
+  visibility: 'all',
+  dismissible: true,
+  isActive: true,
+  actionLabel: '',
+  actionUrl: '',
+};
+
+async function getAuthHeaders() {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+  return {
+    'Content-Type': 'application/json',
+    Authorization: session ? `Bearer ${session.access_token}` : '',
+  };
+}
+
+async function fetchAdminNotifications(): Promise<AdminNotification[]> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/admin/notifications', { headers });
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch notifications');
+  }
+
+  const data = await response.json();
+  return data.notifications;
+}
+
+async function createNotification(data: NotificationFormData): Promise<AdminNotification> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/v1/admin/notifications', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({
+      title: data.title,
+      message: data.message || undefined,
+      type: data.type,
+      visibility: data.visibility,
+      dismissible: data.dismissible,
+      isActive: data.isActive,
+      actionLabel: data.actionLabel || undefined,
+      actionUrl: data.actionUrl || undefined,
+    }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to create notification');
+  }
+
+  const result = await response.json();
+  return result.notification;
+}
+
+async function updateNotification(
+  id: string,
+  data: Partial<NotificationFormData>
+): Promise<AdminNotification> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/admin/notifications/${id}`, {
+    method: 'PATCH',
+    headers,
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to update notification');
+  }
+
+  const result = await response.json();
+  return result.notification;
+}
+
+async function deleteNotification(id: string): Promise<void> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/v1/admin/notifications/${id}`, {
+    method: 'DELETE',
+    headers,
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Failed to delete notification');
+  }
+}
+
+function getTypeIcon(type: NotificationType) {
+  switch (type) {
+    case 'error':
+      return <AlertCircle className="size-4 text-destructive" />;
+    case 'warning':
+      return <AlertTriangle className="size-4 text-warning" />;
+    case 'success':
+      return <CheckCircle2 className="size-4 text-success" />;
+    default:
+      return <Info className="size-4 text-info" />;
+  }
+}
+
+function getTypeBadgeVariant(type: NotificationType) {
+  switch (type) {
+    case 'error':
+      return 'destructive';
+    case 'warning':
+      return 'outline';
+    case 'success':
+      return 'default';
+    default:
+      return 'secondary';
+  }
+}
+
+export default function AdminNotifications() {
+  const queryClient = useQueryClient();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [editingNotification, setEditingNotification] = useState<AdminNotification | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<AdminNotification | null>(null);
+  const [formData, setFormData] = useState<NotificationFormData>(defaultFormData);
+
+  const {
+    data: notifications = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['admin-notifications'],
+    queryFn: fetchAdminNotifications,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: createNotification,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-notifications'] });
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+      setIsCreateOpen(false);
+      setFormData(defaultFormData);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<NotificationFormData> }) =>
+      updateNotification(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-notifications'] });
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+      setEditingNotification(null);
+      setFormData(defaultFormData);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteNotification,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-notifications'] });
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+      setDeleteConfirm(null);
+    },
+  });
+
+  const handleCreate = () => {
+    createMutation.mutate(formData);
+  };
+
+  const handleUpdate = () => {
+    if (!editingNotification) return;
+    updateMutation.mutate({ id: editingNotification.id, data: formData });
+  };
+
+  const handleEdit = (notification: AdminNotification) => {
+    setFormData({
+      title: notification.title,
+      message: notification.message || '',
+      type: notification.type,
+      visibility: notification.visibility,
+      dismissible: notification.dismissible,
+      isActive: notification.isActive,
+      actionLabel: notification.actionLabel || '',
+      actionUrl: notification.actionUrl || '',
+    });
+    setEditingNotification(notification);
+  };
+
+  const handleToggleActive = (notification: AdminNotification) => {
+    updateMutation.mutate({
+      id: notification.id,
+      data: { isActive: !notification.isActive },
+    });
+  };
+
+  const isFormOpen = isCreateOpen || !!editingNotification;
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <>
+      <PageHeader title="Notifications" description="System-wide notifications" />
+
+      <ContentPanel variant="full">
+        <Card>
+          <CardHeader>
+            <CardTitle>All Notifications</CardTitle>
+            <CardDescription>
+              Active notifications are shown to users. Inactive notifications are hidden.
+            </CardDescription>
+            <CardAction>
+              <Button onClick={() => setIsCreateOpen(true)}>
+                <Plus className="mr-2 size-4" />
+                Create Notification
+              </Button>
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="py-8 text-center text-destructive">
+                {error instanceof Error ? error.message : 'Failed to load notifications'}
+              </div>
+            ) : notifications.length === 0 ? (
+              <div className="py-8 text-center text-muted-foreground">
+                No notifications yet. Create one to get started.
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className="flex items-center justify-between rounded-lg border p-4"
+                  >
+                    <div className="flex items-start gap-3">
+                      {getTypeIcon(notification.type)}
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <p className="font-medium">{notification.title}</p>
+                          <Badge variant={getTypeBadgeVariant(notification.type)}>
+                            {notification.type}
+                          </Badge>
+                          {notification.visibility !== 'all' && (
+                            <Badge variant="outline">{notification.visibility}</Badge>
+                          )}
+                          {!notification.isActive && <Badge variant="outline">Inactive</Badge>}
+                        </div>
+                        {notification.message && (
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {notification.message}
+                          </p>
+                        )}
+                        <p className="text-xs text-muted-foreground mt-2">
+                          Created {new Date(notification.createdAt).toLocaleDateString()}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Switch
+                        checked={notification.isActive}
+                        onCheckedChange={() => handleToggleActive(notification)}
+                        disabled={updateMutation.isPending}
+                      />
+                      <DropdownMenu>
+                        <DropdownMenuTrigger render={<Button variant="ghost" size="icon-sm" />}>
+                          <MoreHorizontal className="size-4" />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => handleEdit(notification)}>
+                            <Pencil className="mr-2 size-4" />
+                            Edit
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={() => setDeleteConfirm(notification)}
+                          >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </ContentPanel>
+
+      {/* Create/Edit Dialog */}
+      <Dialog
+        open={isFormOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsCreateOpen(false);
+            setEditingNotification(null);
+            setFormData(defaultFormData);
+          }
+        }}
+      >
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              {editingNotification ? 'Edit Notification' : 'Create Notification'}
+            </DialogTitle>
+            <DialogDescription>
+              {editingNotification
+                ? 'Update the notification details below.'
+                : 'Create a new notification to display to all users.'}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-2">
+            <div className="grid gap-2">
+              <Label htmlFor="title">Title</Label>
+              <Input
+                id="title"
+                placeholder="Notification title"
+                value={formData.title}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                disabled={isPending}
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="message">Message (optional)</Label>
+              <Textarea
+                id="message"
+                placeholder="Additional details..."
+                value={formData.message}
+                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                disabled={isPending}
+                rows={3}
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="type">Type</Label>
+                <Select
+                  defaultValue="info"
+                  value={formData.type}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, type: value as NotificationType })
+                  }
+                  disabled={isPending}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="info">
+                      <span className="flex items-center gap-2">
+                        <Info className="size-4 text-info" />
+                        Info
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="success">
+                      <span className="flex items-center gap-2">
+                        <CheckCircle2 className="size-4 text-success" />
+                        Success
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="warning">
+                      <span className="flex items-center gap-2">
+                        <AlertTriangle className="size-4 text-warning" />
+                        Warning
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="error">
+                      <span className="flex items-center gap-2">
+                        <AlertCircle className="size-4 text-destructive" />
+                        Error
+                      </span>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="visibility">Visibility</Label>
+                <Select
+                  defaultValue="all"
+                  value={formData.visibility}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, visibility: value as NotificationVisibility })
+                  }
+                  disabled={isPending}
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All users</SelectItem>
+                    <SelectItem value="authenticated">Authenticated only</SelectItem>
+                    <SelectItem value="public">Public only</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid gap-2">
+              <Label>Options</Label>
+              <div className="flex gap-6">
+                <label
+                  htmlFor="notification-dismissible"
+                  className="flex items-center gap-2 text-sm"
+                >
+                  <Switch
+                    id="notification-dismissible"
+                    checked={formData.dismissible}
+                    onCheckedChange={(checked) =>
+                      setFormData({ ...formData, dismissible: checked })
+                    }
+                    disabled={isPending}
+                  />
+                  Dismissible
+                </label>
+                <label htmlFor="notification-active" className="flex items-center gap-2 text-sm">
+                  <Switch
+                    id="notification-active"
+                    checked={formData.isActive}
+                    onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
+                    disabled={isPending}
+                  />
+                  Active
+                </label>
+              </div>
+            </div>
+            <div className="grid gap-2">
+              <Label>Action Button (optional)</Label>
+              <div className="grid grid-cols-2 gap-2">
+                <Input
+                  placeholder="Button label"
+                  value={formData.actionLabel}
+                  onChange={(e) => setFormData({ ...formData, actionLabel: e.target.value })}
+                  disabled={isPending}
+                />
+                <Input
+                  placeholder="URL"
+                  value={formData.actionUrl}
+                  onChange={(e) => setFormData({ ...formData, actionUrl: e.target.value })}
+                  disabled={isPending}
+                />
+              </div>
+            </div>
+            {(createMutation.error || updateMutation.error) && (
+              <p className="text-sm text-destructive">
+                {createMutation.error instanceof Error
+                  ? createMutation.error.message
+                  : updateMutation.error instanceof Error
+                    ? updateMutation.error.message
+                    : 'An error occurred'}
+              </p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsCreateOpen(false);
+                setEditingNotification(null);
+                setFormData(defaultFormData);
+              }}
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={editingNotification ? handleUpdate : handleCreate}
+              disabled={!formData.title.trim() || isPending}
+            >
+              {isPending
+                ? 'Saving...'
+                : editingNotification
+                  ? 'Save Changes'
+                  : 'Create Notification'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Notification</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{deleteConfirm?.title}"? This action cannot be
+              undone.
+            </DialogDescription>
+          </DialogHeader>
+          {deleteMutation.error && (
+            <p className="text-sm text-destructive">
+              {deleteMutation.error instanceof Error
+                ? deleteMutation.error.message
+                : 'Failed to delete notification'}
+            </p>
+          )}
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteConfirm(null)}
+              disabled={deleteMutation.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => deleteConfirm && deleteMutation.mutate(deleteConfirm.id)}
+              disabled={deleteMutation.isPending}
+            >
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}