[ { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.*\n.yarn/*\n!.yarn/patches\n!.yarn/plugins\n!.yarn/releases\n!.yarn/versions\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# env files (can opt-in for committing if needed)\n.env*\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2025 WebDevSimplified\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n" }, { "path": "components.json", "content": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"new-york\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.ts\",\n \"css\": \"src/app/globals.css\",\n \"baseColor\": \"zinc\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\",\n \"ui\": \"@/components/ui\",\n \"lib\": \"@/lib\",\n \"hooks\": \"@/hooks\"\n },\n \"iconLibrary\": \"lucide\"\n}" }, { "path": "docker-compose.yml", "content": "services:\n db:\n image: postgres:17.0\n hostname: localhost\n ports:\n - \"5432:5432\"\n environment:\n - POSTGRES_PASSWORD=${DB_PASSWORD}\n - POSTGRES_USER=${DB_USER}\n - POSTGRES_DB=${DB_NAME}\n volumes:\n - pgdata:/var/lib/postgresql/data\nvolumes:\n pgdata:\n" }, { "path": "drizzle.config.ts", "content": "import { env } from \"@/data/env/server\"\nimport { defineConfig } from \"drizzle-kit\"\n\nexport default defineConfig({\n out: \"./src/drizzle/migrations\",\n schema: \"./src/drizzle/schema.ts\",\n dialect: \"postgresql\",\n strict: true,\n verbose: true,\n dbCredentials: {\n password: env.DB_PASSWORD,\n user: env.DB_USER,\n database: env.DB_NAME,\n host: env.DB_HOST,\n ssl: false,\n },\n})\n" }, { "path": "eslint.config.mjs", "content": "import { dirname } from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { FlatCompat } from \"@eslint/eslintrc\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nconst compat = new FlatCompat({\n baseDirectory: __dirname,\n});\n\nconst eslintConfig = [\n ...compat.extends(\"next/core-web-vitals\", \"next/typescript\"),\n];\n\nexport default eslintConfig;\n" }, { "path": "next.config.ts", "content": "import type { NextConfig } from \"next\"\n\nconst nextConfig: NextConfig = {\n /* config options here */\n experimental: {\n dynamicIO: true,\n authInterrupts: true,\n },\n}\n\nexport default nextConfig\n" }, { "path": "package.json", "content": "{\n \"name\": \"course-platform-project\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\",\n \"db:generate\": \"drizzle-kit generate\",\n \"db:migrate\": \"drizzle-kit migrate\",\n \"db:studio\": \"drizzle-kit studio\"\n },\n \"dependencies\": {\n \"@arcjet/next\": \"^1.0.0-beta.1\",\n \"@clerk/nextjs\": \"^6.9.10\",\n \"@dnd-kit/core\": \"^6.3.1\",\n \"@dnd-kit/sortable\": \"^10.0.0\",\n \"@hookform/resolvers\": \"^3.10.0\",\n \"@radix-ui/react-accordion\": \"^1.2.2\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.4\",\n \"@radix-ui/react-dialog\": \"^1.1.4\",\n \"@radix-ui/react-label\": \"^2.1.1\",\n \"@radix-ui/react-popover\": \"^1.1.4\",\n \"@radix-ui/react-select\": \"^2.1.4\",\n \"@radix-ui/react-slot\": \"^1.1.1\",\n \"@radix-ui/react-tabs\": \"^1.1.2\",\n \"@radix-ui/react-toast\": \"^1.2.4\",\n \"@stripe/react-stripe-js\": \"^3.1.1\",\n \"@stripe/stripe-js\": \"^5.5.0\",\n \"@t3-oss/env-nextjs\": \"^0.11.1\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.0.0\",\n \"drizzle-orm\": \"^0.38.3\",\n \"lucide-react\": \"^0.471.1\",\n \"next\": \"^15.2.0-canary.12\",\n \"pg\": \"^8.13.1\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"react-hook-form\": \"^7.54.2\",\n \"react-youtube\": \"^10.1.0\",\n \"stripe\": \"^17.5.0\",\n \"svix\": \"^1.45.1\",\n \"tailwind-merge\": \"^2.6.0\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"zod\": \"^3.24.1\"\n },\n \"devDependencies\": {\n \"@eslint/eslintrc\": \"^3\",\n \"@tailwindcss/container-queries\": \"^0.1.1\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^19\",\n \"@types/react-dom\": \"^19\",\n \"drizzle-kit\": \"^0.30.1\",\n \"eslint\": \"^9\",\n \"eslint-config-next\": \"15.2.0-canary.11\",\n \"postcss\": \"^8\",\n \"tailwindcss\": \"^3.4.1\",\n \"typescript\": \"^5\"\n }\n}\n" }, { "path": "postcss.config.mjs", "content": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n plugins: {\n tailwindcss: {},\n },\n};\n\nexport default config;\n" }, { "path": "src/app/(auth)/layout.tsx", "content": "export default async function AuthLayout({\n children,\n}: {\n children: React.ReactNode\n}) {\n return (\n
\n {children}\n
\n )\n}\n" }, { "path": "src/app/(auth)/sign-in/[[...sign-in]]/page.tsx", "content": "import { SignIn } from \"@clerk/nextjs\"\n\nexport default function Page() {\n return \n}\n" }, { "path": "src/app/(auth)/sign-up/[[...sign-up]]/page.tsx", "content": "import { SignUp } from \"@clerk/nextjs\"\n\nexport default function Page() {\n return \n}\n" }, { "path": "src/app/(consumer)/courses/[courseId]/_client.tsx", "content": "\"use client\"\n\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { CheckCircle2Icon, VideoIcon } from \"lucide-react\"\nimport Link from \"next/link\"\nimport { useParams } from \"next/navigation\"\n\nexport function CoursePageClient({\n course,\n}: {\n course: {\n id: string\n courseSections: {\n id: string\n name: string\n lessons: {\n id: string\n name: string\n isComplete: boolean\n }[]\n }[]\n }\n}) {\n const { lessonId } = useParams()\n const defaultValue =\n typeof lessonId === \"string\"\n ? course.courseSections.find(section =>\n section.lessons.find(lesson => lesson.id === lessonId)\n )\n : course.courseSections[0]\n\n return (\n \n {course.courseSections.map(section => (\n \n \n {section.name}\n \n \n {section.lessons.map(lesson => (\n \n \n \n {lesson.name}\n {lesson.isComplete && (\n \n )}\n \n \n ))}\n \n \n ))}\n \n )\n}\n" }, { "path": "src/app/(consumer)/courses/[courseId]/layout.tsx", "content": "import { db } from \"@/drizzle/db\"\nimport {\n CourseSectionTable,\n CourseTable,\n LessonTable,\n UserLessonCompleteTable,\n} from \"@/drizzle/schema\"\nimport { getCourseIdTag } from \"@/features/courses/db/cache/courses\"\nimport { getCourseSectionCourseTag } from \"@/features/courseSections/db/cache\"\nimport { wherePublicCourseSections } from \"@/features/courseSections/permissions/sections\"\nimport { getLessonCourseTag } from \"@/features/lessons/db/cache/lessons\"\nimport { wherePublicLessons } from \"@/features/lessons/permissions/lessons\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { asc, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { notFound } from \"next/navigation\"\nimport { ReactNode, Suspense } from \"react\"\nimport { CoursePageClient } from \"./_client\"\nimport { getUserLessonCompleteUserTag } from \"@/features/lessons/db/cache/userLessonComplete\"\n\nexport default async function CoursePageLayout({\n params,\n children,\n}: {\n params: Promise<{ courseId: string }>\n children: ReactNode\n}) {\n const { courseId } = await params\n const course = await getCourse(courseId)\n\n if (course == null) return notFound()\n\n return (\n
\n
\n
{course.name}
\n }\n >\n \n \n
\n
{children}
\n
\n )\n}\n\nasync function getCourse(id: string) {\n \"use cache\"\n cacheTag(\n getCourseIdTag(id),\n getCourseSectionCourseTag(id),\n getLessonCourseTag(id)\n )\n\n return db.query.CourseTable.findFirst({\n where: eq(CourseTable.id, id),\n columns: { id: true, name: true },\n with: {\n courseSections: {\n orderBy: asc(CourseSectionTable.order),\n where: wherePublicCourseSections,\n columns: { id: true, name: true },\n with: {\n lessons: {\n orderBy: asc(LessonTable.order),\n where: wherePublicLessons,\n columns: {\n id: true,\n name: true,\n },\n },\n },\n },\n },\n })\n}\n\nasync function SuspenseBoundary({\n course,\n}: {\n course: {\n name: string\n id: string\n courseSections: {\n name: string\n id: string\n lessons: {\n name: string\n id: string\n }[]\n }[]\n }\n}) {\n const { userId } = await getCurrentUser()\n const completedLessonIds =\n userId == null ? [] : await getCompletedLessonIds(userId)\n\n return \n}\n\nasync function getCompletedLessonIds(userId: string) {\n \"use cache\"\n cacheTag(getUserLessonCompleteUserTag(userId))\n\n const data = await db.query.UserLessonCompleteTable.findMany({\n columns: { lessonId: true },\n where: eq(UserLessonCompleteTable.userId, userId),\n })\n\n return data.map(d => d.lessonId)\n}\n\nfunction mapCourse(\n course: {\n name: string\n id: string\n courseSections: {\n name: string\n id: string\n lessons: {\n name: string\n id: string\n }[]\n }[]\n },\n completedLessonIds: string[]\n) {\n return {\n ...course,\n courseSections: course.courseSections.map(section => {\n return {\n ...section,\n lessons: section.lessons.map(lesson => {\n return {\n ...lesson,\n isComplete: completedLessonIds.includes(lesson.id),\n }\n }),\n }\n }),\n }\n}\n" }, { "path": "src/app/(consumer)/courses/[courseId]/lessons/[lessonId]/page.tsx", "content": "import { ActionButton } from \"@/components/ActionButton\"\nimport { SkeletonButton } from \"@/components/Skeleton\"\nimport { Button } from \"@/components/ui/button\"\nimport { db } from \"@/drizzle/db\"\nimport {\n CourseSectionTable,\n LessonStatus,\n LessonTable,\n UserLessonCompleteTable,\n} from \"@/drizzle/schema\"\nimport { wherePublicCourseSections } from \"@/features/courseSections/permissions/sections\"\nimport { updateLessonCompleteStatus } from \"@/features/lessons/actions/userLessonComplete\"\nimport { YouTubeVideoPlayer } from \"@/features/lessons/components/YouTubeVideoPlayer\"\nimport { getLessonIdTag } from \"@/features/lessons/db/cache/lessons\"\nimport { getUserLessonCompleteIdTag } from \"@/features/lessons/db/cache/userLessonComplete\"\nimport {\n canViewLesson,\n wherePublicLessons,\n} from \"@/features/lessons/permissions/lessons\"\nimport { canUpdateUserLessonCompleteStatus } from \"@/features/lessons/permissions/userLessonComplete\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { and, asc, desc, eq, gt, lt } from \"drizzle-orm\"\nimport { CheckSquare2Icon, LockIcon, XSquareIcon } from \"lucide-react\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { ReactNode, Suspense } from \"react\"\n\nexport default async function LessonPage({\n params,\n}: {\n params: Promise<{ courseId: string; lessonId: string }>\n}) {\n const { courseId, lessonId } = await params\n const lesson = await getLesson(lessonId)\n\n if (lesson == null) return notFound()\n\n return (\n }>\n \n \n )\n}\n\nfunction LoadingSkeleton() {\n return null\n}\n\nasync function SuspenseBoundary({\n lesson,\n courseId,\n}: {\n lesson: {\n id: string\n youtubeVideoId: string\n name: string\n description: string | null\n status: LessonStatus\n sectionId: string\n order: number\n }\n courseId: string\n}) {\n const { userId, role } = await getCurrentUser()\n const isLessonComplete =\n userId == null\n ? false\n : await getIsLessonComplete({ lessonId: lesson.id, userId })\n const canView = await canViewLesson({ role, userId }, lesson)\n const canUpdateCompletionStatus = await canUpdateUserLessonCompleteStatus(\n { userId },\n lesson.id\n )\n\n return (\n
\n
\n {canView ? (\n \n ) : (\n
\n \n
\n )}\n
\n
\n
\n

{lesson.name}

\n
\n }>\n \n Previous\n \n \n {canUpdateCompletionStatus && (\n \n
\n {isLessonComplete ? (\n <>\n Mark Incomplete\n \n ) : (\n <>\n Mark Complete\n \n )}\n
\n \n )}\n }>\n \n Next\n \n \n
\n
\n {canView ? (\n lesson.description &&

{lesson.description}

\n ) : (\n

This lesson is locked. Please purchase the course to view it.

\n )}\n
\n
\n )\n}\n\nasync function ToLessonButton({\n children,\n courseId,\n lessonFunc,\n lesson,\n}: {\n children: ReactNode\n courseId: string\n lesson: {\n id: string\n sectionId: string\n order: number\n }\n lessonFunc: (lesson: {\n id: string\n sectionId: string\n order: number\n }) => Promise<{ id: string } | undefined>\n}) {\n const toLesson = await lessonFunc(lesson)\n if (toLesson == null) return null\n\n return (\n \n )\n}\n\nasync function getPreviousLesson(lesson: {\n id: string\n sectionId: string\n order: number\n}) {\n let previousLesson = await db.query.LessonTable.findFirst({\n where: and(\n lt(LessonTable.order, lesson.order),\n eq(LessonTable.sectionId, lesson.sectionId),\n wherePublicLessons\n ),\n orderBy: desc(LessonTable.order),\n columns: { id: true },\n })\n\n if (previousLesson == null) {\n const section = await db.query.CourseSectionTable.findFirst({\n where: eq(CourseSectionTable.id, lesson.sectionId),\n columns: { order: true, courseId: true },\n })\n\n if (section == null) return\n\n const previousSection = await db.query.CourseSectionTable.findFirst({\n where: and(\n lt(CourseSectionTable.order, section.order),\n eq(CourseSectionTable.courseId, section.courseId),\n wherePublicCourseSections\n ),\n orderBy: desc(CourseSectionTable.order),\n columns: { id: true },\n })\n\n if (previousSection == null) return\n\n previousLesson = await db.query.LessonTable.findFirst({\n where: and(\n eq(LessonTable.sectionId, previousSection.id),\n wherePublicLessons\n ),\n orderBy: desc(LessonTable.order),\n columns: { id: true },\n })\n }\n\n return previousLesson\n}\n\nasync function getNextLesson(lesson: {\n id: string\n sectionId: string\n order: number\n}) {\n let nextLesson = await db.query.LessonTable.findFirst({\n where: and(\n gt(LessonTable.order, lesson.order),\n eq(LessonTable.sectionId, lesson.sectionId),\n wherePublicLessons\n ),\n orderBy: asc(LessonTable.order),\n columns: { id: true },\n })\n\n if (nextLesson == null) {\n const section = await db.query.CourseSectionTable.findFirst({\n where: eq(CourseSectionTable.id, lesson.sectionId),\n columns: { order: true, courseId: true },\n })\n\n if (section == null) return\n\n const nextSection = await db.query.CourseSectionTable.findFirst({\n where: and(\n gt(CourseSectionTable.order, section.order),\n eq(CourseSectionTable.courseId, section.courseId),\n wherePublicCourseSections\n ),\n orderBy: asc(CourseSectionTable.order),\n columns: { id: true },\n })\n\n if (nextSection == null) return\n\n nextLesson = await db.query.LessonTable.findFirst({\n where: and(eq(LessonTable.sectionId, nextSection.id), wherePublicLessons),\n orderBy: asc(LessonTable.order),\n columns: { id: true },\n })\n }\n\n return nextLesson\n}\n\nasync function getLesson(id: string) {\n \"use cache\"\n cacheTag(getLessonIdTag(id))\n\n return db.query.LessonTable.findFirst({\n columns: {\n id: true,\n youtubeVideoId: true,\n name: true,\n description: true,\n status: true,\n sectionId: true,\n order: true,\n },\n where: and(eq(LessonTable.id, id), wherePublicLessons),\n })\n}\n\nasync function getIsLessonComplete({\n userId,\n lessonId,\n}: {\n userId: string\n lessonId: string\n}) {\n \"use cache\"\n cacheTag(getUserLessonCompleteIdTag({ userId, lessonId }))\n\n const data = await db.query.UserLessonCompleteTable.findFirst({\n where: and(\n eq(UserLessonCompleteTable.userId, userId),\n eq(UserLessonCompleteTable.lessonId, lessonId)\n ),\n })\n\n return data != null\n}\n" }, { "path": "src/app/(consumer)/courses/[courseId]/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { db } from \"@/drizzle/db\"\nimport { CourseTable } from \"@/drizzle/schema\"\nimport { getCourseIdTag } from \"@/features/courses/db/cache/courses\"\nimport { eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { notFound } from \"next/navigation\"\n\nexport default async function CoursePage({\n params,\n}: {\n params: Promise<{ courseId: string }>\n}) {\n const { courseId } = await params\n const course = await getCourse(courseId)\n\n if (course == null) return notFound()\n\n return (\n
\n \n

{course.description}

\n
\n )\n}\n\nasync function getCourse(id: string) {\n \"use cache\"\n cacheTag(getCourseIdTag(id))\n\n return db.query.CourseTable.findFirst({\n columns: { id: true, name: true, description: true },\n where: eq(CourseTable.id, id),\n })\n}\n" }, { "path": "src/app/(consumer)/courses/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport {\n SkeletonArray,\n SkeletonButton,\n SkeletonText,\n} from \"@/components/Skeleton\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { db } from \"@/drizzle/db\"\nimport {\n CourseSectionTable,\n CourseTable,\n LessonTable,\n UserCourseAccessTable,\n UserLessonCompleteTable,\n} from \"@/drizzle/schema\"\nimport { getCourseIdTag } from \"@/features/courses/db/cache/courses\"\nimport { getUserCourseAccessUserTag } from \"@/features/courses/db/cache/userCourseAccess\"\nimport { getCourseSectionCourseTag } from \"@/features/courseSections/db/cache\"\nimport { wherePublicCourseSections } from \"@/features/courseSections/permissions/sections\"\nimport { getLessonCourseTag } from \"@/features/lessons/db/cache/lessons\"\nimport { getUserLessonCompleteUserTag } from \"@/features/lessons/db/cache/userLessonComplete\"\nimport { wherePublicLessons } from \"@/features/lessons/permissions/lessons\"\nimport { formatPlural } from \"@/lib/formatters\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { and, countDistinct, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport Link from \"next/link\"\nimport { Suspense } from \"react\"\n\nexport default function CoursesPage() {\n return (\n
\n \n
\n \n \n \n }\n >\n \n \n
\n
\n )\n}\n\nasync function CourseGrid() {\n const { userId, redirectToSignIn } = await getCurrentUser()\n if (userId == null) return redirectToSignIn()\n\n const courses = await getUserCourses(userId)\n\n if (courses.length === 0) {\n return (\n
\n You have no courses yet\n \n
\n )\n }\n\n return courses.map(course => (\n \n \n {course.name}\n \n {formatPlural(course.sectionsCount, {\n plural: \"sections\",\n singular: \"section\",\n })}{\" \"}\n •{\" \"}\n {formatPlural(course.lessonsCount, {\n plural: \"lessons\",\n singular: \"lesson\",\n })}\n \n \n \n {course.description}\n \n
\n \n \n \n \n \n ))\n}\n\nfunction SkeletonCourseCard() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nasync function getUserCourses(userId: string) {\n \"use cache\"\n cacheTag(\n getUserCourseAccessUserTag(userId),\n getUserLessonCompleteUserTag(userId)\n )\n\n const courses = await db\n .select({\n id: CourseTable.id,\n name: CourseTable.name,\n description: CourseTable.description,\n sectionsCount: countDistinct(CourseSectionTable.id),\n lessonsCount: countDistinct(LessonTable.id),\n lessonsComplete: countDistinct(UserLessonCompleteTable.lessonId),\n })\n .from(CourseTable)\n .leftJoin(\n UserCourseAccessTable,\n and(\n eq(UserCourseAccessTable.courseId, CourseTable.id),\n eq(UserCourseAccessTable.userId, userId)\n )\n )\n .leftJoin(\n CourseSectionTable,\n and(\n eq(CourseSectionTable.courseId, CourseTable.id),\n wherePublicCourseSections\n )\n )\n .leftJoin(\n LessonTable,\n and(eq(LessonTable.sectionId, CourseSectionTable.id), wherePublicLessons)\n )\n .leftJoin(\n UserLessonCompleteTable,\n and(\n eq(UserLessonCompleteTable.lessonId, LessonTable.id),\n eq(UserLessonCompleteTable.userId, userId)\n )\n )\n .orderBy(CourseTable.name)\n .groupBy(CourseTable.id)\n\n courses.forEach(course => {\n cacheTag(\n getCourseIdTag(course.id),\n getCourseSectionCourseTag(course.id),\n getLessonCourseTag(course.id)\n )\n })\n\n return courses\n}\n" }, { "path": "src/app/(consumer)/layout.tsx", "content": "import { Button } from \"@/components/ui/button\"\nimport { canAccessAdminPages } from \"@/permissions/general\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { SignedIn, SignedOut, SignInButton, UserButton } from \"@clerk/nextjs\"\nimport Link from \"next/link\"\nimport { ReactNode, Suspense } from \"react\"\n\nexport default function ConsumerLayout({\n children,\n}: Readonly<{ children: ReactNode }>) {\n return (\n <>\n \n {children}\n \n )\n}\n\nfunction Navbar() {\n return (\n
\n \n
\n )\n}\n\nasync function AdminLink() {\n const user = await getCurrentUser()\n if (!canAccessAdminPages(user)) return null\n\n return (\n \n Admin\n \n )\n}\n" }, { "path": "src/app/(consumer)/page.tsx", "content": "import { db } from \"@/drizzle/db\"\nimport { ProductTable } from \"@/drizzle/schema\"\nimport { ProductCard } from \"@/features/products/components/ProductCard\"\nimport { getProductGlobalTag } from \"@/features/products/db/cache\"\nimport { wherePublicProducts } from \"@/features/products/permissions/products\"\nimport { asc } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\n\nexport default async function HomePage() {\n const products = await getPublicProducts()\n\n return (\n
\n
\n {products.map(product => (\n \n ))}\n
\n
\n )\n}\n\nasync function getPublicProducts() {\n \"use cache\"\n cacheTag(getProductGlobalTag())\n\n return db.query.ProductTable.findMany({\n columns: {\n id: true,\n name: true,\n description: true,\n priceInDollars: true,\n imageUrl: true,\n },\n where: wherePublicProducts,\n orderBy: asc(ProductTable.name),\n })\n}\n" }, { "path": "src/app/(consumer)/products/[productId]/page.tsx", "content": "import { SkeletonButton } from \"@/components/Skeleton\"\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { db } from \"@/drizzle/db\"\nimport { CourseSectionTable, LessonTable, ProductTable } from \"@/drizzle/schema\"\nimport { getCourseIdTag } from \"@/features/courses/db/cache/courses\"\nimport { getCourseSectionCourseTag } from \"@/features/courseSections/db/cache\"\nimport { wherePublicCourseSections } from \"@/features/courseSections/permissions/sections\"\nimport { getLessonCourseTag } from \"@/features/lessons/db/cache/lessons\"\nimport { wherePublicLessons } from \"@/features/lessons/permissions/lessons\"\nimport { getProductIdTag } from \"@/features/products/db/cache\"\nimport { userOwnsProduct } from \"@/features/products/db/products\"\nimport { wherePublicProducts } from \"@/features/products/permissions/products\"\nimport { formatPlural, formatPrice } from \"@/lib/formatters\"\nimport { sumArray } from \"@/lib/sumArray\"\nimport { getUserCoupon } from \"@/lib/userCountryHeader\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { and, asc, eq } from \"drizzle-orm\"\nimport { VideoIcon } from \"lucide-react\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { Suspense } from \"react\"\n\nexport default async function ProductPage({\n params,\n}: {\n params: Promise<{ productId: string }>\n}) {\n const { productId } = await params\n const product = await getPublicProduct(productId)\n\n if (product == null) return notFound()\n\n const courseCount = product.courses.length\n const lessonCount = sumArray(product.courses, course =>\n sumArray(course.courseSections, s => s.lessons.length)\n )\n\n return (\n
\n
\n
\n
\n \n {formatPrice(product.priceInDollars)}\n
\n }\n >\n \n \n

