feat(intial auth): intial auth setup for the scanner

frontend/src/components/Sidebar/AdminBar.tsx

@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { Bell, Logs, Server, Settings } from "lucide-react";
+import { Bell, Logs, Server, Settings, UsersRound } from "lucide-react";
 
 import {
 	SidebarGroup,
@@ -56,22 +56,22 @@ export default function AdminSidebar({ session }: any) {
 			module: "admin",
 			active: true,
 		},
-		// {
-		// 	title: "Modules",
-		// 	url: "/admin/modules",
-		// 	icon: Settings,
-		// 	role: ["systemAdmin", "admin"],
-		// 	module: "admin",
-		// 	active: true,
-		// },
-		// {
-		// 	title: "Servers",
-		// 	url: "/admin/servers",
-		// 	icon: Server,
-		// 	role: ["systemAdmin", "admin"],
-		// 	module: "admin",
-		// 	active: true,
-		// },
+		{
+			title: "Users",
+			url: "/admin/users",
+			icon: UsersRound,
+			role: ["systemAdmin", "admin"],
+			module: "admin",
+			active: true,
+		},
+		{
+			title: "Scan users",
+			url: "/admin/scanUsers",
+			icon: UsersRound,
+			role: ["systemAdmin", "admin"],
+			module: "admin",
+			active: true,
+		},
 	];
 	return (
 		<SidebarGroup>

frontend/src/components/Sidebar/DocBar.tsx

@@ -36,6 +36,17 @@ const docs = [
 			},
 		],
 	},
