بناء تطبيق متكامل باستخدام Prisma ORM و Next.js 15 App Router

npx create-next-app@latest project-manager --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd project-manager

npm install prisma --save-dev
npm install @prisma/client

npx prisma init --datasource-provider postgresql

DATABASE_URL="postgresql://user:password@localhost:5432/project_manager?schema=public"

docker run --name pg-prisma -e POSTGRES_USER=user -e POSTGRES_PASSWORD=password -e POSTGRES_DB=project_manager -p 5432:5432 -d postgres:16

generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
model Project {
  id          String   @id @default(cuid())
  name        String
  description String?
  color       String   @default("#3b82f6")
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
 
  tasks Task[]
 
  @@map("projects")
}
 
model Task {
  id          String     @id @default(cuid())
  title       String
  description String?
  status      TaskStatus @default(TODO)
  priority    Priority   @default(MEDIUM)
  dueDate     DateTime?
  createdAt   DateTime   @default(now())
  updatedAt   DateTime   @updatedAt
 
  projectId String
  project   Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
 
  @@index([projectId])
  @@index([status])
  @@map("tasks")
}
 
enum TaskStatus {
  TODO
  IN_PROGRESS
  DONE
}
 
enum Priority {
  LOW
  MEDIUM
  HIGH
  URGENT
}

npx prisma migrate dev --name init

import { PrismaClient } from "@prisma/client";
 
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};
 
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
 
if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

import { PrismaClient, TaskStatus, Priority } from "@prisma/client";
 
const prisma = new PrismaClient();
 
async function main() {
  // تنظيف البيانات الحالية
  await prisma.task.deleteMany();
  await prisma.project.deleteMany();
 
  // إنشاء مشاريع مع مهام
  const webApp = await prisma.project.create({
    data: {
      name: "إعادة تصميم تطبيق الويب",
      description: "تجديد شامل لموقع الشركة",
      color: "#3b82f6",
      tasks: {
        create: [
          {
            title: "تصميم صفحة هبوط جديدة",
            description: "إنشاء إطارات سلكية ونماذج للصفحة الرئيسية",
            status: TaskStatus.DONE,
            priority: Priority.HIGH,
            dueDate: new Date("2026-04-15"),
          },
          {
            title: "تنفيذ المصادقة",
            description: "إعداد تسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور",
            status: TaskStatus.IN_PROGRESS,
            priority: Priority.URGENT,
            dueDate: new Date("2026-04-20"),
          },
          {
            title: "بناء لوحة التحكم",
            description: "إنشاء لوحة تحكم المستخدم الرئيسية مع الرسوم البيانية",
            status: TaskStatus.TODO,
            priority: Priority.MEDIUM,
            dueDate: new Date("2026-05-01"),
          },
          {
            title: "كتابة وثائق API",
            status: TaskStatus.TODO,
            priority: Priority.LOW,
          },
        ],
      },
    },
  });
 
  const mobileApp = await prisma.project.create({
    data: {
      name: "النموذج الأولي لتطبيق الجوال",
      description: "تطبيق React Native لـ iOS و Android",
      color: "#10b981",
      tasks: {
        create: [
          {
            title: "إعداد مشروع Expo",
            status: TaskStatus.DONE,
            priority: Priority.HIGH,
          },
          {
            title: "بناء هيكل التنقل",
            status: TaskStatus.IN_PROGRESS,
            priority: Priority.HIGH,
            dueDate: new Date("2026-04-10"),
          },
          {
            title: "دمج الإشعارات الفورية",
            status: TaskStatus.TODO,
            priority: Priority.MEDIUM,
            dueDate: new Date("2026-05-15"),
          },
        ],
      },
    },
  });
 
  console.log("تم بذر المشاريع:", { webApp: webApp.id, mobileApp: mobileApp.id });
}
 
main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

{
  "prisma": {
    "seed": "npx tsx prisma/seed.ts"
  }
}

npx prisma db seed

npx prisma studio

