Merge pull request #465 from mit-27/ui-enhancement

Add success Dialog and UI improvment
panoratech · Jun 13, 2024 · 2404597 · 2404597
2 parents 8dd2c06 + 34531fc
commit 2404597
Show file tree

Hide file tree

Showing 21 changed files with 584 additions and 129 deletions.
diff --git a/apps/client-ts/src/app/b2c/login/page.tsx b/apps/client-ts/src/app/b2c/login/page.tsx
@@ -54,9 +54,11 @@ export default function Page() {
         {!userInitialized ? 
         (
             <div className='min-h-screen grid lg:grid-cols-2 mx-auto text-left'>
-                <div className='flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24'>
+                <div className='flex-1 flex flex-col py-12 sm:items-center lg:flex-none lg:px-20 xl:px-24'>
+                    <div className="w-[400px]">
                     <img src="/logo.png" className='w-14' /> 
-                    <Tabs defaultValue="login" className="w-[400px]">
+                    </div>
+                    <Tabs defaultValue="login" className="w-[400px] space-y-4">
                         <TabsList className="grid w-full grid-cols-2">
                             <TabsTrigger value="login">Login</TabsTrigger>
                             <TabsTrigger value="create">Create Account</TabsTrigger>

diff --git a/apps/client-ts/src/app/layout.tsx b/apps/client-ts/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
       <body className={`${inter.className} overflow-hidden`}>
         <ThemeProvider
         attribute="class"
-        defaultTheme="light"
+        defaultTheme="system"
         enableSystem
         disableTransitionOnChange
         >

diff --git a/apps/client-ts/src/components/Configuration/LinkedUsers/columns.tsx b/apps/client-ts/src/components/Configuration/LinkedUsers/columns.tsx
@@ -2,20 +2,48 @@ import { ColumnDef } from "@tanstack/react-table";
 import { ColumnLU } from "./schema";
 import { DataTableColumnHeader } from "@/components/shared/data-table-column-header";
 import { Badge } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "sonner";
+
+
+const LinkedUserIdComponent = ({ row } : {row:any}) => { 
+
+  const handleCopyLinkedUserId = () => {
+    navigator.clipboard.writeText(row.getValue("linked_user_id"));
+    toast.success("LinkedUser ID copied!", {
+        action: {
+          label: "Close",
+          onClick: () => console.log("Close"),
+        },
+      })
+  };
+
+  return (
+        <div className="cursor-pointer" onClick={handleCopyLinkedUserId}>
+        <TooltipProvider delayDuration={0}>
+            <Tooltip>
+            <TooltipTrigger>
+              <Badge variant="outline" >
+                {row.getValue("linked_user_id")}
+                </Badge>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p className="text-sm">Copy</p>
+            </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+        </div>
+  )
+}
+
 
 export const columns: ColumnDef<ColumnLU>[] = [
     {
       accessorKey: "linked_user_id",
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Linked User Id" />
       ),
-      cell: ({ row }) =>{ 
-        return (
-          <div className="">
-            <Badge variant="outline">{row.getValue("linked_user_id")}</Badge>
-          </div>
-        )
-      },
+      cell: LinkedUserIdComponent,
       enableSorting: false,
       enableHiding: false,
     },

diff --git a/apps/client-ts/src/components/Nav/main-nav-sm.tsx b/apps/client-ts/src/components/Nav/main-nav-sm.tsx
@@ -11,6 +11,13 @@ import {
 import { MenuIcon } from "lucide-react"
 import { useState } from "react"
 import Link from "next/link"
+import { useTheme } from 'next-themes';
+import {User,LogOut} from 'lucide-react';
+import { useRouter } from "next/navigation";
+import Cookies from 'js-cookie';
+import useProjectStore from "@/state/projectStore";
+import { useQueryClient } from '@tanstack/react-query';
+import useProfileStore from "@/state/profileStore";
 
 
 export function SmallNav({ 
@@ -19,7 +26,12 @@ export function SmallNav({
   onLinkClick: (name: string) => void
 }) {
   const [selectedItem, setSelectedItem] = useState<string>("dashboard");
+  const router = useRouter();
+  const { profile, setProfile } = useProfileStore();
+  const { setIdProject } = useProjectStore();
+  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
+  const { theme } = useTheme()
   const navItemClassName = (itemName: string) =>
     `text-sm border-b font-medium w-full text-left mx-0 py-2 dark:hover:bg-zinc-900 hover:bg-zinc-200 cursor-pointer ${
     selectedItem === itemName ? "dark:bg-zinc-800 bg-zinc-200" : "text-muted-foreground"
@@ -30,6 +42,15 @@ export function SmallNav({
     onLinkClick(name);
     setOpen(false);
   }
+
+  const onLogout = () => {
+    router.push('/b2c/login')
+    Cookies.remove("access_token")
+    setProfile(null)
+    setIdProject("")
+    queryClient.clear()
+  }
+
   return (
     <div className="flex flex-row mx-0 px-0">
       <Sheet key={"left"} open={open} onOpenChange={setOpen}>
@@ -39,26 +60,15 @@ export function SmallNav({
         <SheetContent side={"left"} className="p-0  w-[200px]">
           <SheetHeader className="flex items-center">
             <SheetTitle className="mx-4 my-4">
-              <Link href="/" className="flex flex-row items-center" onClick={() => setOpen(false)}>
-                <img src="./../../../../public/logo.png" className="w-10 mr-1"/><span className="font-bold">Panora.</span>
+              <Link href="/" className="flex flex-row" onClick={() => setOpen(false)}>
+                {theme == "light" ? <img src="/logo-panora-black.png" className='w-12' /> : <img src="/logo-panora-white-hq.png" className='w-12' />}
+
               </Link>
             </SheetTitle>
           </SheetHeader>
           <nav
               className={`flex flex-col items-start mt-6`}
             >
-            {/*<a
-                className={navItemClassName('quickstart')}
-                onClick={() => click('quickstart')}
-              >
-                <p className="mx-4">Quick Start</p>
-              </a>
-              <a
-                className={navItemClassName('dashboard')}
-                onClick={() => click('dashboard')}
-              >
-                <p className="mx-4">Dashboard</p>
-              </a>*/}
             <a
                 className={navItemClassName('connections')}
                 onClick={() => click('connections')}
@@ -93,6 +103,20 @@ export function SmallNav({
               <p className="mx-4">Docs</p>
               <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
             </a>
+            <a
+                className={`${navItemClassName('b2c/profile')} flex gap-2 px-4`}
+                onClick={() => click('b2c/profile')}
+              >
+              <User className="h-4 w-4" />
+              <p className="">Profile</p>
+            </a>
+            <a
+                className={`${navItemClassName('log-out')} px-4 flex gap-2`}
+                onClick={() => onLogout()}
+              >
+              <LogOut className="h-4 w-4" />
+              <p className="">Log Out</p>
+            </a>
           </nav>
         </SheetContent>
       </Sheet>

diff --git a/apps/client-ts/src/components/Nav/main-nav.tsx b/apps/client-ts/src/components/Nav/main-nav.tsx
@@ -19,7 +19,7 @@ export function MainNav({
   }, [pathname])
 
   const navItemClassName = (itemName: string) =>
-    `group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground cursor-pointer ${
+    `group flex items-center rounded-md px-2 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground cursor-pointer ${
     selectedItem === itemName ? 'bg-accent' : 'transparent'
   } transition-colors`;
 
@@ -63,7 +63,7 @@ export function MainNav({
         target="_blank"
         rel="noopener noreferrer"
       >
-        <p className="pr-2">Documentation</p> 
+        <p className="pr-2">Docs</p> 
         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
       </a>
     </nav>

diff --git a/apps/client-ts/src/components/Nav/user-nav.tsx b/apps/client-ts/src/components/Nav/user-nav.tsx
@@ -6,25 +6,36 @@ import {
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import useProfileStore from "@/state/profileStore";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import Cookies from 'js-cookie';
-import useProjectStore from "@/state/projectStore"
+import useProjectStore from "@/state/projectStore";
 import { useQueryClient } from '@tanstack/react-query';
+import {User,LogOut,SunMoon,Sun,Moon,Monitor} from 'lucide-react';
+import {DotsHorizontalIcon} from '@radix-ui/react-icons';
+import { useTheme } from "next-themes";
+
 
 export function UserNav() {
   const router = useRouter();
   const { profile, setProfile } = useProfileStore();
   const { setIdProject } = useProjectStore();
   const queryClient = useQueryClient();
+  const { setTheme,theme } = useTheme();
+  // const [currentTheme,SetCurrentTheme] = useState(theme)
 
   const onLogout = () => {
     router.push('/b2c/login')
@@ -36,37 +47,79 @@ export function UserNav() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-          <Avatar className="h-8 w-8">
+        {/* <Button variant="ghost" className="relative h-8 w-8 rounded-full"> */}
+          <div className="flex p-3 hover:bg-accent items-center gap-4">
+          <Avatar className="h-8 w-8 rounded-full">
             <AvatarImage src="/avatars/01.png" alt="@shadcn" />
             <AvatarFallback>SC</AvatarFallback>
           </Avatar>
-        </Button>
+          <p className="text-sm">
+          {profile ? `${profile.first_name} ${profile.last_name}` : ""}
+          </p>
+          <DotsHorizontalIcon className="ml-auto mr-2"/>
+
+          </div>
+        {/* </Button> */}
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56 ml-10" align="end" forceMount>
-        <DropdownMenuLabel className="font-normal">
+      <DropdownMenuContent className="w-56" align="center" forceMount>
+        {/* <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-xs leading-none text-muted-foreground">
             {profile ? profile.email || profile.first_name : "No profile found"}
             </p>
           </div>
-        </DropdownMenuLabel>
-        <DropdownMenuGroup>
+        </DropdownMenuLabel> */}
+        {/* <DropdownMenuGroup> */}
           <Link href={"/b2c/profile"}>
             <DropdownMenuItem>
-              Profile
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
             </DropdownMenuItem>
           </Link>
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <SunMoon className="mr-2 h-4 w-4" />
+              <span>Theme</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuCheckboxItem
+                checked={theme==="light"}
+                onCheckedChange={() => setTheme("light")}
+                >
+                  <Sun className="mr-2 h-4 w-4" />
+                  <span>Light</span>
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                checked={theme==="dark"}
+                onCheckedChange={() => setTheme("dark")}
+                >
+                  <Moon className="mr-2 h-4 w-4" />
+                  <span>Dark</span>
+                </DropdownMenuCheckboxItem>
+                <DropdownMenuCheckboxItem
+                checked={theme==="system"}
+                onCheckedChange={() => setTheme("system")}
+                >
+                  <Monitor className="mr-2 h-4 w-4" />
+                  <span>System</span>
+                </DropdownMenuCheckboxItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+
           {/*<DropdownMenuItem>
             Billing
           </DropdownMenuItem>
           <DropdownMenuItem>
             Settings
       </DropdownMenuItem>*/}
-        </DropdownMenuGroup>
+        {/* </DropdownMenuGroup> */}
         <DropdownMenuSeparator />
             <DropdownMenuItem onClick={() => onLogout()} >
-            Log out
+            <LogOut className="mr-2 h-4 w-4" />
+            <span>Log Out</span>
             </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>