Create page => src/pages/project/tasks.tsx

[otto-jacob]

Create a Next.js page for src/pages/project/tasks.tsx. Here are the instructions:

Issue: Create a Next.js React page for Project Tasks (tasks.tsx)

Objective

Create a Next.js React page tasks.tsx that displays the project tasks for the user. This page will be a Next.js page written in TypeScript as a functional component using ES6 syntax like arrow functions. The page should fetch data from the database via API endpoints built using Prisma, and use NextAuth for authentication. The styling should be done using Tailwind CSS, and fetched data should be used in compliance with the provided TypeScript interfaces.

Requirements

1. Create a new file tasks.tsx in the src/pages/project directory.
2. Import the necessary dependencies:
   • import { useSession } from "next-auth/react";
   • import { ProjectTask } from "~/types";
   • import TaskItem from "~/components/TaskItem";
   • Any other necessary imports for React, Next.js, or API calls.
3. Define a Props interface for the Tasks component that includes the following properties:
   • projectId: string;
4. Create a functional component Tasks that accepts the Props interface as its props.
5. Inside the Tasks component, use the useSession hook to get the user's session.
6. Fetch the project tasks data from the API endpoint (assume that the necessary API endpoint is already created). Use the projectId prop to fetch the tasks for the specific project.
7. Use the fetched data in compliance with the ProjectTask TypeScript interface.
8. Render the project tasks page as follows:
   • Display a heading "Project Tasks" at the top of the page.
   • Create a subheading that shows the project name.
   • Create a paragraph that explains the purpose of the page: "This page displays the list of tasks for the selected project. You can review, edit, approve, or reject each task."
   • Map over the fetched project tasks and render a TaskItem component for each task. Pass the necessary data from the ProjectTask interface to the TaskItem component.
   • The TaskItem component should display the task name, task description, approval status, and a button to approve or reject the task. When the approve/reject button is clicked, it should update the task's approval status in the database and re-render the updated task list.
9. Handle any potential error cases, such as failed API calls or missing data, by displaying an appropriate error message to the user.
10. Ensure that the created React component matches the given page description and properly manages the state and lifecycle, renders correctly, and supports necessary user interactions.

Please follow the above instructions step-by-step to create the tasks.tsx page. If you have any questions or need clarification, feel free to ask.