ui: add protected dashboard CRUD screens and assignment docs

packages/ui/src/components/status-badge.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@minmon/ui/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const statusBadgeVariants = cva(
+  "inline-flex items-center gap-1 border px-2 py-0.5 text-[11px] font-medium uppercase tracking-[0.16em]",
+  {
+    variants: {
+      variant: {
+        neutral: "border-border bg-muted/40 text-muted-foreground",
+        success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+        warning: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400",
+        destructive: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-400",
+        info: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-400",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  },
+);
+
+function StatusBadge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof statusBadgeVariants>) {
+  return <span className={cn(statusBadgeVariants({ variant }), className)} {...props} />;
+}
+
+export { StatusBadge, statusBadgeVariants };

packages/ui/src/components/table.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@minmon/ui/lib/utils";
+import * as React from "react";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return <table className={cn("w-full caption-bottom text-xs", className)} {...props} />;
+}
+
+function TableWrapper({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("overflow-x-auto border", className)} {...props} />;
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead className={cn("bg-muted/40", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return <tr className={cn("border-b transition-colors hover:bg-muted/30", className)} {...props} />;
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      className={cn(
+        "h-10 px-3 text-left align-middle text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return <td className={cn("px-3 py-2.5 align-middle", className)} {...props} />;
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return <caption className={cn("mt-3 text-xs text-muted-foreground", className)} {...props} />;
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableWrapper,
+};

packages/ui/src/components/textarea.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@minmon/ui/lib/utils";
+import * as React from "react";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "min-h-24 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 dark:bg-input/30",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };