@goplusvn/core 0.1.0 → 0.1.2

package/src/user/pages/users-client-page.tsx

@@ -0,0 +1,385 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { useViewMode } from "../../hooks";
+import { toast } from "sonner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Badge,
+  Button,
+} from "../../ui";
+import { Edit2 } from "lucide-react";
+import type { EntityConfig, CrudPermissions } from "../../types";
+
+import { UserToolbar } from "../components/user-toolbar";
+import { UserStats } from "../components/user-stats";
+import { UsersCardView } from "../components/users-card-view";
+import { UnifiedProfileDialog } from "../components/unified-profile-dialog";
+
+interface UserStats {
+  totalUsers: number;
+  activeUsers: number;
+  employees: number;
+  customers: number;
+  suppliers: number;
+}
+
+interface UsersClientPageProps {
+  initialData: any[];
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  dictionary: any;
+  roles: any[];
+  stats: UserStats;
+  onAssignRoles?: (userId: string, roleCodes: string[]) => Promise<any>;
+  onResetPassword?: (userId: string, password: string) => Promise<any>;
+}
+
+export function UsersClientPage({
+  initialData,
+  config,
+  permissions,
+  dictionary,
+  roles,
+  stats,
+  onAssignRoles,
+  onResetPassword,
+}: UsersClientPageProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const searchParams = useSearchParams();
+  // View Mode
+  const [viewModeRaw, handleViewModeChangeRaw] = useViewMode(
+    "users-view-mode",
+    "grid",
+  );
+  const viewMode =
+    viewModeRaw === "table" || viewModeRaw === "grid"
+      ? (viewModeRaw as "table" | "grid")
+      : "grid";
+  const handleViewModeChange = (mode: "table" | "grid") =>
+    handleViewModeChangeRaw(mode);
+
+  // Selection for Quick View
+  const [selectedUser, setSelectedUser] = useState<any>(null);
+  const [quickViewOpen, setQuickViewOpen] = useState(false);
+
+  // Dialogs State
+  const [userFormOpen, setUserFormOpen] = useState(false);
+  const [userFormMode, setUserFormMode] = useState<"create" | "edit">("create");
+  const [userFormData, setUserFormData] = useState<any>(null);
+
+  // Handlers
+  const handleSearch = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value) params.set("search", value);
+      else params.delete("search");
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [pathname, router, searchParams],
+  );
+
+  const handleRoleFilter = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value && value !== "all") params.set("role", value);
+      else params.delete("role");
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [pathname, router, searchParams],
+  );
+
+  const handleUserTypeFilter = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value && value !== "all") params.set("type", value);
+      else params.delete("type");
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [pathname, router, searchParams],
+  );
+
+  const handleSelectUser = (user: any) => {
+    setSelectedUser(user);
+    setQuickViewOpen(true);
+  };
+
+  const handleCreateNew = () => {
+    setUserFormMode("create");
+    setUserFormData(null);
+    setUserFormOpen(true);
+  };
+
+  const handleEditUser = (user?: any) => {
+    const targetUser = user || selectedUser;
+    if (!targetUser) return;
+    setSelectedUser(targetUser);
+    setQuickViewOpen(true);
+  };
+
+  // Role Assignment
+  const handleAssignRoles = async (userId: string, roleCodes: string[]) => {
+    try {
+      if (onAssignRoles) {
+        await onAssignRoles(userId, roleCodes);
+      }
+      toast.success("Thành công", {
+        description: "Đã cập nhật vai trò người dùng",
+      });
+      router.refresh();
+    } catch (error) {
+      toast.error("Lỗi", {
+        description: "Không thể cập nhật vai trò",
+      });
+    }
+  };
+
+  // Reset Password
+  const handleResetPassword = async (userId: string, password: string) => {
+    try {
+      if (onResetPassword) {
+        await onResetPassword(userId, password);
+      }
+      toast.success("Thành công", {
+        description: "Đã đặt lại mật khẩu",
+      });
+    } catch (error) {
+      toast.error("Lỗi", {
+        description: "Không thể đặt lại mật khẩu",
+      });
+    }
+  };
+
+  // User Form Submit (Create/Edit)
+  const handleUserSubmit = async (data: any, id?: string) => {
+    const url = id ? `/api/users/${id}` : "/api/users";
+    const method = id ? "PUT" : "POST";
+
+    const res = await fetch(url, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    if (!res.ok) {
+      const resData = await res.json();
+      throw new Error(resData.error);
+    }
+
+    toast.success("Thành công", {
+      description: id ? "Đã cập nhật người dùng" : "Đã tạo người dùng mới",
+    });
+
+    router.refresh();
+    setUserFormOpen(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 relative">
+      <UserStats stats={stats} />
+
+      <UserToolbar
+        viewMode={viewMode}
+        onViewModeChange={handleViewModeChange}
+        onCreateNew={handleCreateNew}
+        onSearchChange={handleSearch}
+        roles={roles}
+        onRoleChange={handleRoleFilter}
+        userType={searchParams.get("type") || "all"}
+        onUserTypeChange={handleUserTypeFilter}
+        permissions={permissions}
+      />
+
+      <div className="min-h-[400px]">
+        {viewMode === "table" ? (
+          <div className="border rounded-md">
+            <BasicUserTable
+              data={initialData}
+              onEdit={(u) => handleEditUser(u)}
+            />
+          </div>
+        ) : (
+          <UsersCardView data={initialData} onSelect={handleSelectUser} />
+        )}
+      </div>
+
+      {/* Create User Dialog */}
+      <UnifiedProfileDialog
+        open={userFormOpen}
+        onOpenChange={setUserFormOpen}
+        mode="create"
+        viewMode="admin"
+        roles={roles}
+        onSaveProfile={(data) => handleUserSubmit(data)}
+      />
+
+      {/* Quick View / Edit Dialog */}
+      {selectedUser && (
+        <UnifiedProfileDialog
+          open={quickViewOpen}
+          onOpenChange={setQuickViewOpen}
+          data={selectedUser}
+          mode="edit"
+          viewMode="admin"
+          roles={roles}
+          onSaveProfile={handleUserSubmit}
+          onSaveRoles={handleAssignRoles}
+          onSavePassword={handleResetPassword}
+        />
+      )}
+    </div>
+  );
+}
+
+// Simple Basic Table Component
+function BasicUserTable({
+  data,
+  onEdit,
+}: {
+  data: any[];
+  onEdit: (u: any) => void;
+}) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 10;
+
+  if (!data.length) return <div className="p-4 text-center">No data</div>;
+
+  const totalPages = Math.ceil(data.length / pageSize);
+  const paginatedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="bg-background">
+        <Table>
+      <TableHeader>
+        <TableRow className="text-sm border-b">
+          <TableHead className="w-[50px] font-semibold text-foreground text-center h-10">STT</TableHead>
+          <TableHead className="w-[20%] min-w-[150px] font-semibold text-foreground h-10">Người dùng</TableHead>
+          <TableHead className="w-[20%] min-w-[150px] font-semibold text-foreground h-10">Liên hệ</TableHead>
+          <TableHead className="w-[15%] min-w-[120px] font-semibold text-foreground h-10">Trạng thái</TableHead>
+          <TableHead className="w-[15%] min-w-[120px] font-semibold text-foreground h-10">Phòng ban</TableHead>
+          <TableHead className="w-[20%] min-w-[150px] font-semibold text-foreground h-10">Vai trò</TableHead>
+          <TableHead className="w-[50px] text-center h-10"></TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {paginatedData.map((user, index) => (
+          <TableRow key={user.id} className="border-b group">
+            {/* STT */}
+            <TableCell className="py-3 text-center text-muted-foreground font-medium text-xs">
+              {(currentPage - 1) * pageSize + index + 1}
+            </TableCell>
+
+            {/* User Info */}
+            <TableCell className="py-3">
+              <div className="flex flex-col">
+                <div className="flex items-center gap-2">
+                  <span className="font-semibold text-sm text-foreground">{user.name}</span>
+                  {user.userType === "customer" && <span className="text-xs text-foreground bg-muted border px-2.5 py-0.5 rounded-full font-semibold whitespace-nowrap">Khách hàng</span>}
+                  {user.userType === "supplier" && <span className="text-xs text-background bg-foreground px-2.5 py-0.5 rounded-full font-semibold whitespace-nowrap">Nhà cung cấp</span>}
+                  {(!user.userType || user.userType === "employee") && <span className="text-xs text-foreground bg-muted border px-2.5 py-0.5 rounded-full font-semibold whitespace-nowrap">Nhân viên</span>}
+                </div>
+              </div>
+            </TableCell>
+
+            {/* Contact */}
+            <TableCell className="py-3">
+              <div className="flex flex-col">
+                <span className="text-sm text-foreground">{user.email}</span>
+                {user.phone && <span className="text-sm text-muted-foreground">{user.phone}</span>}
+              </div>
+            </TableCell>
+
+            {/* Status */}
+            <TableCell className="py-3">
+              <div className="flex items-center gap-1.5">
+                <span className={`inline-flex items-center text-xs font-semibold px-2.5 py-1 rounded-full whitespace-nowrap ${
+                  user.isActive || user.status === "active" 
+                    ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" 
+                    : "bg-muted text-muted-foreground"
+                }`}>
+                  {user.isActive || user.status === "active" ? "Hoạt động" : "Đã khóa"}
+                </span>
+              </div>
+            </TableCell>
+
+            {/* Department */}
+            <TableCell className="py-3 text-sm text-foreground">
+              {user.departmentName || "—"}
+            </TableCell>
+
+            {/* Roles */}
+            <TableCell className="py-3">
+              <div className="flex flex-wrap gap-1.5">
+                {user.roleNames?.map((r: string, i: number) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center bg-muted text-foreground border font-semibold text-xs px-2.5 py-1 rounded-full whitespace-nowrap"
+                  >
+                    {r}
+                  </span>
+                ))}
+              </div>
+            </TableCell>
+
+            {/* Actions */}
+            <TableCell className="py-2.5 text-right">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={(e: React.MouseEvent) => {
+                  e.stopPropagation();
+                  onEdit(user);
+                }}
+              >
+                <Edit2 className="h-4 w-4" />
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+    </div>
+
+    {/* Pagination */}
+    {totalPages > 1 && (
+      <div className="flex items-center justify-between px-2 pt-2">
+        <p className="text-sm text-muted-foreground">
+          Hiển thị từ {(currentPage - 1) * pageSize + 1} đến {Math.min(currentPage * pageSize, data.length)} trong tổng số {data.length}
+        </p>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+            className="h-8 rounded-full"
+          >
+            Trang trước
+          </Button>
+          <div className="text-sm font-semibold text-foreground px-2">
+            Trang {currentPage} / {totalPages}
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+            className="h-8 rounded-full"
+          >
+            Trang sau
+          </Button>
+        </div>
+      </div>
+    )}
+    </div>
+  );
+}

package/src/user/profile-page.tsx

@@ -0,0 +1,19 @@
+import type { UserType } from "./types";
+import type { DictionaryType } from "../hooks";
+
+import { DangerousZone } from "./components/dangerous-zone";
+import { ProfileInfo } from "./components/profile-info";
+
+export interface ProfilePageProps {
+  user: UserType;
+  dictionary?: DictionaryType;
+}
+
+export function ProfilePage({ user, dictionary }: ProfilePageProps) {
+  return (
+    <div className="grid gap-4">
+      <ProfileInfo user={user} dictionary={dictionary} />
+      <DangerousZone user={user} dictionary={dictionary} />
+    </div>
+  );
+}

package/src/user/schemas.ts

@@ -0,0 +1,68 @@
+import { z } from "zod";
+
+import { formatFileSize } from "../utils";
+
+export const MAX_AVATAR_SIZE = 50000000; // 50 MB
+export const fomratedAvatarSize = formatFileSize(MAX_AVATAR_SIZE);
+
+export const ProfileInfoSchema = z.object({
+  firstName: z
+    .string()
+    .trim()
+    .min(2, { message: "First Name must contain at least 2 characters." })
+    .max(50, { message: "First Name must contain at most 50 characters." }),
+  lastName: z
+    .string()
+    .trim()
+    .min(2, { message: "Last Name must contain at least 2 characters." })
+    .max(50, { message: "Last Name must contain at most 50 characters." }),
+  username: z
+    .string()
+    .toLowerCase()
+    .trim()
+    .min(3, { message: "Username must contain at least 3 characters." })
+    .max(50, { message: "Username must contain at most 50 characters." }),
+  email: z
+    .string()
+    .email({ message: "Invalid email address" })
+    .toLowerCase()
+    .trim(),
+  phoneNumber: z
+    .string()
+    .min(10, { message: "Phone Number must contain at least 10 digits." })
+    .max(15, { message: "Username must contain at most 15 digits." }),
+  state: z
+    .string()
+    .trim()
+    .min(2, { message: "State must contain at least 2 characters." })
+    .max(50, { message: "State must contain at most 50 characters." }),
+  country: z
+    .string()
+    .trim()
+    .min(2, { message: "Country must contain at least 2 characters." })
+    .max(56, { message: "Country must contain at most 56 characters." }),
+  address: z
+    .string()
+    .trim()
+    .min(2, { message: "Address must contain at least 2 characters." })
+    .max(100, { message: "Address must contain at most 100 characters." }),
+  zipCode: z
+    .string()
+    .min(5, { message: "Zip Code must contain at least 5 digits." })
+    .max(10, { message: "Zip Code must contain at most 10 characters." }),
+  language: z.string(),
+  timeZone: z.string(),
+  currency: z.string(),
+  organization: z.string().trim().optional(),
+  avatar: z
+    .instanceof(File)
+    .refine((avatar) => avatar.size <= MAX_AVATAR_SIZE, {
+      message: `Avatar must be ${fomratedAvatarSize} or less.`,
+    })
+    // .refine((avatar) => avatar.type.startsWith("image/"), {
+    //   message: "The file must be an image",
+    // })
+    .optional(),
+});
+
+export const DeleteAccountSchema = z.object({});

package/src/user/types.ts

@@ -0,0 +1,34 @@
+import type { z } from "zod";
+import type { DeleteAccountSchema, ProfileInfoSchema } from "./schemas";
+
+
+export interface UserType {
+  id: string
+  firstName: string
+  lastName: string
+  name: string
+  username: string
+  role: string
+  avatar: string
+  background: string
+  status: string
+  phoneNumber: string
+  email: string
+  state: string
+  country: string
+  address: string
+  zipCode: string
+  language: string
+  timeZone: string
+  currency: string
+  organization: string
+  twoFactorAuth: boolean
+  loginAlerts: boolean
+  accountReoveryOption?: "email" | "sms" | "codes"
+  connections: number
+  followers: number
+}
+
+export type DeleteAccountFormType = z.infer<typeof DeleteAccountSchema>
+
+export type ProfileInfoFormType = z.infer<typeof ProfileInfoSchema>