React: تمرين عملي شامل

Project Root Directory/
├── app/                    # App Router Routing
│   ├── (auth)/             # Pages Related to Certification
│   │   ├── login/          # Login Page
│   │   ├── register/       # Registration Page
│   │   └── layout.tsx      # Authentication Page Layout
│   ├── (dashboard)/        # Dashboard（You must log in）
│   │   ├── board/          # Kanban Page
│   │   │   ├── [id]/       # Specific Kanban Board
│   │   │   └── page.tsx    # List of Kanban Boards
│   │   ├── layout.tsx      # Dashboard Layout（Sidebar）
│   │   └── page.tsx        # Homepage Redirect
│   ├── api/                # Route Handler
│   │   ├── auth/           # NextAuth API
│   │   └── boards/         # Dashboard Data API
│   └── layout.tsx          # Global Layout
├── components/             # Reusable Components
│   ├── board/              # Kanban Component
│   ├── ui/                 # UI General Components
│   └── providers.tsx       # Ant Design Provider
├── lib/                    # Utility Functions
│   ├── prisma.ts           # Database Client
│   └── auth.ts             # NextAuth Layout
├── prisma/                 # Database Schema
│   └── schema.prisma
├── middleware.ts           # Route Guard
├── next.config.ts
└── package.json

# Create Next.js Project
npx create-next-app@latest saas-kanban --typescript --tailwind --app

# Install Core Dependencies
cd saas-kanban

# UI Component Library
npm install antd @ant-design/icons

# Drag-and-drop feature
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

# Certification
npm install next-auth @auth/prisma-adapter

# Database
npm install prisma @prisma/client
npx prisma init

# Charts
npm install recharts

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// User Model
model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  boards        Board[]   // User-Created Kanban Boards
  tasks         Task[]    // Tasks Assigned to Users
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
}

// Kanban Model（Multi-tenancy achieves data isolation by associating tenants with users.）
model Board {
  id        String   @id @default(cuid())
  title     String
  color     String   @default("#1677ff")
  ownerId   String
  owner     User     @relation(fields: [ownerId], references: [id])
  columns   Column[]
  tasks     Task[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

// Kanban Column
model Column {
  id        String @id @default(cuid())
  title     String
  position  Int    // Sort Order
  boardId   String
  board     Board  @relation(fields: [boardId], references: [id], onDelete: Cascade)
  tasks     Task[]
}

// Task Cards
model Task {
  id          String   @id @default(cuid())
  title       String
  description String?
  priority    Priority @default(middle)
  assigneeId  String?
  assignee    User?    @relation(fields: [assigneeId], references: [id])
  columnId    String
  column      Column   @relation(fields: [columnId], references: [id], onDelete: Cascade)
  boardId     String
  board       Board    @relation(fields: [boardId], references: [id], onDelete: Cascade)
  position    Int      // Sort Order Within a Row
  dueDate     DateTime?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

enum Priority {
  urgent
  high
  middle
  low
}

// lib/auth.ts - NextAuth Complete Configuration
import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import CredentialsProvider from 'next-auth/providers/credentials'
import { PrismaAdapter } from '@auth/prisma-adapter'
import { prisma } from './prisma'

function verifyPassword(plain: string, hashed: string): boolean {
  // Production: use bcryptjs — npm i bcryptjs → bcrypt.compare(plain, hashed)
  return plain === hashed
}

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    // Google OAuth
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    // Log in with your email and password
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) return null

        const user = await prisma.user.findUnique({
          where: { email: credentials.email as string }
        })

        if (!user || !user.password) return null

        const isValid = verifyPassword(
          credentials.password as string,
          user.password
        )

        if (!isValid) return null
        return user
      },
    }),
  ],
  pages: {
    signIn: '/login',
    error: '/login',
  },
  callbacks: {
    // Add users ID Injecting Tenant Information JWT
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
      }
      return token
    },
    // Inject JWT info into session
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.id as string
      }
      return session
    },
  },
  session: {
    strategy: 'jwt',
  },
})

// lib/prisma.ts - Database Client Singleton
import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
export const prisma = globalForPrisma.prisma ?? new PrismaClient()
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

// app/(dashboard)/board/[id]/page.tsx
// Server Component：Get kanban board, columns, task data
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
import { redirect } from 'next/navigation'
import BoardClient from './BoardClient'

interface BoardPageProps {
  params: { id: string }
}

