vibecarbon 0.1.0

package/carbon/src/client/pages/UIComponents.tsx

@@ -0,0 +1,390 @@
+import { Minus, MoreVertical, Plus } from 'lucide-react';
+import { useState } from 'react';
+import { ContentPanel } from '../components/ContentPanel';
+import { PageHeader } from '../components/PageHeader';
+import { Badge } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import { ButtonGroup } from '../components/ui/button-group';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/card';
+import { Checkbox } from '../components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select';
+import { Separator } from '../components/ui/separator';
+import { Slider } from '../components/ui/slider';
+import { Switch } from '../components/ui/switch';
+import { Textarea } from '../components/ui/textarea';
+
+export default function UIComponents() {
+  const [gpuCount, setGpuCount] = useState(8);
+  const [priceRange, setPriceRange] = useState([200, 800]);
+
+  return (
+    <>
+      <PageHeader title="UI Components" />
+
+      <ContentPanel variant="full">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {/* Card Example */}
+          <div className="flex flex-col gap-1">
+            <p className="text-sm text-muted-foreground px-1.5 py-2">Card</p>
+            <Card className="relative flex-1 pt-0">
+              {/* Color overlay */}
+              <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+              {/* Image */}
+              <img
+                alt="Abstract green texture"
+                className="relative z-20 aspect-video w-full object-cover brightness-[0.6] grayscale"
+                src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=800&auto=format&fit=crop"
+              />
+              <CardHeader>
+                <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
+                <CardDescription>
+                  Switch to the improved way to explore your data, with natural language. Monitoring
+                  will no longer be available on the Pro plan in November, 2025
+                </CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button>
+                  Create Query <Plus data-icon="inline-end" />
+                </Button>
+                <Badge variant="secondary" className="ml-auto">
+                  Warning
+                </Badge>
+              </CardFooter>
+            </Card>
+          </div>
+
+          {/* Form Example */}
+          <div className="flex flex-col gap-1">
+            <p className="text-sm text-muted-foreground px-1.5 py-2">Form</p>
+            <Card className="flex-1">
+              <CardHeader>
+                <CardTitle>User Information</CardTitle>
+                <CardDescription>Please fill in your details below</CardDescription>
+                <CardAction>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
+                      <MoreVertical />
+                      <span className="sr-only">More options</span>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem>Edit</DropdownMenuItem>
+                      <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                      <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </CardAction>
+              </CardHeader>
+              <CardContent>
+                <form className="flex flex-col gap-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="name">Name</Label>
+                      <Input id="name" placeholder="Enter your name" required />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="role">Role</Label>
+                      <Select>
+                        <SelectTrigger id="role" className="w-full">
+                          <SelectValue placeholder="Select a role" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="admin">Admin</SelectItem>
+                          <SelectItem value="member">Member</SelectItem>
+                          <SelectItem value="viewer">Viewer</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <Label htmlFor="framework">Framework</Label>
+                    <Select>
+                      <SelectTrigger id="framework" className="w-full">
+                        <SelectValue placeholder="Select a framework" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="react">React</SelectItem>
+                        <SelectItem value="vue">Vue</SelectItem>
+                        <SelectItem value="svelte">Svelte</SelectItem>
+                        <SelectItem value="angular">Angular</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <Label htmlFor="comments">Comments</Label>
+                    <Textarea id="comments" placeholder="Add any additional comments" />
+                  </div>
+                  <div className="flex gap-2">
+                    <Button type="submit">Submit</Button>
+                    <Button type="button" variant="outline">
+                      Cancel
+                    </Button>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Fields Example */}
+          <div className="flex flex-col gap-1">
+            <p className="text-sm text-muted-foreground px-1.5 py-2">Fields</p>
+            <div className="flex min-w-0 flex-1 items-start rounded-[var(--radius-card)] border border-dashed p-4 sm:p-6">
+              <fieldset className="flex w-full max-w-md flex-col gap-4">
+                {/* Radio Group Section */}
+                <div className="flex flex-col gap-2">
+                  <legend className="text-base font-medium">Compute Environment</legend>
+                  <p className="text-sm text-muted-foreground">
+                    Select the compute environment for your cluster.
+                  </p>
+                  <RadioGroup defaultValue="kubernetes" className="mt-2 gap-3">
+                    <label
+                      htmlFor="kubernetes"
+                      className="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-input p-4 has-[[data-checked]]:border-ring has-[[data-checked]]:bg-accent"
+                    >
+                      <div className="flex flex-col gap-1">
+                        <span className="font-medium">Kubernetes</span>
+                        <p className="text-sm text-muted-foreground">
+                          Run GPU workloads on a K8s configured cluster. This is the default.
+                        </p>
+                      </div>
+                      <RadioGroupItem value="kubernetes" id="kubernetes" />
+                    </label>
+                    <label
+                      htmlFor="vm"
+                      className="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-input p-4 has-[[data-checked]]:border-ring has-[[data-checked]]:bg-accent"
+                    >
+                      <div className="flex flex-col gap-1">
+                        <span className="font-medium">Virtual Machine</span>
+                        <p className="text-sm text-muted-foreground">
+                          Access a VM configured cluster to run workloads. (Coming soon)
+                        </p>
+                      </div>
+                      <RadioGroupItem value="vm" id="vm" />
+                    </label>
+                  </RadioGroup>
+                </div>
+
+                <Separator />
+
+                {/* Number Input with Button Group */}
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex flex-col gap-1">
+                    <Label htmlFor="gpu-count">Number of GPUs</Label>
+                    <p className="text-sm text-muted-foreground">You can add more later.</p>
+                  </div>
+                  <ButtonGroup>
+                    <Input
+                      id="gpu-count"
+                      type="text"
+                      value={gpuCount}
+                      onChange={(e) => setGpuCount(Number(e.target.value) || 0)}
+                      className="w-14 text-center"
+                      maxLength={3}
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => setGpuCount(Math.max(0, gpuCount - 1))}
+                      aria-label="Decrement"
+                    >
+                      <Minus />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => setGpuCount(gpuCount + 1)}
+                      aria-label="Increment"
+                    >
+                      <Plus />
+                    </Button>
+                  </ButtonGroup>
+                </div>
+
+                <Separator />
+
+                {/* Switch */}
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex flex-col gap-1">
+                    <Label htmlFor="tinting">Wallpaper Tinting</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Allow the wallpaper to be tinted.
+                    </p>
+                  </div>
+                  <Switch id="tinting" defaultChecked />
+                </div>
+
+                <Separator />
+
+                {/* Checkbox */}
+                <label
+                  htmlFor="terms"
+                  className="flex cursor-pointer items-center gap-3 rounded-xl border border-input p-4 has-[[data-checked]]:border-ring has-[[data-checked]]:bg-accent"
+                >
+                  <Checkbox id="terms" defaultChecked />
+                  <span className="font-normal">I agree to the terms and conditions</span>
+                </label>
+
+                {/* Slider */}
+                <div className="flex flex-col gap-2">
+                  <Label>Price Range</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Set your budget range ($
+                    <span className="font-medium tabular-nums">{priceRange[0]}</span> -{' '}
+                    <span className="font-medium tabular-nums">{priceRange[1]}</span>).
+                  </p>
+                  <Slider
+                    value={priceRange}
+                    onValueChange={(value) => {
+                      if (Array.isArray(value)) {
+                        setPriceRange(value as number[]);
+                      }
+                    }}
+                    min={0}
+                    max={1000}
+                    step={10}
+                    className="mt-2"
+                  />
+                </div>
+
+                {/* Buttons */}
+                <div className="flex gap-2 pt-2">
+                  <Button type="submit">Submit</Button>
+                  <Button type="button" variant="outline">
+                    Cancel
+                  </Button>
+                </div>
+              </fieldset>
+            </div>
+          </div>
+
+          {/* Complex Form Example */}
+          <div className="flex flex-col gap-1">
+            <p className="text-sm text-muted-foreground px-1.5 py-2">Complex Form</p>
+            <Card className="flex-1">
+              <CardHeader>
+                <CardTitle>Payment Method</CardTitle>
+                <CardDescription>All transactions are secure and encrypted</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form className="flex flex-col gap-4">
+                  {/* Card Details */}
+                  <div className="flex flex-col gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="card-name">Name on Card</Label>
+                      <Input id="card-name" placeholder="John Doe" required />
+                    </div>
+                    <div className="grid grid-cols-3 gap-4">
+                      <div className="col-span-2 flex flex-col gap-2">
+                        <Label htmlFor="card-number">Card Number</Label>
+                        <Input id="card-number" placeholder="1234 5678 9012 3456" required />
+                        <p className="text-sm text-muted-foreground">Enter your 16-digit number.</p>
+                      </div>
+                      <div className="col-span-1 flex flex-col gap-2">
+                        <Label htmlFor="cvv">CVV</Label>
+                        <Input id="cvv" placeholder="123" required />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="flex flex-col gap-2">
+                        <Label htmlFor="exp-month">Month</Label>
+                        <Select>
+                          <SelectTrigger id="exp-month" className="w-full">
+                            <SelectValue placeholder="MM" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {Array.from({ length: 12 }, (_, i) => {
+                              const month = String(i + 1).padStart(2, '0');
+                              return (
+                                <SelectItem key={month} value={month}>
+                                  {month}
+                                </SelectItem>
+                              );
+                            })}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex flex-col gap-2">
+                        <Label htmlFor="exp-year">Year</Label>
+                        <Select>
+                          <SelectTrigger id="exp-year" className="w-full">
+                            <SelectValue placeholder="YYYY" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {Array.from({ length: 10 }, (_, i) => {
+                              const year = String(2024 + i);
+                              return (
+                                <SelectItem key={year} value={year}>
+                                  {year}
+                                </SelectItem>
+                              );
+                            })}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Separator />
+
+                  {/* Billing Address */}
+                  <fieldset className="flex flex-col gap-2">
+                    <legend className="text-base font-medium">Billing Address</legend>
+                    <p className="text-sm text-muted-foreground">
+                      The billing address associated with your payment.
+                    </p>
+                    <div className="flex items-center gap-3 mt-2">
+                      <Checkbox id="same-as-shipping" defaultChecked />
+                      <Label htmlFor="same-as-shipping" className="font-normal">
+                        Same as shipping address
+                      </Label>
+                    </div>
+                  </fieldset>
+
+                  <Separator />
+
+                  {/* Comments */}
+                  <div className="flex flex-col gap-2">
+                    <Label htmlFor="payment-comments">Comments</Label>
+                    <Textarea id="payment-comments" placeholder="Add any additional comments" />
+                  </div>
+
+                  {/* Buttons */}
+                  <div className="flex gap-2">
+                    <Button type="submit">Submit</Button>
+                    <Button type="button" variant="outline">
+                      Cancel
+                    </Button>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </ContentPanel>
+    </>
+  );
+}

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

