@navneet_25/tempjs 2.0.0 → 3.0.0

package/packages/core/modules/gallery/app/admin/components/GalleryList.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+import { Plus, Edit2, Trash2, Images } from "lucide-react";
+import GalleryFormModal from "./GalleryFormModal";
+import {
+  useGetGallery,
+  useCreateGalleryImage,
+  useUpdateGalleryImage,
+  useDeleteGalleryImage,
+  GalleryDataInput,
+} from "../hooks/useGallery";
+
+export default function GalleryList() {
+  const { data: items = [], isLoading, error } = useGetGallery();
+  const createMutation = useCreateGalleryImage();
+  const updateMutation = useUpdateGalleryImage();
+  const deleteMutation = useDeleteGalleryImage();
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selected, setSelected] = useState<GalleryDataInput | null>(null);
+  const [submitError, setSubmitError] = useState("");
+
+  const handleSubmit = async (data: GalleryDataInput) => {
+    setSubmitError("");
+    try {
+      if (data.id) await updateMutation.mutateAsync(data);
+      else await createMutation.mutateAsync(data);
+      setModalOpen(false);
+    } catch (err: unknown) {
+      setSubmitError(err instanceof Error ? err.message : "Failed to save");
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Delete this gallery image?")) return;
+    try {
+      await deleteMutation.mutateAsync(id);
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : "Failed to delete");
+    }
+  };
+
+  if (isLoading) {
+    return <div className="p-8 text-sm text-text-muted">Loading gallery...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-bold font-serif text-primary flex items-center gap-2">
+            <Images className="w-5 h-5" />
+            Gallery
+          </h2>
+          <p className="text-xs text-text-muted mt-1">Manage images for the gallery page and homepage section.</p>
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            setSelected(null);
+            setSubmitError("");
+            setModalOpen(true);
+          }}
+          className="flex items-center gap-1.5 px-4 py-2 bg-primary text-white text-xs font-bold rounded-lg cursor-pointer"
+        >
+          <Plus className="w-4 h-4" />
+          Add image
+        </button>
+      </div>
+
+      {error && (
+        <div className="p-3 text-xs text-red-700 bg-red-50 border border-red-200 rounded-lg">
+          {(error as Error).message}
+        </div>
+      )}
+
+      {items.length === 0 ? (
+        <div className="text-center py-12 border border-dashed rounded-2xl text-xs text-text-muted">
+          No gallery images yet.
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="rounded-2xl border border-primary/10 bg-white overflow-hidden shadow-sm"
+            >
+              <div className="relative aspect-video bg-bg-light">
+                <Image src={item.imageUrl} alt={item.title} fill className="object-cover" />
+              </div>
+              <div className="p-4 space-y-2">
+                <div className="flex justify-between items-start gap-2">
+                  <div>
+                    <p className="font-bold text-sm text-primary">{item.title}</p>
+                    <p className="text-[10px] uppercase tracking-wider text-text-muted">{item.category}</p>
+                  </div>
+                  {!item.published && (
+                    <span className="text-[9px] font-bold uppercase bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
+                      Hidden
+                    </span>
+                  )}
+                </div>
+                <div className="flex gap-2 pt-2">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelected(item);
+                      setModalOpen(true);
+                    }}
+                    className="flex items-center gap-1 text-xs font-bold text-primary cursor-pointer"
+                  >
+                    <Edit2 className="w-3.5 h-3.5" />
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => item.id && handleDelete(item.id)}
+                    className="flex items-center gap-1 text-xs font-bold text-red-600 cursor-pointer"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <GalleryFormModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        onSubmit={handleSubmit}
+        initialData={selected}
+        error={submitError}
+        isSubmitting={createMutation.isPending || updateMutation.isPending}
+      />
+    </div>
+  );
+}

