Merge branch 'develop' into 'staging'

Develop

See merge request !24

src/app/(auth)/layout.tsx

 import React from "react";
 import Link from "next/link";
-import { Bot } from "lucide-react";
+import Image from "next/image";
 import { ThemeToggle } from "@/components/common/theme-toggle";
 import { LanguageToggle } from "@/components/common/language-toggle";
 
@@ -19,10 +19,17 @@ export default function AuthLayout({
       <header className="flex w-full items-center justify-between">
         <Link
           href="/"
-          className="flex items-center gap-2.5 transition-opacity hover:opacity-90"
+          className="flex items-center gap-2.5 transition-opacity hover:opacity-90 group"
         >
-          <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-700 shadow-md shadow-emerald-500/20 text-white">
-            <Bot className="h-5 w-5" />
+          <div className="relative flex h-9 w-9 items-center justify-center rounded-2xl overflow-hidden shadow-md shadow-emerald-500/20 bg-emerald-500/10 border border-emerald-500/20 group-hover:scale-105 transition-transform duration-200">
+            <Image
+              src="/logo.png"
+              alt="DataCrawler Logo"
+              width={36}
+              height={36}
+              className="h-full w-full object-contain p-0.5"
+              priority
+            />
           </div>
           <span className="font-bold text-base tracking-tight text-foreground">
             DataCrawler

src/app/layout.tsx

@@ -21,6 +21,13 @@ export const metadata: Metadata = {
   },
   description:
     "Hệ thống quản lý và giám sát tác vụ cào dữ liệu web realtime, tích hợp Next.js, TanStack Query, React Hook Form và Tailwind CSS.",
+  icons: {
+    icon: [
+      { url: "/logo.png", type: "image/png" },
+    ],
+    shortcut: "/logo.png",
+    apple: "/logo.png",
+  },
 };
 
 export default function RootLayout({

src/components/common/navbar.tsx

@@ -2,8 +2,9 @@
 
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { Activity, Bot, Calendar, Download, FileCode2, Globe } from "lucide-react";
+import { Activity, Calendar, Download, FileCode2, Globe } from "lucide-react";
 import { ThemeToggle } from "./theme-toggle";
 import { LanguageToggle } from "./language-toggle";
 import { UserMenu } from "./user-menu";
@@ -23,9 +24,16 @@ export function Navbar() {
     <header className="sticky top-0 z-40 w-full border-b border-border/70 bg-card/80 backdrop-blur-md transition-colors duration-200">
       <div className="flex h-16 w-full items-center justify-between px-4 sm:px-6 lg:px-8">
         {/* Brand */}
-        <Link href="/" className="flex items-center gap-3 transition-opacity hover:opacity-90">
-          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-700 shadow-md shadow-emerald-500/20">
-            <Bot className="h-6 w-6 text-white" />
+        <Link href="/" className="flex items-center gap-2.5 transition-opacity hover:opacity-90 group">
+          <div className="relative flex h-10 w-10 items-center justify-center rounded-2xl overflow-hidden shadow-md shadow-emerald-500/20 bg-emerald-500/10 border border-emerald-500/20 group-hover:scale-105 transition-transform duration-200">
+            <Image
+              src="/logo.png"
+              alt="DataCrawler Logo"
+              width={40}
+              height={40}
+              className="h-full w-full object-contain p-1"
+              priority
+            />
           </div>
           <span className="font-bold text-lg tracking-tight text-foreground">DataCrawler</span>
         </Link>

src/components/common/not-found-client.tsx

@@ -2,8 +2,9 @@
 
 import React, { useEffect } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { Compass, Home, Bot } from "lucide-react";
+import { Compass, Home } from "lucide-react";
 import { useLanguage } from "@/providers/language-provider";
 import { ThemeToggle } from "@/components/common/theme-toggle";
 import { LanguageToggle } from "@/components/common/language-toggle";
@@ -81,10 +82,17 @@ export function NotFoundClient() {
         <header className="flex w-full items-center justify-between">
           <Link
             href="/"
-            className="flex items-center gap-2.5 transition-opacity hover:opacity-90"
+            className="flex items-center gap-2.5 transition-opacity hover:opacity-90 group"
           >
-            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-700 shadow-md shadow-emerald-500/20 text-white">
-              <Bot className="h-5 w-5" />
+            <div className="relative flex h-9 w-9 items-center justify-center rounded-2xl overflow-hidden shadow-md shadow-emerald-500/20 bg-emerald-500/10 border border-emerald-500/20 group-hover:scale-105 transition-transform duration-200">
+              <Image
+                src="/logo.png"
+                alt="DataCrawler Logo"
+                width={36}
+                height={36}
+                className="h-full w-full object-contain p-0.5"
+                priority
+              />
             </div>
             <span className="font-bold text-base tracking-tight text-foreground">
               DataCrawler

src/lib/web-notifications.ts

@@ -90,7 +90,7 @@ export function notifyJobCompletion({
 
     const notification = new Notification(finalTitle, {
       body: finalBody,
-      icon: "/favicon.ico",
+      icon: "/logo.png",
       tag: `crawl-job-completed-${jobId}`,
     });