users page and a function to populate table headers

src/actions/userActions.ts

@@ -5,7 +5,7 @@ import { db } from "@db/index";
 import { users } from "@schemas/schema";
 
 export const getData = async () => {
-  const data = await db.select().from(users).orderBy(asc(users.email));
+  const data = await db.select().from(users).orderBy(asc(users.last_name));
   return data;
 };
 
@@ -16,7 +16,7 @@ export const getUserByEmail = async (email:string) => {
 
 export const addUser = async ( first_name:  string, last_name: string, username: string,  email: string, password_hash : string) => {
    await db.insert(users).values({
-    first_name : first_name, last_name: last_name, username: username, email: email, password_hash : password_hash 
+    first_name : first_name, last_name: last_name, username: email, email: email, password_hash : password_hash 
   }); 
 };
 
@@ -37,4 +37,15 @@ export const editUser = async (id: string, first_name: string, last_name: string
     })
     .where(eq(users.id, id));
   revalidatePath("/");
+};
+
+export const makeAdmin = async ( email : string) => {
+  await db
+    .update(users)
+    .set({
+      isAdmin : true
+   
+    })
+    .where(eq(users.email, email));
+  revalidatePath("/");
 };

src/app/Admin/Users/page.tsx

@@ -0,0 +1,26 @@
+import { getData } from "@actions/userActions";
+import styles from '../styles.module.css';
+import PageHero from "@components/PageHero";
+import UsersTable from "@src/components/admin/UsersTable";
+import { Suspense } from "react";
+import Loading from "@src/app/components/Loading/loading";
+import { ColumnHeadings } from "@src/lib/utils";
+
+export default async function UsersPage() {
+  const data = await getData();
+
+
+  const columnHeadings = new ColumnHeadings(['E-mail Address', 'First Name', 'Last Name', 'Blank']);
+  return (
+    <div>
+      <PageHero title="Users" />
+
+      <div className="container mx-auto">
+        <Suspense fallback="Loading...">
+          <UsersTable data={data} newColumnHeadings={columnHeadings}></UsersTable>
+        </Suspense>
+      </div>
+
+    </div>
+  );
+}

src/app/api/auth/signup/route.tsx

@@ -1,8 +1,8 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
-import { db } from '@db/index';
+import { db } from "@db/index";
-import { users } from '@schemas/schema';
+import { users } from "@schemas/schema";
-import bcrypt from 'bcryptjs';
+import bcrypt from "bcryptjs";
-import { eq } from 'drizzle-orm';
+import { eq } from "drizzle-orm";
 
 export async function POST(request: Request) {
   try {
@@ -19,14 +19,14 @@ export async function POST(request: Request) {
     await db.insert(users).values(newUser);
 
     return NextResponse.json(
-      { message: 'User created successfully', redirect: '/' },
+      { message: "User created successfully", redirect: "/" },
       { status: 201 }
     );
   } catch (error) {
-    console.error('Signup error:', error);
+      console.error("Signup error:", error);
     return NextResponse.json(
-      { error: 'Failed to create user' },
+      { error: "Failed to create user" },
       { status: 500 }
     );
   }
-} 
+}

src/app/userProfile/[uuid].tsx

