How to render data from Supabase PostGres DB on dashboard and flashcard effectively?

[mild blade]

heres the table as a sample

export default function FlashcardsDashboard() {


  return (
    <Card>
      <CardHeader>
        <CardTitle>Flashcards</CardTitle>
        <CardDescription>Manage your flashcards and their content.</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Front Content</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Back Content</TableHead>
              <TableHead>Created At</TableHead>
              <TableHead>
                <span className="sr-only">Actions</span>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {flashcards.map((flashcard) => (
              <TableRow key={flashcard.id}>
                <TableCell className="font-medium">{flashcard.front_content}</TableCell>
                <TableCell>{flashcard.back_content}</TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button aria-haspopup="true" size="icon" variant="ghost">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Toggle menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
                      <DropdownMenuItem>Edit</DropdownMenuItem>
                      <DropdownMenuItem>Delete</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}

my dashboard.

const prisma = new PrismaClient();

export async function POST(request: any) {
    try{
        const data = await request.json();

        const {front_content, back_content} = data;

        const newCard = await prisma.flashcards.create({
            data: {
                front_content,
                back_content
            }
        });
        return NextResponse.json(newCard);
        
    }catch(error){
        console.log("Error adding data: ", error);
        return NextResponse.error();
        
    }
}

using prisma for querying my CRUD routes.