async function BoardPage({ params }: BoardPageProps) {
  const session = await auth()
  // Redirect for Unauthenticated Users
  if (!session?.user?.id) redirect('/login')

  // Retrieve Kanban Data（Lists and Tasks）
  const board = await prisma.board.findUnique({
    where: {
      id: params.id,
      ownerId: session.user.id, // Multi-tenant Data Isolation
    },
    include: {
      columns: {
        orderBy: { position: 'asc' },
        include: {
          tasks: {
            orderBy: { position: 'asc' },
            include: { assignee: { select: { id: true, name: true, image: true } } },
          },
        },
      },
    },
  })

  if (!board) redirect('/board')

  // Serialization Date Field（Server Component Forwarded to Client Component When needed）
  const serializedBoard = JSON.parse(JSON.stringify(board))

  return <BoardClient board={serializedBoard} />
}
export default BoardPage

// app/(dashboard)/board/[id]/BoardClient.tsx
// Client Component：Core of Drag-and-Drop Interaction
'use client'
import { useState, useCallback } from 'react'
import { DndContext, DragOverlay, closestCorners, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { Layout } from 'antd'
import BoardColumn from './BoardColumn'
import TaskCard from './TaskCard'

const { Content } = Layout

interface BoardData {
  id: string
  title: string
  columns: ColumnData[]
}

interface ColumnData {
  id: string
  title: string
  tasks: TaskData[]
}

interface TaskData {
  id: string
  title: string
  description?: string
  priority: string
  position: number
  assignee?: { id: string; name: string; image?: string }
}

function BoardClient({ board }: { board: BoardData }) {
  const [activeTask, setActiveTask] = useState<TaskData | null>(null)
  const [columns, setColumns] = useState(board.columns)

  // Configure Sensors（Pointer + Keyboard）
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
    useSensor(KeyboardSensor)
  )

  // Drag to Start：Record tasks that have been dragged
  const handleDragStart = useCallback((event: any) => {
    const { active } = event
    const task = columns
      .flatMap(col => col.tasks)
      .find(t => t.id === active.id)
    setActiveTask(task || null)
  }, [columns])

  // Drag ended：Update the "Assigned To" column and sort order
  const handleDragEnd = useCallback(async (event: any) => {
    const { active, over } = event
    if (!over || active.id === over.id) {
      setActiveTask(null)
      return
    }

    const sourceColumn = columns.find(col =>
      col.tasks.some(t => t.id === active.id)
    )
    const targetColumn = columns.find(col =>
      col.tasks.some(t => t.id === over.id) ||
      col.id === over.id
    )

    if (!sourceColumn || !targetColumn) {
      setActiveTask(null)
      return
    }

    const task = sourceColumn.tasks.find(t => t.id === active.id)!
    const newSourceTasks = sourceColumn.tasks.filter(t => t.id !== active.id)

    if (sourceColumn.id === targetColumn.id) {
      // Sort within the same column
      const overIndex = targetColumn.tasks.findIndex(t => t.id === over.id)
      const newTasks = [...newSourceTasks]
      newTasks.splice(overIndex, 0, task)
      setColumns(prev => prev.map(col =>
        col.id === sourceColumn.id ? { ...col, tasks: newTasks } : col
      ))
    } else {
      // Cross-Row Movement
      const overIndex = targetColumn.tasks.findIndex(t => t.id === over.id)
      const newTargetTasks = [...targetColumn.tasks]
      newTargetTasks.splice(overIndex, 0, task)
      setColumns(prev => prev.map(col => {
        if (col.id === sourceColumn.id) return { ...col, tasks: newSourceTasks }
        if (col.id === targetColumn.id) return { ...col, tasks: newTargetTasks }
        return col
      }))
    }

    // Sync to the server
    await fetch('/api/tasks/move', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        taskId: active.id,
        targetColumnId: targetColumn.id,
        position: targetColumn.tasks.findIndex(t => t.id === over.id),
      }),
    })

    setActiveTask(null)
  }, [columns])

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <Content style={{ display: 'flex', gap: 16, padding: 24, overflowX: 'auto' }}>
        {columns.map(column => (
          <BoardColumn key={column.id} column={column} />
        ))}
      </Content>
      <DragOverlay>
        {activeTask ? <TaskCard task={activeTask} isOverlay /> : null}
      </DragOverlay>
    </DndContext>
  )
}
export default BoardClient

// board/BoardColumn.tsx - Kanban Column Components
'use client'
import { useDroppable } from '@dnd-kit/core'
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { Card, Tag, Typography } from 'antd'
import TaskCard from './TaskCard'

const { Text } = Typography

interface ColumnProps {
  column: {
    id: string
    title: string
    tasks: any[]
  }
}

const columnColors: Record<string, string> = {
  'To-Do': '#f0f0f0',
  'In progress': '#e6f4ff',
  'Completed': '#f6ffed',
}

const columnHeaderColors: Record<string, string> = {
  'To-Do': '#d9d9d9',
  'In progress': '#1677ff',
  'Completed': '#52c41a',
}

