app_medications_(overview)_page.tsx

"use client";

import { Flex } from "@aws-amplify/ui-react";
import MedicationList from "@/app/ui/components/MedicationList";

function Page() {
  return (
    <>
      <Flex direction="column" padding="40px">
        <Flex>
          <MedicationList />
        </Flex>
      </Flex>
    </>
  );
}

export default Page;

app_ui_components_MedicationList.tsx

"use client";

import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";
import {
  Flex,
  Table,
  TableHead,
  TableCell,
  TableRow,
  TableBody,
  Heading,
} from "@aws-amplify/ui-react";
import {
  CreateMedication,
  UpdateMedication,
  DeleteMedication,
} from "@/app/ui/medications/buttons";

const client = generateClient<Schema>();

export default function MedicationList() {
  const [medications, setMedications] = useState<Schema["Medication"][]>([]);

  async function listMedications() {
    const { data } = await client.models.Medication.list();
    setMedications(data);
  }

  useEffect(() => {
    listMedications();
  }, []);

  return (
    <Flex
      gap="40px"
      direction="column"
      justifyContent="flex-start"
      alignItems="flex-start"
      position="relative"
      padding="40px 40px 40px 40px"
      backgroundColor="rgba(255, 255, 255, 1)"
    >
      <Flex direction="column">
        <Heading level={1}>Medications</Heading>
        <CreateMedication />
      </Flex>
      <Table caption="Available Medications" highlightOnHover={true}>
        <TableHead>
          <TableRow>
            <TableCell as="th">Medication Name</TableCell>
            <TableCell as="th">Type (NSAID, Steroid, etc.)</TableCell>
            <TableCell as="th">Dosage (ml, mg, etc.)</TableCell>
            <TableCell as="th">Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {medications?.map((medication) => (
            <TableRow key={medication.id}>
              <TableCell>{medication.name}</TableCell>
              <TableCell>{medication.type}</TableCell>
              <TableCell>{medication.dosage}</TableCell>
              <TableCell>
                <Flex gap="8px" direction="row">
                  <UpdateMedication id={medication.id} />
                  <DeleteMedication id={medication.id} />
                </Flex>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Flex>
  );
}