const transactions = await prisma.transaction.findMany();
  

import React from "react";
import prisma from "../../prisma/client";

export async function getData() {
  const data = await prisma.transaction.findMany({
    select: {
      id: true,
      amount: true,
      description: true,
      type: true,
    },
  });
  return data;
}

// Inside your component
export default function Tables({ transactions }) {
  return (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg top-20">
      <button
        type="button"
        className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
      >
        +
      </button>
      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead className="text-xs w-full text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" className="px-6 py-3">
              Transaction
            </th>
            <th scope="col" className="px-6 py-3">
              <div className="flex items-center">Amount</div>
            </th>
            <th scope="col" className="px-6 py-3">
              <div className="flex items-center">Description</div>
            </th>

            <th scope="col" className="px-6 py-3">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          {transactions &&
            transactions.map((transaction) => (
              <tr
                key={transaction.id}
                className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
              >
                <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                  {transaction.type}
                </td>
                <td className="px-6 py-4">{transaction.amount}</td>
                <td className="px-6 py-4">{transaction.description}</td>
                <td className="px-6 py-4 text-right">
                  <button type="submit" className="text-blue-500">
                    Edit
                  </button>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}
export async function getServerSideProps() {
  const transactions = await getData();
  return {
    props: {
      transactions,
    },
  };
}

import React from "react";

import Cards from "../components/ui/cards";
import Tables from "../components/ui/table";

const Page = () => (
  <div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10  ">
    <div className="mb-8 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h2 className="text-title-sm2 font-bold text-black dark:text-white">
          This Week’s Overview
        </h2>
      </div>

      <div className="flex items-center">
        <p className="font-medium uppercase text-black dark:text-white">
          Short by:
        </p>
        <div className="relative z-20 inline-block">
          <select
            name="#"
            id="#"
            className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 font-medium outline-none"
          >
            <option value="">Current Week</option>
            <option value="">Last Week</option>
          </select>
          <span className="absolute top-1/2 right-1 z-10 -translate-y-1/2">
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8.99995 12.8249C8.8312 12.8249 8.69058 12.7687 8.54995 12.6562L2.0812 6.2999C1.82808 6.04678 1.82808 5.65303 2.0812 5.3999C2.33433 5.14678 2.72808 5.14678 2.9812 5.3999L8.99995 11.278L15.0187 5.34365C15.2718 5.09053 15.6656 5.09053 15.9187 5.34365C16.1718 5.59678 16.1718 5.99053 15.9187 6.24365L9.44995 12.5999C9.30933 12.7405 9.1687 12.8249 8.99995 12.8249Z"
                fill="#64748B"
              />
            </svg>
          </span>
        </div>
      </div>
    </div>
    <Cards />
    <Tables />
  </div>
);

export default Page;