Create src/components/projects/ProjectsPage.tsx:
import { useEffect, useState, type FormEvent } from "react";
import { api } from "@/lib/api-client";
import { Button, Input, Modal, Badge, EmptyState } from "@/components/ui/ComponentLibrary";
import type { Project, CreateProjectInput } from "@/types";

export default function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);

  useEffect(() => {
    async function load() {
      try {
        const response = await api.get<{ data: Project[] }>("/projects");
        setProjects(response.data);
      } catch (error) {
        console.error("Failed to load projects", error);
      } finally {
        setIsLoading(false);
      }
    }
    load();
  }, []);

  async function handleCreate(input: CreateProjectInput) {
    const response = await api.post<{ data: Project }>("/projects", input);
    setProjects((prev) => [response.data, ...prev]);
    setShowCreateModal(false);
  }

  async function handleDelete(id: string) {
    await api.delete(`/projects/${id}`);
    setProjects((prev) => prev.filter((p) => p.id !== id));
  }

  if (isLoading) return <div className="page-loader">Loading...</div>;

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem" }}>
        <h1 className="page-title" style={{ marginBottom: 0 }}>Projects</h1>
        <Button => setShowCreateModal(true)}>New project</Button>
      </div>

      {projects.length === 0 ? (
        <EmptyState
          title="No projects yet"
          description="Create your first project to get started."
          action={
            <Button => setShowCreateModal(true)}>
              Create a project
            </Button>
          }
        />
      ) : (
        <div className="data-table-wrapper">
          <table className="data-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Created</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {projects.map((project) => (
                <tr key={project.id}>
                  <td>{project.name}</td>
                  <td>
                    <Badge
                      variant={project.status === "active" ? "success" : "default"}
                    >
                      {project.status}
                    </Badge>
                  </td>
                  <td>{new Date(project.createdAt).toLocaleDateString()}</td>
                  <td>
                    <Button
                      variant="danger"
                      size="sm"
                      => handleDelete(project.id)}
                    >
                      Delete
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <CreateProjectModal
        isOpen={showCreateModal}
        => setShowCreateModal(false)}
       
      />
    </div>
  );
}

// ─── Create Project Modal ───────────────────

function CreateProjectModal({
  isOpen,
  onClose,
  onCreate,
}: {
  isOpen: boolean;
  onClose: () => void;
  onCreate: (input: CreateProjectInput) => Promise<void>;
}) {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      await onCreate({ name, description });
      setName("");
      setDescription("");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <Modal isOpen={isOpen} title="Create a new project">
      <form
        <Input
          label="Project name"
          value={name}
          => setName(e.target.value)}
          placeholder="My awesome project"
          required
        />
        <Input
          label="Description"
          value={description}
          => setDescription(e.target.value)}
          placeholder="A brief description..."
        />
        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem", marginTop: "1rem" }}>
          <Button variant="secondary" type="button"
            Cancel
          </Button>
          <Button type="submit" loading={isSubmitting}>
            Create
          </Button>
        </div>
      </form>
    </Modal>
  );
}
Included with React SaaS Template

Ready for the complete React SaaS Template?
