@goplusvn/core 0.1.0 → 0.1.1

package/src/workflow/activity-timeline.tsx

@@ -0,0 +1,412 @@
+"use client";
+
+import React from "react";
+import { format } from "date-fns";
+import { vi } from "date-fns/locale"; // Note: This might need i18n handling if we support EN
+import {
+  CheckCircle2,
+  Circle,
+  Clock,
+  XCircle,
+  ArrowRight,
+  ArrowDown,
+} from "lucide-react";
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDot,
+  TimelineHeading,
+  TimelineItem,
+  TimelineLine,
+  Badge,
+  AvatarStack,
+  DynamicIcon,
+} from "../ui";
+import { cn } from "../utils";
+import type { DynamicIconNameType } from "../types";
+
+export interface ActivityItem {
+  id: string;
+  title: string;
+  description?: string;
+  date?: Date | string;
+  status?: "completed" | "current" | "upcoming" | "error";
+  badgeText?: string; // Text to show in the badge (e.g. "Opened", "Resolved")
+  iconName?: DynamicIconNameType;
+  fill?: string;
+  assignedMembers?: Array<{
+    name: string;
+    avatar?: string;
+    href?: string;
+  }>;
+}
+
+interface SharedActivityTimelineProps {
+  items: ActivityItem[];
+  className?: string;
+  orientation?: "vertical" | "horizontal";
+}
+
+function RenderAvatarStack({
+  assignedMembers,
+}: {
+  assignedMembers: ActivityItem["assignedMembers"];
+}) {
+  if (assignedMembers && assignedMembers.length > 0) {
+    return (
+      <AvatarStack
+        avatars={assignedMembers.map((member) => ({
+          src: member.avatar,
+          alt: member.name,
+          href: member.href || "#",
+        }))}
+        size="sm"
+        className="mt-2"
+      />
+    );
+  }
+
+  return null;
+}
+
+// Horizontal Step Component - Clear distinction: completed (active), current (highlighted), upcoming (inactive)
+function HorizontalStep({
+  item,
+  isLast,
+  stepNumber,
+}: {
+  item: ActivityItem;
+  isLast: boolean;
+  stepNumber: number;
+}) {
+  const getStepIcon = () => {
+    if (item.status === "completed") {
+      return (
+        <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
+      );
+    }
+    if (item.status === "error") {
+      return <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
+    }
+    if (item.status === "current") {
+      return <Clock className="h-4 w-4 text-blue-600 dark:text-blue-400" />;
+    }
+    return <Circle className="h-4 w-4 text-muted-foreground opacity-50" />;
+  };
+
+  const isCurrent = item.status === "current";
+  const isCompleted = item.status === "completed";
+  const isUpcoming = item.status === "upcoming" || !item.status;
+
+  return (
+    <div className="flex items-center gap-2 flex-1 relative min-w-0 shrink-0">
+      {/* Step Wrapper - Only wrap content, not arrow */}
+      <div
+        className={cn(
+          "flex items-center gap-1.5 flex-1 relative z-10 transition-all shrink-0",
+          isCurrent &&
+            "bg-blue-50 dark:bg-blue-950/30 border-2 border-blue-500 dark:border-blue-400 rounded-md px-1.5 py-1 shadow-sm",
+        )}
+      >
+        {/* Step Number */}
+        <div
+          className={cn(
+            "shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-[10px] font-bold transition-all",
+            isCompleted && "bg-green-500 dark:bg-green-400 text-white",
+            isCurrent && "bg-blue-500 dark:bg-blue-400 text-white",
+            isUpcoming && "bg-muted text-muted-foreground opacity-50",
+          )}
+        >
+          {stepNumber}
+        </div>
+
+        {/* Step Icon */}
+        <div
+          className={cn(
+            "shrink-0 transition-all",
+            isCompleted && "text-green-600 dark:text-green-400",
+            isCurrent && "text-blue-600 dark:text-blue-400",
+            isUpcoming && "text-muted-foreground opacity-50",
+          )}
+        >
+          {item.iconName ? (
+            <div
+              className={cn(
+                "rounded-full p-0.5 transition-all",
+                isCurrent && "scale-105",
+              )}
+              style={
+                item.fill
+                  ? { backgroundColor: item.fill, color: "white" }
+                  : undefined
+              }
+            >
+              <DynamicIcon name={item.iconName} className="size-3" />
+            </div>
+          ) : (
+            <div className="scale-90">{getStepIcon()}</div>
+          )}
+        </div>
+
+        {/* Step Content - Horizontal layout */}
+        <div className="flex items-center gap-1.5 min-w-0 flex-1">
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <p
+                className={cn(
+                  "text-xs font-medium whitespace-nowrap transition-all leading-tight",
+                  isCompleted &&
+                    "text-green-700 dark:text-green-300 font-semibold",
+                  isCurrent && "text-blue-700 dark:text-blue-300 font-semibold",
+                  isUpcoming && "text-muted-foreground opacity-60",
+                )}
+              >
+                {item.title}
+              </p>
+              {item.badgeText && (
+                <Badge
+                  variant={
+                    isCurrent ? "default" : isCompleted ? "outline" : "outline"
+                  }
+                  className={cn(
+                    "text-[10px] px-1 py-0 h-3.5 transition-all leading-none",
+                    isCompleted &&
+                      "border-green-500 dark:border-green-400 text-green-700 dark:text-green-300",
+                    isCurrent &&
+                      "bg-blue-600 dark:bg-blue-500 text-white border-blue-600 dark:border-blue-500",
+                    isUpcoming &&
+                      "border-muted-foreground/30 text-muted-foreground opacity-50",
+                  )}
+                >
+                  {item.badgeText}
+                </Badge>
+              )}
+            </div>
+            {item.description && (
+              <p
+                className={cn(
+                  "text-[10px] mt-0 line-clamp-1 transition-colors leading-tight",
+                  isCompleted && "text-green-600/80 dark:text-green-400/80",
+                  isCurrent && "text-blue-600/80 dark:text-blue-400/80",
+                  isUpcoming && "text-muted-foreground opacity-50",
+                )}
+              >
+                {item.description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SharedActivityTimeline({
+  items,
+  className,
+  orientation = "vertical",
+}: SharedActivityTimelineProps) {
+  // Horizontal layout - Compact
+  if (orientation === "horizontal") {
+    return (
+      <div className={cn("flex items-center gap-0.5", className)}>
+        {items.map((item, index) => (
+          <React.Fragment key={item.id}>
+            <HorizontalStep
+              item={item}
+              isLast={index === items.length - 1}
+              stepNumber={index + 1}
+            />
+            {/* Arrow between steps */}
+            {index < items.length - 1 && (
+              <div className="flex items-center justify-center shrink-0 w-3">
+                <ArrowRight
+                  className={cn(
+                    "h-3.5 w-3.5 transition-colors",
+                    item.status === "completed"
+                      ? "text-green-600 dark:text-green-400"
+                      : "text-muted-foreground opacity-50",
+                  )}
+                  strokeWidth={2.5}
+                />
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  }
+
+  // Vertical layout (default)
+  return (
+    <Timeline className={cn("pl-2", className)}>
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        // Map status to TimelineDot props
+        let dotStatus: "done" | "current" | "error" | undefined = undefined;
+        let dotClass = "";
+
+        if (item.status === "completed") {
+          dotStatus = "done";
+        } else if (item.status === "error") {
+          dotStatus = "error";
+        } else if (item.status === "current") {
+          dotStatus = "current";
+        } else {
+          // upcoming
+          dotClass =
+            "bg-muted text-muted-foreground border-muted-foreground/30";
+        }
+
+        const isCurrent = item.status === "current";
+        const isCompleted = item.status === "completed";
+        const isUpcoming = item.status === "upcoming" || !item.status;
+
+        return (
+          <TimelineItem
+            key={item.id}
+            status={item.status === "completed" ? "done" : "default"}
+            className={cn(
+              isCurrent &&
+                "bg-blue-50 dark:bg-blue-950/30 border-2 border-blue-500 dark:border-blue-400 rounded-lg px-3 py-2 -mx-1 shadow-sm",
+            )}
+          >
+            <div className="flex items-center gap-1.5">
+              {/* Step Number */}
+              <div
+                className={cn(
+                  "shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold transition-all",
+                  isCompleted && "bg-green-500 dark:bg-green-400 text-white",
+                  isCurrent && "bg-blue-500 dark:bg-blue-400 text-white",
+                  isUpcoming && "bg-muted text-muted-foreground opacity-50",
+                )}
+              >
+                {index + 1}
+              </div>
+              <TimelineHeading
+                className={cn(
+                  "text-sm font-medium transition-all flex-1 leading-tight",
+                  isCompleted &&
+                    "text-green-700 dark:text-green-300 font-semibold",
+                  isCurrent && "text-blue-700 dark:text-blue-300 font-semibold",
+                  isUpcoming && "text-muted-foreground opacity-60",
+                )}
+              >
+                {item.title}
+              </TimelineHeading>
+            </div>
+            {item.iconName ? (
+              <TimelineDot
+                customIconName={item.iconName}
+                customStatusName={item.status || "default"}
+                className={cn(
+                  dotClass,
+                  isCompleted &&
+                    "bg-green-100 dark:bg-green-900/30 border-green-500 dark:border-green-400",
+                  isCurrent &&
+                    "ring-2 ring-blue-400 dark:ring-blue-500 ring-offset-2 ring-offset-background",
+                  isUpcoming && "opacity-50",
+                )}
+                style={
+                  item.fill
+                    ? { backgroundColor: item.fill, color: "white" }
+                    : undefined
+                }
+                iconClassName={cn(
+                  "size-4 text-background p-0.5 transition-all",
+                  isCurrent && "scale-105",
+                )}
+              />
+            ) : (
+              <TimelineDot
+                status={dotStatus}
+                className={cn(
+                  dotClass,
+                  isCompleted &&
+                    "bg-green-100 dark:bg-green-900/30 border-green-500 dark:border-green-400",
+                  isCurrent &&
+                    "ring-2 ring-blue-400 dark:ring-blue-500 ring-offset-2 ring-offset-background",
+                  isUpcoming && "opacity-50",
+                )}
+              />
+            )}
+            {/* Arrow outside of wrapper */}
+            {!isLast && (
+              <div className="relative col-start-2 col-end-3 z-20">
+                <TimelineLine
+                  done={isCompleted}
+                  className={cn(!isCompleted && "opacity-30")}
+                />
+                <ArrowDown
+                  className={cn(
+                    "absolute left-1/2 -translate-x-1/2 bottom-0 translate-y-1/2 h-3.5 w-3.5 z-20 transition-colors bg-background rounded-full p-0.5",
+                    isCompleted
+                      ? "text-green-600 dark:text-green-400"
+                      : "text-muted-foreground opacity-50",
+                  )}
+                  strokeWidth={2.5}
+                />
+              </div>
+            )}
+            <TimelineContent className={cn("space-y-1 pb-2 transition-colors")}>
+              <div
+                className={cn(
+                  "flex items-center text-sm transition-colors",
+                  isCompleted && "text-green-600/80 dark:text-green-400/80",
+                  isCurrent && "text-blue-600/80 dark:text-blue-400/80",
+                  isUpcoming && "text-muted-foreground opacity-50",
+                )}
+              >
+                {item.date && (
+                  <span>
+                    {typeof item.date === "string"
+                      ? item.date
+                      : format(new Date(item.date), "dd/MM/yyyy HH:mm", {
+                          locale: vi,
+                        })}
+                  </span>
+                )}
+                {item.badgeText && (
+                  <Badge
+                    variant={
+                      isCurrent
+                        ? "default"
+                        : isCompleted
+                          ? "outline"
+                          : "outline"
+                    }
+                    className={cn(
+                      "ms-1.5 text-[10px] px-1 py-0 h-3.5 transition-all leading-none",
+                      isCompleted &&
+                        "border-green-500 dark:border-green-400 text-green-700 dark:text-green-300",
+                      isCurrent &&
+                        "bg-blue-600 dark:bg-blue-500 text-white border-blue-600 dark:border-blue-500",
+                      isUpcoming &&
+                        "border-muted-foreground/30 text-muted-foreground opacity-50",
+                    )}
+                  >
+                    {item.badgeText}
+                  </Badge>
+                )}
+              </div>
+              {item.description && (
+                <p
+                  className={cn(
+                    "text-sm transition-colors leading-tight",
+                    isCompleted && "text-green-600/80 dark:text-green-400/80",
+                    isCurrent && "text-blue-600/80 dark:text-blue-400/80",
+                    isUpcoming && "text-muted-foreground opacity-50",
+                  )}
+                >
+                  {item.description}
+                </p>
+              )}
+              <RenderAvatarStack assignedMembers={item.assignedMembers} />
+            </TimelineContent>
+          </TimelineItem>
+        );
+      })}
+    </Timeline>
+  );
+}

package/src/workflow/approval-workflow.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+
+import { cn } from "../utils";
+import { SharedActivityTimeline } from "./activity-timeline";
+import type { ActivityItem } from "./activity-timeline";
+
+export type ApprovalStepStatus = ActivityItem["status"];
+
+export interface ApprovalStep extends ActivityItem {
+  status?: ApprovalStepStatus;
+}
+
+interface ApprovalWorkflowProps {
+  steps: ApprovalStep[];
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+export function ApprovalWorkflow({
+  steps,
+  orientation = "horizontal",
+  className,
+}: ApprovalWorkflowProps) {
+  return (
+    <div className={cn("w-full", className)}>
+      <SharedActivityTimeline items={steps} orientation={orientation} />
+    </div>
+  );
+}

package/src/workflow/index.ts

@@ -0,0 +1,2 @@
+export * from "./activity-timeline";
+export * from "./approval-workflow";