import { z } from "zod";
 
export const createProjectSchema = z.object({
  name: z.string().min(1, "الاسم مطلوب").max(100),
  description: z.string().max(500).optional(),
  color: z.string().regex(/^#[0-9a-fA-F]{6}$/, "صيغة لون غير صالحة"),
});
 
export const createTaskSchema = z.object({
  title: z.string().min(1, "العنوان مطلوب").max(200),
  description: z.string().max(1000).optional(),
  status: z.enum(["TODO", "IN_PROGRESS", "DONE"]).default("TODO"),
  priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
  dueDate: z.string().optional(),
  projectId: z.string().min(1, "المشروع مطلوب"),
});
 
export const updateTaskSchema = createTaskSchema.partial().extend({
  id: z.string().min(1),
});
 
export type CreateProjectInput = z.infer<typeof createProjectSchema>;
export type CreateTaskInput = z.infer<typeof createTaskSchema>;
export type UpdateTaskInput = z.infer<typeof updateTaskSchema>;

"use server";
 
import { revalidatePath } from "next/cache";
import { prisma } from "@/lib/prisma";
import {
  createProjectSchema,
  createTaskSchema,
  updateTaskSchema,
} from "@/lib/validations";
 
// ─── إجراءات المشاريع ─────────────────────────────────
 
export async function createProject(formData: FormData) {
  const raw = {
    name: formData.get("name") as string,
    description: formData.get("description") as string,
    color: formData.get("color") as string,
  };
 
  const validated = createProjectSchema.safeParse(raw);
  if (!validated.success) {
    return { error: validated.error.flatten().fieldErrors };
  }
 
  await prisma.project.create({
    data: validated.data,
  });
 
  revalidatePath("/");
  return { success: true };
}
 
export async function deleteProject(id: string) {
  await prisma.project.delete({
    where: { id },
  });
 
  revalidatePath("/");
  return { success: true };
}
 
// ─── إجراءات المهام ─────────────────────────────────────
 
export async function createTask(formData: FormData) {
  const raw = {
    title: formData.get("title") as string,
    description: formData.get("description") as string,
    status: formData.get("status") as string,
    priority: formData.get("priority") as string,
    dueDate: formData.get("dueDate") as string,
    projectId: formData.get("projectId") as string,
  };
 
  const validated = createTaskSchema.safeParse(raw);
  if (!validated.success) {
    return { error: validated.error.flatten().fieldErrors };
  }
 
  const { dueDate, ...rest } = validated.data;
 
  await prisma.task.create({
    data: {
      ...rest,
      dueDate: dueDate ? new Date(dueDate) : null,
    },
  });
 
  revalidatePath("/");
  return { success: true };
}
 
export async function updateTaskStatus(id: string, status: string) {
  const validated = updateTaskSchema.safeParse({ id, status });
  if (!validated.success) {
    return { error: "مدخل غير صالح" };
  }
 
  await prisma.task.update({
    where: { id },
    data: { status: validated.data.status },
  });
 
  revalidatePath("/");
  return { success: true };
}
 
export async function deleteTask(id: string) {
  await prisma.task.delete({
    where: { id },
  });
 
  revalidatePath("/");
  return { success: true };
}

import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { deleteProject } from "./actions";
 
export default async function HomePage() {
  const projects = await prisma.project.findMany({
    include: {
      _count: {
        select: { tasks: true },
      },
      tasks: {
        select: { status: true },
      },
    },
    orderBy: { createdAt: "desc" },
  });
 
  return (
    <main className="max-w-4xl mx-auto p-8">
      <div className="flex items-center justify-between mb-8">
        <h1 className="text-3xl font-bold">المشاريع</h1>
        <Link
          href="/projects/new"
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
        >
          مشروع جديد
        </Link>
      </div>
 
      <div className="grid gap-4">
        {projects.map((project) => {
          const done = project.tasks.filter((t) => t.status === "DONE").length;
          const total = project._count.tasks;
          const progress = total > 0 ? Math.round((done / total) * 100) : 0;
 
          return (
            <Link
              key={project.id}
              href={`/projects/${project.id}`}
              className="block border rounded-lg p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3">
                  <div
                    className="w-4 h-4 rounded-full"
                    style={{ backgroundColor: project.color }}
                  />
                  <div>
                    <h2 className="text-xl font-semibold">{project.name}</h2>
                    {project.description && (
                      <p className="text-gray-500 mt-1">
                        {project.description}
                      </p>
                    )}
                  </div>
                </div>
                <span className="text-sm text-gray-400">
                  {total} مهمة
                </span>
              </div>
 
              {total > 0 && (
                <div className="mt-4">
                  <div className="flex justify-between text-sm mb-1">
                    <span className="text-gray-500">التقدم</span>
                    <span className="font-medium">{progress}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div
                      className="h-2 rounded-full transition-all"
                      style={{
                        width: `${progress}%`,
                        backgroundColor: project.color,
                      }}
                    />
                  </div>
                </div>
              )}
            </Link>
          );
        })}
      </div>
 
      {projects.length === 0 && (
        <div className="text-center py-12 text-gray-500">
          <p className="text-lg">لا توجد مشاريع بعد</p>
          <p className="mt-2">أنشئ مشروعك الأول للبدء.</p>
        </div>
      )}
    </main>
  );
}

import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { TaskList } from "./task-list";
import { TaskForm } from "./task-form";
 
interface Props {
  params: Promise<{ id: string }>;
}
 
export default async function ProjectPage({ params }: Props) {
  const { id } = await params;
 
  const project = await prisma.project.findUnique({
    where: { id },
    include: {
      tasks: {
        orderBy: [
          { status: "asc" },
          { priority: "desc" },
          { createdAt: "desc" },
        ],
      },
    },
  });
 
  if (!project) {
    notFound();
  }
 
  const tasksByStatus = {
    TODO: project.tasks.filter((t) => t.status === "TODO"),
    IN_PROGRESS: project.tasks.filter((t) => t.status === "IN_PROGRESS"),
    DONE: project.tasks.filter((t) => t.status === "DONE"),
  };
 
  return (
    <main className="max-w-5xl mx-auto p-8">
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-2">
          <div
            className="w-5 h-5 rounded-full"
            style={{ backgroundColor: project.color }}
          />
          <h1 className="text-3xl font-bold">{project.name}</h1>
        </div>
        {project.description && (
          <p className="text-gray-500 text-lg">{project.description}</p>
        )}
      </div>
 
      <TaskForm projectId={project.id} />
 
      <div className="grid md:grid-cols-3 gap-6 mt-8">
        <TaskColumn title="قيد الانتظار" tasks={tasksByStatus.TODO} color="#6b7280" />
        <TaskColumn
          title="قيد التنفيذ"
          tasks={tasksByStatus.IN_PROGRESS}
          color="#f59e0b"
        />
        <TaskColumn title="مكتمل" tasks={tasksByStatus.DONE} color="#10b981" />
      </div>
    </main>
  );
}
 
function TaskColumn({
  title,
  tasks,
  color,
}: {
  title: string;
  tasks: any[];
  color: string;
}) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-4">
        <div
          className="w-3 h-3 rounded-full"
          style={{ backgroundColor: color }}
        />
        <h2 className="font-semibold text-lg">{title}</h2>
        <span className="text-sm text-gray-400 ml-auto">{tasks.length}</span>
      </div>
      <TaskList tasks={tasks} />
    </div>
  );
}

