@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/management/job-management.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import type { Job, JobLog } from "../../system/job-manager";
+import { jobManager } from "../../system/job-manager";
+// Ideally we would import components from @goerp/core/ui/primitives but we are inside core
+// So we mock or use basic HTML/Tailwind for now to avoid circular deps if structure is complex
+// In a real app we'd use the proper UI components.
+// Assuming this page is used inside an app that provides the context or we use relative imports carefully.
+
+// Relative imports to core UI components
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { Card, CardHeader, CardTitle, CardContent } from "../primitives/card";
+import { ScrollArea } from "../primitives/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../primitives/table";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "../primitives/dialog";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+
+export const JobManagementPage = () => {
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [selectedJob, setSelectedJob] = useState<string | null>(null);
+  const [logs, setLogs] = useState<JobLog[]>([]);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [editingJob, setEditingJob] = useState<Job | null>(null);
+  const [editForm, setEditForm] = useState({ schedule: "", description: "" });
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  // Initial load and periodic refresh
+  useEffect(() => {
+    setJobs(jobManager.getJobs());
+    const interval = setInterval(() => {
+      setJobs(jobManager.getJobs());
+      if (selectedJob) {
+        // Refresh logs if a job is selected
+        setLogs(jobManager.getLogs(selectedJob));
+      }
+    }, 1000); // 1s refresh for demo niceness
+    return () => clearInterval(interval);
+  }, [refreshTrigger, selectedJob]);
+
+  useEffect(() => {
+    if (selectedJob) {
+      setLogs(jobManager.getLogs(selectedJob));
+    } else {
+      setLogs([]);
+    }
+  }, [selectedJob]);
+
+  const handleStart = (id: string) => {
+    jobManager.startJob(id);
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  const handleStop = (id: string) => {
+    jobManager.stopJob(id);
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  const handleEditClick = (job: Job, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingJob(job);
+    setEditForm({
+      schedule: job.schedule || "",
+      description: job.description || "",
+    });
+    setIsDialogOpen(true);
+  };
+
+  const handleSaveEdit = () => {
+    if (editingJob) {
+      jobManager.updateJob(editingJob.id, editForm);
+      setRefreshTrigger((prev) => prev + 1);
+      setIsDialogOpen(false);
+      setEditingJob(null);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "running":
+        return (
+          <Badge
+            variant="default"
+            className="bg-emerald-500 hover:bg-emerald-600"
+          >
+            Running
+          </Badge>
+        );
+      case "stopped":
+        return <Badge variant="secondary">Stopped</Badge>;
+      case "failed":
+        return <Badge variant="destructive">Failed</Badge>;
+      default:
+        return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const [logSearchTerm, setLogSearchTerm] = useState("");
+
+  const filteredLogs = logs.filter(
+    (log) =>
+      log.message.toLowerCase().includes(logSearchTerm.toLowerCase()) ||
+      log.level.toLowerCase().includes(logSearchTerm.toLowerCase()),
+  );
+
+  return (
+    <div className="p-6 space-y-6 h-full flex flex-col">
+      <div className="flex justify-between items-center mb-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Job Management</h1>
+          <p className="text-muted-foreground text-sm">
+            Monitor and control system background jobs.
+          </p>
+        </div>
+        <Button
+          onClick={() => setRefreshTrigger((prev) => prev + 1)}
+          variant="outline"
+        >
+          Refresh
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 flex-1 min-h-0">
+        {/* Job List */}
+        <Card className="md:col-span-2 flex flex-col min-h-0">
+          <CardHeader>
+            <CardTitle>Active Jobs</CardTitle>
+          </CardHeader>
+          <CardContent className="flex-1 overflow-auto p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Job Name</TableHead>
+                  <TableHead>Schedule</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Last Run</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {jobs.map((job) => (
+                  <TableRow
+                    key={job.id}
+                    className={`cursor-pointer ${selectedJob === job.id ? "bg-muted/50" : ""}`}
+                    onClick={() => setSelectedJob(job.id)}
+                  >
+                    <TableCell>
+                      <div className="font-medium">{job.name}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {job.description}
+                      </div>
+                    </TableCell>
+                    <TableCell>{job.schedule}</TableCell>
+                    <TableCell>{getStatusBadge(job.status)}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {job.lastRun ? job.lastRun.toLocaleTimeString() : "-"}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div
+                        className="flex justify-end gap-2"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={(e) => handleEditClick(job, e)}
+                        >
+                          Edit
+                        </Button>
+                        {job.status === "running" ? (
+                          <Button
+                            size="sm"
+                            variant="destructive"
+                            onClick={() => handleStop(job.id)}
+                          >
+                            Stop
+                          </Button>
+                        ) : (
+                          <Button size="sm" onClick={() => handleStart(job.id)}>
+                            Start
+                          </Button>
+                        )}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        {/* Edit Dialog */}
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Edit Job: {editingJob?.name}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label htmlFor="schedule">Schedule</Label>
+                <Input
+                  id="schedule"
+                  value={editForm.schedule}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, schedule: e.target.value })
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Input
+                  id="description"
+                  value={editForm.description}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, description: e.target.value })
+                  }
+                />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleSaveEdit}>Save Changes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Log Viewer */}
+        <Card className="flex flex-col min-h-0 h-full">
+          <CardHeader className="pb-3 border-b flex flex-row items-center justify-between space-y-0">
+            <CardTitle>
+              {selectedJob
+                ? `Logs: ${jobs.find((j) => j.id === selectedJob)?.name}`
+                : "Job Logs"}
+            </CardTitle>
+          </CardHeader>
+          <div className="p-2 border-b">
+            <input
+              type="text"
+              placeholder="Search logs..."
+              className="w-full px-3 py-2 text-sm border rounded-md bg-background"
+              value={logSearchTerm}
+              onChange={(e) => setLogSearchTerm(e.target.value)}
+            />
+          </div>
+          <CardContent className="flex-1 p-0 min-h-0 bg-slate-50 dark:bg-slate-900/50">
+            <ScrollArea className="h-[600px] w-full p-4">
+              {!selectedJob && (
+                <div className="text-center text-muted-foreground py-10">
+                  Select a job to view its logs
+                </div>
+              )}
+              {selectedJob && filteredLogs.length === 0 && (
+                <div className="text-center text-muted-foreground py-10">
+                  {logs.length === 0
+                    ? "No logs available"
+                    : "No logs match your search"}
+                </div>
+              )}
+              <div className="space-y-2 font-mono text-xs">
+                {filteredLogs.map((log) => (
+                  <div
+                    key={log.id}
+                    className="flex gap-2 border-b border-border/50 pb-1 last:border-0"
+                  >
+                    <span className="text-muted-foreground whitespace-nowrap">
+                      {log.timestamp.toLocaleTimeString()}
+                    </span>
+                    <span
+                      className={`font-semibold uppercase w-16 ${
+                        log.level === "error"
+                          ? "text-red-500"
+                          : log.level === "warning"
+                            ? "text-yellow-500"
+                            : "text-blue-500"
+                      }`}
+                    >
+                      [{log.level}]
+                    </span>
+                    <span className="break-all">{log.message}</span>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};

package/src/ui/pages/not-found.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "../primitives/button";
+
+export function NotFoundPage() {
+  return (
+    <div className="min-h-screen w-full flex flex-col items-center justify-center gap-y-6 text-center text-foreground bg-background p-4">
+      <div className="flex flex-col-reverse justify-center items-center gap-y-6 md:flex-row md:text-start">
+        <Image
+          src="/images/illustrations/characters/character-02.svg"
+          alt=""
+          height={232}
+          width={249}
+          priority
+        />
+
+        <h1 className="inline-grid text-6xl font-black">
+          404 <span className="text-3xl font-semibold">Page Not Found</span>
+        </h1>
+      </div>
+      <p className="max-w-prose text-xl text-muted-foreground">
+        We couldn&apos;t find the page you&apos;re looking for. It might have
+        been moved or doesn&apos;t exist.
+      </p>
+      <Button size="lg" asChild>
+        <Link href="/">Home Page</Link>
+      </Button>
+    </div>
+  );
+}

package/src/ui/primitives/badge.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
+
+/**
+ * Badge Variants — Enhanced with Plane-inspired semantic tokens
+ *
+ * New variants:
+ * - danger: Red subtle background for errors/alerts
+ * - info: Blue subtle background for informational
+ * - accent: Brand color subtle background
+ *
+ * Updated variants:
+ * - success: Now uses semantic token (was hardcoded bg-green-500)
+ * - warning: Now uses semantic token (was hardcoded bg-yellow-500)
+ */
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        // Existing variants (backwards-compatible)
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+
+        // Enhanced semantic variants (using Design Tokens)
+        success:
+          "border-transparent bg-success-subtle text-success-text",
+        warning:
+          "border-transparent bg-warning-subtle text-warning-text",
+        danger:
+          "border-transparent bg-danger-subtle text-danger-text",
+        info:
+          "border-transparent bg-info-subtle text-info-text",
+        accent:
+          "border-transparent bg-accent-primary-subtle text-accent-primary",
+      },
+      size: {
+        default: "",
+        sm: "px-1.5 py-0 text-[10px]",
+        lg: "px-3 py-1 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
+

package/src/ui/primitives/breadcrumb.tsx

@@ -0,0 +1,103 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, Ellipsis } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+export function Breadcrumb({ ...props }: ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+export function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+export function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function BreadcrumbPage({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+export function BreadcrumbEllipsis({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      aria-label="More"
+      className={cn("flex h-9 w-9 items-center justify-center", className)}
+      {...props}
+    >
+      <Ellipsis className="h-4 w-4" />
+    </span>
+  );
+}

package/src/ui/primitives/button.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "../../utils";
+
+/**
+ * Button Variants — Enhanced with Plane-inspired semantic tokens
+ *
+ * New variants:
+ * - accent: Brand CTA button (indigo)
+ * - danger: Destructive action (red, solid)
+ * - danger-outline: Destructive action (red, outlined)
+ * - success: Positive action (green)
+ *
+ * New sizes:
+ * - xs: Ultra-compact for ERP table actions
+ * - compact: Compact for toolbars
+ */
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        // Existing variants (backwards-compatible)
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+
+        // New Plane-inspired variants using semantic tokens
+        accent:
+          "bg-accent-primary text-text-on-color hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-text-disabled",
+        danger:
+          "bg-danger text-text-on-color hover:bg-danger-hover active:bg-danger-hover disabled:bg-layer-disabled disabled:text-text-disabled",
+        "danger-outline":
+          "border border-danger bg-layer-2 text-danger-text hover:bg-danger-subtle active:bg-danger-subtle disabled:border-border-subtle disabled:bg-layer-2 disabled:text-text-disabled",
+        success:
+          "bg-success-semantic text-text-on-color hover:bg-success-semantic/90 active:bg-success-semantic/80 disabled:bg-layer-disabled disabled:text-text-disabled",
+        tertiary:
+          "bg-layer-3 text-text-secondary hover:bg-layer-3-hover active:bg-layer-3-hover disabled:bg-transparent disabled:text-text-disabled",
+      },
+      size: {
+        // Existing sizes (backwards-compatible)
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+
+        // New ERP-specific compact sizes
+        xs: "h-7 rounded-sm px-2 text-xs",
+        compact: "h-8 rounded-md px-3 text-xs",
+        "icon-sm": "h-8 w-8",
+        "icon-xs": "h-7 w-7",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  prependIcon?: React.ReactElement;
+  appendIcon?: React.ReactElement;
+}
+
+import { Slot } from "@radix-ui/react-slot";
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, loading = false, prependIcon, appendIcon, children, disabled, ...props }, ref) => {
+    if (asChild) {
+      return (
+        <Slot
+          className={cn(buttonVariants({ variant, size }), className)}
+          ref={ref}
+          {...({ disabled: disabled || loading } as any)}
+          {...props}
+        >
+          {React.isValidElement(children) && (prependIcon || appendIcon) ? (
+            React.cloneElement(children as React.ReactElement, {} as any, (
+              <>
+                {prependIcon && React.cloneElement(prependIcon, {
+                  className: cn("shrink-0", size === "xs" || size === "compact" ? "size-3.5" : "size-4"),
+                } as React.Attributes & Record<string, unknown>)}
+                {(children as any).props.children}
+                {appendIcon && React.cloneElement(appendIcon, {
+                  className: cn("shrink-0", size === "xs" || size === "compact" ? "size-3.5" : "size-4"),
+                } as React.Attributes & Record<string, unknown>)}
+              </>
+            ))
+          ) : (
+            children
+          )}
+        </Slot>
+      );
+    }
+
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {prependIcon && React.cloneElement(prependIcon, {
+          className: cn("shrink-0", size === "xs" || size === "compact" ? "size-3.5" : "size-4"),
+        } as React.Attributes & Record<string, unknown>)}
+        {children}
+        {appendIcon && React.cloneElement(appendIcon, {
+          className: cn("shrink-0", size === "xs" || size === "compact" ? "size-3.5" : "size-4"),
+        } as React.Attributes & Record<string, unknown>)}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+