{product.name}

\n
\n {formatPlural(courseCount, {\n singular: \"course\",\n plural: \"courses\",\n })}{\" \"}\n •{\" \"}\n {formatPlural(lessonCount, {\n singular: \"lesson\",\n plural: \"lessons\",\n })}\n
\n
\n
{product.description}
\n }>\n \n \n
\n
\n \n
\n
\n
\n {product.courses.map(course => (\n \n \n {course.name}\n \n {formatPlural(course.courseSections.length, {\n plural: \"sections\",\n singular: \"section\",\n })}{\" \"}\n •{\" \"}\n {formatPlural(\n sumArray(course.courseSections, s => s.lessons.length),\n {\n plural: \"lessons\",\n singular: \"lesson\",\n }\n )}\n \n \n \n \n {course.courseSections.map(section => (\n \n \n
\n {section.name}\n \n {formatPlural(section.lessons.length, {\n plural: \"lessons\",\n singular: \"lesson\",\n })}\n \n
\n \n \n {section.lessons.map(lesson => (\n \n \n {lesson.status === \"preview\" ? (\n \n {lesson.name}\n \n ) : (\n lesson.name\n )}\n
\n ))}\n \n \n ))}\n \n \n \n ))}\n
\n \n )\n}\n\nasync function PurchaseButton({ productId }: { productId: string }) {\n const { userId } = await getCurrentUser()\n const alreadyOwnsProduct =\n userId != null && (await userOwnsProduct({ userId, productId }))\n\n if (alreadyOwnsProduct) {\n return

You already own this product

\n } else {\n return (\n \n )\n }\n}\n\nasync function Price({ price }: { price: number }) {\n const coupon = await getUserCoupon()\n if (price === 0 || coupon == null) {\n return
{formatPrice(price)}
\n }\n\n return (\n
\n
\n {formatPrice(price)}\n
\n
\n {formatPrice(price * (1 - coupon.discountPercentage))}\n
\n
\n )\n}\n\nasync function getPublicProduct(id: string) {\n \"use cache\"\n cacheTag(getProductIdTag(id))\n\n const product = await db.query.ProductTable.findFirst({\n columns: {\n id: true,\n name: true,\n description: true,\n priceInDollars: true,\n imageUrl: true,\n },\n where: and(eq(ProductTable.id, id), wherePublicProducts),\n with: {\n courseProducts: {\n columns: {},\n with: {\n course: {\n columns: { id: true, name: true },\n with: {\n courseSections: {\n columns: { id: true, name: true },\n where: wherePublicCourseSections,\n orderBy: asc(CourseSectionTable.order),\n with: {\n lessons: {\n columns: { id: true, name: true, status: true },\n where: wherePublicLessons,\n orderBy: asc(LessonTable.order),\n },\n },\n },\n },\n },\n },\n },\n },\n })\n\n if (product == null) return product\n\n cacheTag(\n ...product.courseProducts.flatMap(cp => [\n getLessonCourseTag(cp.course.id),\n getCourseSectionCourseTag(cp.course.id),\n getCourseIdTag(cp.course.id),\n ])\n )\n\n const { courseProducts, ...other } = product\n\n return {\n ...other,\n courses: courseProducts.map(cp => cp.course),\n }\n}\n" }, { "path": "src/app/(consumer)/products/[productId]/purchase/page.tsx", "content": "import { LoadingSpinner } from \"@/components/LoadingSpinner\"\nimport { PageHeader } from \"@/components/PageHeader\"\nimport { db } from \"@/drizzle/db\"\nimport { ProductTable } from \"@/drizzle/schema\"\nimport { getProductIdTag } from \"@/features/products/db/cache\"\nimport { userOwnsProduct } from \"@/features/products/db/products\"\nimport { wherePublicProducts } from \"@/features/products/permissions/products\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { StripeCheckoutForm } from \"@/services/stripe/components/StripeCheckoutForm\"\nimport { SignIn, SignUp } from \"@clerk/nextjs\"\nimport { and, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { notFound, redirect } from \"next/navigation\"\nimport { Suspense } from \"react\"\n\nexport default function PurchasePage({\n params,\n searchParams,\n}: {\n params: Promise<{ productId: string }>\n searchParams: Promise<{ authMode: string }>\n}) {\n return (\n }>\n \n \n )\n}\n\nasync function SuspendedComponent({\n params,\n searchParams,\n}: {\n params: Promise<{ productId: string }>\n searchParams: Promise<{ authMode: string }>\n}) {\n const { productId } = await params\n const { user } = await getCurrentUser({ allData: true })\n const product = await getPublicProduct(productId)\n\n if (product == null) return notFound()\n\n if (user != null) {\n if (await userOwnsProduct({ userId: user.id, productId })) {\n redirect(\"/courses\")\n }\n\n return (\n
\n \n
\n )\n }\n\n const { authMode } = await searchParams\n const isSignUp = authMode === \"signUp\"\n\n return (\n
\n \n {isSignUp ? (\n \n ) : (\n \n )}\n
\n )\n}\n\nasync function getPublicProduct(id: string) {\n \"use cache\"\n cacheTag(getProductIdTag(id))\n\n return db.query.ProductTable.findFirst({\n columns: {\n name: true,\n id: true,\n imageUrl: true,\n description: true,\n priceInDollars: true,\n },\n where: and(eq(ProductTable.id, id), wherePublicProducts),\n })\n}\n" }, { "path": "src/app/(consumer)/products/[productId]/purchase/success/page.tsx", "content": "import { Button } from \"@/components/ui/button\"\nimport { db } from \"@/drizzle/db\"\nimport { ProductTable } from \"@/drizzle/schema\"\nimport { getProductIdTag } from \"@/features/products/db/cache\"\nimport { wherePublicProducts } from \"@/features/products/permissions/products\"\nimport { and, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\n\nexport default async function ProductPurchaseSuccessPage({\n params,\n}: {\n params: Promise<{ productId: string }>\n}) {\n const { productId } = await params\n const product = await getPublicProduct(productId)\n\n if (product == null) return\n\n return (\n
\n
\n
\n
Purchase Successful
\n
\n Thank you for purchasing {product.name}.\n
\n \n
\n
\n \n
\n
\n
\n )\n}\n\nasync function getPublicProduct(id: string) {\n \"use cache\"\n cacheTag(getProductIdTag(id))\n\n return db.query.ProductTable.findFirst({\n columns: {\n name: true,\n imageUrl: true,\n },\n where: and(eq(ProductTable.id, id), wherePublicProducts),\n })\n}\n" }, { "path": "src/app/(consumer)/products/purchase-failure/page.tsx", "content": "import { Button } from \"@/components/ui/button\"\nimport Link from \"next/link\"\n\nexport default async function ProductPurchaseFailurePage() {\n return (\n
\n
\n
Purchase Failed
\n
\n There was a problem purchasing your product.\n
\n \n
\n
\n )\n}\n" }, { "path": "src/app/(consumer)/purchases/[purchaseId]/page.tsx", "content": "import { LoadingSpinner } from \"@/components/LoadingSpinner\"\nimport { PageHeader } from \"@/components/PageHeader\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { db } from \"@/drizzle/db\"\nimport { PurchaseTable } from \"@/drizzle/schema\"\nimport { getPurchaseIdTag } from \"@/features/purchases/db/cache\"\nimport { formatDate, formatPrice } from \"@/lib/formatters\"\nimport { cn } from \"@/lib/utils\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { stripeServerClient } from \"@/services/stripe/stripeServer\"\nimport { and, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { Fragment, Suspense } from \"react\"\nimport Stripe from \"stripe\"\n\nexport default async function PurchasePage({\n params,\n}: {\n params: Promise<{ purchaseId: string }>\n}) {\n const { purchaseId } = await params\n\n return (\n
\n }>\n \n \n
\n )\n}\n\nasync function SuspenseBoundary({ purchaseId }: { purchaseId: string }) {\n const { userId, redirectToSignIn, user } = await getCurrentUser({\n allData: true,\n })\n if (userId == null || user == null) return redirectToSignIn()\n\n const purchase = await getPurchase({ userId, id: purchaseId })\n\n if (purchase == null) return notFound()\n\n const { receiptUrl, pricingRows } = await getStripeDetails(\n purchase.stripeSessionId,\n purchase.pricePaidInCents,\n purchase.refundedAt != null\n )\n\n return (\n <>\n \n {receiptUrl && (\n \n )}\n \n\n \n \n
\n
\n Receipt\n ID: {purchaseId}\n
\n \n {purchase.refundedAt ? \"Refunded\" : \"Paid\"}\n \n
\n \n \n
\n \n
{formatDate(purchase.createdAt)}
\n
\n
\n \n
{purchase.productDetails.name}
\n
\n
\n \n
{user.name}
\n
\n
\n \n
Web Dev Simplified
\n
\n \n \n {pricingRows.map(({ label, amountInDollars, isBold }) => (\n \n
{label}
\n
\n {formatPrice(amountInDollars, { showZeroAsNumber: true })}\n
\n \n ))}\n \n \n \n )\n}\n\nasync function getPurchase({ userId, id }: { userId: string; id: string }) {\n \"use cache\"\n cacheTag(getPurchaseIdTag(id))\n\n return db.query.PurchaseTable.findFirst({\n columns: {\n pricePaidInCents: true,\n refundedAt: true,\n productDetails: true,\n createdAt: true,\n stripeSessionId: true,\n },\n where: and(eq(PurchaseTable.id, id), eq(PurchaseTable.userId, userId)),\n })\n}\n\nasync function getStripeDetails(\n stripeSessionId: string,\n pricePaidInCents: number,\n isRefunded: boolean\n) {\n const { payment_intent, total_details, amount_total, amount_subtotal } =\n await stripeServerClient.checkout.sessions.retrieve(stripeSessionId, {\n expand: [\n \"payment_intent.latest_charge\",\n \"total_details.breakdown.discounts\",\n ],\n })\n\n const refundAmount =\n typeof payment_intent !== \"string\" &&\n typeof payment_intent?.latest_charge !== \"string\"\n ? payment_intent?.latest_charge?.amount_refunded\n : isRefunded\n ? pricePaidInCents\n : undefined\n\n return {\n receiptUrl: getReceiptUrl(payment_intent),\n pricingRows: getPricingRows(total_details, {\n total: (amount_total ?? pricePaidInCents) - (refundAmount ?? 0),\n subtotal: amount_subtotal ?? pricePaidInCents,\n refund: refundAmount,\n }),\n }\n}\n\nfunction getReceiptUrl(paymentIntent: Stripe.PaymentIntent | string | null) {\n if (\n typeof paymentIntent === \"string\" ||\n typeof paymentIntent?.latest_charge === \"string\"\n ) {\n return\n }\n\n return paymentIntent?.latest_charge?.receipt_url\n}\n\nfunction getPricingRows(\n totalDetails: Stripe.Checkout.Session.TotalDetails | null,\n {\n total,\n subtotal,\n refund,\n }: { total: number; subtotal: number; refund?: number }\n) {\n const pricingRows: {\n label: string\n amountInDollars: number\n isBold?: boolean\n }[] = []\n\n if (totalDetails?.breakdown != null) {\n totalDetails.breakdown.discounts.forEach(discount => {\n pricingRows.push({\n label: `${discount.discount.coupon.name} (${discount.discount.coupon.percent_off}% off)`,\n amountInDollars: discount.amount / -100,\n })\n })\n }\n\n if (refund) {\n pricingRows.push({\n label: \"Refund\",\n amountInDollars: refund / -100,\n })\n }\n\n if (pricingRows.length === 0) {\n return [{ label: \"Total\", amountInDollars: total / 100, isBold: true }]\n }\n\n return [\n {\n label: \"Subtotal\",\n amountInDollars: subtotal / 100,\n },\n ...pricingRows,\n {\n label: \"Total\",\n amountInDollars: total / 100,\n isBold: true,\n },\n ]\n}\n" }, { "path": "src/app/(consumer)/purchases/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { Button } from \"@/components/ui/button\"\nimport { db } from \"@/drizzle/db\"\nimport { PurchaseTable } from \"@/drizzle/schema\"\nimport {\n UserPurchaseTable,\n UserPurchaseTableSkeleton,\n} from \"@/features/purchases/components/UserPurchaseTable\"\nimport { getPurchaseUserTag } from \"@/features/purchases/db/cache\"\nimport { getCurrentUser } from \"@/services/clerk\"\nimport { desc, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport Link from \"next/link\"\nimport { Suspense } from \"react\"\n\nexport default function PurchasesPage() {\n return (\n
\n \n }>\n \n \n
\n )\n}\n\nasync function SuspenseBoundary() {\n const { userId, redirectToSignIn } = await getCurrentUser()\n if (userId == null) return redirectToSignIn()\n\n const purchases = await getPurchases(userId)\n\n if (purchases.length === 0) {\n return (\n
\n You have made no purchases yet\n \n
\n )\n }\n\n return \n}\n\nasync function getPurchases(userId: string) {\n \"use cache\"\n cacheTag(getPurchaseUserTag(userId))\n\n return db.query.PurchaseTable.findMany({\n columns: {\n id: true,\n pricePaidInCents: true,\n refundedAt: true,\n productDetails: true,\n createdAt: true,\n },\n where: eq(PurchaseTable.userId, userId),\n orderBy: desc(PurchaseTable.createdAt),\n })\n}\n" }, { "path": "src/app/admin/courses/[courseId]/edit/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { DialogTrigger } from \"@/components/ui/dialog\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { db } from \"@/drizzle/db\"\nimport { CourseSectionTable, CourseTable, LessonTable } from \"@/drizzle/schema\"\nimport { CourseForm } from \"@/features/courses/components/CourseForm\"\nimport { getCourseIdTag } from \"@/features/courses/db/cache/courses\"\nimport { SectionFormDialog } from \"@/features/courseSections/components/SectionFormDialog\"\nimport { SortableSectionList } from \"@/features/courseSections/components/SortableSectionList\"\nimport { getCourseSectionCourseTag } from \"@/features/courseSections/db/cache\"\nimport { LessonFormDialog } from \"@/features/lessons/components/LessonFormDialog\"\nimport { SortableLessonList } from \"@/features/lessons/components/SortableLessonList\"\nimport { getLessonCourseTag } from \"@/features/lessons/db/cache/lessons\"\nimport { cn } from \"@/lib/utils\"\nimport { asc, eq } from \"drizzle-orm\"\nimport { EyeClosed, PlusIcon } from \"lucide-react\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { notFound } from \"next/navigation\"\n\nexport default async function EditCoursePage({\n params,\n}: {\n params: Promise<{ courseId: string }>\n}) {\n const { courseId } = await params\n const course = await getCourse(courseId)\n\n if (course == null) return notFound()\n\n return (\n
\n \n \n \n Lessons\n Details\n \n \n \n \n Sections\n \n \n \n \n \n \n \n \n \n \n
\n {course.courseSections.map(section => (\n \n \n \n {section.status === \"private\" && } {section.name}\n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n
\n )\n}\n\nasync function getCourse(id: string) {\n \"use cache\"\n cacheTag(\n getCourseIdTag(id),\n getCourseSectionCourseTag(id),\n getLessonCourseTag(id)\n )\n\n return db.query.CourseTable.findFirst({\n columns: { id: true, name: true, description: true },\n where: eq(CourseTable.id, id),\n with: {\n courseSections: {\n orderBy: asc(CourseSectionTable.order),\n columns: { id: true, status: true, name: true },\n with: {\n lessons: {\n orderBy: asc(LessonTable.order),\n columns: {\n id: true,\n name: true,\n status: true,\n description: true,\n youtubeVideoId: true,\n sectionId: true,\n },\n },\n },\n },\n },\n })\n}\n" }, { "path": "src/app/admin/courses/new/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { CourseForm } from \"@/features/courses/components/CourseForm\"\n\nexport default function NewCoursePage() {\n return (\n
\n \n \n
\n )\n}\n" }, { "path": "src/app/admin/courses/page.tsx", "content": "import { Button } from \"@/components/ui/button\"\nimport { PageHeader } from \"@/components/PageHeader\"\nimport Link from \"next/link\"\nimport { CourseTable } from \"@/features/courses/components/CourseTable\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { getCourseGlobalTag } from \"@/features/courses/db/cache/courses\"\nimport { db } from \"@/drizzle/db\"\nimport {\n CourseSectionTable,\n CourseTable as DbCourseTable,\n LessonTable,\n UserCourseAccessTable,\n} from \"@/drizzle/schema\"\nimport { asc, countDistinct, eq } from \"drizzle-orm\"\nimport { getUserCourseAccessGlobalTag } from \"@/features/courses/db/cache/userCourseAccess\"\nimport { getCourseSectionGlobalTag } from \"@/features/courseSections/db/cache\"\nimport { getLessonGlobalTag } from \"@/features/lessons/db/cache/lessons\"\n\nexport default async function CoursesPage() {\n const courses = await getCourses()\n\n return (\n
\n \n \n \n\n \n
\n )\n}\n\nasync function getCourses() {\n \"use cache\"\n cacheTag(\n getCourseGlobalTag(),\n getUserCourseAccessGlobalTag(),\n getCourseSectionGlobalTag(),\n getLessonGlobalTag()\n )\n\n return db\n .select({\n id: DbCourseTable.id,\n name: DbCourseTable.name,\n sectionsCount: countDistinct(CourseSectionTable),\n lessonsCount: countDistinct(LessonTable),\n studentsCount: countDistinct(UserCourseAccessTable),\n })\n .from(DbCourseTable)\n .leftJoin(\n CourseSectionTable,\n eq(CourseSectionTable.courseId, DbCourseTable.id)\n )\n .leftJoin(LessonTable, eq(LessonTable.sectionId, CourseSectionTable.id))\n .leftJoin(\n UserCourseAccessTable,\n eq(UserCourseAccessTable.courseId, DbCourseTable.id)\n )\n .orderBy(asc(DbCourseTable.name))\n .groupBy(DbCourseTable.id)\n}\n" }, { "path": "src/app/admin/layout.tsx", "content": "import { Badge } from \"@/components/ui/badge\"\nimport { UserButton } from \"@clerk/nextjs\"\nimport Link from \"next/link\"\nimport { ReactNode } from \"react\"\n\nexport default function AdminLayout({\n children,\n}: Readonly<{ children: ReactNode }>) {\n return (\n <>\n \n {children}\n \n )\n}\n\nfunction Navbar() {\n return (\n
\n \n
\n )\n}\n" }, { "path": "src/app/admin/page.tsx", "content": "import {\n Card,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { db } from \"@/drizzle/db\"\nimport {\n CourseSectionTable,\n CourseTable,\n LessonTable,\n ProductTable,\n PurchaseTable,\n UserCourseAccessTable,\n} from \"@/drizzle/schema\"\nimport { getCourseGlobalTag } from \"@/features/courses/db/cache/courses\"\nimport { getUserCourseAccessGlobalTag } from \"@/features/courses/db/cache/userCourseAccess\"\nimport { getCourseSectionGlobalTag } from \"@/features/courseSections/db/cache\"\nimport { getLessonGlobalTag } from \"@/features/lessons/db/cache/lessons\"\nimport { getProductGlobalTag } from \"@/features/products/db/cache\"\nimport { getPurchaseGlobalTag } from \"@/features/purchases/db/cache\"\nimport { formatNumber, formatPrice } from \"@/lib/formatters\"\nimport { count, countDistinct, isNotNull, sql, sum } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { ReactNode } from \"react\"\n\nexport default async function AdminPage() {\n const {\n averageNetPurchasesPerCustomer,\n netPurchases,\n netSales,\n refundedPurchases,\n totalRefunds,\n } = await getPurchaseDetails()\n\n return (\n
\n
\n {formatPrice(netSales)}\n {formatPrice(totalRefunds)}\n \n {formatNumber(netPurchases)}\n \n \n {formatNumber(refundedPurchases)}\n \n \n {formatNumber(averageNetPurchasesPerCustomer, {\n maximumFractionDigits: 2,\n })}\n \n \n {formatNumber(await getTotalStudents())}\n \n \n {formatNumber(await getTotalProducts())}\n \n \n {formatNumber(await getTotalCourses())}\n \n \n {formatNumber(await getTotalCourseSections())}\n \n \n {formatNumber(await getTotalLessons())}\n \n
\n
\n )\n}\n\nfunction StatCard({ title, children }: { title: string; children: ReactNode }) {\n return (\n \n \n {title}\n {children}\n \n \n )\n}\n\nasync function getPurchaseDetails() {\n \"use cache\"\n cacheTag(getPurchaseGlobalTag())\n\n const data = await db\n .select({\n totalSales: sql`COALESCE(${sum(\n PurchaseTable.pricePaidInCents\n )}, 0)`.mapWith(Number),\n totalPurchases: count(PurchaseTable.id),\n totalUsers: countDistinct(PurchaseTable.userId),\n isRefund: isNotNull(PurchaseTable.refundedAt),\n })\n .from(PurchaseTable)\n .groupBy(table => table.isRefund)\n\n const [refundData] = data.filter(row => row.isRefund)\n const [salesData] = data.filter(row => !row.isRefund)\n\n const netSales = (salesData?.totalSales ?? 0) / 100\n const totalRefunds = (refundData?.totalSales ?? 0) / 100\n const netPurchases = salesData?.totalPurchases ?? 0\n const refundedPurchases = refundData?.totalPurchases ?? 0\n const averageNetPurchasesPerCustomer =\n salesData?.totalUsers != null && salesData.totalUsers > 0\n ? netPurchases / salesData.totalUsers\n : 0\n\n return {\n netSales,\n totalRefunds,\n netPurchases,\n refundedPurchases,\n averageNetPurchasesPerCustomer,\n }\n}\n\nasync function getTotalStudents() {\n \"use cache\"\n cacheTag(getUserCourseAccessGlobalTag())\n\n const [data] = await db\n .select({ totalStudents: countDistinct(UserCourseAccessTable.userId) })\n .from(UserCourseAccessTable)\n\n if (data == null) return 0\n return data.totalStudents\n}\n\nasync function getTotalCourses() {\n \"use cache\"\n cacheTag(getCourseGlobalTag())\n\n const [data] = await db\n .select({ totalCourses: count(CourseTable.id) })\n .from(CourseTable)\n\n if (data == null) return 0\n return data.totalCourses\n}\n\nasync function getTotalProducts() {\n \"use cache\"\n cacheTag(getProductGlobalTag())\n\n const [data] = await db\n .select({ totalProducts: count(ProductTable.id) })\n .from(ProductTable)\n if (data == null) return 0\n return data.totalProducts\n}\n\nasync function getTotalLessons() {\n \"use cache\"\n cacheTag(getLessonGlobalTag())\n\n const [data] = await db\n .select({ totalLessons: count(LessonTable.id) })\n .from(LessonTable)\n if (data == null) return 0\n return data.totalLessons\n}\n\nasync function getTotalCourseSections() {\n \"use cache\"\n cacheTag(getCourseSectionGlobalTag())\n\n const [data] = await db\n .select({ totalCourseSections: count(CourseSectionTable.id) })\n .from(CourseSectionTable)\n if (data == null) return 0\n return data.totalCourseSections\n}\n" }, { "path": "src/app/admin/products/[productId]/edit/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { db } from \"@/drizzle/db\"\nimport { CourseTable, ProductTable } from \"@/drizzle/schema\"\nimport { getCourseGlobalTag } from \"@/features/courses/db/cache/courses\"\nimport { ProductForm } from \"@/features/products/components/ProductForm\"\nimport { getProductIdTag } from \"@/features/products/db/cache\"\nimport { asc, eq } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { notFound } from \"next/navigation\"\n\nexport default async function EditProductPage({\n params,\n}: {\n params: Promise<{ productId: string }>\n}) {\n const { productId } = await params\n const product = await getProduct(productId)\n\n if (product == null) return notFound()\n\n return (\n
\n \n c.courseId),\n }}\n courses={await getCourses()}\n />\n
\n )\n}\n\nasync function getCourses() {\n \"use cache\"\n cacheTag(getCourseGlobalTag())\n\n return db.query.CourseTable.findMany({\n orderBy: asc(CourseTable.name),\n columns: { id: true, name: true },\n })\n}\n\nasync function getProduct(id: string) {\n \"use cache\"\n cacheTag(getProductIdTag(id))\n\n return db.query.ProductTable.findFirst({\n columns: {\n id: true,\n name: true,\n description: true,\n priceInDollars: true,\n status: true,\n imageUrl: true,\n },\n where: eq(ProductTable.id, id),\n with: { courseProducts: { columns: { courseId: true } } },\n })\n}\n" }, { "path": "src/app/admin/products/new/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { db } from \"@/drizzle/db\"\nimport { CourseTable } from \"@/drizzle/schema\"\nimport { getCourseGlobalTag } from \"@/features/courses/db/cache/courses\"\nimport { ProductForm } from \"@/features/products/components/ProductForm\"\nimport { asc } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\n\nexport default async function NewProductPage() {\n return (\n
\n \n \n
\n )\n}\n\nasync function getCourses() {\n \"use cache\"\n cacheTag(getCourseGlobalTag())\n\n return db.query.CourseTable.findMany({\n orderBy: asc(CourseTable.name),\n columns: { id: true, name: true },\n })\n}\n" }, { "path": "src/app/admin/products/page.tsx", "content": "import { Button } from \"@/components/ui/button\"\nimport { PageHeader } from \"@/components/PageHeader\"\nimport Link from \"next/link\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\nimport { db } from \"@/drizzle/db\"\nimport {\n CourseProductTable,\n ProductTable as DbProductTable,\n PurchaseTable,\n} from \"@/drizzle/schema\"\nimport { asc, countDistinct, eq } from \"drizzle-orm\"\nimport { getProductGlobalTag } from \"@/features/products/db/cache\"\nimport { ProductTable } from \"@/features/products/components/ProductTable\"\n\nexport default async function ProductsPage() {\n const products = await getProducts()\n\n return (\n
\n \n \n \n\n \n
\n )\n}\n\nasync function getProducts() {\n \"use cache\"\n cacheTag(getProductGlobalTag())\n\n return db\n .select({\n id: DbProductTable.id,\n name: DbProductTable.name,\n status: DbProductTable.status,\n priceInDollars: DbProductTable.priceInDollars,\n description: DbProductTable.description,\n imageUrl: DbProductTable.imageUrl,\n coursesCount: countDistinct(CourseProductTable.courseId),\n customersCount: countDistinct(PurchaseTable.userId),\n })\n .from(DbProductTable)\n .leftJoin(PurchaseTable, eq(PurchaseTable.productId, DbProductTable.id))\n .leftJoin(\n CourseProductTable,\n eq(CourseProductTable.productId, DbProductTable.id)\n )\n .orderBy(asc(DbProductTable.name))\n .groupBy(DbProductTable.id)\n}\n" }, { "path": "src/app/admin/sales/page.tsx", "content": "import { PageHeader } from \"@/components/PageHeader\"\nimport { db } from \"@/drizzle/db\"\nimport { PurchaseTable as DbPurchaseTable } from \"@/drizzle/schema\"\nimport { PurchaseTable } from \"@/features/purchases/components/PurchaseTable\"\nimport { getPurchaseGlobalTag } from \"@/features/purchases/db/cache\"\nimport { getUserGlobalTag } from \"@/features/users/db/cache\"\nimport { desc } from \"drizzle-orm\"\nimport { cacheTag } from \"next/dist/server/use-cache/cache-tag\"\n\nexport default async function PurchasesPage() {\n const purchases = await getPurchases()\n\n return (\n
\n \n\n \n
\n )\n}\n\nasync function getPurchases() {\n \"use cache\"\n cacheTag(getPurchaseGlobalTag(), getUserGlobalTag())\n\n return db.query.PurchaseTable.findMany({\n columns: {\n id: true,\n pricePaidInCents: true,\n refundedAt: true,\n productDetails: true,\n createdAt: true,\n },\n orderBy: desc(DbPurchaseTable.createdAt),\n with: { user: { columns: { name: true } } },\n })\n}\n" }, { "path": "src/app/api/clerk/syncUsers/route.ts", "content": "import { insertUser } from \"@/features/users/db/users\"\nimport { syncClerkUserMetadata } from \"@/services/clerk\"\nimport { currentUser } from \"@clerk/nextjs/server\"\nimport { NextResponse } from \"next/server\"\n\nexport async function GET(request: Request) {\n const user = await currentUser()\n\n if (user == null) return new Response(\"User not found\", { status: 500 })\n if (user.fullName == null) {\n return new Response(\"User name missing\", { status: 500 })\n }\n if (user.primaryEmailAddress?.emailAddress == null) {\n return new Response(\"User email missing\", { status: 500 })\n }\n\n const dbUser = await insertUser({\n clerkUserId: user.id,\n name: user.fullName,\n email: user.primaryEmailAddress.emailAddress,\n imageUrl: user.imageUrl,\n role: user.publicMetadata.role ?? \"user\",\n })\n\n await syncClerkUserMetadata(dbUser)\n\n await new Promise(res => setTimeout(res, 100))\n\n return NextResponse.redirect(request.headers.get(\"referer\") ?? \"/\")\n}\n" }, { "path": "src/app/api/webhooks/clerk/route.ts", "content": "import { env } from \"@/data/env/server\"\nimport { deleteUser, insertUser, updateUser } from \"@/features/users/db/users\"\nimport { syncClerkUserMetadata } from \"@/services/clerk\"\nimport { WebhookEvent } from \"@clerk/nextjs/server\"\nimport { headers } from \"next/headers\"\nimport { Webhook } from \"svix\"\n\nexport async function POST(req: Request) {\n const headerPayload = await headers()\n const svixId = headerPayload.get(\"svix-id\")\n const svixTimestamp = headerPayload.get(\"svix-timestamp\")\n const svixSignature = headerPayload.get(\"svix-signature\")\n\n if (!svixId || !svixTimestamp || !svixSignature) {\n return new Response(\"Error occurred -- no svix headers\", {\n status: 400,\n })\n }\n\n const payload = await req.json()\n const body = JSON.stringify(payload)\n\n const wh = new Webhook(env.CLERK_WEBHOOK_SECRET)\n let event: WebhookEvent\n\n try {\n event = wh.verify(body, {\n \"svix-id\": svixId,\n \"svix-timestamp\": svixTimestamp,\n \"svix-signature\": svixSignature,\n }) as WebhookEvent\n } catch (err) {\n console.error(\"Error verifying webhook:\", err)\n return new Response(\"Error occurred\", {\n status: 400,\n })\n }\n\n switch (event.type) {\n case \"user.created\":\n case \"user.updated\": {\n const email = event.data.email_addresses.find(\n email => email.id === event.data.primary_email_address_id\n )?.email_address\n const name = `${event.data.first_name} ${event.data.last_name}`.trim()\n if (email == null) return new Response(\"No email\", { status: 400 })\n if (name === \"\") return new Response(\"No name\", { status: 400 })\n\n if (event.type === \"user.created\") {\n const user = await insertUser({\n clerkUserId: event.data.id,\n email,\n name,\n imageUrl: event.data.image_url,\n role: \"user\",\n })\n\n await syncClerkUserMetadata(user)\n } else {\n await updateUser(\n { clerkUserId: event.data.id },\n {\n email,\n name,\n imageUrl: event.data.image_url,\n role: event.data.public_metadata.role,\n }\n )\n }\n break\n }\n case \"user.deleted\": {\n if (event.data.id != null) {\n await deleteUser({ clerkUserId: event.data.id })\n }\n break\n }\n }\n\n return new Response(\"\", { status: 200 })\n}\n" }, { "path": "src/app/api/webhooks/stripe/route.ts", "content": "import { env } from \"@/data/env/server\"\nimport { db } from \"@/drizzle/db\"\nimport { ProductTable, UserTable } from \"@/drizzle/schema\"\nimport { addUserCourseAccess } from \"@/features/courses/db/userCourseAcccess\"\nimport { insertPurchase } from \"@/features/purchases/db/purchases\"\nimport { stripeServerClient } from \"@/services/stripe/stripeServer\"\nimport { eq } from \"drizzle-orm\"\nimport { redirect } from \"next/navigation\"\nimport { NextRequest, NextResponse } from \"next/server\"\nimport Stripe from \"stripe\"\n\nexport async function GET(request: NextRequest) {\n const stripeSessionId = request.nextUrl.searchParams.get(\"stripeSessionId\")\n if (stripeSessionId == null) redirect(\"/products/purchase-failure\")\n\n let redirectUrl: string\n try {\n const checkoutSession = await stripeServerClient.checkout.sessions.retrieve(\n stripeSessionId,\n { expand: [\"line_items\"] }\n )\n const productId = await processStripeCheckout(checkoutSession)\n\n redirectUrl = `/products/${productId}/purchase/success`\n } catch {\n redirectUrl = \"/products/purchase-failure\"\n }\n\n return NextResponse.redirect(new URL(redirectUrl, request.url))\n}\n\nexport async function POST(request: NextRequest) {\n const event = await stripeServerClient.webhooks.constructEvent(\n await request.text(),\n request.headers.get(\"stripe-signature\") as string,\n env.STRIPE_WEBHOOK_SECRET\n )\n\n switch (event.type) {\n case \"checkout.session.completed\":\n case \"checkout.session.async_payment_succeeded\": {\n try {\n await processStripeCheckout(event.data.object)\n } catch {\n return new Response(null, { status: 500 })\n }\n }\n }\n return new Response(null, { status: 200 })\n}\n\nasync function processStripeCheckout(checkoutSession: Stripe.Checkout.Session) {\n const userId = checkoutSession.metadata?.userId\n const productId = checkoutSession.metadata?.productId\n\n if (userId == null || productId == null) {\n throw new Error(\"Missing metadata\")\n }\n\n const [product, user] = await Promise.all([\n getProduct(productId),\n await getUser(userId),\n ])\n\n if (product == null) throw new Error(\"Product not found\")\n if (user == null) throw new Error(\"User not found\")\n\n const courseIds = product.courseProducts.map(cp => cp.courseId)\n db.transaction(async trx => {\n try {\n await addUserCourseAccess({ userId: user.id, courseIds }, trx)\n await insertPurchase(\n {\n stripeSessionId: checkoutSession.id,\n pricePaidInCents:\n checkoutSession.amount_total || product.priceInDollars * 100,\n productDetails: product,\n userId: user.id,\n productId,\n },\n trx\n )\n } catch (error) {\n trx.rollback()\n throw error\n }\n })\n\n return productId\n}\n\nfunction getProduct(id: string) {\n return db.query.ProductTable.findFirst({\n columns: {\n id: true,\n priceInDollars: true,\n name: true,\n description: true,\n imageUrl: true,\n },\n where: eq(ProductTable.id, id),\n with: {\n courseProducts: { columns: { courseId: true } },\n },\n })\n}\n\nfunction getUser(id: string) {\n return db.query.UserTable.findFirst({\n columns: { id: true },\n where: eq(UserTable.id, id),\n })\n}\n" }, { "path": "src/app/globals.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\nbody {\n font-family: Arial, Helvetica, sans-serif;\n}\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 280 75% 50%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n --radius: 0.5rem;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}\n" }, { "path": "src/app/layout.tsx", "content": "import type { Metadata } from \"next\"\nimport \"./globals.css\"\nimport { ClerkProvider } from \"@clerk/nextjs\"\nimport { Toaster } from \"@/components/ui/toaster\"\n\nexport const metadata: Metadata = {\n title: \"Create Next App\",\n description: \"Generated by create next app\",\n}\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode\n}>) {\n return (\n \n \n \n {children}\n \n \n \n \n )\n}\n" }, { "path": "src/components/ActionButton.tsx", "content": "\"use client\"\n\nimport { ComponentPropsWithRef, ReactNode, useTransition } from \"react\"\nimport { Button } from \"./ui/button\"\nimport { actionToast } from \"@/hooks/use-toast\"\nimport { Loader2Icon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport {\n AlertDialog,\n AlertDialogDescription,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogContent,\n AlertDialogTrigger,\n AlertDialogFooter,\n AlertDialogCancel,\n AlertDialogAction,\n} from \"./ui/alert-dialog\"\n\nexport function ActionButton({\n action,\n requireAreYouSure = false,\n ...props\n}: Omit, \"onClick\"> & {\n action: () => Promise<{ error: boolean; message: string }>\n requireAreYouSure?: boolean\n}) {\n {\n const [isLoading, startTransition] = useTransition()\n\n function performAction() {\n startTransition(async () => {\n const data = await action()\n actionToast({ actionData: data })\n })\n }\n\n if (requireAreYouSure) {\n return (\n \n \n \n )\n }\n}\n\nfunction LoadingTextSwap({\n isLoading,\n children,\n}: {\n isLoading: boolean\n children: ReactNode\n}) {\n return (\n
\n \n {children}\n
\n \n \n \n \n )\n}\n" }, { "path": "src/components/LoadingSpinner.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport { Loader2Icon } from \"lucide-react\"\nimport { ComponentProps } from \"react\"\n\nexport function LoadingSpinner({\n className,\n ...props\n}: ComponentProps) {\n return (\n \n )\n}\n" }, { "path": "src/components/PageHeader.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport { ReactNode } from \"react\"\n\nexport function PageHeader({\n title,\n children,\n className,\n}: {\n title: string\n children?: ReactNode\n className?: string\n}) {\n return (\n \n

{title}

\n {children &&
{children}
}\n \n )\n}\n" }, { "path": "src/components/RequiredLabelIcon.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport { AsteriskIcon } from \"lucide-react\"\nimport { ComponentPropsWithoutRef } from \"react\"\n\nexport function RequiredLabelIcon({\n className,\n ...props\n}: ComponentPropsWithoutRef) {\n return (\n \n )\n}\n" }, { "path": "src/components/Skeleton.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"./ui/button\"\nimport { ReactNode } from \"react\"\n\nexport function SkeletonButton({ className }: { className?: string }) {\n return (\n \n )\n}\n\nexport function SkeletonArray({\n amount,\n children,\n}: {\n amount: number\n children: ReactNode\n}) {\n return Array.from({ length: amount }).map(() => children)\n}\n\nexport function SkeletonText({\n rows = 1,\n size = \"md\",\n className,\n}: {\n rows?: number\n size?: \"md\" | \"lg\"\n className?: string\n}) {\n return (\n
\n \n 1 && \"last:w-3/4\",\n size === \"md\" && \"h-3\",\n size === \"lg\" && \"h-5\",\n className\n )}\n />\n \n
\n )\n}\n" }, { "path": "src/components/SortableList.tsx", "content": "\"use client\"\n\nimport { ReactNode, useId, useOptimistic, useTransition } from \"react\"\nimport { DndContext, DragEndEvent } from \"@dnd-kit/core\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { cn } from \"@/lib/utils\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport { actionToast } from \"@/hooks/use-toast\"\n\nexport function SortableList({\n items,\n onOrderChange,\n children,\n}: {\n items: T[]\n onOrderChange: (\n newOrder: string[]\n ) => Promise<{ error: boolean; message: string }>\n children: (items: T[]) => ReactNode\n}) {\n const dndContextId = useId()\n const [optimisticItems, setOptimisticItems] = useOptimistic(items)\n const [, startTransition] = useTransition()\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n const activeId = active.id.toString()\n const overId = over?.id.toString()\n if (overId == null || activeId == null) return\n\n function getNewArray(array: T[], activeId: string, overId: string) {\n const oldIndex = array.findIndex(section => section.id === activeId)\n const newIndex = array.findIndex(section => section.id === overId)\n return arrayMove(array, oldIndex, newIndex)\n }\n\n startTransition(async () => {\n setOptimisticItems(items => getNewArray(items, activeId, overId))\n const actionData = await onOrderChange(\n getNewArray(optimisticItems, activeId, overId).map(s => s.id)\n )\n\n actionToast({ actionData })\n })\n }\n\n return (\n \n \n
{children(optimisticItems)}
\n \n \n )\n}\n\nexport function SortableItem({\n id,\n children,\n className,\n}: {\n id: string\n children: ReactNode\n className?: string\n}) {\n const {\n setNodeRef,\n transform,\n transition,\n activeIndex,\n index,\n attributes,\n listeners,\n } = useSortable({ id })\n const isActive = activeIndex === index\n\n return (\n \n \n
{children}
\n \n )\n}\n" }, { "path": "src/components/ui/accordion.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n svg]:rotate-180\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n
{children}
\n \n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n" }, { "path": "src/components/ui/alert-dialog.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n" }, { "path": "src/components/ui/badge.tsx", "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes,\n VariantProps {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n
\n )\n}\n\nexport { Badge, badgeVariants }\n" }, { "path": "src/components/ui/button.tsx", "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n destructiveOutline:\n \"border border-destructive bg-background shadow-sm text-destructive hover:bg-destructive hover:text-destructive-foreground\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-accent\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" }, { "path": "src/components/ui/card.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n" }, { "path": "src/components/ui/command.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/components/ui/dialog\"\n\nconst Command = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n \n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n" }, { "path": "src/components/ui/custom/multi-select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Badge } from \"../badge\"\n\nexport function MultiSelect