"use client";
 
import { updateTaskStatus, deleteTask } from "@/app/actions";
import { useTransition } from "react";
 
interface Task {
  id: string;
  title: string;
  description: string | null;
  status: string;
  priority: string;
  dueDate: string | null;
}
 
const priorityColors: Record<string, string> = {
  LOW: "bg-gray-100 text-gray-600",
  MEDIUM: "bg-blue-100 text-blue-600",
  HIGH: "bg-orange-100 text-orange-600",
  URGENT: "bg-red-100 text-red-600",
};
 
export function TaskList({ tasks }: { tasks: Task[] }) {
  return (
    <div className="space-y-3">
      {tasks.map((task) => (
        <TaskCard key={task.id} task={task} />
      ))}
      {tasks.length === 0 && (
        <p className="text-gray-400 text-sm text-center py-4">لا توجد مهام</p>
      )}
    </div>
  );
}
 
function TaskCard({ task }: { task: Task }) {
  const [isPending, startTransition] = useTransition();
 
  const handleStatusChange = (newStatus: string) => {
    startTransition(() => {
      updateTaskStatus(task.id, newStatus);
    });
  };
 
  const handleDelete = () => {
    startTransition(() => {
      deleteTask(task.id);
    });
  };
 
  return (
    <div
      className={`border rounded-lg p-4 bg-white ${
        isPending ? "opacity-50" : ""
      }`}
    >
      <div className="flex items-start justify-between">
        <h3 className="font-medium">{task.title}</h3>
        <button
          onClick={handleDelete}
          className="text-gray-400 hover:text-red-500 text-sm"
        >
          &times;
        </button>
      </div>
 
      {task.description && (
        <p className="text-gray-500 text-sm mt-1">{task.description}</p>
      )}
 
      <div className="flex items-center gap-2 mt-3">
        <span
          className={`text-xs px-2 py-1 rounded-full ${
            priorityColors[task.priority]
          }`}
        >
          {task.priority}
        </span>
 
        {task.dueDate && (
          <span className="text-xs text-gray-400">
            الاستحقاق {new Date(task.dueDate).toLocaleDateString("ar")}
          </span>
        )}
      </div>
 
      <div className="flex gap-1 mt-3">
        {["TODO", "IN_PROGRESS", "DONE"].map((status) => (
          <button
            key={status}
            onClick={() => handleStatusChange(status)}
            disabled={task.status === status}
            className={`text-xs px-2 py-1 rounded ${
              task.status === status
                ? "bg-gray-900 text-white"
                : "bg-gray-100 hover:bg-gray-200 text-gray-600"
            }`}
          >
            {status.replace("_", " ")}
          </button>
        ))}
      </div>
    </div>
  );
}

