@goplusvn/core 0.1.0 → 0.1.2

package/src/home/welcome-card.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { format } from "date-fns";
+import { vi } from "date-fns/locale";
+import { TrendingUp, Zap } from "lucide-react";
+import { cn } from "../utils";
+
+interface WelcomeCardProps {
+  userName?: string;
+  className?: string;
+}
+
+function getGreeting(hour: number): { text: string; emoji: string } {
+  if (hour >= 5 && hour < 12) {
+    return { text: "Chào buổi sáng", emoji: "🌅" };
+  } else if (hour >= 12 && hour < 18) {
+    return { text: "Chào buổi chiều", emoji: "☀️" };
+  } else {
+    return { text: "Chào buổi tối", emoji: "🌙" };
+  }
+}
+
+export function WelcomeCard({ userName = "Bạn", className }: WelcomeCardProps) {
+  const now = new Date();
+  const hour = now.getHours();
+  const greeting = getGreeting(hour);
+
+  const formattedDate = format(now, "EEEE, dd/MM/yyyy", { locale: vi });
+  const formattedTime = format(now, "HH:mm");
+
+  return (
+    <div
+      className={cn(
+        "w-full bg-gradient-to-r from-blue-900 to-primary rounded-xl overflow-hidden shadow-lg group relative animate-in fade-in slide-in-from-bottom-4 duration-500",
+        className,
+      )}
+    >
+      {/* Background decoration */}
+      <div
+        className="absolute inset-0 opacity-20 pointer-events-none"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle at 80% 20%, white 0%, transparent 40%), radial-gradient(circle at 10% 80%, white 0%, transparent 30%)",
+        }}
+      />
+
+      <div className="flex flex-col md:flex-row items-center relative overflow-hidden">
+        {/* Content Left */}
+        <div className="p-8 flex-1 z-10 w-full">
+          <div className="flex items-center gap-2 mb-4">
+            <span className="bg-white/20 text-white text-xs font-bold px-2 py-1 rounded uppercase tracking-wider backdrop-blur-sm">
+              {formattedDate}
+            </span>
+          </div>
+          <h2 className="text-white text-2xl md:text-3xl font-bold mb-3">
+            {greeting.text}, {userName}
+          </h2>
+          <div className="text-blue-100 mb-6 max-w-lg">
+            Chúc bạn một ngày làm việc hiệu quả. Hệ thống đang hoạt động ổn
+            định.
+          </div>
+          <div className="flex gap-3">
+            <div className="bg-white/10 text-white px-5 py-2.5 rounded-lg text-sm font-bold shadow-sm backdrop-blur-sm border border-white/20 flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+              <span>Online • {formattedTime}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Visuals Right (Hidden on mobile) */}
+        <div className="hidden md:flex flex-1 justify-end items-end h-full p-8 z-10 self-stretch">
+          <div className="grid grid-cols-2 gap-3 opacity-90 transform translate-y-4">
+            <div className="bg-white/10 backdrop-blur-md border border-white/20 p-3 rounded-lg flex items-center gap-3">
+              <TrendingUp className="text-white w-6 h-6" />
+              <div>
+                <div className="h-1.5 w-12 bg-white/40 rounded mb-1" />
+                <div className="h-1.5 w-8 bg-white/20 rounded" />
+              </div>
+            </div>
+            <div className="bg-white/10 backdrop-blur-md border border-white/20 p-3 rounded-lg flex items-center gap-3">
+              <Zap className="text-white w-6 h-6" />
+              <div>
+                <div className="h-1.5 w-12 bg-white/40 rounded mb-1" />
+                <div className="h-1.5 w-8 bg-white/20 rounded" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/home/widget-container.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { DragEndEvent } from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+} from "@dnd-kit/sortable";
+import { motion, AnimatePresence } from "framer-motion";
+import { Plus, Eye, EyeOff, RotateCcw } from "lucide-react";
+import { cn } from "../utils";
+import type { WidgetConfig } from "./types";
+import { DEFAULT_WIDGETS, WIDGET_LABELS } from "./types";
+import { RevenueWidget } from "./widgets/revenue-widget";
+import { OrdersWidget } from "./widgets/orders-widget";
+import { CustomersWidget } from "./widgets/customers-widget";
+import { StockWidget } from "./widgets/stock-widget";
+
+interface WidgetContainerProps {
+  widgets: WidgetConfig[];
+  onWidgetsChange: (widgets: WidgetConfig[]) => void;
+  widgetData?: {
+    revenue?: { total: number; change?: number };
+    orders?: {
+      total: number;
+      pending?: number;
+      completed?: number;
+      change?: number;
+    };
+    customers?: { total: number; newToday?: number; change?: number };
+    stock?: {
+      totalItems: number;
+      lowStockCount: number;
+      lowStockItems?: Array<{
+        id: string;
+        name: string;
+        quantity: number;
+        minStock: number;
+      }>;
+    };
+  };
+  loading?: boolean;
+  className?: string;
+}
+
+export function WidgetContainer({
+  widgets,
+  onWidgetsChange,
+  widgetData,
+  loading = false,
+  className,
+}: WidgetContainerProps) {
+  const [showHiddenWidgets, setShowHiddenWidgets] = useState(false);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        const oldIndex = widgets.findIndex((w) => w.id === active.id);
+        const newIndex = widgets.findIndex((w) => w.id === over.id);
+
+        const newWidgets = arrayMove(widgets, oldIndex, newIndex).map(
+          (widget, index) => ({
+            ...widget,
+            position: index,
+          }),
+        );
+
+        onWidgetsChange(newWidgets);
+      }
+    },
+    [widgets, onWidgetsChange],
+  );
+
+  const handleToggleVisibility = useCallback(
+    (widgetId: string) => {
+      const newWidgets = widgets.map((widget) =>
+        widget.id === widgetId
+          ? { ...widget, visible: !widget.visible }
+          : widget,
+      );
+      onWidgetsChange(newWidgets);
+    },
+    [widgets, onWidgetsChange],
+  );
+
+  const handleRemoveWidget = useCallback(
+    (widgetId: string) => {
+      const newWidgets = widgets.map((widget) =>
+        widget.id === widgetId ? { ...widget, visible: false } : widget,
+      );
+      onWidgetsChange(newWidgets);
+    },
+    [widgets, onWidgetsChange],
+  );
+
+  const handleResetWidgets = useCallback(() => {
+    onWidgetsChange(DEFAULT_WIDGETS);
+  }, [onWidgetsChange]);
+
+  const visibleWidgets = widgets
+    .filter((w) => w.visible)
+    .sort((a, b) => a.position - b.position);
+
+  const hiddenWidgets = widgets.filter((w) => !w.visible);
+
+  const renderWidget = (config: WidgetConfig) => {
+    const commonProps = {
+      config,
+      loading,
+      onRemove: () => handleRemoveWidget(config.id),
+      onToggleVisibility: () => handleToggleVisibility(config.id),
+    };
+
+    switch (config.type) {
+      case "revenue":
+        return <RevenueWidget {...commonProps} data={widgetData?.revenue} />;
+      case "orders":
+        return <OrdersWidget {...commonProps} data={widgetData?.orders} />;
+      case "customers":
+        return (
+          <CustomersWidget {...commonProps} data={widgetData?.customers} />
+        );
+      case "stock":
+        return <StockWidget {...commonProps} data={widgetData?.stock} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-foreground">
+          Widget Dashboard
+        </h2>
+        <div className="flex items-center gap-2">
+          {hiddenWidgets.length > 0 && (
+            <button
+              onClick={() => setShowHiddenWidgets(!showHiddenWidgets)}
+              className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+            >
+              {showHiddenWidgets ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+              <span>{hiddenWidgets.length} ẩn</span>
+            </button>
+          )}
+          <button
+            onClick={handleResetWidgets}
+            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+            title="Khôi phục mặc định"
+          >
+            <RotateCcw className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Hidden widgets panel */}
+      <AnimatePresence>
+        {showHiddenWidgets && hiddenWidgets.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            // @ts-ignore className is valid for motion.div
+            className="overflow-hidden"
+          >
+            <div className="rounded-lg border border-dashed border-border bg-muted/30 p-4">
+              <p className="mb-3 text-sm font-medium text-muted-foreground">
+                Widget đã ẩn - Click để hiển thị lại
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {hiddenWidgets.map((widget) => (
+                  <button
+                    key={widget.id}
+                    onClick={() => handleToggleVisibility(widget.id)}
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-background px-3 py-2 text-sm font-medium shadow-sm border border-border hover:bg-muted transition-colors"
+                  >
+                    <Plus className="h-4 w-4" />
+                    {WIDGET_LABELS[widget.type]}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Sortable widget grid */}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={visibleWidgets.map((w) => w.id)}
+          strategy={rectSortingStrategy}
+        >
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <AnimatePresence mode="popLayout">
+              {visibleWidgets.map((widget) => (
+                <div key={widget.id}>{renderWidget(widget)}</div>
+              ))}
+            </AnimatePresence>
+          </div>
+        </SortableContext>
+      </DndContext>
+
+      {/* Empty state */}
+      {visibleWidgets.length === 0 && (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border py-12 text-center">
+          <div className="rounded-full bg-muted p-3 mb-4">
+            <Plus className="h-6 w-6 text-muted-foreground" />
+          </div>
+          <h3 className="font-medium text-foreground mb-1">
+            Chưa có widget nào
+          </h3>
+          <p className="text-sm text-muted-foreground mb-4">
+            Thêm widget để theo dõi các chỉ số quan trọng
+          </p>
+          <button
+            onClick={handleResetWidgets}
+            className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            <RotateCcw className="h-4 w-4" />
+            Khôi phục mặc định
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/home/widgets/base-widget.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, Settings, X, Eye, EyeOff } from "lucide-react";
+import { cn } from "../../utils";
+import type { WidgetConfig, WidgetSize } from "../types";
+
+interface BaseWidgetProps {
+  config: WidgetConfig;
+  title: string;
+  children: React.ReactNode;
+  loading?: boolean;
+  error?: string;
+  onRemove?: () => void;
+  onToggleVisibility?: () => void;
+  onSettings?: () => void;
+  className?: string;
+  isDragging?: boolean;
+}
+
+const sizeClasses: Record<WidgetSize, string> = {
+  small: "col-span-1",
+  medium: "col-span-1 md:col-span-1",
+  large: "col-span-1 md:col-span-2",
+};
+
+export function BaseWidget({
+  config,
+  title,
+  children,
+  loading = false,
+  error,
+  onRemove,
+  onToggleVisibility,
+  onSettings,
+  className,
+  isDragging = false,
+}: BaseWidgetProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging: isSortableDragging,
+  } = useSortable({ id: config.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const isCurrentlyDragging = isDragging || isSortableDragging;
+
+  if (!config.visible) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      ref={setNodeRef}
+      style={style}
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      // @ts-ignore className is valid for motion.div
+      className={cn(
+        "group relative flex flex-col justify-between gap-3 rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-primary/30 hover:shadow-md dark:border-slate-700 dark:bg-slate-800",
+        sizeClasses[config.size],
+        isCurrentlyDragging && "z-50 shadow-lg ring-2 ring-primary/20",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center gap-2">
+          {/* Drag handle */}
+          <button
+            {...attributes}
+            {...listeners}
+            className="cursor-grab touch-none rounded text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 active:cursor-grabbing opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Drag to reorder"
+          >
+            <GripVertical className="h-4 w-4" />
+          </button>
+          <h4 className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
+            {title}
+          </h4>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+          {onToggleVisibility && (
+            <button
+              onClick={onToggleVisibility}
+              className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-700 dark:hover:text-slate-300"
+              aria-label={config.visible ? "Hide widget" : "Show widget"}
+            >
+              {config.visible ? (
+                <Eye className="h-4 w-4" />
+              ) : (
+                <EyeOff className="h-4 w-4" />
+              )}
+            </button>
+          )}
+          {onSettings && (
+            <button
+              onClick={onSettings}
+              className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-700 dark:hover:text-slate-300"
+              aria-label="Widget settings"
+            >
+              <Settings className="h-4 w-4" />
+            </button>
+          )}
+          {onRemove && (
+            <button
+              onClick={onRemove}
+              className="rounded p-1 text-slate-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+              aria-label="Remove widget"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1">
+        {loading ? (
+          <div className="flex items-center justify-center py-4">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center py-4 text-xs text-red-500">
+            {error}
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+// Stat display component for widgets
+interface WidgetStatProps {
+  value: string | number;
+  label?: string;
+  change?: {
+    value: number;
+    type: "increase" | "decrease";
+    period?: string;
+  };
+  valueClassName?: string;
+}
+
+export function WidgetStat({
+  value,
+  label,
+  change,
+  valueClassName,
+}: WidgetStatProps) {
+  return (
+    <div className="space-y-2">
+      <div className={cn("text-3xl font-bold text-foreground", valueClassName)}>
+        {value}
+      </div>
+      {label && <p className="text-sm text-muted-foreground">{label}</p>}
+      {change && (
+        <div
+          className={cn(
+            "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+            change.type === "increase"
+              ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+              : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+          )}
+        >
+          {change.type === "increase" ? (
+            <svg className="h-3 w-3" viewBox="0 0 12 12" fill="currentColor">
+              <path d="M6 2L10 7H2L6 2Z" />
+            </svg>
+          ) : (
+            <svg className="h-3 w-3" viewBox="0 0 12 12" fill="currentColor">
+              <path d="M6 10L2 5H10L6 10Z" />
+            </svg>
+          )}
+          <span>
+            {change.value > 0 ? "+" : ""}
+            {change.value}%
+          </span>
+          {change.period && (
+            <span className="text-muted-foreground">vs {change.period}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/home/widgets/customers-widget.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Users } from "lucide-react";
+import { BaseWidget, WidgetStat } from "./base-widget";
+import type { WidgetConfig } from "../types";
+
+interface CustomersWidgetProps {
+  config: WidgetConfig;
+  data?: {
+    total: number;
+    newToday?: number;
+    change?: number;
+    changePeriod?: string;
+  };
+  loading?: boolean;
+  error?: string;
+  onRemove?: () => void;
+  onToggleVisibility?: () => void;
+  onSettings?: () => void;
+}
+
+export function CustomersWidget({
+  config,
+  data,
+  loading,
+  error,
+  onRemove,
+  onToggleVisibility,
+  onSettings,
+}: CustomersWidgetProps) {
+  return (
+    <BaseWidget
+      config={config}
+      title="Khách hàng"
+      loading={loading}
+      error={error}
+      onRemove={onRemove}
+      onToggleVisibility={onToggleVisibility}
+      onSettings={onSettings}
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-3">
+          <WidgetStat
+            value={data?.total ?? 0}
+            label="Tổng khách hàng"
+            change={
+              data?.change !== undefined
+                ? {
+                    value: data.change,
+                    type: data.change >= 0 ? "increase" : "decrease",
+                    period: data.changePeriod || "tháng trước",
+                  }
+                : undefined
+            }
+            valueClassName="text-purple-600 dark:text-purple-400"
+          />
+
+          {data?.newToday !== undefined && data.newToday > 0 && (
+            <div className="text-sm">
+              <span className="text-muted-foreground">Khách mới hôm nay: </span>
+              <span className="font-medium text-green-600 dark:text-green-400">
+                +{data.newToday}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <div className="rounded-full bg-purple-100 p-3 dark:bg-purple-900/30">
+          <Users className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+        </div>
+      </div>
+    </BaseWidget>
+  );
+}

package/src/home/widgets/index.ts

@@ -0,0 +1,6 @@
+// Widget exports
+export { BaseWidget, WidgetStat } from "./base-widget";
+export { RevenueWidget } from "./revenue-widget";
+export { OrdersWidget } from "./orders-widget";
+export { CustomersWidget } from "./customers-widget";
+export { StockWidget } from "./stock-widget";