Refactor portfolio

src/app/portfolio/categories/[id]/page.tsx

@@ -1,5 +1,18 @@
-export default function PortfolioCategoriesEditPage() {
+import EditCategoryForm from "@/components/portfolio/categories/EditCategoryForm";
+import prisma from "@/lib/prisma";
+
+export default async function PortfolioCategoriesEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const category = await prisma.portfolioCategory.findUnique({
+    where: {
+      id,
+    }
+  })
+
   return (
-    <div>PortfolioCategoriesEditPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit Category</h1>
+      {category && <EditCategoryForm category={category} />}
+    </div>
   );
 }

src/app/portfolio/categories/new/page.tsx

@@ -1,5 +1,10 @@
+import NewCategoryForm from "@/components/portfolio/categories/NewCategoryForm";
+
 export default function PortfolioCategoriesNewPage() {
   return (
-    <div>PortfolioCategoriesNewPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">New Category</h1>
+      <NewCategoryForm />
+    </div>
   );
 }

src/app/portfolio/categories/page.tsx

@@ -1,5 +1,20 @@
-export default function PortfolioCategoriesPage() {
+import ItemList from "@/components/portfolio/ItemList";
+import prisma from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function PortfolioCategoriesPage() {
+  const items = await prisma.portfolioCategory.findMany({})
+
   return (
-    <div>PortfolioCategoriesPage</div>
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Art Categories</h1>
+        <Link href="/portfolio/categories/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new category
+        </Link>
+      </div>
+      {items && items.length > 0 ? <ItemList items={items} type="categories" /> : <p>There are no categories yet. Consider adding some!</p>}
+    </div>
   );
 }

src/app/portfolio/images/page.tsx

@@ -1,24 +1,55 @@
+import FilterBar from "@/components/portfolio/images/FilterBar";
 import ImageList from "@/components/portfolio/images/ImageList";
+import { Prisma } from "@/generated/prisma";
 import prisma from "@/lib/prisma";
 import { PlusCircleIcon } from "lucide-react";
 import Link from "next/link";
 
-export default async function PortfolioImagesPage() {
+export default async function PortfolioImagesPage(
+  { searchParams }:
+    { searchParams: { type: string, published: string } }
+) {
+  const { type, published } = await searchParams;
+
+  const types = await prisma.portfolioType.findMany({
+    orderBy: { sortIndex: "asc" },
+  });
+
+  const typeFilter = type ?? "all";
+  const publishedFilter = published ?? "all";
+
+  const where: Prisma.PortfolioImageWhereInput = {};
+
+  if (typeFilter !== "all") {
+    where.typeId = typeFilter === "none" ? null : typeFilter;
+  }
+
+  if (publishedFilter === "published") {
+    where.published = true;
+  } else if (publishedFilter === "unpublished") {
+    where.published = false;
+  }
+
   const images = await prisma.portfolioImage.findMany(
     {
-      orderBy: [{ sortIndex: 'asc' }]
+      where,
+      orderBy: [{ sortIndex: 'asc' }],
     }
   )
 
   return (
     <div>
-      <div className="flex gap-4 justify-between pb-8">
+      <div className="flex justify-between pb-4 items-end">
         <h1 className="text-2xl font-bold mb-4">Images</h1>
         <Link href="/portfolio/images/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
           <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Upload new image
         </Link>
       </div>
-      {images && images.length > 0 ? <ImageList images={images} /> : <p>There are no images yet. Consider adding some!</p>}
+
+      <FilterBar types={types} currentType={typeFilter} currentPublished={publishedFilter} />
+      <div className="mt-6">
+        {images && images.length > 0 ? <ImageList images={images} /> : <p>There are no images yet. Consider adding some!</p>}
+      </div>
     </div>
   );
 }

src/app/portfolio/tags/[id]/page.tsx

@@ -1,5 +1,18 @@
-export default function PortfolioTagsEditPage() {
+import EditTagForm from "@/components/portfolio/tags/EditTagForm";
+import prisma from "@/lib/prisma";
+
+export default async function PortfolioTagsEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const tag = await prisma.portfolioTag.findUnique({
+    where: {
+      id,
+    }
+  })
+
   return (
-    <div>PortfolioTagsEditPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit Tag</h1>
+      {tag && <EditTagForm tag={tag} />}
+    </div>
   );
 }

src/app/portfolio/tags/new/page.tsx

@@ -1,5 +1,10 @@
+import NewTagForm from "@/components/portfolio/tags/NewTagForm";
+
 export default function PortfolioTagsNewPage() {
   return (
-    <div>PortfolioTagsNewPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">New Tag</h1>
+      <NewTagForm />
+    </div>
   );
 }

src/app/portfolio/tags/page.tsx

@@ -1,5 +1,20 @@
-export default function PortfolioTagsPage() {
+import ItemList from "@/components/portfolio/ItemList";
+import prisma from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function PortfolioTagsPage() {
+  const items = await prisma.portfolioTag.findMany({})
+
   return (
-    <div>PortfolioTagsPage</div>
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Art Tags</h1>
+        <Link href="/portfolio/tags/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new tag
+        </Link>
+      </div>
+      {items && items.length > 0 ? <ItemList items={items} type="tags" /> : <p>There are no tags yet. Consider adding some!</p>}
+    </div>
   );
 }

src/app/portfolio/types/[id]/page.tsx

@@ -1,5 +1,18 @@
-export default function PortfolioTypesEditPage() {
+import EditTypeForm from "@/components/portfolio/types/EditTypeForm";
+import prisma from "@/lib/prisma";
+
+export default async function PortfolioTypesEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const type = await prisma.portfolioType.findUnique({
+    where: {
+      id,
+    }
+  })
+
   return (
-    <div>PortfolioTypesEditPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit Type</h1>
+      {type && <EditTypeForm type={type} />}
+    </div>
   );
 }

src/app/portfolio/types/new/page.tsx

@@ -1,5 +1,10 @@
+import NewTypeForm from "@/components/portfolio/types/NewTypeForm";
+
 export default function PortfolioTypesNewPage() {
   return (
-    <div>PortfolioTypesNewPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">New Type</h1>
+      <NewTypeForm />
+    </div>
   );
 }

src/app/portfolio/types/page.tsx

@@ -1,5 +1,20 @@
-export default function PortfolioTypesPage() {
+import ItemList from "@/components/portfolio/ItemList";
+import prisma from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function PortfolioTypesPage() {
+  const items = await prisma.portfolioType.findMany({})
+
   return (
-    <div>PortfolioTypesPage</div>
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Art Types</h1>
+        <Link href="/portfolio/types/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new type
+        </Link>
+      </div>
+      {items && items.length > 0 ? <ItemList items={items} type="types" /> : <p>There are no types yet. Consider adding some!</p>}
+    </div>
   );
 }