Create page => src/pages/project/[projectId].tsx

[kleneway]

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

Issue: Create a Next.js React page [projectId].tsx for displaying project details

Background

We are building a web application for managing projects using Otto, an AI-powered development platform. One of the key features of this application is the ability to view and manage project details. In this issue, we will create a Next.js React page [projectId].tsx that displays project details and allows users to interact with the project.

Task

Your task is to create a Next.js React page [projectId].tsx that displays project details and supports necessary user interactions. This page will be a functional component written in TypeScript using ES6 syntax (arrow functions). You will fetch data from the database via API endpoints built using Prisma. Assume that necessary API endpoints are already created.

Requirements

1. Create a new Next.js page [projectId].tsx in the src/pages/project directory.
2. Import the necessary dependencies:
   • React and useState, useEffect from 'react'
   • useRouter from 'next/router'
   • useSession from 'next-auth/react'
   • Project, SitemapItem, DataSchemaItem, and Task from '~/types'
   • Tailwind CSS for styling (do not import any CSS files directly)
3. Define a Props interface for the [projectId].tsx component that includes the following properties:
   • project: Project
   • sitemapItems: SitemapItem[]
   • dataSchemaItems: DataSchemaItem[]
   • tasks: Task[]
4. Create a functional component [projectId].tsx that accepts the Props interface as its props.
5. Use the useSession hook from next-auth/react to get the user's session. Redirect the user to the login page if they are not authenticated.
6. Use the useRouter hook from next/router to get the projectId from the URL.
7. Fetch the project details, sitemap items, data schema items, and tasks using the provided API endpoints and the projectId. Store the fetched data in the component's state using the useState hook.
8. Use the useEffect hook to fetch the data when the component mounts and when the projectId changes.
9. Render the project details, including the project name, description, and a table that shows each of the status items (sitemap, data schema, and tasks). Each status item should show a visual indicator of whether or not it is approved.
10. For each status item, provide a link to the corresponding subpage (sitemap, data schema, or tasks) where users can view more details and interact with the project.
11. Style the component using Tailwind CSS classes. Do not use custom CSS classes.

Example

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import { Project, SitemapItem, DataSchemaItem, Task } from '~/types';

interface Props {
  project: Project;
  sitemapItems: SitemapItem[];
  dataSchemaItems: DataSchemaItem[];
  tasks: Task[];
}

const ProjectDetails: React.FC<Props> = ({ project, sitemapItems, dataSchemaItems, tasks }) => {
  // ...implementation details
};

export default ProjectDetails;

Notes

• Make sure to handle any potential error cases when fetching data from the API endpoints.
• 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.
• When importing files, use ~ for the root directory (src). The tsconfig paths configuration is {"~/*": ["./src/*"]}.

Please let me know if you have any questions or need further clarification. Good luck!