UI changes
This commit is contained in:
@ -1,7 +1,14 @@
|
||||
import { signOut } from "next-auth/react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Image from "next/image";
|
||||
import { Button } from "~/components/ui/shadcn/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/shadcn/dropdown-menu";
|
||||
|
||||
export default function Sign_Out() {
|
||||
const { data: session } = useSession();
|
||||
@ -9,17 +16,30 @@ export default function Sign_Out() {
|
||||
return <div/>;
|
||||
} else {
|
||||
const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
|
||||
const name = session?.user?.name ? session.user.name : "Profile";
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<Image src={pfp} alt="" width={35} height={35}
|
||||
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
|
||||
max-w-[25px] md:max-w-[35px]"
|
||||
/>
|
||||
<Button onClick={() => signOut()} variant="secondary"
|
||||
className="w-full p-2 rounded-xl text-sm md:text-lg"
|
||||
>
|
||||
Sign Out
|
||||
</Button>
|
||||
<div className="m-auto mt-1">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Image src={pfp} alt="" width={35} height={35}
|
||||
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
|
||||
max-w-[25px] md:max-w-[35px]"
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuLabel>
|
||||
{name}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<button onClick={() => signOut()}
|
||||
className="w-full"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import Image from "next/image";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
@ -22,66 +25,68 @@ import {
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "~/components/ui/shadcn/pagination";
|
||||
//import { Button } from "~/components/ui/shadcn/button";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function History_Drawer() {
|
||||
//const
|
||||
return (
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>
|
||||
<div className="flex flex-row items-center text-center
|
||||
sm:justify-center sm:ml-0 py-4">
|
||||
<Image src="/images/tech_tracker_logo.png"
|
||||
alt="Tech Tracker Logo" width={60} height={60}
|
||||
className="max-w-[40px] md:max-w-[120px]"
|
||||
/>
|
||||
<h1 className="title-text text-sm md:text-2xl lg:text-6xl
|
||||
bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
|
||||
font-bold pl-2 md:pl-4 text-transparent bg-clip-text">
|
||||
History
|
||||
</h1>
|
||||
</div>
|
||||
</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<Table className="w-5/6 lg:w-1/2 m-auto"
|
||||
>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="">Name</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Updated At</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">INV001</TableCell>
|
||||
<TableCell>Paid</TableCell>
|
||||
<TableCell>Credit Card</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<DrawerFooter>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="#" />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
<DrawerClose>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
);
|
||||
<Drawer>
|
||||
<DrawerTrigger>
|
||||
Status
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>
|
||||
<div className="flex flex-row items-center text-center
|
||||
sm:justify-center sm:ml-0 py-4">
|
||||
<Image src="/images/tech_tracker_logo.png"
|
||||
alt="Tech Tracker Logo" width={60} height={60}
|
||||
className="max-w-[40px] md:max-w-[120px]"
|
||||
/>
|
||||
<h1 className="title-text text-sm md:text-2xl lg:text-6xl
|
||||
bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
|
||||
font-bold pl-2 md:pl-4 text-transparent bg-clip-text">
|
||||
History
|
||||
</h1>
|
||||
</div>
|
||||
</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<Table className="w-5/6 lg:w-1/2 m-auto"
|
||||
>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="">Name</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Updated At</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell className="font-medium">INV001</TableCell>
|
||||
<TableCell>Paid</TableCell>
|
||||
<TableCell>Credit Card</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<DrawerFooter>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="#" />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
<DrawerClose>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
@ -7,31 +7,24 @@ export default function No_Session() {
|
||||
return (
|
||||
<main className="w-full min-h-screen mx-auto text-center pt-2 md:pt-10
|
||||
bg-gradient-to-b from-[#111111] to-[#212325]">
|
||||
<div className="w-2/3 pt-4 pb-2 md:pt-8 md:pb-4 m-auto">
|
||||
<div className="md:w-2/3 pt-4 pb-2 md:pt-10 md:pb-4 m-auto">
|
||||
< Header />
|
||||
</div>
|
||||
< Sign_In />
|
||||
<div className="w-5/6 mx-auto flex flex-col">
|
||||
<h3 className="text-center text-[16px] md:text-lg italic pt-4">
|
||||
You must have a Gulfport Microsoft 365 Account to sign in.
|
||||
</h3>
|
||||
<Link href="https://authjs.dev/getting-started/providers/microsoft-entra-id"
|
||||
className="text-center text-[16px] md:text-lg italic pt-4 pb-4 text-sky-200
|
||||
hover:text-sky-300"
|
||||
>
|
||||
Tech Tracker uses Auth.js and Microsoft Entra ID for Authentication
|
||||
</Link>
|
||||
<div className="mx-auto flex flex-col">
|
||||
<div className="py-4">
|
||||
< Sign_In />
|
||||
</div>
|
||||
<Link href="https://git.gibbyb.com/gib/Tech_Tracker_Web"
|
||||
className="text-center text-[16px] md:text-lg px-4 py-2 md:py-2.5 font-semibold
|
||||
bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl hover:text-sky-200
|
||||
hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]
|
||||
mx-auto flex flex-row mt-4"
|
||||
mx-auto flex flex-row"
|
||||
>
|
||||
<Image src="/images/gitea_logo.svg" alt="Gitea" width={35} height={35}
|
||||
className="mr-2"
|
||||
/>
|
||||
<h3 className="my-auto">View Source Code</h3>
|
||||
</Link>
|
||||
<Image src="/images/gitea_logo.svg" alt="Gitea" width={35} height={35}
|
||||
className="mr-2"
|
||||
/>
|
||||
<h3 className="my-auto">Source Code</h3>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -3,7 +3,6 @@ import { useState, useEffect, useCallback } from 'react';
|
||||
import { useSession } from "next-auth/react";
|
||||
import Loading from "~/components/ui/Loading";
|
||||
import { useTVMode } from "~/components/context/TVModeContext";
|
||||
import { Drawer, DrawerTrigger } from "~/components/ui/shadcn/drawer";
|
||||
import History_Drawer from "~/components/ui/History_Drawer";
|
||||
|
||||
type Employee = {
|
||||
@ -168,10 +167,7 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
|
||||
)}
|
||||
<th className="border border-[#3e4446] py-3">Name</th>
|
||||
<th className="border border-[#3e4446] py-3">
|
||||
<Drawer>
|
||||
<DrawerTrigger>Status</DrawerTrigger>
|
||||
<History_Drawer />
|
||||
</Drawer>
|
||||
<History_Drawer />
|
||||
</th>
|
||||
<th className="border border-[#3e4446] py-3">Updated At</th>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user