@goplusvn/core 0.1.0 → 0.1.2

package/src/home/feature-showcase.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../utils";
+import { ERP_FEATURES } from "./types";
+import type { ERPFeature } from "./types";
+
+interface FeatureShowcaseProps {
+  className?: string;
+}
+
+export function FeatureShowcase({ className }: FeatureShowcaseProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true, align: "start" },
+    [Autoplay({ delay: 5000, stopOnInteraction: true })],
+  );
+  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+  const scrollPrev = useCallback(
+    () => emblaApi && emblaApi.scrollPrev(),
+    [emblaApi],
+  );
+  const scrollNext = useCallback(
+    () => emblaApi && emblaApi.scrollNext(),
+    [emblaApi],
+  );
+  const scrollTo = useCallback(
+    (index: number) => emblaApi && emblaApi.scrollTo(index),
+    [emblaApi],
+  );
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+    setPrevBtnEnabled(emblaApi.canScrollPrev());
+    setNextBtnEnabled(emblaApi.canScrollNext());
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    setScrollSnaps(emblaApi.scrollSnapList());
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+
+  return (
+    <div
+      className={cn(
+        "bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm relative overflow-hidden flex flex-col h-full",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-slate-700/50 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm z-20">
+        <div className="flex items-center gap-2">
+          <div className="bg-blue-100 dark:bg-blue-900/30 text-primary p-1 rounded-md">
+            <svg
+              className="w-[18px] h-[18px]"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M12 2v20M2 12h20M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10 10 10 0 0 1-10-10 10 10 0 0 1 10-10z" />
+            </svg>
+          </div>
+          <span className="text-sm font-bold text-slate-700 dark:text-slate-200">
+            Feature Tour
+          </span>
+        </div>
+        <button className="text-xs font-medium text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200 px-3 py-1.5 rounded hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
+          Skip Tour
+        </button>
+      </div>
+
+      {/* Carousel Content */}
+      <div
+        className="flex-1 relative overflow-hidden bg-slate-50/50 dark:bg-slate-800/50"
+        ref={emblaRef}
+      >
+        <div className="flex touch-pan-y h-full">
+          {ERP_FEATURES.map((feature, index) => (
+            <div key={feature.id} className="flex-[0_0_100%] min-w-0">
+              <div className="p-6 sm:p-8 flex flex-col items-center text-center gap-6 h-full justify-center">
+                <div className="mb-2 text-xs font-semibold text-primary uppercase tracking-wider">
+                  Step {index + 1} of {ERP_FEATURES.length}
+                </div>
+
+                <div
+                  className={cn(
+                    "flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br text-3xl shadow-md",
+                    feature.color,
+                  )}
+                >
+                  {feature.icon}
+                </div>
+
+                <h2 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">
+                  {feature.title}
+                </h2>
+
+                <p className="text-slate-500 dark:text-slate-400 text-sm md:text-base leading-relaxed max-w-md">
+                  {feature.description}
+                </p>
+
+                <div className="flex gap-2 justify-center flex-wrap">
+                  {feature.subFeatures.map((sub) => (
+                    <span
+                      key={sub}
+                      className="px-2 py-1 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-md text-xs font-medium text-slate-600 dark:text-slate-300"
+                    >
+                      {sub}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer Navigation */}
+      <div className="px-6 py-4 bg-white dark:bg-slate-800 border-t border-slate-100 dark:border-slate-700 flex items-center justify-between z-20">
+        {/* Dots */}
+        <div className="flex gap-1.5">
+          {scrollSnaps.map((_, index) => (
+            <button
+              key={index}
+              className={cn(
+                "h-1.5 rounded-full transition-all duration-300",
+                index === selectedIndex
+                  ? "w-6 bg-primary"
+                  : "w-1.5 bg-slate-300 dark:bg-slate-600",
+              )}
+              onClick={() => scrollTo(index)}
+            />
+          ))}
+        </div>
+
+        {/* Buttons */}
+        <div className="flex gap-3">
+          <button
+            onClick={scrollPrev}
+            disabled={!prevBtnEnabled}
+            className="w-9 h-9 flex items-center justify-center rounded-lg border border-slate-200 dark:border-slate-700 text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          <button
+            onClick={scrollNext}
+            className="h-9 px-4 rounded-lg bg-primary text-white text-sm font-medium flex items-center gap-2 hover:bg-primary/90 transition-colors shadow-sm"
+          >
+            Next
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/home/home-page.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import useSWR from "swr";
+import { LayoutDashboard, Settings } from "lucide-react";
+import { cn } from "../utils";
+import { WelcomeCard } from "./welcome-card";
+import { WidgetContainer } from "./widget-container";
+import { FeatureShowcase } from "./feature-showcase";
+import { QuickAccessMenu, DEFAULT_QUICK_ACCESS } from "./quick-access-menu";
+import { useWidgetPreferences } from "./hooks/useWidgetPreferences";
+import type { QuickAccessItem, WidgetConfig } from "./types";
+
+interface HomePageProps {
+  userName?: string;
+  userId?: string;
+  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;
+      }>;
+    };
+  };
+  availableFeatures?: Array<{ label: string; href: string; icon?: string }>;
+  widgetDataLoading?: boolean;
+  showFeatureShowcase?: boolean;
+  className?: string;
+  basePath?: string;
+  dashboardApiUrl?: string;
+}
+
+export function HomePage({
+  userName = "Bạn",
+  userId,
+  widgetData: initialWidgetData,
+  availableFeatures,
+  widgetDataLoading = false,
+  showFeatureShowcase = false,
+  className,
+  basePath = "",
+  dashboardApiUrl,
+}: HomePageProps & { dashboardApiUrl?: string }) {
+  const router = useRouter();
+
+  // ... hook logic remains ...
+  const { data: fetchedWidgetData, isLoading: isFetching } = useSWR(
+    initialWidgetData ? null : dashboardApiUrl,
+    async (url) => {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error("Failed to fetch widget data");
+      return res.json();
+    },
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: 60000, // 1 minute
+    },
+  );
+
+  const widgetData = initialWidgetData || fetchedWidgetData;
+  const isLoading =
+    widgetDataLoading || (dashboardApiUrl && !initialWidgetData && isFetching);
+
+  const {
+    widgets,
+    quickAccess,
+    loading: prefsLoading,
+    updateWidgets,
+    updateQuickAccess,
+  } = useWidgetPreferences({
+    userId,
+  });
+
+  // Filter out Home from available features to prevent adding it as a shortcut
+  // and to exclude it from defaults
+  const filteredFeatures = availableFeatures?.filter(
+    (f) =>
+      f.href !== "/home" && f.href !== basePath + "/home" && f.href !== "/",
+  );
+
+  const handleQuickAccessClick = (item: QuickAccessItem) => {
+    router.push(`${basePath}${item.href}`);
+  };
+
+  const handleWidgetsChange = async (newWidgets: WidgetConfig[]) => {
+    await updateWidgets(newWidgets);
+  };
+
+  // Calculate effective quick access items
+  // If user has saved preferences (length > 0), use them.
+  // Otherwise, if availableFeatures are provided, generate a default list from them (up to 5 items).
+  // Finally, fallback to DEFAULT_QUICK_ACCESS.
+  const getAuthorizedDefaults = (): QuickAccessItem[] => {
+    if (filteredFeatures && filteredFeatures.length > 0) {
+      const colors = [
+        "blue",
+        "green",
+        "purple",
+        "orange",
+        "teal",
+        "pink",
+        "indigo",
+        "red",
+      ];
+      return filteredFeatures.slice(0, 5).map((feature, index) => ({
+        id: `default-${index}`,
+        label: feature.label,
+        href: feature.href,
+        icon: feature.icon || "document-text",
+        color: colors[index % colors.length],
+      }));
+    }
+    // If no authorized features, return empty to avoid showing unauthorized default items
+    return [];
+  };
+
+  const displayQuickAccess =
+    quickAccess && quickAccess.length > 0
+      ? quickAccess
+      : getAuthorizedDefaults();
+
+  return (
+    <div
+      className={cn(
+        "min-h-screen bg-slate-50/50 dark:bg-slate-900/50",
+        className,
+      )}
+    >
+      <div className="w-full mx-auto px-4 md:px-6 lg:px-8 py-6 space-y-8">
+        {/* Header Section */}
+        <WelcomeCard userName={userName} />
+
+        {/* My Workspace Section - Temporarily Hidden via separate prop or conditional */}
+        {/* Added explicit check to hide widgets if requested */}
+        {false && (
+          <div className="flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-150">
+            <div className="flex items-center justify-between px-1">
+              <div className="flex items-center gap-2">
+                <LayoutDashboard className="w-5 h-5 text-primary" />
+                <h3 className="text-lg font-bold text-slate-900 dark:text-white">
+                  My Workspace
+                </h3>
+              </div>
+              <button className="text-xs font-medium text-slate-500 hover:text-primary transition-colors flex items-center gap-1 group">
+                <Settings className="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" />
+                Configure Widgets
+              </button>
+            </div>
+
+            <WidgetContainer
+              widgets={widgets}
+              onWidgetsChange={handleWidgetsChange}
+              widgetData={widgetData}
+              loading={isLoading || prefsLoading}
+            />
+          </div>
+        )}
+
+        {/* Quick Access Section */}
+        <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-300">
+          <QuickAccessMenu
+            items={displayQuickAccess}
+            onItemClick={handleQuickAccessClick}
+            editable={true}
+            onItemsChange={updateQuickAccess}
+            availableFeatures={filteredFeatures}
+          />
+        </div>
+
+        {/* Feature Tour Section - Hidden by default prop or explicit false */}
+        {showFeatureShowcase && (
+          <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-500 min-h-[400px]">
+            <FeatureShowcase />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/home/hooks/index.ts

@@ -0,0 +1 @@
+export { useWidgetPreferences } from "./useWidgetPreferences";

package/src/home/hooks/useWidgetPreferences.ts

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import useSWR from "swr";
+import type {
+  WidgetConfig,
+  UserHomePreferences,
+  QuickAccessItem,
+} from "../types";
+import { DEFAULT_WIDGETS } from "../types";
+
+interface UseWidgetPreferencesOptions {
+  userId?: string;
+  apiEndpoint?: string;
+  fallbackToLocalStorage?: boolean;
+}
+
+interface UseWidgetPreferencesReturn {
+  widgets: WidgetConfig[];
+  quickAccess: QuickAccessItem[];
+  loading: boolean;
+  error: string | null;
+  updateWidgets: (widgets: WidgetConfig[]) => Promise<void>;
+  updateQuickAccess: (items: QuickAccessItem[]) => Promise<void>;
+  resetToDefaults: () => Promise<void>;
+}
+
+const LOCAL_STORAGE_KEY = "goerp_home_preferences";
+
+async function fetchPreferences(url: string): Promise<UserHomePreferences> {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error("Failed to fetch preferences");
+  }
+  return res.json();
+}
+
+export function useWidgetPreferences({
+  userId,
+  apiEndpoint = "/api/user/preferences",
+  fallbackToLocalStorage = false,
+}: UseWidgetPreferencesOptions = {}): UseWidgetPreferencesReturn {
+  const [localPreferences, setLocalPreferences] =
+    useState<UserHomePreferences | null>(null);
+
+  // Use SWR for API fetching when userId is provided
+  const { data, error, isLoading, mutate } = useSWR<UserHomePreferences>(
+    userId ? `${apiEndpoint}?userId=${userId}` : null,
+    fetchPreferences,
+    {
+      revalidateOnFocus: false,
+      // Only use localPreferences as fallback if explicitly enabled
+      fallbackData: fallbackToLocalStorage
+        ? localPreferences || undefined
+        : undefined,
+    },
+  );
+
+  // Use a user-specific key for localStorage to prevent data leakage between users
+  const storageKey = userId
+    ? `${LOCAL_STORAGE_KEY}_${userId}`
+    : LOCAL_STORAGE_KEY;
+
+  // Load from localStorage ONLY if fallback is enabled
+  useEffect(() => {
+    if (fallbackToLocalStorage && typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) {
+          setLocalPreferences(JSON.parse(stored));
+        } else {
+          setLocalPreferences(null);
+        }
+      } catch {
+        // console.warn("Failed to load preferences from localStorage");
+      }
+    }
+  }, [fallbackToLocalStorage, storageKey]);
+
+  // Get the current preferences
+  const preferences = data ||
+    localPreferences || {
+      widgets: DEFAULT_WIDGETS,
+      quickAccess: [],
+    };
+
+  // Save preferences
+  const savePreferences = useCallback(
+    async (newPreferences: UserHomePreferences) => {
+      // Optimistic update
+      mutate(newPreferences, false);
+
+      // Save to localStorage (only if enabled)
+      if (fallbackToLocalStorage && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(storageKey, JSON.stringify(newPreferences));
+          setLocalPreferences(newPreferences);
+        } catch {
+          // console.warn("Failed to save preferences to localStorage");
+        }
+      }
+
+      // Save to API if userId is provided
+      if (userId) {
+        try {
+          const res = await fetch(apiEndpoint, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              userId,
+              ...newPreferences,
+            }),
+          });
+
+          if (!res.ok) {
+            throw new Error("Failed to save preferences");
+          }
+
+          // Revalidate from server
+          mutate();
+        } catch (err) {
+          console.error("Failed to save preferences to API:", err);
+          // Rollback optimistic update
+          mutate();
+        }
+      }
+    },
+    [userId, apiEndpoint, fallbackToLocalStorage, mutate, storageKey],
+  );
+
+  const updateWidgets = useCallback(
+    async (widgets: WidgetConfig[]) => {
+      await savePreferences({
+        ...preferences,
+        widgets,
+      });
+    },
+    [preferences, savePreferences],
+  );
+
+  const updateQuickAccess = useCallback(
+    async (quickAccess: QuickAccessItem[]) => {
+      await savePreferences({
+        ...preferences,
+        quickAccess,
+      });
+    },
+    [preferences, savePreferences],
+  );
+
+  const resetToDefaults = useCallback(async () => {
+    await savePreferences({
+      widgets: DEFAULT_WIDGETS,
+      quickAccess: [],
+    });
+  }, [savePreferences]);
+
+  return {
+    widgets: preferences.widgets,
+    quickAccess: preferences.quickAccess,
+    loading: isLoading,
+    error: error?.message || null,
+    updateWidgets,
+    updateQuickAccess,
+    resetToDefaults,
+  };
+}

package/src/home/index.ts

@@ -0,0 +1,33 @@
+// Home Module - Main exports
+export { HomePage } from "./home-page";
+export { WelcomeCard } from "./welcome-card";
+export { FeatureShowcase } from "./feature-showcase";
+export { WidgetContainer } from "./widget-container";
+export { QuickAccessMenu, DEFAULT_QUICK_ACCESS } from "./quick-access-menu";
+
+// Widget exports
+export {
+  BaseWidget,
+  WidgetStat,
+  RevenueWidget,
+  OrdersWidget,
+  CustomersWidget,
+  StockWidget,
+} from "./widgets";
+
+// Hook exports
+export { useWidgetPreferences } from "./hooks";
+
+// Type exports
+export type {
+  WidgetConfig,
+  WidgetType,
+  WidgetSize,
+  WidgetProps,
+  WidgetData,
+  QuickAccessItem,
+  UserHomePreferences,
+  ERPFeature,
+} from "./types";
+
+export { DEFAULT_WIDGETS, WIDGET_LABELS, ERP_FEATURES } from "./types";