first commit

app/users/page.tsx

@@ -0,0 +1,140 @@
+import { JSX } from "react";
+import { getUsers, addUser, editUser, removeUser } from "../actions/UserAction";
+import AddUserForm from "./AddUserForm";
+
+export default async function UsersPage(): Promise<JSX.Element> {
+  const users = await getUsers();
+
+  return (
+    <main className="min-h-screen bg-base-200 p-8 flex flex-col items-center">
+      <div className="max-w-4xl w-full space-y-6">
+        <h1 className="text-3xl font-bold">PostgreSQL User Management</h1>
+
+        {/* add user form using zod validation */}
+        <AddUserForm />
+
+        {/* --- ADD USER FORM --- */}
+        <div className="card bg-base-100 shadow border border-base-300">
+          <div className="card-body">
+            <h2 className="card-title text-lg">Add New User</h2>
+
+            {/* Form using Server Action */}
+            <form
+              action={async (formData: FormData) => {
+                "use server";
+                const name = formData.get("name") as string;
+                const email = formData.get("email") as string;
+                const pass = formData.get("pass") as string;
+
+                if (name && email && pass) {
+                  await addUser({ name, email, pass });
+                }
+              }}
+              className="grid grid-cols-1 md:grid-cols-4 gap-3 items-end mt-2"
+            >
+              <input
+                type="text"
+                name="name"
+                placeholder="Name"
+                className="input input-bordered input-sm w-full"
+                required
+              />
+              <input
+                type="email"
+                name="email"
+                placeholder="Email"
+                className="input input-bordered input-sm w-full"
+                required
+              />
+              <input
+                type="password"
+                name="pass"
+                placeholder="Password"
+                className="input input-bordered input-sm w-full"
+                required
+              />
+              <button type="submit" className="btn btn-primary btn-sm">
+                Add User
+              </button>
+            </form>
+          </div>
+        </div>
+
+        {/* --- USER TABLE --- */}
+        <div className="card bg-base-100 shadow border border-base-300">
+          <div className="card-body p-0">
+            <div className="overflow-x-auto">
+              <table className="table table-zebra w-full">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Email</th>
+                    <th>Password</th>
+                    <th className="text-right">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {users.map((user) => (
+                    <tr key={user.id}>
+                      <td className="font-mono">{user.id}</td>
+                      <td>{user.name}</td>
+                      <td>{user.email}</td>
+                      <td className="font-mono text-xs opacity-60">
+                        {user.password}
+                      </td>
+                      <td className="text-right flex justify-end gap-2">
+                        {/* EDIT BUTTON (QUICK NAME UPDATE) */}
+                        <form
+                          action={async () => {
+                            "use server";
+                            await editUser(user.id, {
+                              name: `${user.name} (Edited)`,
+                            });
+                          }}
+                        >
+                          <button
+                            type="submit"
+                            className="btn btn-xs btn-outline btn-warning"
+                          >
+                            Edit
+                          </button>
+                        </form>
+
+                        {/* DELETE BUTTON */}
+                        <form
+                          action={async () => {
+                            "use server";
+                            await removeUser(user.id);
+                          }}
+                        >
+                          <button
+                            type="submit"
+                            className="btn btn-xs btn-outline btn-error"
+                          >
+                            Remove
+                          </button>
+                        </form>
+                      </td>
+                    </tr>
+                  ))}
+
+                  {users.length === 0 && (
+                    <tr>
+                      <td
+                        colSpan={5}
+                        className="text-center py-4 text-base-content/60"
+                      >
+                        No users found in database. Add one above!
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}