function BoardColumn({ column }: ColumnProps) {
  // Set the placement area
  const { setNodeRef, isOver } = useDroppable({ id: column.id })

  return (
    <div
      ref={setNodeRef}
      style={{
        minWidth: 300,
        maxWidth: 360,
        flex: 1,
        background: isOver ? '#e6f4ff' : (columnColors[column.title] || '#fafafa'),
        borderRadius: 12,
        padding: 12,
        transition: 'background 0.2s',
      }}
    >
      {/* Column Headings */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <Text strong style={{ fontSize: 16 }}>
          {column.title}
        </Text>
        <Tag color={columnHeaderColors[column.title] || 'default'}>
          {column.tasks.length}
        </Tag>
      </div>

      {/* Sortable Task List */}
      <SortableContext items={column.tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: 100 }}>
          {column.tasks.map(task => (
            <TaskCard key={task.id} task={task} />
          ))}
        </div>
      </SortableContext>
    </div>
  )
}
export default BoardColumn

// board/TaskCard.tsx - Drag-and-drop task cards
'use client'
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Card, Tag, Avatar, Typography, Tooltip } from 'antd'
import { CalendarOutlined } from '@ant-design/icons'

const { Text } = Typography

const priorityColors: Record<string, string> = {
  urgent: 'red',
  high: 'orange',
  middle: 'blue',
  low: 'green',
}

const priorityLabels: Record<string, string> = {
  urgent: 'Urgent',
  high: 'High',
  middle: 'in ',
  low: 'Low',
}

interface TaskCardProps {
  task: {
    id: string
    title: string
    description?: string
    priority: string
    dueDate?: string
    assignee?: { id: string; name: string; image?: string }
    position: number
  }
  isOverlay?: boolean
}

function TaskCard({ task, isOverlay }: TaskCardProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: task.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
    cursor: isOverlay ? 'grabbing' : 'grab',
  }

  return (
    <Card
      ref={setNodeRef}
      style={style}
      size="small"
      {...attributes}
      {...listeners}
      hoverable
      bodyStyle={{ padding: 12 }}
    >
      {/* Priority Labels */}
      <div style={{ marginBottom: 8 }}>
        <Tag color={priorityColors[task.priority]} style={{ fontSize: 11 }}>
          {priorityLabels[task.priority]}
        </Tag>
      </div>

      {/* Task Title */}
      <Text strong style={{ fontSize: 14, display: 'block', marginBottom: 4 }}>
        {task.title}
      </Text>

      {/* Task Description Preview */}
      {task.description && (
        <Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: 8 }}>
          {task.description.slice(0, 60)}...
        </Text>
      )}

      {/* Footer Information：Expiration Date + Person in Charge */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        {task.dueDate && (
          <Tooltip title={new Date(task.dueDate).toLocaleDateString('zh-CN')}>
            <Text type="secondary" style={{ fontSize: 11 }}>
              <CalendarOutlined /> {new Date(task.dueDate).toLocaleDateString('zh-CN')}
            </Text>
          </Tooltip>
        )}
        {task.assignee && (
          <Tooltip title={task.assignee.name}>
            <Avatar src={task.assignee.image} size={24}>
              {task.assignee.name?.[0]}
            </Avatar>
          </Tooltip>
        )}
      </div>
    </Card>
  )
}
export default TaskCard

// app/api/tasks/move/route.ts - Drag-and-Drop Synchronization API
import { prisma } from '@/lib/prisma'

export async function PUT(request: Request) {
  try {
    const { taskId, targetColumnId, position } = await request.json()

    // Update the "Assigned To" column and sort order
    const task = await prisma.task.update({
      where: { id: taskId },
      data: {
        columnId: targetColumnId,
        position,
      },
    })

    return Response.json({ success: true, task })
  } catch (error) {
    return Response.json({ error: 'Failed to move task' }, { status: 500 })
  }
}

// app/(dashboard)/page.tsx - Dashboard Home Page（List of Kanban Boards + Statistics）
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
import { redirect } from 'next/navigation'
import DashboardClient from './DashboardClient'

async function DashboardPage() {
  const session = await auth()
  if (!session?.user?.id) redirect('/login')

  // Get the user's list of boards
  const boards = await prisma.board.findMany({
    where: { ownerId: session.user.id },
    include: {
      _count: { select: { tasks: true } },
    },
    orderBy: { updatedAt: 'desc' },
  })

  // Get statistics on the number of tasks by priority
  const taskPriorityCounts = await prisma.task.groupBy({
    by: ['priority'],
    where: {
      board: { ownerId: session.user.id },
    },
    _count: true,
  })

  const stats = {
    totalTasks: taskPriorityCounts.reduce((sum, item) => sum + item._count, 0),
    priorityData: taskPriorityCounts.map(item => ({
      priority: item.priority,
      count: item._count,
    })),
  }

  return (
    <DashboardClient
      boards={JSON.parse(JSON.stringify(boards))}
      stats={JSON.parse(JSON.stringify(stats))}
    />
  )
}
export default DashboardPage

