Fully working without clickable table

import { useEffect, useState } from "react";
import { useSupabaseClient } from "@supabase/auth-helpers-react";
import { HeadingLink, MinimalPage, PageHeading, Spinner } from "ui";
import { Database } from "../../../types";

const ShiftTable = () => {
  const [usersOnShift, setUsersOnShift] = useState<
    Array<{ user: string; shift_start: string | null }>
  >([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const supabaseClient = useSupabaseClient<Database>();

  useEffect(() => {
    const fetchUsersOnShift = async () => {
      setLoading(true);
      try {
        // Fetch all records
        const { data: usersData, error: usersError } = await supabaseClient
          .from("UserLastWorkedOn")
          .select("shift_start, user, users_view (email)")
          .not("shift_start", "is", null);

        if (usersError) {
          setError(usersError.message ?? "Failed to fetch user shift data");
          console.error(usersError);
        }

        const mappedUsers = usersData?.map((user) => {
          const mappedUser: { user: string; shift_start: string | null } = {
            shift_start: user.shift_start,
            user: Array.isArray(user.users_view)
              ? user.users_view[0].email
              : user.users_view?.email ?? user.user,
          };
          return mappedUser;
        });

        setUsersOnShift(mappedUsers ?? []);
      } catch (err) {
        setError("Failed to fetch user shift data");
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchUsersOnShift();
  }, [supabaseClient]);

  return (
    <MinimalPage
      pageTitle="Shift Table | Email Interface"
      pageDescription="Spot Ship Email Interface | Shift Table"
      commandPrompt
    >
      <div className="w-full">
        <HeadingLink icon="back" text="Home" href="/secure/home" />
      </div>
      <PageHeading text="Spot Ship Shift Table" />
      <div className="flex w-full flex-col">
        {loading ? (
          <Spinner />
        ) : error ? (
          <p className="text-red-500">Error: {error}</p>
        ) : usersOnShift.length ? (
          <table className="mt-4 min-w-full">
            <thead>
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                  User Email
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                  Shift Started
                </th>
              </tr>
            </thead>
            <tbody className="divide-white-200 divide-x ">
              {usersOnShift.map((user, index) => (
                <tr key={index}>
                  <td className=" text-white-500 px-6 py-4 text-sm">
                    {user.user}
                  </td>
                  <td className=" text-white-500 px-6 py-4 text-sm">
                    {user.shift_start}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p>No users are currently on shift</p>
        )}
      </div>
    </MinimalPage>
  );
};

export default ShiftTable;