package/packages/core/modules/gallery/app/admin/hooks/useGallery.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export interface GalleryDataInput {
+  id?: string;
+  title: string;
+  category: string;
+  description?: string | null;
+  imageUrl: string;
+  sortOrder: number;
+  published: boolean;
+}
+
+async function fetchGallery(): Promise<GalleryDataInput[]> {
+  const res = await fetch("/api/gallery");
+  const json = await res.json();
+  if (!res.ok || !json.success) throw new Error(json.error || "Failed to load gallery");
+  return json.data;
+}
+
+export function useGetGallery() {
+  return useQuery({ queryKey: ["gallery"], queryFn: fetchGallery });
+}
+
+export function useCreateGalleryImage() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: GalleryDataInput) => {
+      const res = await fetch("/api/gallery", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      const json = await res.json();
+      if (!res.ok || !json.success) throw new Error(json.error || "Failed to create");
+      return json.data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["gallery"] }),
+  });
+}
+
+export function useUpdateGalleryImage() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: GalleryDataInput) => {
+      if (!data.id) throw new Error("Missing id");
+      const res = await fetch(`/api/gallery/${data.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+      const json = await res.json();
+      if (!res.ok || !json.success) throw new Error(json.error || "Failed to update");
+      return json.data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["gallery"] }),
+  });
+}
+
+export function useDeleteGalleryImage() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const res = await fetch(`/api/gallery/${id}`, { method: "DELETE" });
+      const json = await res.json();
+      if (!res.ok || !json.success) throw new Error(json.error || "Failed to delete");
+      return json.data;
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["gallery"] }),
+  });
+}

package/packages/core/modules/gallery/app/api/gallery/[id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest } from "next/server";
+import { galleryController } from "@/lib/controllers/GalleryController";
+import { auth } from "@/auth";
+
+export const dynamic = "force-dynamic";
+
+export async function PUT(
+  req: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  const session = await auth();
+  if (!session) {
+    return Response.json({ success: false, error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await context.params;
+  return galleryController.update(req, { id });
+}
+
+export async function DELETE(
+  _req: NextRequest,
+  context: { params: Promise<{ id: string }> }
+) {
+  const session = await auth();
+  if (!session) {
+    return Response.json({ success: false, error: "Unauthorized" }, { status: 401 });
+  }
+  const { id } = await context.params;
+  return galleryController.delete({ id });
+}

package/packages/core/modules/gallery/app/api/gallery/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest } from "next/server";
+import { galleryController } from "@/lib/controllers/GalleryController";
+import { auth } from "@/auth";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  const admin = Boolean(session);
+  if (admin) {
+    return galleryController.listAll();
+  }
+  return galleryController.listPublic();
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session) {
+    return Response.json({ success: false, error: "Unauthorized" }, { status: 401 });
+  }
+  return galleryController.create(req);
+}

package/packages/core/modules/gallery/app/components/GallerySection.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowUpRight, Images } from "lucide-react";
+import { SITE } from "@/constants";
+
+interface GalleryItem {
+  id: string;
+  title: string;
+  category: string;
+  description?: string | null;
+  imageUrl: string;
+}
+
+export default function GallerySection() {
+  const [items, setItems] = useState<GalleryItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/gallery");
+        const json = await res.json();
+        if (json.success && Array.isArray(json.data)) {
+          setItems(json.data.slice(0, 6));
+        }
+      } catch (err) {
+        console.warn("GallerySection: failed to load", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  if (!loading && items.length === 0) return null;
+
+  return (
+    <section className="py-20 md:py-24 bg-bg-light border-t border-primary/5">
+      <div className="max-w-7xl mx-auto px-6 md:px-8">
+        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
+          <div>
+            <span className="text-[10px] font-extrabold tracking-[0.25em] uppercase text-accent-gold-dark">
+              {SITE.gallery.sectionEyebrow}
+            </span>
+            <h2 className="text-2xl md:text-3xl font-bold font-serif text-primary mt-2">
+              {SITE.gallery.sectionTitle}
+            </h2>
+            <p className="text-sm text-text-muted mt-2 max-w-xl">{SITE.gallery.sectionSubtitle}</p>
+          </div>
+          <Link
+            href="/gallery"
+            className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-primary hover:text-primary-hover transition-colors"
+          >
+            {SITE.gallery.viewAllLabel}
+            <ArrowUpRight className="w-4 h-4" />
+          </Link>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="aspect-[4/3] rounded-2xl bg-bg-card/60 animate-pulse" />
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {items.map((item) => (
+              <div
+                key={item.id}
+                className="group relative aspect-[4/3] rounded-2xl overflow-hidden bg-bg-card shadow-sm border border-primary/5"
+              >
+                <Image
+                  src={item.imageUrl}
+                  alt={item.title}
+                  fill
+                  sizes="(max-width: 768px) 50vw, 33vw"
+                  className="object-cover transition-transform duration-500 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
+                  <span className="text-white text-sm font-semibold">{item.title}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/packages/core/modules/gallery/app/gallery/layout.tsx

@@ -0,0 +1,12 @@
+import type { Metadata } from "next";
+import { SITE } from "@/constants";
+
+export const metadata: Metadata = {
+  title: `${SITE.gallery.pageTitle} | ${SITE.brand.shortName}`,
+  description: SITE.gallery.pageSubtitle,
+  alternates: { canonical: `${SITE.domain.baseUrl.replace(/\/$/, "")}/gallery` },
+};
+
+export default function GalleryLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/packages/core/modules/gallery/app/gallery/page.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, ChevronLeft, ChevronRight, X, ZoomIn } from "lucide-react";
+import { SITE } from "@/constants";
+import { buildPageMetadata } from "@/lib/seo/metadata";
+
+interface GalleryItem {
+  id: string;
+  title: string;
+  category: string;
+  description?: string | null;
+  imageUrl: string;
+}
+
+export default function GalleryPage() {
+  const [items, setItems] = useState<GalleryItem[]>([]);
+  const [filter, setFilter] = useState<string>("all");
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/gallery");
+        const json = await res.json();
+        if (json.success && Array.isArray(json.data)) {
+          setItems(json.data);
+        }
+      } catch (err) {
+        console.warn("Gallery page: failed to load", err);
+      }
+    }
+    load();
+  }, []);
+
+  const categories = Array.from(new Set(items.map((i) => i.category))).sort();
+  const filtered =
+    filter === "all" ? items : items.filter((i) => i.category === filter);
+
+  const closeLightbox = () => setLightboxIndex(null);
+  const showPrev = () =>
+    setLightboxIndex((idx) =>
+      idx == null ? null : (idx - 1 + filtered.length) % filtered.length
+    );
+  const showNext = () =>
+    setLightboxIndex((idx) =>
+      idx == null ? null : (idx + 1) % filtered.length
+    );
+
+  return (
+    <div className="min-h-screen bg-bg-main">
+      <header className="border-b border-primary/10 bg-white/80 backdrop-blur-md sticky top-0 z-30">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-hover"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            {SITE.navigation.backToHome}
+          </Link>
+          <h1 className="text-lg font-bold font-serif text-primary">{SITE.gallery.pageTitle}</h1>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-6 py-12">
+        <p className="text-text-muted text-sm mb-8 max-w-2xl">{SITE.gallery.pageSubtitle}</p>
+
+        {categories.length > 1 && (
+          <div className="flex flex-wrap gap-2 mb-8">
+            <button
+              type="button"
+              onClick={() => setFilter("all")}
+              className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-wider transition-colors ${
+                filter === "all"
+                  ? "bg-primary text-white"
+                  : "bg-white border border-primary/10 text-text-muted hover:text-primary"
+              }`}
+            >
+              All
+            </button>
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                type="button"
+                onClick={() => setFilter(cat)}
+                className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-wider transition-colors ${
+                  filter === cat
+                    ? "bg-primary text-white"
+                    : "bg-white border border-primary/10 text-text-muted hover:text-primary"
+                }`}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {filtered.length === 0 ? (
+          <p className="text-center text-text-muted py-20">{SITE.gallery.emptyMessage}</p>
+        ) : (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {filtered.map((item, index) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => setLightboxIndex(index)}
+                className="group relative aspect-square rounded-2xl overflow-hidden border border-primary/5 shadow-sm cursor-pointer"
+              >
+                <Image
+                  src={item.imageUrl}
+                  alt={item.title}
+                  fill
+                  sizes="(max-width: 768px) 50vw, 25vw"
+                  className="object-cover transition-transform duration-500 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
+                  <ZoomIn className="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+                </div>
+                <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent">
+                  <span className="text-white text-xs font-semibold line-clamp-1">{item.title}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </main>
+
+      {lightboxIndex != null && filtered[lightboxIndex] && (
+        <div
+          className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
+          onClick={closeLightbox}
+        >
+          <button
+            type="button"
+            className="absolute top-6 right-6 text-white/80 hover:text-white"
+            onClick={closeLightbox}
+            aria-label="Close"
+          >
+            <X className="w-8 h-8" />
+          </button>
+          <button
+            type="button"
+            className="absolute left-4 md:left-8 text-white/80 hover:text-white p-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              showPrev();
+            }}
+            aria-label="Previous"
+          >
+            <ChevronLeft className="w-10 h-10" />
+          </button>
+          <div className="relative max-w-5xl w-full max-h-[85vh]" onClick={(e) => e.stopPropagation()}>
+            <Image
+              src={filtered[lightboxIndex].imageUrl}
+              alt={filtered[lightboxIndex].title}
+              width={1200}
+              height={800}
+              className="w-full h-auto max-h-[85vh] object-contain rounded-lg"
+            />
+            <p className="text-white text-center mt-4 font-semibold">{filtered[lightboxIndex].title}</p>
+          </div>
+          <button
+            type="button"
+            className="absolute right-4 md:right-8 text-white/80 hover:text-white p-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              showNext();
+            }}
+            aria-label="Next"
+          >
+            <ChevronRight className="w-10 h-10" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/core/modules/gallery/lib/controllers/GalleryController.ts

@@ -0,0 +1,2 @@
+/** @deprecated Import from `@/lib/features/gallery` instead. */
+export { GalleryController, galleryController } from "@/lib/features/gallery";

package/packages/core/modules/gallery/lib/features/gallery/gallery.controller.ts

@@ -0,0 +1,78 @@
+import { NextResponse } from "next/server";
+import { galleryService, GalleryService } from "./gallery.service";
+
+export class GalleryController {
+  private service: GalleryService;
+
+  constructor(service: GalleryService = galleryService) {
+    this.service = service;
+  }
+
+  async listPublic(): Promise<NextResponse> {
+    try {
+      const data = await this.service.listPublic();
+      return NextResponse.json({ success: true, data }, { status: 200 });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Failed to fetch gallery";
+      return NextResponse.json({ success: false, error: message }, { status: 500 });
+    }
+  }
+
+  async listAll(): Promise<NextResponse> {
+    try {
+      const data = await this.service.listAll();
+      return NextResponse.json({ success: true, data }, { status: 200 });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Failed to fetch gallery";
+      return NextResponse.json({ success: false, error: message }, { status: 500 });
+    }
+  }
+
+  async create(req: Request): Promise<NextResponse> {
+    try {
+      const body = await req.json();
+      const item = await this.service.create({
+        title: body.title,
+        category: body.category,
+        description: body.description,
+        imageUrl: body.imageUrl,
+        sortOrder: body.sortOrder != null ? Number(body.sortOrder) : 0,
+        published: body.published !== false,
+      });
+      return NextResponse.json({ success: true, data: item }, { status: 201 });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Failed to create gallery image";
+      return NextResponse.json({ success: false, error: message }, { status: 400 });
+    }
+  }
+
+  async update(req: Request, params: { id: string }): Promise<NextResponse> {
+    try {
+      const body = await req.json();
+      const item = await this.service.update(params.id, {
+        title: body.title,
+        category: body.category,
+        description: body.description,
+        imageUrl: body.imageUrl,
+        sortOrder: body.sortOrder != null ? Number(body.sortOrder) : undefined,
+        published: body.published,
+      });
+      return NextResponse.json({ success: true, data: item }, { status: 200 });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Failed to update gallery image";
+      return NextResponse.json({ success: false, error: message }, { status: 400 });
+    }
+  }
+
+  async delete(params: { id: string }): Promise<NextResponse> {
+    try {
+      const item = await this.service.delete(params.id);
+      return NextResponse.json({ success: true, data: item }, { status: 200 });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Failed to delete gallery image";
+      return NextResponse.json({ success: false, error: message }, { status: 400 });
+    }
+  }
+}
+
+export const galleryController = new GalleryController();