// app/(dashboard)/DashboardClient.tsx
'use client'
import { Card, Row, Col, Statistic, Typography } from 'antd'
import { PlusOutlined, ProjectOutlined, CheckCircleOutlined } from '@ant-design/icons'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
import Link from 'next/link'

const { Title } = Typography

const priorityLabels: Record<string, string> = {
  urgent: 'Urgent',
  high: 'High',
  middle: 'in ',
  low: 'Low',
}

const priorityColors: Record<string, string> = {
  urgent: '#ff4d4f',
  high: '#fa8c16',
  middle: '#1677ff',
  low: '#52c41a',
}

function DashboardClient({ boards, stats }: { boards: any[], stats: any }) {
  const chartData = stats.priorityData.map((d: any) => ({
    name: priorityLabels[d.priority] || d.priority,
    count: d.count,
    fill: priorityColors[d.priority] || '#1677ff',
  }))

  return (
    <div style={{ padding: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <Title level={3} style={{ margin: 0 }}>My Board</Title>
        <Link href="/board/new">
          <Card
            hoverable
            style={{ width: 200, textAlign: 'center', borderStyle: 'dashed' }}
          >
            <PlusOutlined style={{ fontSize: 24, color: '#1677ff' }} />
            <div style={{ marginTop: 8 }}>Create a Kanban Board</div>
          </Card>
        </Link>
      </div>

      {/* Statistical Overview */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="Total Number of Tasks"
              value={stats.totalTasks}
              prefix={<ProjectOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="Number of boards"
              value={boards.length}
              prefix={<CheckCircleOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {/* Priority Distribution Chart */}
      <Card title="Distribution of Task Priorities" style={{ marginBottom: 24 }}>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis allowDecimals={false} />
            <Tooltip />
            <Bar dataKey="count" name="Quantity" radius={[4, 4, 0, 0]}>
              {chartData.map((entry: any, index: number) => (
                <rect key={index} fill={entry.fill} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </Card>

      {/* List of Kanban Boards */}
      <Row gutter={[16, 16]}>
        {boards.map((board: any) => (
          <Col key={board.id} span={8}>
            <Link href={`/board/${board.id}`}>
              <Card
                hoverable
                style={{ borderTop: `3px solid ${board.color || '#1677ff'}` }}
              >
                <Card.Meta
                  title={board.title}
                  description={`${board._count.tasks} A task`}
                />
              </Card>
            </Link>
          </Col>
        ))}
      </Row>
    </div>
  )
}
export default DashboardClient

// app/actions/board-actions.ts - Server-Side Drag-and-Drop Sorting
'use server'
import { prisma } from '@/lib/prisma'
import { auth } from '@/lib/auth'
import { revalidatePath } from 'next/cache'

export async function moveTask(taskId: string, targetColumnId: string, newPosition: number) {
  const session = await auth()
  if (!session?.user) throw new Error('Unauthorized')

  const task = await prisma.task.findUnique({
    where: { id: taskId },
    include: { board: true },
  })

  if (!task || task.board.userId !== session.user.id) {
    throw new Error('Task not found or no permission')
  }

  await prisma.$transaction(async (tx) => {
    await tx.task.updateMany({
      where: { columnId: targetColumnId, position: { gte: newPosition } },
      data: { position: { increment: 1 } },
    })

    await tx.task.update({
      where: { id: taskId },
      data: { columnId: targetColumnId, position: newPosition },
    })
  })

  revalidatePath(`/board/${task.boardId}`)
}

export async function createTask(columnId: string, title: string, priority: string) {
  const session = await auth()
  if (!session?.user) throw new Error('Unauthorized')

  const column = await prisma.column.findUnique({
    where: { id: columnId },
    include: { board: true },
  })

  if (!column || column.board.userId !== session.user.id) {
    throw new Error('Column not found or no permission')
  }

  const maxPosition = await prisma.task.findMany({
    where: { columnId },
    orderBy: { position: 'desc' },
    take: 1,
    select: { position: true },
  })

  const task = await prisma.task.create({
    data: {
      title,
      priority: priority as any,
      columnId,
      boardId: column.boardId,
      position: (maxPosition[0]?.position ?? -1) + 1,
    },
  })

  revalidatePath(`/board/${column.boardId}`)
  return task
}