Ericnew (#36)

Author: Ben-Sicat

frontend/app/components/waitlist_table.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import React from "react";
+
+type UserInfo = {
+  id: number;
+  name: string;
+  // Add more properties as needed
+};
+
+type InfoProps = {
+  data: UserInfo[];
+};
+
+function InfoTable({ data }: InfoProps) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full bg-white border border-gray-300">
+        <thead>
+          <tr>
+            <th className="py-2 px-4 border-b text-center">Order No.</th>
+            <th className="py-2 px-4 border-b text-center">User ID</th>
+            <th className="py-2 px-4 border-b text-center">User Name</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, index) => (
+            <tr key={index} className={index % 2 === 0 ? "bg-gray-100" : ""}>
+              <td className="py-2 px-4 border-b text-center">{index + 1}</td>
+              <td className="py-2 px-4 border-b text-center">{item.id}</td>
+              <td className="py-2 px-4 border-b text-center">{item.name}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default InfoTable;

frontend/app/waitlist/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Teste from "../components/account";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import InfoTable from "../components/waitlist_table";
+import Butt from "../components/button";
+
+type UserInfo = {
+  id: number;
+  name: string;
+  // Add more properties as needed
+};
+
+function page() {
+  useEffect(() => {
+    // Set the title directly for the browser tab
+    document.title = "Waitlist View";
+  }, []);
+
+  const router = useRouter();
+
+  const handleBackButtonClick = () => {
+    router.back();
+  };
+
+  const userData = [
+    { id: 1, name: "John Doe" },
+    { id: 2, name: "Jane Smith" },
+    { id: 101, name: "Gian Limbaga" },
+    { id: 102, name: "The Fourth" },
+    { id: 103, name: "Melaissa Rioveros" },
+    { id: 104, name: "Chen Leonor" },
+    { id: 105, name: "Eric Ramos" },
+    // Add more user data as needed
+  ];
+
+  const [data, setData] = useState<UserInfo[]>(userData);
+  const [filteredData, setFilteredData] = useState<UserInfo[]>(data);
+
+  const handleDataSearch = (searchQuery: string) => {
+    // Implement your filtering logic here
+    const filteredResults = data.filter(
+      (item) =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        String(item.id).includes(searchQuery) // Convert id to string and check for inclusion
+    );
+
+    setFilteredData(filteredResults);
+  };
+
+  return (
+    <div className="flex min-h-full flex-col bg-backcolor">
+      <Teste
+        backButtonIcon={<ArrowBackIosIcon style={{ fontSize: 20 }} />}
+        onBackButtonClick={handleBackButtonClick}
+        title="Waitlist View"
+        subTitle1=""
+      />
+
+      <div className="container bg-gray-200 rounded-lg mt-5 mb-3 text-xs">
+        <InfoTable data={filteredData} />
+      </div>
+
+      <Butt title="Cancel" Bgcolor="#EBE0D0" width="325px" height="34px" />
+    </div>
+  );
+}
+
+export default page;