From c5ea047b6adeefed1b5da6add32b827d9fa7589c Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Fri, 9 Jan 2026 22:44:05 +0700
Subject: [PATCH] style(web): complete lucide migration and restore missing
user management imports
---
.../admin/users/UsersManagementClient.tsx | 5 +-
.../certificates/CertificatesClient.tsx | 4 +-
.../certificates/CertificateDetails.tsx | 5 +-
src/components/header/UserDropdown.tsx | 106 +++---------------
src/layout/AppHeader.tsx | 67 ++---------
5 files changed, 34 insertions(+), 153 deletions(-)
diff --git a/src/app/dashboard/admin/users/UsersManagementClient.tsx b/src/app/dashboard/admin/users/UsersManagementClient.tsx
index ad223be..1adf764 100644
--- a/src/app/dashboard/admin/users/UsersManagementClient.tsx
+++ b/src/app/dashboard/admin/users/UsersManagementClient.tsx
@@ -6,13 +6,12 @@ import axios from "@/lib/axios";
import { useTranslations } from "next-intl";
import PageBreadcrumb from "@/components/common/PageBreadCrumb";
import ComponentCard from "@/components/common/ComponentCard";
-import { PlusIcon } from "@/icons";
+import { Edit, Trash, MoreVertical, Shield, User as UserIcon, Mail, Calendar, Search, Plus } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/context/ToastContext";
import Button from "@/components/ui/button/Button";
import ConfirmationModal from "@/components/common/ConfirmationModal";
import UserModal from "@/components/users/UserModal";
-import { Edit, Trash, MoreVertical, Shield, User as UserIcon, Mail, Calendar, Search } from "lucide-react";
import Image from "next/image";
import { getUserAvatar } from "@/lib/utils";
import PageLoader from "@/components/ui/PageLoader";
@@ -138,7 +137,7 @@ export default function UsersManagementClient() {
className="flex items-center gap-2 justify-center w-full sm:w-auto whitespace-nowrap"
onClick={handleAddClick}
>
-
+
{t("add_user")}
)}
diff --git a/src/app/dashboard/certificates/CertificatesClient.tsx b/src/app/dashboard/certificates/CertificatesClient.tsx
index 25d4069..c82d3f5 100644
--- a/src/app/dashboard/certificates/CertificatesClient.tsx
+++ b/src/app/dashboard/certificates/CertificatesClient.tsx
@@ -7,7 +7,7 @@ import PageBreadcrumb from "@/components/common/PageBreadCrumb";
import { useTranslations } from "next-intl";
import ComponentCard from "@/components/common/ComponentCard";
import CertificateTable from "@/components/certificates/CertificateTable";
-import { PlusIcon } from "@/icons";
+import { Plus } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/context/ToastContext";
import Button from "@/components/ui/button/Button";
@@ -97,7 +97,7 @@ export default function CertificatesClient() {
disabled={!caReady}
className={`flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-white transition rounded-lg bg-brand-500 hover:bg-brand-600 ${!caReady ? "opacity-50 cursor-not-allowed" : ""}`}
>
-
+
{t("btn_generate_new")}
}
diff --git a/src/components/certificates/CertificateDetails.tsx b/src/components/certificates/CertificateDetails.tsx
index 8153b5b..ae1e24d 100644
--- a/src/components/certificates/CertificateDetails.tsx
+++ b/src/components/certificates/CertificateDetails.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
import { useTranslations } from "next-intl";
import ComponentCard from "../common/ComponentCard";
import Badge from "../ui/badge/Badge";
-import { CopyIcon, CheckLineIcon, DownloadIcon } from "@/icons";
+import { Copy, Check, Download, Eye, EyeOff } from "lucide-react";
interface Certificate {
uuid: string;
@@ -134,6 +134,7 @@ function PemSection({
onClick={() => setShowSecret(!showSecret)}
className="flex items-center justify-center px-3 py-1.5 text-xs font-medium bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-700 dark:text-gray-300 hover:text-brand-500 dark:hover:text-brand-400 shadow-xs transition-colors"
>
+ {showSecret ? : }
{showSecret ? "Hide" : "Show"}
)}
@@ -142,7 +143,7 @@ function PemSection({
className="flex items-center justify-center p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-700 dark:text-gray-300 hover:text-brand-500 dark:hover:text-brand-400 shadow-xs transition-colors"
title="Copy to Clipboard"
>
- {isCopied ? : }
+ {isCopied ? : }
}
diff --git a/src/components/header/UserDropdown.tsx b/src/components/header/UserDropdown.tsx
index c686666..cd04828 100644
--- a/src/components/header/UserDropdown.tsx
+++ b/src/components/header/UserDropdown.tsx
@@ -7,6 +7,14 @@ import { DropdownItem } from "../ui/dropdown/DropdownItem";
import { useAuth } from "@/hooks/useAuth";
import { getUserAvatar } from "@/lib/utils";
import { useTranslations } from "next-intl";
+import {
+ ChevronDown,
+ User,
+ Settings,
+ Send,
+ LifeBuoy,
+ LogOut
+} from "lucide-react";
export default function UserDropdown() {
const [isOpen, setIsOpen] = useState(false);
@@ -43,24 +51,12 @@ function toggleDropdown(e: React.MouseEvent) {
-
+ size={18}
+ />
) {
href="/dashboard/profile"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
-
+
{t("edit_profile")}
@@ -110,21 +92,7 @@ function toggleDropdown(e: React.MouseEvent) {
href="/dashboard/settings"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
-
+
{t("account_settings")}
@@ -136,19 +104,7 @@ function toggleDropdown(e: React.MouseEvent) {
href="/dashboard/admin/smtp-tester"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
-
+
{t("smtp_tester")}
@@ -160,21 +116,7 @@ function toggleDropdown(e: React.MouseEvent) {
href="/dashboard/support"
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
-
+
{t("support")}
@@ -183,21 +125,7 @@ function toggleDropdown(e: React.MouseEvent) {
onClick={logout}
className="flex w-full items-center gap-3 px-3 py-2 mt-3 font-medium text-gray-700 rounded-lg group text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
>
-
+
{t("sign_out")}
diff --git a/src/layout/AppHeader.tsx b/src/layout/AppHeader.tsx
index c3324b6..b2c40ea 100644
--- a/src/layout/AppHeader.tsx
+++ b/src/layout/AppHeader.tsx
@@ -8,6 +8,12 @@ import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import React, { useState ,useEffect,useRef} from "react";
+import {
+ Menu,
+ X,
+ Search,
+ MoreHorizontal
+} from "lucide-react";
const AppHeader: React.FC = () => {
const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
@@ -53,35 +59,9 @@ const AppHeader: React.FC = () => {
aria-label="Toggle Sidebar"
>
{isMobileOpen ? (
-
+
) : (
-
+
)}
{/* Cross Icon */}
@@ -111,41 +91,14 @@ const AppHeader: React.FC = () => {
onClick={toggleApplicationMenu}
className="flex items-center justify-center w-10 h-10 text-gray-700 rounded-lg z-99999 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 lg:hidden"
>
-
+