@@ -0,0 +1,101 @@
+import { NextPage } from "next";
+import { Herr_Von_Muellerhoff } from "next/font/google";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+
+export default function UserProfilePage() {
+  const router = useRouter();
+  const { uuid } = router.query;
+
+
+  useEffect(() => {
+    if (uuid) {
+      // Fetch product data based on the id
+      fetch(`/api/products/${id}`)
+        .then((response) => response.json())
+
+        .catch((error) => console.error("Error fetching product data:", error));
+    }
+  }, [uuid]);
+
+  if (!product) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="p-4 pt-16 mx-auto max-w-screen-lg">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+   
+        {/* Product Info */}
+        <div>
+          <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
+          
+          {/* Vendor Pricing Table */}
+          <div className="bg-white rounded-lg shadow-md p-4 mb-6">
+            <h2 className="text-xl font-semibold mb-4">Available From</h2>
+            <div className="overflow-x-auto">
+              <table className="min-w-full table-auto">
+                <thead>
+                  <tr className="bg-gray-50 border-b">
+                    <th className="px-4 py-2 text-left">Vendor</th>
+                    <th className="px-4 py-2 text-left">Price</th>
+                    <th className="px-4 py-2 text-left">Stock</th>
+                    <th className="px-4 py-2 text-left">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {product.vendors.map((vendor, index) => (
+                    <tr key={index} className="border-b hover:bg-gray-50">
+                      <td className="px-4 py-2">{vendor.name}</td>
+                      <td className="px-4 py-2">{vendor.price}</td>
+                      <td className="px-4 py-2">{vendor.stock}</td>
+                      <td className="px-4 py-2">
+                        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                          Buy Now
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Product Description */}
+      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
+        <h2 className="text-xl font-semibold mb-4">Product Description</h2>
+        <p className="text-gray-600">
+          {product.description}
+        </p>
+      </div>
+
+      {/* Product Specifications */}
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h2 className="text-xl font-semibold mb-4">Specifications</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="border-b py-2">
+            <span className="font-medium">Manufacturer:</span> {product.specifications.manufacturer}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Model:</span> {product.specifications.model}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Weight:</span> {product.specifications.weight}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Dimensions:</span> {product.specifications.dimensions}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Material:</span> {product.specifications.material}
+          </div>
+          <div className="border-b py-2">
+            <span className="font-medium">Warranty:</span> {product.specifications.warranty}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/RegistrationForm/index.tsx

@@ -22,7 +22,6 @@ export default function RegistrationForm() {
     e.preventDefault();
     setError("");
 
-    alert(formData.password + ":" + formData.confirmPassword);
     if (formData.password !== formData.confirmPassword) {
       setError("Passwords do not match");
       return;

src/components/admin/UsersTable/index.tsx

@@ -0,0 +1,137 @@
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { PlusCircleIcon } from "@heroicons/react/20/solid";
+
+import Image from "next/image";
+import Link from "next/link";
+
+
+export default async function UsersTable(props: any) {
+  return (
+    <div className="pb-12">
+   
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead>
+                <tr>
+                  <th
+                    scope="col"
+                    className="py-3.5 pl-4 pr-3 text-left text-xs font-semibold text-gray-900 "
+                  >
+                    <a href="#" className="group inline-flex">
+                    {props.newColumnHeadings.getHeading()}
+                      <span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="size-5"
+                        />
+                      </span>
+                    </a>
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
+                  >
+                    <a href="#" className="group inline-flex">
+                      {props.newColumnHeadings.getHeading()}
+                      <span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="size-5"
+                        />
+                      </span>
+                    </a>
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
+                  >
+                    <a href="#" className="group inline-flex">
+                    {props.newColumnHeadings.getHeading()}
+                      <span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="size-5"
+                        />
+                      </span>
+                    </a>
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
+                  >
+                    <a href="#" className="group inline-flex">
+                    {props.newColumnHeadings.getHeading()}
+                      <span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="invisible ml-2 size-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
+                        />
+                      </span>
+                    </a>
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
+                  >
+                    <a href="#" className="group inline-flex">
+                    {props.newColumnHeadings.getHeading()}
+                      <span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="invisible ml-2 size-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
+                        />
+                      </span>
+                    </a>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className=" divide-y divide-gray-200 bg-white">
+                {props.data.map((item: any) => (
+                  <tr key={item.uuid}>
+                    <td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
+                  
+                      <Link href={{
+                        pathname: '/userProfile',
+                        query: {
+                          uuid: item.uuid,
+                        },
+                      }}><span className="pl-2"> {item.email}</span></Link>
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
+                      {item.first_name}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
+                      {item.last_name}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
+                      ${item.username}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
+                      <button
+                        type="button"
+                        className="inline-flex items-center gap-x-1.5 rounded-xl bg-lime-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-lime-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-900"
+                      >
+                        Edit
+                        <PlusCircleIcon
+                          aria-hidden="true"
+                          className="-mr-0.5 size-5"
+                        />
+                      </button>
+                    </td>
+                    <td style={{display:'none'}}>
+           
+                    </td>
+                  </tr>                  
+                ))}
+              </tbody>
+            </table>
+         
+          </div>
+        </div>
+      </div>
+    </div>
+
+  );
+}

src/components/footer/index.tsx

@@ -8,6 +8,9 @@ const navigation = {
     { name: 'Optics', href: '/Products/optics' },
     { name: 'Accessories', href: '/Products/accessories#' },
   ],
+  admin: [
+    { name: 'Users', href: '/Admin/Users' },    
+  ],
   account: [
     { name: 'My Account', href: '/MyAccount' },
     { name: 'Register', href: '/signin' },
@@ -109,6 +112,19 @@ export default function Footer() {
                   ))}
                 </ul>
               </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-sm/6 font-semibold text-white">Administration</h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.admin.map((item) => (
+                    <li key={item.name}>
+                      <Link href={item.href} className="text-sm/6 text-gray-400 hover:text-white">
+                        {item.name}
+                      </Link>
+
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>

src/drizzle/schema/schema.ts

@@ -1,8 +1,6 @@
 import { pgTable, integer, varchar, text, numeric, timestamp, unique, check, bigserial, date, boolean, uuid, bigint, real, doublePrecision, primaryKey } from "drizzle-orm/pg-core"
 import { sql } from "drizzle-orm"
 
-
-
 export const products = pgTable("products", {
 	id: integer().primaryKey().generatedAlwaysAsIdentity({ name: "products_id_seq", startWith: 1, increment: 1, minValue: 1, maxValue: 2147483647, cache: 1 }),
 	name: varchar({ length: 255 }).notNull(),

src/lib/utils.ts

@@ -4,3 +4,20 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export class ColumnHeadings {
+  headingNames: string[];
+  current: number;
+
+  constructor(headingNames: string[]) {
+    console.log(headingNames.length);
+    this.headingNames = headingNames;
+    this.current = 0;
+  }
+  getHeading = () => {
+ 
+    const returnedHeading:string = this.headingNames[this.current];
+    this.current = this.current+1;
+    return returnedHeading;    
+  }
+}