gib/Tech_Tracker_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI changes

Browse Source
This commit is contained in:
Gabriel Brown 2024-07-23 23:46:27 -05:00
parent 03551be949
commit 0a29b9f3c8
9 changed files with 3715 additions and 4488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.prod/update.sh Normal file → Executable file
View File

12
package.json
View File

@ -43,7 +43,7 @@
"next-themes": "^0.3.0", "next-themes": "^0.3.0",
"pm2": "^5.4.2", "pm2": "^5.4.2",
"react": "^18.3.1", "react": "^18.3.1",
"react-day-picker": "^9.0.2", "react-day-picker": "^9.0.3",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-hook-form": "^7.52.1", "react-hook-form": "^7.52.1",
"server-only": "^0.0.1", "server-only": "^0.0.1",
@ -55,12 +55,12 @@
"zod": "^3.23.8" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@types/eslint": "^8.56.10", "@types/eslint": "^8.56.11",
"@types/node": "^20.14.11", "@types/node": "^20.14.12",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.16.1", "@typescript-eslint/eslint-plugin": "^7.17.0",
"@typescript-eslint/parser": "^7.16.1", "@typescript-eslint/parser": "^7.17.0",
"drizzle-kit": "^0.21.4", "drizzle-kit": "^0.21.4",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-config-next": "^14.2.5", "eslint-config-next": "^14.2.5",
@ -69,7 +69,7 @@
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.5",
"tailwindcss": "^3.4.6", "tailwindcss": "^3.4.6",
"typescript": "^5.5.3" "typescript": "^5.5.4"
}, },
"ct3aMetadata": { "ct3aMetadata": {
"initVersion": "7.36.1" "initVersion": "7.36.1"

7987
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

BIN
public/images/tech_tracker_appicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 98 KiB

42
src/components/auth/client/Sign_Out.tsx
View File

@ -1,7 +1,14 @@
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import Image from "next/image"; 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() { export default function Sign_Out() {
const { data: session } = useSession(); const { data: session } = useSession();
@ -9,17 +16,30 @@ export default function Sign_Out() {
return <div/>; return <div/>;
} else { } else {
const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png"; const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
const name = session?.user?.name ? session.user.name : "Profile";
return ( return (
<div className="flex flex-row"> <div className="m-auto mt-1">
<Image src={pfp} alt="" width={35} height={35} <DropdownMenu>
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2 <DropdownMenuTrigger>
max-w-[25px] md:max-w-[35px]" <Image src={pfp} alt="" width={35} height={35}
/> className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
<Button onClick={() => signOut()} variant="secondary" max-w-[25px] md:max-w-[35px]"
className="w-full p-2 rounded-xl text-sm md:text-lg" />
> </DropdownMenuTrigger>
Sign Out <DropdownMenuContent>
</Button> <DropdownMenuLabel>
{name}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<button onClick={() => signOut()}
className="w-full"
>
Sign Out
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div> </div>
); );
} }

123
src/components/ui/History_Drawer.tsx
View File

@ -1,4 +1,7 @@
import Image from "next/image";
import { import {
Drawer,
DrawerTrigger,
DrawerClose, DrawerClose,
DrawerContent, DrawerContent,
DrawerFooter, DrawerFooter,
@ -22,66 +25,68 @@ import {
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
} from "~/components/ui/shadcn/pagination"; } from "~/components/ui/shadcn/pagination";
//import { Button } from "~/components/ui/shadcn/button";
import Image from "next/image";
export default function History_Drawer() { export default function History_Drawer() {
//const
return ( return (
<DrawerContent> <Drawer>
<DrawerHeader> <DrawerTrigger>
<DrawerTitle> Status
<div className="flex flex-row items-center text-center </DrawerTrigger>
sm:justify-center sm:ml-0 py-4"> <DrawerContent>
<Image src="/images/tech_tracker_logo.png" <DrawerHeader>
alt="Tech Tracker Logo" width={60} height={60} <DrawerTitle>
className="max-w-[40px] md:max-w-[120px]" <div className="flex flex-row items-center text-center
/> sm:justify-center sm:ml-0 py-4">
<h1 className="title-text text-sm md:text-2xl lg:text-6xl <Image src="/images/tech_tracker_logo.png"
bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7] alt="Tech Tracker Logo" width={60} height={60}
font-bold pl-2 md:pl-4 text-transparent bg-clip-text"> className="max-w-[40px] md:max-w-[120px]"
History />
</h1> <h1 className="title-text text-sm md:text-2xl lg:text-6xl
</div> bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
</DrawerTitle> font-bold pl-2 md:pl-4 text-transparent bg-clip-text">
</DrawerHeader> History
<Table className="w-5/6 lg:w-1/2 m-auto" </h1>
> </div>
<TableHeader> </DrawerTitle>
<TableRow> </DrawerHeader>
<TableHead className="">Name</TableHead> <Table className="w-5/6 lg:w-1/2 m-auto"
<TableHead>Status</TableHead> >
<TableHead>Updated At</TableHead> <TableHeader>
</TableRow> <TableRow>
</TableHeader> <TableHead className="">Name</TableHead>
<TableBody> <TableHead>Status</TableHead>
<TableRow> <TableHead>Updated At</TableHead>
<TableCell className="font-medium">INV001</TableCell> </TableRow>
<TableCell>Paid</TableCell> </TableHeader>
<TableCell>Credit Card</TableCell> <TableBody>
</TableRow> <TableRow>
</TableBody> <TableCell className="font-medium">INV001</TableCell>
</Table> <TableCell>Paid</TableCell>
<DrawerFooter> <TableCell>Credit Card</TableCell>
<Pagination> </TableRow>
<PaginationContent> </TableBody>
<PaginationItem> </Table>
<PaginationPrevious href="#" /> <DrawerFooter>
</PaginationItem> <Pagination>
<PaginationItem> <PaginationContent>
<PaginationLink href="#">1</PaginationLink> <PaginationItem>
</PaginationItem> <PaginationPrevious href="#" />
<PaginationItem> </PaginationItem>
<PaginationEllipsis /> <PaginationItem>
</PaginationItem> <PaginationLink href="#">1</PaginationLink>
<PaginationItem> </PaginationItem>
<PaginationNext href="#" /> <PaginationItem>
</PaginationItem> <PaginationEllipsis />
</PaginationContent> </PaginationItem>
</Pagination> <PaginationItem>
<DrawerClose> <PaginationNext href="#" />
</DrawerClose> </PaginationItem>
</DrawerFooter> </PaginationContent>
</DrawerContent> </Pagination>
); <DrawerClose>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
);
}; };

29
src/components/ui/No_Session.tsx
View File

@ -7,31 +7,24 @@ export default function No_Session() {
return ( return (
<main className="w-full min-h-screen mx-auto text-center pt-2 md:pt-10 <main className="w-full min-h-screen mx-auto text-center pt-2 md:pt-10
bg-gradient-to-b from-[#111111] to-[#212325]"> 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 /> < Header />
</div> </div>
< Sign_In /> <div className="mx-auto flex flex-col">
<div className="w-5/6 mx-auto flex flex-col"> <div className="py-4">
<h3 className="text-center text-[16px] md:text-lg italic pt-4"> < Sign_In />
You must have a Gulfport Microsoft 365 Account to sign in. </div>
</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>
<Link href="https://git.gibbyb.com/gib/Tech_Tracker_Web" <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 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 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] 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} <Image src="/images/gitea_logo.svg" alt="Gitea" width={35} height={35}
className="mr-2" className="mr-2"
/> />
<h3 className="my-auto">View Source Code</h3> <h3 className="my-auto">Source Code</h3>
</Link> </Link>
</div> </div>
</main> </main>
); );

6
src/components/ui/Tech_Table.tsx
View File

@ -3,7 +3,6 @@ import { useState, useEffect, useCallback } from 'react';
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import Loading from "~/components/ui/Loading"; import Loading from "~/components/ui/Loading";
import { useTVMode } from "~/components/context/TVModeContext"; import { useTVMode } from "~/components/context/TVModeContext";
import { Drawer, DrawerTrigger } from "~/components/ui/shadcn/drawer";
import History_Drawer from "~/components/ui/History_Drawer"; import History_Drawer from "~/components/ui/History_Drawer";
type Employee = { 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">Name</th>
<th className="border border-[#3e4446] py-3"> <th className="border border-[#3e4446] py-3">
<Drawer> <History_Drawer />
<DrawerTrigger>Status</DrawerTrigger>
<History_Drawer />
</Drawer>
</th> </th>
<th className="border border-[#3e4446] py-3">Updated At</th> <th className="border border-[#3e4446] py-3">Updated At</th>
</tr> </tr>

4
src/styles/globals.css
View File

@ -122,7 +122,7 @@
.content-fullscreen { .content-fullscreen {
width: 90vw; width: 90vw;
height: 90vh; height: 80vh;
margin: auto; margin: auto;
} }
@ -132,5 +132,5 @@
} }
.tablefill { .tablefill {
height: 5vh; height: 10vh;
} }