"use client";
 
import { createTask } from "@/app/actions";
import { useRef } from "react";
import { useActionState } from "react";
 
const initialState = { error: null as any, success: false };
 
export function TaskForm({ projectId }: { projectId: string }) {
  const formRef = useRef<HTMLFormElement>(null);
 
  async function action(_prev: typeof initialState, formData: FormData) {
    formData.set("projectId", projectId);
    const result = await createTask(formData);
    if (result.success) {
      formRef.current?.reset();
    }
    return result as typeof initialState;
  }
 
  const [state, formAction, isPending] = useActionState(action, initialState);
 
  return (
    <form ref={formRef} action={formAction} className="border rounded-lg p-4">
      <h3 className="font-semibold mb-3">إضافة مهمة جديدة</h3>
 
      <div className="grid md:grid-cols-2 gap-3">
        <input
          name="title"
          placeholder="عنوان المهمة"
          required
          className="border rounded px-3 py-2"
        />
 
        <select name="priority" className="border rounded px-3 py-2">
          <option value="LOW">أولوية منخفضة</option>
          <option value="MEDIUM" selected>أولوية متوسطة</option>
          <option value="HIGH">أولوية عالية</option>
          <option value="URGENT">عاجل</option>
        </select>
 
        <input
          name="description"
          placeholder="الوصف (اختياري)"
          className="border rounded px-3 py-2"
        />
 
        <input
          name="dueDate"
          type="date"
          className="border rounded px-3 py-2"
        />
      </div>
 
      <input type="hidden" name="status" value="TODO" />
 
      {state.error && (
        <p className="text-red-500 text-sm mt-2">
          {Object.values(state.error).flat().join("، ")}
        </p>
      )}
 
      <button
        type="submit"
        disabled={isPending}
        className="mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
      >
        {isPending ? "جاري الإضافة..." : "إضافة مهمة"}
      </button>
    </form>
  );
}

