@goplusvn/core 0.1.0 → 0.1.1

package/src/home/quick-access-dialog.tsx

@@ -0,0 +1,271 @@
+"use client";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../utils";
+import type { QuickAccessItem } from "./types";
+import { iconMap } from "./constants";
+
+const AVAILABLE_ICONS = Object.keys(iconMap);
+const AVAILABLE_COLORS = [
+  "blue",
+  "green",
+  "purple",
+  "orange",
+  "pink",
+  "indigo",
+  "teal",
+  "red",
+];
+
+const formSchema = z.object({
+  label: z.string().min(1, "Vui lòng nhập tên lối tắt"),
+  href: z.string().min(1, "Vui lòng nhập đường dẫn"),
+  icon: z.string(),
+  color: z.string(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface QuickAccessDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: Omit<QuickAccessItem, "id">) => void;
+  initialData?: QuickAccessItem;
+  availableFeatures?: Array<{ label: string; href: string; icon?: string }>;
+}
+
+export function QuickAccessDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  initialData,
+  availableFeatures,
+}: QuickAccessDialogProps) {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      label: "",
+      href: "",
+      icon: "document-text",
+      color: "blue",
+    },
+  });
+
+  // Reset form when dialog opens/closes or initialData changes
+  useEffect(() => {
+    if (open) {
+      form.reset(
+        initialData
+          ? {
+              label: initialData.label,
+              href: initialData.href,
+              icon: initialData.icon,
+              color: initialData.color,
+            }
+          : {
+              label: "",
+              href: "",
+              icon: "document-text",
+              color: "blue",
+            },
+      );
+    }
+  }, [open, initialData, form]);
+
+  const handleSubmit = (values: FormValues) => {
+    onSubmit(values);
+    onOpenChange(false);
+  };
+
+  const handleFeatureChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedHref = e.target.value;
+    const feature = availableFeatures?.find((f) => f.href === selectedHref);
+
+    if (feature) {
+      form.setValue("href", feature.href);
+      form.setValue("label", feature.label);
+      if (feature.icon && iconMap[feature.icon]) {
+        form.setValue("icon", feature.icon);
+      } else if (feature.icon && iconMap[feature.icon.replace(/-/g, "")]) {
+        // Attempt fuzzy match or mapping if needed, theoretically icon names should match
+      }
+    }
+  };
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg">
+          <div className="flex flex-col space-y-1.5 text-center sm:text-left">
+            <DialogPrimitive.Title className="text-lg font-semibold leading-none tracking-tight">
+              {initialData ? "Sửa lối tắt" : "Thêm lối tắt mới"}
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Description className="text-sm text-muted-foreground">
+              Tạo lối tắt để truy cập nhanh các tính năng thường dùng
+            </DialogPrimitive.Description>
+          </div>
+
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-4"
+          >
+            <div className="grid gap-4 py-4">
+              {/* Feature Selection if available */}
+              {availableFeatures && availableFeatures.length > 0 && (
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <label
+                    htmlFor="feature-select"
+                    className="text-right text-sm font-medium"
+                  >
+                    Chức năng
+                  </label>
+                  <div className="col-span-3">
+                    <select
+                      id="feature-select"
+                      className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                      onChange={handleFeatureChange}
+                      defaultValue={initialData?.href || ""}
+                    >
+                      <option value="">Chọn chức năng...</option>
+                      {availableFeatures.map((f) => (
+                        <option key={f.href} value={f.href}>
+                          {f.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              )}
+
+              <div className="grid grid-cols-4 items-center gap-4">
+                <label
+                  htmlFor="label"
+                  className="text-right text-sm font-medium"
+                >
+                  Tên lối tắt
+                </label>
+                <div className="col-span-3">
+                  <input
+                    id="label"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                    {...form.register("label")}
+                  />
+                  {form.formState.errors.label && (
+                    <p className="text-xs text-red-500 mt-1">
+                      {form.formState.errors.label.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Show HREF input only if NO features available (fallback) or if we want to show it as readonly? 
+                  The requirement says "only allow ... in the list". 
+                  So if list is present, HIDE the href input or make it readOnly hidden. 
+                  Let's hide it but keep it registered in form so validation passes.
+              */}
+              <div
+                className={cn(
+                  "grid grid-cols-4 items-center gap-4",
+                  availableFeatures?.length ? "hidden" : "",
+                )}
+              >
+                <label
+                  htmlFor="href"
+                  className="text-right text-sm font-medium"
+                >
+                  Đường dẫn
+                </label>
+                <div className="col-span-3">
+                  <input
+                    id="href"
+                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                    {...form.register("href")}
+                    readOnly={!!availableFeatures?.length}
+                  />
+                  {form.formState.errors.href && (
+                    <p className="text-xs text-red-500 mt-1">
+                      {form.formState.errors.href.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-start gap-4">
+                <label className="text-right text-sm font-medium pt-2">
+                  Icon
+                </label>
+                <div className="col-span-3 flex flex-wrap gap-2">
+                  {AVAILABLE_ICONS.map((icon) => (
+                    <button
+                      key={icon}
+                      type="button"
+                      onClick={() => form.setValue("icon", icon)}
+                      className={cn(
+                        "flex h-8 w-8 items-center justify-center rounded-md border transition-colors",
+                        form.watch("icon") === icon
+                          ? "border-primary bg-primary/10 text-primary"
+                          : "border-input hover:bg-muted",
+                      )}
+                    >
+                      {iconMap[icon]}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 items-start gap-4">
+                <label className="text-right text-sm font-medium pt-2">
+                  Màu sắc
+                </label>
+                <div className="col-span-3 flex flex-wrap gap-2">
+                  {AVAILABLE_COLORS.map((color) => (
+                    <button
+                      key={color}
+                      type="button"
+                      onClick={() => form.setValue("color", color)}
+                      className={cn(
+                        "h-8 w-8 rounded-full border-2 transition-all",
+                        `bg-${color}-500`,
+                        form.watch("color") === color
+                          ? "border-primary scale-110 shadow-sm"
+                          : "border-transparent hover:scale-105",
+                      )}
+                      aria-label={color}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2">
+              <DialogPrimitive.Close asChild>
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
+                >
+                  Hủy
+                </button>
+              </DialogPrimitive.Close>
+              <button
+                type="submit"
+                className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
+              >
+                {initialData ? "Lưu thay đổi" : "Thêm mới"}
+              </button>
+            </div>
+          </form>
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/src/home/quick-access-menu.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Plus, X, Pencil, GripVertical } from "lucide-react";
+import { cn } from "../utils";
+import type { QuickAccessItem } from "./types";
+import { QuickAccessDialog } from "./quick-access-dialog";
+
+interface QuickAccessMenuProps {
+  items: QuickAccessItem[];
+  onItemClick?: (item: QuickAccessItem) => void;
+  onItemsChange?: (items: QuickAccessItem[]) => void;
+  className?: string;
+  editable?: boolean;
+  availableFeatures?: Array<{ label: string; href: string; icon?: string }>;
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, scale: 0.9 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 0.2,
+      ease: "easeOut",
+    },
+  },
+};
+
+import { iconMap, colorClasses } from "./constants";
+
+export function QuickAccessMenu({
+  items,
+  onItemClick,
+  onItemsChange,
+  className,
+  editable = false,
+  availableFeatures,
+}: QuickAccessMenuProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<QuickAccessItem | undefined>(
+    undefined,
+  );
+
+  const handleAddStart = () => {
+    setEditingItem(undefined);
+    setDialogOpen(true);
+  };
+
+  const handleEditStart = (item: QuickAccessItem, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditingItem(item);
+    setDialogOpen(true);
+  };
+
+  const handleDelete = (itemId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (confirm("Bạn có chắc muốn xóa lối tắt này?")) {
+      onItemsChange?.(items.filter((item) => item.id !== itemId));
+    }
+  };
+
+  const handleSave = (data: Omit<QuickAccessItem, "id">) => {
+    // Check for duplicates
+    const isDuplicate = items.some(
+      (item) => item.href === data.href && item.id !== editingItem?.id,
+    );
+
+    if (isDuplicate) {
+      alert("Lối tắt này đã tồn tại!");
+      return;
+    }
+
+    if (editingItem) {
+      // Edit existing
+      onItemsChange?.(
+        items.map((item) =>
+          item.id === editingItem.id ? { ...item, ...data } : item,
+        ),
+      );
+    } else {
+      // Add new
+      const newItem: QuickAccessItem = {
+        ...data,
+        id: `custom-${Date.now()}`,
+      };
+      onItemsChange?.([...items, newItem]);
+    }
+  };
+
+  if (items.length === 0 && !editable) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="text-slate-900 dark:text-white text-lg font-bold">
+          Quick Shortcuts
+        </h3>
+      </div>
+
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        // @ts-ignore className is valid for motion.div
+        className="grid grid-cols-2 gap-4 sm:grid-cols-4"
+      >
+        <AnimatePresence mode="popLayout">
+          {items.map((item) => (
+            <motion.button
+              key={item.id}
+              variants={itemVariants}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              // @ts-ignore onClick and className are valid for motion.button
+              onClick={() => {
+                if (!isEditing) {
+                  onItemClick?.(item);
+                }
+              }}
+              className={cn(
+                "group relative flex flex-col items-center justify-center gap-3 bg-white dark:bg-slate-800 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md hover:border-primary/50 transition-all text-left",
+                isEditing && "cursor-default opacity-90 hover:opacity-100",
+              )}
+            >
+              {isEditing && (
+                <>
+                  <div
+                    onClick={(e) => handleDelete(item.id, e)}
+                    className="absolute -right-2 -top-2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-destructive text-white shadow-sm ring-2 ring-white hover:bg-destructive/90"
+                  >
+                    <X className="h-3 w-3" />
+                  </div>
+                  <div
+                    onClick={(e) => handleEditStart(item, e)}
+                    className="absolute -left-2 -top-2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-background text-foreground shadow-sm ring-2 ring-white hover:bg-muted"
+                  >
+                    <Pencil className="h-3 w-3" />
+                  </div>
+                </>
+              )}
+
+              {editable && (
+                <span
+                  onClick={() => setIsEditing(!isEditing)}
+                  className="absolute top-2 right-2 text-slate-300 dark:text-slate-600 cursor-move opacity-100 hover:text-primary transition-colors"
+                >
+                  <GripVertical size={18} />
+                </span>
+              )}
+
+              <div
+                className={cn(
+                  "size-12 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform",
+                  colorClasses[item.color || "blue"] || colorClasses.blue,
+                )}
+              >
+                {iconMap[item.icon] || iconMap["document-text"]}
+              </div>
+              <span className="text-slate-700 dark:text-slate-200 font-semibold text-sm">
+                {item.label}
+              </span>
+            </motion.button>
+          ))}
+
+          {editable && (
+            <motion.button
+              variants={itemVariants}
+              // @ts-ignore
+              onClick={handleAddStart}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              // @ts-ignore
+              className="flex flex-col items-center justify-center gap-2 bg-slate-50 dark:bg-slate-800/50 p-5 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-600 hover:border-primary hover:bg-slate-100 dark:hover:bg-slate-800 transition-all text-slate-500 hover:text-primary cursor-pointer group h-full min-h-[140px]"
+            >
+              <Plus className="h-8 w-8 group-hover:scale-110 transition-transform" />
+              <span className="text-sm font-medium">Add Shortcut</span>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </motion.div>
+
+      <QuickAccessDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onSubmit={handleSave}
+        initialData={editingItem}
+        availableFeatures={availableFeatures}
+      />
+    </div>
+  );
+}
+
+// Default quick access items
+export const DEFAULT_QUICK_ACCESS: QuickAccessItem[] = [
+  {
+    id: "pos",
+    label: "Bán hàng",
+    href: "/sales/pos",
+    icon: "shopping-cart",
+    color: "green",
+  },
+  {
+    id: "orders",
+    label: "Đơn hàng",
+    href: "/sales-orders",
+    icon: "clipboard-list",
+    color: "blue",
+  },
+  {
+    id: "customers",
+    label: "Khách hàng",
+    href: "/customers",
+    icon: "users",
+    color: "purple",
+  },
+  {
+    id: "inventory",
+    label: "Tồn kho",
+    href: "/inventory",
+    icon: "package",
+    color: "orange",
+  },
+  {
+    id: "reports",
+    label: "Báo cáo",
+    href: "/reports",
+    icon: "chart-bar",
+    color: "teal",
+  },
+  {
+    id: "finance",
+    label: "Thu chi",
+    href: "/finance",
+    icon: "currency-dollar",
+    color: "pink",
+  },
+  {
+    id: "products",
+    label: "Sản phẩm",
+    href: "/crud/products",
+    icon: "package",
+    color: "indigo",
+  },
+  {
+    id: "settings",
+    label: "Cài đặt",
+    href: "/admin",
+    icon: "cog",
+    color: "red",
+  },
+];

package/src/home/types.ts

@@ -0,0 +1,140 @@
+// Widget System Types for Home Page
+
+export type WidgetType = "revenue" | "orders" | "customers" | "stock";
+
+export type WidgetSize = "small" | "medium" | "large";
+
+export interface WidgetConfig {
+  id: string;
+  type: WidgetType;
+  position: number;
+  visible: boolean;
+  size: WidgetSize;
+  settings?: Record<string, unknown>;
+}
+
+export interface WidgetProps {
+  config: WidgetConfig;
+  onRemove?: () => void;
+  onSettings?: () => void;
+  className?: string;
+}
+
+export interface WidgetData {
+  value: number | string;
+  label: string;
+  change?: {
+    value: number;
+    type: "increase" | "decrease";
+    period: string;
+  };
+  loading?: boolean;
+  error?: string;
+}
+
+export interface QuickAccessItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: string;
+  color?: string;
+}
+
+export interface UserHomePreferences {
+  widgets: WidgetConfig[];
+  quickAccess: QuickAccessItem[]; // List of quick access items
+}
+
+export const DEFAULT_WIDGETS: WidgetConfig[] = [
+  {
+    id: "revenue",
+    type: "revenue",
+    position: 0,
+    visible: true,
+    size: "medium",
+  },
+  { id: "orders", type: "orders", position: 1, visible: true, size: "medium" },
+  {
+    id: "customers",
+    type: "customers",
+    position: 2,
+    visible: true,
+    size: "medium",
+  },
+  { id: "stock", type: "stock", position: 3, visible: true, size: "medium" },
+];
+
+export const WIDGET_LABELS: Record<WidgetType, string> = {
+  revenue: "Doanh thu",
+  orders: "Đơn hàng",
+  customers: "Khách hàng",
+  stock: "Tồn kho",
+};
+
+export interface ERPFeature {
+  id: string;
+  icon: string;
+  title: string;
+  description: string;
+  subFeatures: string[];
+  color: string;
+}
+
+export const ERP_FEATURES: ERPFeature[] = [
+  {
+    id: "inventory",
+    icon: "📦",
+    title: "Quản lý Kho",
+    description: "Quản lý toàn diện hàng hóa và tồn kho",
+    subFeatures: ["Nhập/Xuất kho", "Kiểm kê", "Điều chuyển", "Cảnh báo tồn"],
+    color: "from-blue-500 to-cyan-500",
+  },
+  {
+    id: "sales",
+    icon: "💰",
+    title: "Quản lý Bán hàng",
+    description: "Xử lý đơn hàng và bán hàng hiệu quả",
+    subFeatures: ["POS", "Đơn hàng", "Hợp đồng", "Báo giá"],
+    color: "from-green-500 to-emerald-500",
+  },
+  {
+    id: "purchasing",
+    icon: "🛒",
+    title: "Quản lý Mua hàng",
+    description: "Quản lý nhà cung cấp và đặt hàng",
+    subFeatures: ["Đặt hàng NCC", "Nhập hàng", "Công nợ phải trả"],
+    color: "from-orange-500 to-amber-500",
+  },
+  {
+    id: "finance",
+    icon: "💵",
+    title: "Tài chính",
+    description: "Quản lý dòng tiền và công nợ",
+    subFeatures: ["Thu/Chi", "Sổ quỹ", "Công nợ", "Báo cáo tài chính"],
+    color: "from-purple-500 to-violet-500",
+  },
+  {
+    id: "crm",
+    icon: "👥",
+    title: "CRM",
+    description: "Chăm sóc và quản lý khách hàng",
+    subFeatures: ["Khách hàng", "Lịch sử giao dịch", "Phân loại"],
+    color: "from-pink-500 to-rose-500",
+  },
+  {
+    id: "hr",
+    icon: "👨‍💼",
+    title: "Nhân sự",
+    description: "Quản lý người dùng và phân quyền",
+    subFeatures: ["Users", "Phân quyền", "Roles"],
+    color: "from-indigo-500 to-blue-500",
+  },
+  {
+    id: "reports",
+    icon: "📊",
+    title: "Báo cáo",
+    description: "Thống kê và phân tích dữ liệu",
+    subFeatures: ["Dashboard", "Thống kê", "Export"],
+    color: "from-teal-500 to-green-500",
+  },
+];