+	{
+		title: "Mobile",
+		url: "/updateInstructions",
+		isActive: false,
+		items: [
+			{
+				title: "Settings",
+				url: "/mobile-settings",
+			},
+		],
+	},
 ];
 export default function DocBar() {
 	const { setOpen } = useSidebar();

frontend/src/components/Sidebar/MobileBar.tsx

@@ -0,0 +1,49 @@
+import { Link } from "@tanstack/react-router";
+import { ScanText, ScrollText } from "lucide-react";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "../ui/sidebar";
+
+export default function MobileBar({ session }: any) {
+	const { setOpen } = useSidebar();
+	const items = [
+		{
+			title: "Update Instructions",
+			url: "/",
+			icon: ScrollText,
+		},
+		{
+			title: "Scan Log",
+			url: "/",
+			icon: ScanText,
+		},
+	];
+
+	console.log(session);
+
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Mobile</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<SidebarMenuItem key={item.title}>
+							<SidebarMenuButton asChild>
+								<Link to={item.url} onClick={() => setOpen(false)}>
+									<item.icon />
+									<span>{item.title}</span>
+								</Link>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/Sidebar/sidebar.tsx

@@ -8,6 +8,7 @@ import {
 import { useSession } from "@/lib/auth-client";
 import AdminSidebar from "./AdminBar";
 import DocBar from "./DocBar";
+import MobileBar from "./MobileBar";
 
 export function AppSidebar() {
 	const { data: session } = useSession();
@@ -22,7 +23,8 @@ export function AppSidebar() {
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarContent>
-							<DocBar/>
+							<DocBar />
+							<MobileBar session={session} />
 							{session &&
 								(session.user.role === "admin" ||
 									session.user.role === "systemAdmin") && (

frontend/src/docs/notifications/updateInstructions.tsx

@@ -0,0 +1,3 @@
+export default function updateInstructions() {
+	return <div>updateInstructions</div>;
+}

frontend/src/lib/tableStuff/LstTable.tsx

@@ -11,6 +11,15 @@ import {
 import React, { useState } from "react";
 import { Button } from "../../components/ui/button";
 import { ScrollArea, ScrollBar } from "../../components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "../../components/ui/select";
 import {
 	Table,
 	TableBody,
@@ -26,15 +35,23 @@ type LstTableType = {
 	tableClassName?: string;
 	data: any;
 	columns: any;
+	height?: string;
+	pageSize?: number;
 };
 export default function LstTable({
 	className = "",
 	tableClassName = "",
 	data,
 	columns,
+	height = "h-full",
+	pageSize = 5,
 }: LstTableType) {
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [pagination, setPagination] = useState({
+		pageIndex: 0, //initial page index
+		pageSize: pageSize, //default page size
+	});
 	//console.log(data);
 
 	const table = useReactTable({
@@ -46,24 +63,33 @@ export default function LstTable({
 		getSortedRowModel: getSortedRowModel(),
 		onColumnFiltersChange: setColumnFilters,
 		getFilteredRowModel: getFilteredRowModel(),
+		onPaginationChange: setPagination,
 		//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
 		//getRowCanExpand: () => true,
+		// columnResizeMode: "onChange",
 		filterFns: {},
 		state: {
 			sorting,
+			pagination,
 			columnFilters,
 		},
 	});
 	return (
 		<div className={className}>
-			<ScrollArea className="w-full rounded-md border whitespace-nowrap">
+			<div>{/* TODO: Add table header in here like title */}</div>
+			<ScrollArea
+				className={`w-full rounded-md border whitespace-nowrap ${height}`}
+			>
 				<Table className={cn("w-full", tableClassName)}>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
 							<TableRow key={headerGroup.id}>
 								{headerGroup.headers.map((header) => {
 									return (
-										<TableHead key={header.id}>
+										<TableHead
+											key={header.id}
+											className="sticky top-0 z-20 bg-background"
+										>
 											{header.isPlaceholder
 												? null
 												: flexRender(
@@ -76,6 +102,7 @@ export default function LstTable({
 							</TableRow>
 						))}
 					</TableHeader>
+
 					<TableBody>
 						{table.getRowModel().rows.length ? (
 							table.getRowModel().rows.map((row) => (
@@ -107,14 +134,23 @@ export default function LstTable({
 				<ScrollBar orientation="horizontal" />
 				<ScrollBar orientation="vertical" />
 			</ScrollArea>
+
 			<div className="flex items-center justify-end space-x-2 py-4">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.firstPage()}
+					disabled={!table.getCanPreviousPage()}
+				>
+					{"<<"}
+				</Button>
 				<Button
 					variant="outline"
 					size="sm"
 					onClick={() => table.previousPage()}
 					disabled={!table.getCanPreviousPage()}
 				>
-					Previous
+					{"<"}
 				</Button>
 				<Button
 					variant="outline"
@@ -122,8 +158,42 @@ export default function LstTable({
 					onClick={() => table.nextPage()}
 					disabled={!table.getCanNextPage()}
 				>
-					Next
+					{">"}
 				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.lastPage()}
+					disabled={!table.getCanNextPage()}
+				>
+					{">>"}
+				</Button>
+				<Select
+					value={pagination.pageSize.toString()}
+					onValueChange={(e) =>
+						setPagination({
+							...pagination,
+							pageSize: e === "all" ? data.length : parseInt(e, 10),
+						})
+					}
+				>
+					<SelectTrigger className="w-16">
+						<SelectValue
+							//id={field.name}
+							placeholder="Select Page"
+						/>
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							<SelectLabel>Page Size</SelectLabel>
+							<SelectItem value="5">5</SelectItem>
+							<SelectItem value="10">10</SelectItem>
+							<SelectItem value="50">50</SelectItem>
+							<SelectItem value="100">100</SelectItem>
+							<SelectItem value="all">All</SelectItem>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
 			</div>
 		</div>
 	);

frontend/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as DocsIndexRouteImport } from './routes/docs/index'
 import { Route as DocsSplatRouteImport } from './routes/docs/$'
 import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
 import { Route as AdminServersRouteImport } from './routes/admin/servers'
+import { Route as AdminScanUsersRouteImport } from './routes/admin/scanUsers'
 import { Route as AdminNotificationsRouteImport } from './routes/admin/notifications'
 import { Route as AdminLogsRouteImport } from './routes/admin/logs'
 import { Route as authLoginRouteImport } from './routes/(auth)/login'
@@ -52,6 +53,11 @@ const AdminServersRoute = AdminServersRouteImport.update({
   path: '/admin/servers',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AdminScanUsersRoute = AdminScanUsersRouteImport.update({
+  id: '/admin/scanUsers',
+  path: '/admin/scanUsers',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminNotificationsRoute = AdminNotificationsRouteImport.update({
   id: '/admin/notifications',
   path: '/admin/notifications',
@@ -89,6 +95,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
   '/admin/notifications': typeof AdminNotificationsRoute
+  '/admin/scanUsers': typeof AdminScanUsersRoute
   '/admin/servers': typeof AdminServersRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/docs/$': typeof DocsSplatRoute
@@ -103,6 +110,7 @@ export interface FileRoutesByTo {
   '/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
   '/admin/notifications': typeof AdminNotificationsRoute
+  '/admin/scanUsers': typeof AdminScanUsersRoute
   '/admin/servers': typeof AdminServersRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/docs/$': typeof DocsSplatRoute
@@ -118,6 +126,7 @@ export interface FileRoutesById {
   '/(auth)/login': typeof authLoginRoute
   '/admin/logs': typeof AdminLogsRoute
   '/admin/notifications': typeof AdminNotificationsRoute
+  '/admin/scanUsers': typeof AdminScanUsersRoute
   '/admin/servers': typeof AdminServersRoute
   '/admin/settings': typeof AdminSettingsRoute
   '/docs/$': typeof DocsSplatRoute
@@ -134,6 +143,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/admin/logs'
     | '/admin/notifications'
+    | '/admin/scanUsers'
     | '/admin/servers'
     | '/admin/settings'
     | '/docs/$'
@@ -148,6 +158,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/admin/logs'
     | '/admin/notifications'
+    | '/admin/scanUsers'
     | '/admin/servers'
     | '/admin/settings'
     | '/docs/$'
@@ -162,6 +173,7 @@ export interface FileRouteTypes {
     | '/(auth)/login'
     | '/admin/logs'
     | '/admin/notifications'
+    | '/admin/scanUsers'
     | '/admin/servers'
     | '/admin/settings'
     | '/docs/$'
@@ -177,6 +189,7 @@ export interface RootRouteChildren {
   authLoginRoute: typeof authLoginRoute
   AdminLogsRoute: typeof AdminLogsRoute
   AdminNotificationsRoute: typeof AdminNotificationsRoute
+  AdminScanUsersRoute: typeof AdminScanUsersRoute
   AdminServersRoute: typeof AdminServersRoute
   AdminSettingsRoute: typeof AdminSettingsRoute
   DocsSplatRoute: typeof DocsSplatRoute
@@ -230,6 +243,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminServersRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/admin/scanUsers': {
+      id: '/admin/scanUsers'
+      path: '/admin/scanUsers'
+      fullPath: '/admin/scanUsers'
+      preLoaderRoute: typeof AdminScanUsersRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/admin/notifications': {
       id: '/admin/notifications'
       path: '/admin/notifications'
@@ -281,6 +301,7 @@ const rootRouteChildren: RootRouteChildren = {
   authLoginRoute: authLoginRoute,
   AdminLogsRoute: AdminLogsRoute,
   AdminNotificationsRoute: AdminNotificationsRoute,
+  AdminScanUsersRoute: AdminScanUsersRoute,
   AdminServersRoute: AdminServersRoute,
   AdminSettingsRoute: AdminSettingsRoute,
   DocsSplatRoute: DocsSplatRoute,

frontend/src/routes/__root.tsx

@@ -3,30 +3,36 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { Toaster } from "sonner";
 import Header from "@/components/Header";
 import { AppSidebar } from "@/components/Sidebar/sidebar";
-import {  SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { ThemeProvider } from "@/lib/theme-provider";
+import { useSession } from "../lib/auth-client";
 
-const RootLayout = () => (
-	<div className="[--header-height:calc(--spacing(14))]">
-		<ThemeProvider>
-			<SidebarProvider className="flex flex-col" defaultOpen={false}>
-				<Header />
+const RootLayout = () => {
+	const { data: session } = useSession();
+	return (
+		<div className="[--header-height:calc(--spacing(14))]">
+			<ThemeProvider>
+				<SidebarProvider className="flex flex-col" defaultOpen={false}>
+					<Header />
 
-				<div className="relative min-h-[calc(100svh-var(--header-height))]">
-					<AppSidebar />
+					<div className="relative min-h-[calc(100svh-var(--header-height))]">
+						<AppSidebar />
 
-					<main className="w-full p-4">
-						<div className="mx-auto w-full max-w-7xl">
-							<Outlet />
-						</div>
-					</main>
-				</div>
+						<main className="w-full p-4">
+							<div className="mx-auto w-full max-w-7xl">
+								<Outlet />
+							</div>
+						</main>
+					</div>
 
-				<Toaster expand richColors closeButton />
-			</SidebarProvider>
-		</ThemeProvider>
-		<TanStackRouterDevtools />
-	</div>
-);
+					<Toaster expand richColors closeButton />
+				</SidebarProvider>
+			</ThemeProvider>
+			{session && session.user.role === "systemAdmin" && (
+				<TanStackRouterDevtools />
+			)}
+		</div>
+	);
+};
 
 export const Route = createRootRoute({ component: RootLayout });

frontend/src/routes/admin/scanUsers.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/admin/scanUsers')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/admin/scanUsers"!</div>
+}

frontend/src/routes/admin/servers.tsx

@@ -155,7 +155,7 @@ const ServerTable = () => {
 		);
 	}
 
-	return <LstTable data={data} columns={columns} />;
+	return <LstTable data={data} columns={columns} pageSize={50} />;
 };
 
 function RouteComponent() {

frontend/src/routes/docs/index.tsx

@@ -59,6 +59,33 @@ function RouteComponent() {
 						Only shows machines that are attached to the silo.
 					</ul>
 				</ul>
+				{/* Mobile stuff */}
+				<li>Mobile App</li>
+				<ul className="list-disc list-inside indent-8">
+					<li>Rewrite of Alpla scan</li>
+					<ul className="list-disc list-inside indent-16">
+						<li>All old settings same as before id, ip, port</li>
+						<li>Currently scanned pallets will show now as well</li>
+					</ul>
+					<li>
+						Custom addition - login and more features NOTE: This is activated
+						based on how you enter the settings
+					</li>
+					<ul className="list-disc list-inside indent-16">
+						<li>Pin numbers login</li>
+						<li>
+							Scan a lane barcode and it returns whats in the lane and its
+							current status
+						</li>
+						<li>Command restrictions per pin login</li>
+						<li>Dock Door scanning</li>
+						<li>
+							More details on the pallet that is scanned by touching the running
+							number on the scanner.
+						</li>
+					</ul>
+				</ul>
+				{/* TMS integration */}
 				<li>TMS integration</li>
 				<ul className="list-disc list-inside indent-8">
 					<li>integration with TI to auto add in orders</li>