added gateway page styling

Frontend/power-tracker/src/components/manageGateway.tsx

@@ -3,6 +3,36 @@ import { Button } from "@/components/ui/button";
 import "../pages/login.css"
 import axios from 'axios';
 import { redirect } from 'react-router-dom';
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { Plus } from 'lucide-react';
+import { Router } from 'lucide-react';
+import { Textarea } from "@/components/ui/textarea"
+import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
 
 const EgressAPI = import.meta.env.VITE_EAPI_URL
 const IngressAPI = import.meta.env.VITE_IAPI_URL
@@ -29,25 +59,41 @@ function ManageGateways() {
     }, [setGatewayData]);
 
     return (
-        <div>
-            <h1>GATEWAYS</h1>
-            <input type="text" className="outlined-input" value={search} onChange={(event) => setSearch(event.target.value) } placeholder="Search.."/>
-            <ul>
-                {gatewayData.gateway.map((gates, index) => (
-                    gates.eui_gate.includes(search.toLowerCase()) || gates.name.includes(search.toLowerCase()) ?
-                    <li key={index}>
-                        {gates.eui_gate}  {gates.name}
-                    </li>:null
-                ))}
-            </ul>
-            <h1 id="header">Add new gateway</h1>
+        <ResizablePanelGroup className='flex h-[100%]' direction="horizontal">
+            <ResizablePanel minSize={50}>
+                {/* Title and search bar */}
+				<div className="w-[100%] h-[40px] flex justify-between content-center">
+					<h1 className="scroll-m-20 text-2xl font-semibold tracking-tight">Buildings and Departments</h1>
+					<Input 
+						className="h-[30px] w-[200px]" 
+						type="text" 
+						value={search} 
+						onChange={(event) => setSearch(event.target.value) } 
+						placeholder="Search.."
+					/>
+				</div>
+
+                <Separator className="mb-[10px]" />
+
+                {/* New building button */}
+				<AlertDialog>
+					<AlertDialogTrigger> 
+						<Button className="w-[60px] h-[30px] mb-[10px] ml-[10px]" variant="default" size="icon" >
+							<Router className="h-[20px]" />
+							<Plus className="h-[18px]" />
+						</Button>
+					</AlertDialogTrigger>
+					<AlertDialogContent>
                         <form onSubmit={(e) => {addGateway(e, euiInput, nameInput); setEuiInput(""); setNameInput("");}}>
                             <p>EUI</p>
-                <input type="text" id="uname" value={euiInput} onChange={(event) => setEuiInput(event.target.value)} required/>
+                            <Input type="text" id="uname" value={euiInput} onChange={(event) => setEuiInput(event.target.value)} required/>
                             <p>Name</p>
-                <input type="text" id="name" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/>
+                            <Input type="text" id="name" value={nameInput} onChange={(event) => setNameInput(event.target.value)} required/>
                             <br/> <br/>
-                <Button type='submit' onClick={() => {
+                        </form>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>Cancel</AlertDialogCancel>
+                            <AlertDialogAction type='submit' onClick={() => {
                                 setGatewayData(prevState => ({
                                     ...prevState,
                                     gateway: [
@@ -59,9 +105,43 @@ function ManageGateways() {
                                     ]
                                 }));
                             }}>Submit gateway!
-                </Button>
-            </form>
-        </div>
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>		
+
+                <Table className='w-[100%]'>
+                    <TableCaption>Gateways</TableCaption>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Name</TableHead>
+                            <TableHead>ID</TableHead>
+                            <TableHead></TableHead>
+                            <TableHead className="text-right"></TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {gatewayData.gateway.map((gates, index) => (
+                            <TableRow>
+                                <TableCell className="min-w-[200px] max-w-[400px] scroll-m-20 text-xl font-semibold tracking-tight">{gates.name}</TableCell>
+                                <TableCell className="w-[400px]">{gates.eui_gate}</TableCell>
+                                <TableCell className="w-[1fr] flex justify-end">
+                                    <Button className="h-[30px] w-[60px] mr-[5px]" variant="outline">Edit</Button>
+                                    <Button className="h-[30px] w-[60px]" variant="outline">Delete</Button>  
+                                </TableCell> 
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+                
+            </ResizablePanel>
+
+            <ResizableHandle />
+            
+            <ResizablePanel defaultSize={75} className="w-[400px]">
+
+            </ResizablePanel>
+        </ResizablePanelGroup>
     )
 }