Merge dev to main

.github/workflows/main.yml

@@ -0,0 +1,23 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+  VITE_API_URL: ${{ secrets.VITE_API_URL }}
+  STRIPE_PUBLIC_KEY: ${{ secrets.STRIPE_PUBLIC_KEY }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -26,3 +26,5 @@ dist-ssr
 #env
 .env
 .vercel
+
+.agent

package.json

@@ -45,13 +45,16 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.23.22",
+    "i18next": "^26.0.3",
+    "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^0.541.0",
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-big-calendar": "^1.19.4",
     "react-day-picker": "^9.11.1",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.65.0",
+    "react-i18next": "^17.0.2",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.8.2",
     "react-slick": "^0.31.0",

src/components/DynamicBreadcrumb.tsx

@@ -21,11 +21,14 @@ function formatPath(path: string) {
     .replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
+import { useTranslation } from "react-i18next";
+
 export default function DynamicBreadcrumbs({
   pathTitles,
   hasPage = true,
   ignorePaths = [],
 }: Props) {
+  const { t } = useTranslation();
   const location = useLocation();
   const paths = location.pathname
     .split("/")
@@ -48,15 +51,15 @@ export default function DynamicBreadcrumbs({
               <BreadcrumbItem>
                 {isLast || !hasPage ? (
                   <BreadcrumbPage className="font-medium ml-4 text-xs lg:text-2xl md:text-sm font-inter">
-                    {title}
+                    {t(title)}
                   </BreadcrumbPage>
                 ) : (
                   <BreadcrumbLink asChild>
                     <Link
                       to={href}
                       className="font-medium text-xs ml-4 lg:text-2xl md:text-sm font-inter"
                     >
-                      {title}
+                      {t(title)}
                     </Link>
                   </BreadcrumbLink>
                 )}

src/components/layout/LanguageSwitcher.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Globe } from "lucide-react";
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  const handleLanguageChange = (value: string) => {
+    i18n.changeLanguage(value);
+  };
+
+  return (
+    <Select value={i18n.language} onValueChange={handleLanguageChange}>
+      <SelectTrigger className="w-[140px] h-8 border-none bg-transparent hover:bg-accent/50 transition-colors">
+        <div className="flex items-center gap-2">
+          <Globe className="h-4 w-4" />
+          <SelectValue placeholder="Language" />
+        </div>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="en">
+          <span className="flex items-center gap-2">
+            <span className="text-xs">🇺🇸</span> English
+          </span>
+        </SelectItem>
+        <SelectItem value="vi">
+          <span className="flex items-center gap-2">
+            <span className="text-xs">🇻🇳</span> Tiếng Việt
+          </span>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}

src/components/side-bar/AppSideBar.tsx

@@ -34,6 +34,7 @@ import {
   technicianItems,
   staffItems,
 } from "./sidebarItems";
+import { useTranslation } from "react-i18next";
 
 const getMenuItems = (role: AccountRole) => {
   switch (role) {
@@ -52,6 +53,7 @@ const getMenuItems = (role: AccountRole) => {
 
 // ----------------- SIDEBAR COMPONENT -----------------
 export function AppSidebar() {
+  const { t } = useTranslation();
   const { auth } = useAuth();
   const role = auth.user?.role;
   const { resolvedTheme } = useTheme();
@@ -138,7 +140,7 @@ export function AppSidebar() {
                               {effectiveCollapsed ? (
                                 <TooltipWrapper
                                   side="right"
-                                  content={item.title}
+                                  content={t(item.title)}
                                 >
                                   <div className={clsx("mx-auto")}>
                                     <item.icon className="h-5 w-5" />
@@ -147,7 +149,7 @@ export function AppSidebar() {
                               ) : (
                                 <>
                                   <item.icon className="h-5 w-5" />
-                                  <span>{item.title}</span>
+                                  <span>{t(item.title)}</span>
                                   <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                                 </>
                               )}
@@ -172,7 +174,7 @@ export function AppSidebar() {
                                   >
                                     <SidebarMenuButton className="!bg-transparent outline-0 flex">
                                       <child.icon className="h-5 w-5" />
-                                      <span>{child.title}</span>
+                                      <span>{t(child.title)}</span>
                                     </SidebarMenuButton>
                                   </NavLink>
                                 ))}
@@ -197,15 +199,15 @@ export function AppSidebar() {
                       >
                         <SidebarMenuButton className="!bg-transparent outline-0 flex">
                           {effectiveCollapsed ? (
-                            <TooltipWrapper side="right" content={item.title}>
+                            <TooltipWrapper side="right" content={t(item.title)}>
                               <div className="mx-auto">
                                 <item.icon className="h-5 w-5" />
                               </div>
                             </TooltipWrapper>
                           ) : (
                             <>
                               <item.icon className="h-5 w-5" />
-                              <span>{item.title}</span>
+                              <span>{t(item.title)}</span>
                             </>
                           )}
                         </SidebarMenuButton>
@@ -235,7 +237,7 @@ export function AppSidebar() {
           {({ isActive }) => (
             <div>
               {effectiveCollapsed ? (
-                <TooltipWrapper content="View Profile" side="right">
+                <TooltipWrapper content={t("sidebar.view_profile")} side="right">
                   <CircleUserRound
                     className={clsx(isActive && "dark:text-amber-primary")}
                   />
@@ -251,7 +253,7 @@ export function AppSidebar() {
                       isActive && "dark:text-amber-primary",
                     )}
                   >
-                    {auth.user?.role === AccountRole.ADMIN && "Admin"}
+                    {auth.user?.role === AccountRole.ADMIN && t("sidebar.role.admin")}
                     {auth.user?.role !== AccountRole.ADMIN &&
                       auth.user?.profile?.firstName +
                         " " +