Update

- changed auth route from pages to app directory

Small change in Header and CommandComponent
- moved user name and email from header to UserAvatar

Invoices
- started invoice detail view

app/[locale]/(auth)/sign-in/components/LoginComponent.tsx

@@ -106,7 +106,7 @@ export function LoginComponent() {
         });
       }
       if (status?.ok) {
-        console.log("Status OK");
+        // console.log("Status OK");
         toast({
           description: "Login successful.",
         });

app/[locale]/(routes)/components/Feedback.tsx

@@ -14,7 +14,7 @@ const Feedback = () => {
   const [open, setOpen] = useState(false);
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger asChild className="hidden sm:flex">
         <Button variant={"secondary"} onClick={() => setOpen(false)}>
           <ChatBubbleIcon className="w-4 h-4 mr-2" />
           Feedback

app/[locale]/(routes)/components/FulltextSearch.tsx

@@ -23,7 +23,7 @@ const FulltextSearch = () => {
         onChange={(e) => setSearch(e.target.value)}
       />
       <Button type="submit" className="gap-2" onClick={handleSearch}>
-        <span className="hidden md:flex">Search</span>
+        <span className="hidden sm:flex">Search</span>
         <SearchIcon />
       </Button>
     </div>

app/[locale]/(routes)/components/Header.tsx

@@ -1,14 +1,11 @@
-import { CommandComponent } from "@/components/CommandComponent";
+import Feedback from "./Feedback";
+import FulltextSearch from "./FulltextSearch";
 import AvatarDropdown from "./ui/AvatarDropdown";
 
-import { ThemeToggle } from "@/components/ThemeToggle";
 import { Separator } from "@/components/ui/separator";
-
 import { SetLanguage } from "@/components/SetLanguage";
-import FulltextSearch from "./FulltextSearch";
-import Link from "next/link";
-import { GithubIcon } from "lucide-react";
-import Feedback from "./Feedback";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { CommandComponent } from "@/components/CommandComponent";
 
 type Props = {
   id: string;
@@ -30,12 +27,13 @@ const Header = ({ id, name, email, avatar, lang }: Props) => {
           <SetLanguage userId={id} />
           <Feedback />
           <ThemeToggle />
-          <div className="hidden lg:flex flex-col text-xs text-gray-500">
-            <div>{name}</div>
-            <div>{email}</div>
-            <div>Language: {lang}</div>
-          </div>
-          <AvatarDropdown avatar={avatar} userId={id} />
+          <div className="hidden lg:flex flex-col text-xs text-gray-500"></div>
+          <AvatarDropdown
+            avatar={avatar}
+            userId={id}
+            name={name}
+            email={email}
+          />
         </div>
       </div>
       <Separator />

app/[locale]/(routes)/components/ui/AvatarDropdown.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import React from "react";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -9,16 +10,21 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { signOut, useSession } from "next-auth/react";
+import { signOut } from "next-auth/react";
 import Link from "next/link";
-import { Settings } from "lucide-react";
+import { LogOut, Settings } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 type Props = {
   avatar: string;
   userId: string;
+  name: string;
+  email: string;
 };
 
-const AvatarDropdown = ({ avatar, userId }: Props) => {
+const AvatarDropdown = ({ avatar, userId, name, email }: Props) => {
+  const router = useRouter();
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -33,24 +39,29 @@ const AvatarDropdown = ({ avatar, userId }: Props) => {
         </Avatar>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuLabel className="space-y-1">
+          <div>{name}</div>
+          <div className="text-xs text-gray-500">{email}</div>
+        </DropdownMenuLabel>
+
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link href={`/projects/dashboard`}>Todo dashboard</Link>
+        <DropdownMenuItem onClick={() => router.push("/projects/dashboard")}>
+          Todo dashboard
         </DropdownMenuItem>
-        <DropdownMenuItem asChild>
-          <Link href={`/crm/dashboard/${userId}`}>CRM dashboard</Link>
+        <DropdownMenuItem
+          onClick={() => router.push(`/crm/dashboard/${userId}`)}
+        >
+          Sales dashboard
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link href="/profile">
-            <Settings className="w-4 h-4 inline-block mr-2 stroke-current text-gray-500" />
-            Profile
-          </Link>
+        <DropdownMenuItem onClick={() => router.push("/profile")}>
+          <Settings className="w-4 h-4 inline-block mr-2 stroke-current text-gray-500" />
+          <span>Profile settings</span>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <div onClick={() => signOut()}>Sign out</div>
+        <DropdownMenuItem onClick={() => signOut()}>
+          <LogOut className="w-4 h-4 inline-block mr-2 stroke-current text-gray-500" />
+          <span>Sign out</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

app/[locale]/(routes)/invoice/detail/[invoiceId]/page.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Container from "../../../components/ui/Container";
 import { getInvoice } from "@/actions/invoice/get-invoice";
+import { MessageCircle, MessagesSquare } from "lucide-react";
+import InvoiceChat from "../_dialogs/InvoiceChat";
 
 interface InvoiceDetailProps {
   params: { invoiceId: string };
@@ -12,7 +14,24 @@ const InvoiceDetailPage = async ({ params }: InvoiceDetailProps) => {
 
   return (
     <Container title={`Invoice ${invoiceId}`} description="Invoice detail page">
-      <pre>{JSON.stringify(invoiceData, null, 2)}</pre>
+      <div className="flex">
+        <div className="w-1/2">
+          <embed
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+            type="application/pdf"
+            src={invoiceData.invoice_file_url}
+          />
+        </div>
+        <div className="py-2">
+          <InvoiceChat />
+        </div>
+        <div className="w-1/2">
+          <pre>{JSON.stringify(invoiceData, null, 2)}</pre>
+        </div>
+      </div>
     </Container>
   );
 };

app/[locale]/(routes)/invoice/detail/_dialogs/InvoiceChat.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { MessagesSquare } from "lucide-react";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+const InvoiceChat = () => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <MessagesSquare className="w-6 h-6 m-2 cursor-pointer" />
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Invoice conversation</SheetTitle>
+        </SheetHeader>
+        content here - in progress
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default InvoiceChat;

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,7 @@
+import NextAuth from "next-auth";
+
+import { authOptions } from "@/lib/auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

components/CommandComponent.tsx

@@ -37,8 +37,13 @@ export function CommandComponent() {
       if (e.key === "Escape") {
         setOpen(false);
       }
-      if (e.key === "p" && e.metaKey) {
+      if (e.key === "D" && e.metaKey && e.shiftKey) {
+        router.push("/");
+        setOpen(false);
+      }
+      if (e.key === "P" && e.metaKey && e.shiftKey) {
         router.push("/profile");
+        setOpen(false);
       }
       if (e.key === "k" && e.metaKey) {
         signOut();
@@ -47,7 +52,7 @@ export function CommandComponent() {
 
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
-  }, []);
+  }, [router]);
 
   return (
     <div className="hidden lg:block">
@@ -77,10 +82,15 @@ export function CommandComponent() {
           </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading="Settings">
+            <CommandItem onClick={() => redirect("/")}>
+              <User className="mr-2 h-4 w-4" />
+              <span>Dashboard</span>
+              <CommandShortcut>Shift + ⌘ + D</CommandShortcut>
+            </CommandItem>
             <CommandItem onClick={() => redirect("/profile")}>
               <User className="mr-2 h-4 w-4" />
               <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
+              <CommandShortcut>Shift + ⌘ + P</CommandShortcut>
             </CommandItem>
             <CommandItem>
               <CreditCard className="mr-2 h-4 w-4" />