// جلب المهام مع مرشحات
const tasks = await prisma.task.findMany({
  where: {
    projectId: "some-id",
    status: "IN_PROGRESS",
    priority: { in: ["HIGH", "URGENT"] },
    dueDate: { lte: new Date() }, // المهام المتأخرة
  },
  orderBy: { priority: "desc" },
  skip: 0,
  take: 20,
});

// عدّ المهام حسب الحالة لكل مشروع
const stats = await prisma.task.groupBy({
  by: ["projectId", "status"],
  _count: { id: true },
});

// إنشاء مشروع مع مهام في معاملة واحدة
const project = await prisma.project.create({
  data: {
    name: "مشروع جديد",
    tasks: {
      createMany: {
        data: [
          { title: "المهمة 1", priority: "HIGH" },
          { title: "المهمة 2", priority: "MEDIUM" },
        ],
      },
    },
  },
  include: { tasks: true },
});

// نقل جميع المهام من مشروع إلى آخر
await prisma.$transaction(async (tx) => {
  const tasks = await tx.task.findMany({
    where: { projectId: sourceId },
  });
 
  await tx.task.updateMany({
    where: { projectId: sourceId },
    data: { projectId: targetId },
  });
 
  await tx.project.delete({
    where: { id: sourceId },
  });
 
  return tasks.length;
});

"use client";
 
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback } from "react";
 
export function SearchBar() {
  const router = useRouter();
  const searchParams = useSearchParams();
 
  const updateFilter = useCallback(
    (key: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString());
      if (value) {
        params.set(key, value);
      } else {
        params.delete(key);
      }
      router.push(`/?${params.toString()}`);
    },
    [router, searchParams]
  );
 
  return (
    <div className="flex gap-3 mb-6">
      <input
        type="search"
        placeholder="البحث في المشاريع..."
        defaultValue={searchParams.get("q") ?? ""}
        onChange={(e) => updateFilter("q", e.target.value)}
        className="border rounded px-3 py-2 flex-1"
      />
      <select
        defaultValue={searchParams.get("sort") ?? "newest"}
        onChange={(e) => updateFilter("sort", e.target.value)}
        className="border rounded px-3 py-2"
      >
        <option value="newest">الأحدث أولاً</option>
        <option value="oldest">الأقدم أولاً</option>
        <option value="name">حسب الاسم</option>
      </select>
    </div>
  );
}

interface Props {
  searchParams: Promise<{ q?: string; sort?: string }>;
}
 
export default async function HomePage({ searchParams }: Props) {
  const { q, sort } = await searchParams;
 
  const projects = await prisma.project.findMany({
    where: q
      ? {
          OR: [
            { name: { contains: q, mode: "insensitive" } },
            { description: { contains: q, mode: "insensitive" } },
          ],
        }
      : undefined,
    include: {
      _count: { select: { tasks: true } },
      tasks: { select: { status: true } },
    },
    orderBy:
      sort === "name"
        ? { name: "asc" }
        : sort === "oldest"
        ? { createdAt: "asc" }
        : { createdAt: "desc" },
  });
 
  // ... بقية المكون
}

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

npm install @prisma/extension-accelerate

import { PrismaClient } from "@prisma/client";
import { withAccelerate } from "@prisma/extension-accelerate";
 
export const prisma = new PrismaClient().$extends(withAccelerate());

export const prisma = new PrismaClient({
  log:
    process.env.NODE_ENV === "development"
      ? ["query", "error", "warn"]
      : ["error"],
});

npx prisma generate

await prisma.project.upsert({
  where: { id: "existing-id" },
  update: { name: "اسم محدّث" },
  create: { name: "مشروع جديد" },
});

npx prisma migrate resolve --applied "migration_name"

npx prisma migrate reset