@@ -0,0 +1,220 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Archive, Eye, Loader2, Mail, MessageSquare, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { PageHeader } from '@/components/PageHeader';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { getAuthHeaders } from '@/lib/api';
+import { ContentPanel } from '../../components/ContentPanel';
+
+interface ContactSubmission {
+  id: string;
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  status: string;
+  created_at: string;
+}
+
+const queryKey = ['admin', 'contact-submissions'];
+
+function StatusBadge({ status }: { status: string }) {
+  const variants: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
+    unread: 'default',
+    read: 'secondary',
+    replied: 'outline',
+    archived: 'outline',
+  };
+  return <Badge variant={variants[status] || 'outline'}>{status}</Badge>;
+}
+
+export default function AdminContactSubmissions() {
+  const queryClient = useQueryClient();
+  const [selectedSubmission, setSelectedSubmission] = useState<ContactSubmission | null>(null);
+
+  const { data, isLoading } = useQuery<{
+    submissions: ContactSubmission[];
+    total: number;
+  }>({
+    queryKey,
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/admin/contact?limit=50', { headers });
+      if (!response.ok) throw new Error('Failed to fetch submissions');
+      return response.json();
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async ({ id, status }: { id: string; status: string }) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch(`/api/v1/admin/contact/${id}`, {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({ status }),
+      });
+      if (!response.ok) throw new Error('Failed to update');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch(`/api/v1/admin/contact/${id}`, {
+        method: 'DELETE',
+        headers,
+      });
+      if (!response.ok) throw new Error('Failed to delete');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+      setSelectedSubmission(null);
+      toast.success('Submission deleted');
+    },
+  });
+
+  const submissions = data?.submissions ?? [];
+
+  return (
+    <>
+      <PageHeader
+        title="Contact Submissions"
+        description={`${data?.total ?? 0} total submissions`}
+      />
+
+      <ContentPanel variant="default">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <MessageSquare className="size-5" />
+              Submissions
+            </CardTitle>
+            <CardDescription>Contact form submissions from your website</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : submissions.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-8">
+                No contact submissions yet.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {submissions.map((submission) => (
+                  <div
+                    key={submission.id}
+                    className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted/50 transition-colors cursor-pointer"
+                    onClick={() => {
+                      setSelectedSubmission(submission);
+                      if (submission.status === 'unread') {
+                        updateMutation.mutate({ id: submission.id, status: 'read' });
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') setSelectedSubmission(submission);
+                    }}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <div className="space-y-1 min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span
+                          className={`font-medium text-sm ${submission.status === 'unread' ? 'text-foreground' : 'text-muted-foreground'}`}
+                        >
+                          {submission.subject}
+                        </span>
+                        <StatusBadge status={submission.status} />
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {submission.name} ({submission.email}) &middot;{' '}
+                        {new Date(submission.created_at).toLocaleDateString()}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 ml-2">
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          updateMutation.mutate({ id: submission.id, status: 'archived' });
+                        }}
+                      >
+                        <Archive className="size-3.5" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deleteMutation.mutate(submission.id);
+                        }}
+                      >
+                        <Trash2 className="size-3.5" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </ContentPanel>
+
+      {/* Submission detail dialog */}
+      <Dialog open={!!selectedSubmission} onOpenChange={() => setSelectedSubmission(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{selectedSubmission?.subject}</DialogTitle>
+            <DialogDescription>
+              From {selectedSubmission?.name} ({selectedSubmission?.email}) &middot;{' '}
+              {selectedSubmission && new Date(selectedSubmission.created_at).toLocaleString()}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <p className="text-sm whitespace-pre-wrap">{selectedSubmission?.message}</p>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" asChild>
+                <a
+                  href={`mailto:${selectedSubmission?.email}?subject=Re: ${selectedSubmission?.subject}`}
+                >
+                  <Mail className="size-3.5 mr-1" />
+                  Reply via Email
+                </a>
+              </Button>
+              {selectedSubmission?.status !== 'replied' && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    if (selectedSubmission) {
+                      updateMutation.mutate({ id: selectedSubmission.id, status: 'replied' });
+                      setSelectedSubmission({ ...selectedSubmission, status: 'replied' });
+                    }
+                  }}
+                >
+                  <Eye className="size-3.5 mr-1" />
+                  Mark as Replied
+                </Button>
+              )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { PerformanceMetrics } from '@/components/admin/PerformanceMetrics';
+import { ServicesStatus } from '@/components/admin/ServicesStatus';
+import { PageHeader } from '@/components/PageHeader';
+import { ContentPanel } from '../../components/ContentPanel';
+
+export default function AdminDashboard() {
+  return (
+    <>
+      <PageHeader title="Overview" description="Infrastructure and service status" />
+
+      <ContentPanel variant="full">
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Left Column - Service Status */}
+          <div>
+            <ServicesStatus />
+          </div>
+
+          {/* Right Column - Performance Metrics */}
+          <PerformanceMetrics />
+        </div>
+      </ContentPanel>
+    </>
+  );
+}