change link redirect

app/(page)/admin/manage-category/components/CategoryTree.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import {
+  FolderTree,
+  Edit3,
+  Trash2,
+  Plus,
+  ChevronRight,
+  ChevronDown,
+} from "lucide-react";
+import { getTree, getFlat, updateCategory, createCategory, deleteCategory } from "@/lib/categories.api";
+
+/* ================= TYPES ================= */
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+  parentId?: string | null;
+  children?: Category[];
+}
+
+/* ================= API ================= */
+
+/* ================= UTIL ================= */
+function slugify(text: string) {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9-]/g, "");
+}
+
+/* ================= PAGE ================= */
+export default function CategoriesPage() {
+  const [tree, setTree] = useState<Category[]>([]);
+  const [flat, setFlat] = useState<Category[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const [form, setForm] = useState({
+    id: null as string | null,
+    name: "",
+    slug: "",
+    parentId: null as string | null,
+  });
+
+  /* ================= LOAD ================= */
+  async function load() {
+    setLoading(true);
+    try {
+      const [t, f] = await Promise.all([getTree(), getFlat()]);
+      setTree(t);
+      setFlat(f);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  /* ================= CRUD ================= */
+  async function save() {
+    const payload = {
+      name: form.name,
+      slug: form.slug || slugify(form.name),
+      parentId: form.parentId,
+    };
+
+    if (form.id) {
+      await updateCategory(form.id, payload);
+    } else {
+      await createCategory(payload);
+    }
+
+    closeModal();
+    load();
+  }
+
+  async function remove(id: string) {
+    if (!confirm("Delete this category?")) return;
+    await deleteCategory(id);
+    load();
+  }
+
+  /* ================= MODAL ================= */
+  function openCreate(parentId?: string) {
+    setForm({
+      id: null,
+      name: "",
+      slug: "",
+      parentId: parentId || null,
+    });
+    setModalOpen(true);
+  }
+
+  function openEdit(cat: Category) {
+    setForm({
+      id: cat.id,
+      name: cat.name,
+      slug: cat.slug,
+      parentId: cat.parentId || null,
+    });
+    setModalOpen(true);
+  }
+
+  function closeModal() {
+    setModalOpen(false);
+    setForm({ id: null, name: "", slug: "", parentId: null });
+  }
+
+  /* ================= TREE ================= */
+  function TreeNode({
+    node,
+    level = 0,
+  }: {
+    node: Category;
+    level?: number;
+  }) {
+    const [open, setOpen] = useState(true);
+
+    return (
+      <div style={{ marginLeft: level * 14 }} className="border-l pl-3">
+
+        {/* NODE */}
+        <div className="flex items-center justify-between py-2 group">
+
+          <div className="flex items-center gap-2">
+
+            <button onClick={() => setOpen(!open)}>
+              {open ? (
+                <ChevronDown size={14} />
+              ) : (
+                <ChevronRight size={14} />
+              )}
+            </button>
+
+            <FolderTree size={14} className="text-blue-500" />
+
+            <span
+              onClick={() => openEdit(node)}
+              className="text-sm font-medium cursor-pointer hover:text-blue-600"
+            >
+              {node.name}
+            </span>
+          </div>
+
+          {/* ACTIONS */}
+          <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
+
+            <button
+              onClick={() => openCreate(node.id)}
+              className="text-green-600"
+            >
+              <Plus size={14} />
+            </button>
+
+            <button onClick={() => openEdit(node)}>
+              <Edit3 size={14} />
+            </button>
+
+            <button onClick={() => remove(node.id)}>
+              <Trash2 size={14} className="text-red-500" />
+            </button>
+          </div>
+        </div>
+
+        {/* CHILDREN */}
+        {open &&
+          node.children?.map((child) => (
+            <TreeNode
+              key={child.id}
+              node={child}
+              level={level + 1}
+            />
+          ))}
+      </div>
+    );
+  }
+
+  /* ================= UI ================= */
+  return (
+    <div className="p-8 bg-slate-50 min-h-screen">
+
+      {/* HEADER */}
+      <div className="flex justify-between mb-6">
+        <h1 className="text-xl font-semibold">
+          Category Manager
+        </h1>
+
+        <button
+          onClick={() => openCreate()}
+          className="bg-blue-600 text-white px-4 py-2 rounded"
+        >
+          + New Category
+        </button>
+      </div>
+
+      {/* TREE */}
+      <div className="bg-white border rounded-xl p-4">
+        {loading ? (
+          <p>Loading...</p>
+        ) : (
+          tree.map((node) => (
+            <TreeNode key={node.id} node={node} />
+          ))
+        )}
+      </div>
+
+      {/* MODAL */}
+      {modalOpen && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
+
+          <div className="bg-white w-[420px] p-5 rounded-xl">
+
+            <h2 className="font-semibold mb-4">
+              {form.id ? "Edit Category" : "Create Category"}
+            </h2>
+
+            <input
+              className="w-full border p-2 rounded mb-2"
+              placeholder="Name"
+              value={form.name}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  name: e.target.value,
+                  slug: slugify(e.target.value),
+                })
+              }
+            />
+
+            <input
+              className="w-full border p-2 rounded mb-3"
+              placeholder="Slug"
+              value={form.slug}
+              onChange={(e) =>
+                setForm({ ...form, slug: e.target.value })
+              }
+            />
+
+            <div className="flex justify-end gap-2">
+
+              <button onClick={closeModal}>
+                Cancel
+              </button>
+
+              <button
+                onClick={save}
+                className="bg-blue-600 text-white px-3 py-1 rounded"
+              >
+                Save
+              </button>
+
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/(page)/admin/panel/page.tsx

@@ -0,0 +1,188 @@
+"use client";
+import React, { useState, useCallback } from "react";
+import Cropper from "react-easy-crop";
+
+const RATIOS = [
+  { label: "Hero Banner (Ultra Wide)", value: 21 / 9, text: "21/9" },
+  { label: "News Feed (Widescreen)", value: 16 / 9, text: "16/9" },
+  { label: "Profile / Post (Square)", value: 1 / 1, text: "1/1" },
+];
+
+export default function FullPageEditor() {
+  const [image, setImage] = useState<string | null>(null);
+  const [crops, setCrops] = useState<Record<string, any>>(
+    RATIOS.reduce((acc, r) => ({ ...acc, [r.text]: { x: 0, y: 0, zoom: 1 } }), {})
+  );
+  const [completedCrops, setCompletedCrops] = useState<Record<string, any>>({});
+  const [isExporting, setIsExporting] = useState(false);
+  const [results, setResults] = useState<Record<string, string>>({});
+
+  const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const reader = new FileReader();
+      reader.onload = () => setImage(reader.result as string);
+      reader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    const bundle: Record<string, string> = {};
+    for (const ratio of RATIOS) {
+      const crop = completedCrops[ratio.text];
+      if (crop) bundle[ratio.text] = await getCroppedImg(image!, crop);
+    }
+    setResults(bundle);
+    setIsExporting(false);
+  };
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100 font-sans selection:bg-indigo-500">
+      {/* 1. Global Navigation */}
+      <nav className="sticky top-0 z-50 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md px-8 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="bg-indigo-600 p-2 rounded-lg font-black text-xs">FIX</div>
+          <h1 className="text-lg font-bold tracking-tighter">IMAGE FRAMER <span className="text-zinc-500 font-medium text-sm ml-2">PRO v3.0</span></h1>
+        </div>
+        
+        <div className="flex gap-4">
+          <label className="cursor-pointer bg-zinc-800 hover:bg-zinc-700 text-sm font-bold px-5 py-2 rounded-full transition-all border border-zinc-700">
+            {image ? "New Photo" : "Upload Source"}
+            <input type="file" accept="image/*" className="hidden" onChange={onSelectFile} />
+          </label>
+          {image && (
+            <button 
+              onClick={handleExport}
+              className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-bold px-8 py-2 rounded-full shadow-lg shadow-indigo-900/20 transition-all active:scale-95"
+            >
+              {isExporting ? "Processing..." : "Generate Base64"}
+            </button>
+          )}
+        </div>
+      </nav>
+
+      {/* 2. Workspace Area */}
+      <main className="max-w-screen-xl mx-auto p-8 space-y-20">
+        {!image ? (
+          <div className="h-[70vh] flex flex-col items-center justify-center border-2 border-dashed border-zinc-800 rounded-[3rem] bg-zinc-900/30">
+            <div className="w-20 h-20 bg-zinc-800 rounded-full flex items-center justify-center text-3xl mb-6">📁</div>
+            <h2 className="text-2xl font-bold mb-2">Editor is Empty</h2>
+            <p className="text-zinc-500 max-w-xs text-center">Upload a high-resolution image to begin the multi-aspect framing process.</p>
+          </div>
+        ) : (
+          <div className="space-y-32 pb-40">
+            {RATIOS.map((ratio) => (
+              <section key={ratio.text} className="group">
+                {/* Section Header */}
+                <div className="flex items-end justify-between mb-6 border-b border-zinc-800 pb-4">
+                  <div>
+                    <span className="text-indigo-500 text-xs font-black uppercase tracking-[0.2em]">Aspect Ratio</span>
+                    <h3 className="text-3xl font-bold mt-1">{ratio.label}</h3>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-zinc-500 text-xs font-mono uppercase">Current Zoom</p>
+                    <p className="text-2xl font-black">{Math.round((crops[ratio.text]?.zoom || 1) * 100)}%</p>
+                  </div>
+                </div>
+
+                {/* BIG Editor Window */}
+                <div className="relative w-full overflow-hidden rounded-[2rem] bg-zinc-900 shadow-2xl ring-1 ring-zinc-800 h-[600px]">
+                  <Cropper
+                    image={image}
+                    crop={{ x: crops[ratio.text].x, y: crops[ratio.text].y }}
+                    zoom={crops[ratio.text].zoom}
+                    aspect={ratio.value}
+                    onCropChange={(c) => setCrops(prev => ({ ...prev, [ratio.text]: { ...prev[ratio.text], ...c } }))}
+                    onZoomChange={(z) => setCrops(prev => ({ ...prev, [ratio.text]: { ...prev[ratio.text], zoom: z } }))}
+                    onCropComplete={(_, px) => setCompletedCrops(prev => ({ ...prev, [ratio.text]: px }))}
+                    objectFit="cover"
+                    showGrid={true}
+                  />
+                </div>
+
+                {/* Floating Zoom Control (Large & Accessible) */}
+                <div className="mt-8 flex items-center gap-8 bg-zinc-900/50 p-6 rounded-2xl border border-zinc-800">
+                  <span className="text-xs font-bold text-zinc-500 uppercase tracking-widest min-w-[80px]">Adjust Zoom</span>
+                  <input
+                    type="range"
+                    min={1}
+                    max={3}
+                    step={0.01}
+                    value={crops[ratio.text].zoom}
+                    onChange={(e) => setCrops(prev => ({ ...prev, [ratio.text]: { ...prev[ratio.text], zoom: Number(e.target.value) } }))}
+                    className="flex-1 accent-indigo-500 h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer"
+                  />
+                  <button 
+                    onClick={() => setCrops(prev => ({ ...prev, [ratio.text]: { x:0, y:0, zoom: 1 } }))}
+                    className="text-[10px] font-black uppercase tracking-widest text-zinc-600 hover:text-white"
+                  >
+                    Reset
+                  </button>
+                </div>
+              </section>
+            ))}
+          </div>
+        )}
+      </main>
+
+      {/* 3. Global Results Modal/Area */}
+      {Object.keys(results).length > 0 && (
+        <div className="fixed inset-0 z-[100] bg-zinc-950 flex flex-col">
+          <header className="p-8 border-b border-zinc-800 flex justify-between items-center">
+            <h2 className="text-2xl font-black">EXPORT BUNDLE</h2>
+            <button onClick={() => setResults({})} className="text-zinc-500 hover:text-white font-bold">Close Editor</button>
+          </header>
+          <div className="flex-1 overflow-y-auto p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Object.entries(results).map(([ratio, b64]) => (
+              <div key={ratio} className="bg-zinc-900 rounded-3xl p-6 space-y-4 border border-zinc-800">
+                <div className="flex justify-between items-center">
+                  <span className="text-xs font-bold text-indigo-500 uppercase">{ratio} Result</span>
+                  <button 
+                    onClick={() => {navigator.clipboard.writeText(b64); alert('Copied!');}}
+                    className="text-[10px] bg-indigo-600 px-3 py-1 rounded-full font-bold"
+                  >
+                    Copy Base64
+                  </button>
+                </div>
+                <img src={b64} className="w-full rounded-xl border border-white/5 shadow-lg" alt="Crop preview" />
+                <textarea 
+                  readOnly 
+                  value={b64} 
+                  className="w-full h-24 bg-zinc-950 text-[10px] font-mono p-4 rounded-xl border-none outline-none text-zinc-600"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---------------- CANVAS EXPORT UTILITY ---------------- */
+async function getCroppedImg(imageSrc: string, pixelCrop: any): Promise<string> {
+  const image = new Image();
+  image.src = imageSrc;
+  await new Promise((resolve) => (image.onload = resolve));
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  );
+
+  return canvas.toDataURL("image/jpeg", 0.9);
+}

app/api/auth/callback/route.ts

@@ -40,7 +40,7 @@ export async function GET(req: Request) {
     return NextResponse.redirect(`${origin}/login?error=token_exchange`);
   }
 
-  const res = NextResponse.redirect(`${origin}/dashboard`);
+  const res = NextResponse.redirect(`${origin}/admin/dashboard`);
 
   // Secure cookies are ignored on http:// (e.g. localhost) — browser drops them.
   res.cookies.set("access_token", data.access_token, {

lib/getPermisions.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { jwtVerify } from "jose";
+
+const getTokenFromCookies = (cookieHeader: string | null) => {
+  if (!cookieHeader) return null;
+
+  return cookieHeader
+    .split("; ")
+    .find((c) => c.startsWith("access_token="))
+    ?.split("=")[1];
+};
+
+export function getPermision(req: Request): string[] {
+  try {
+    const cookie = req.headers.get("cookie");
+    const token = getTokenFromCookies(cookie);
+
+    if (!token) {
+      return []
+    }
+
+    // ⚠️ For production: use Keycloak public key verification
+    // For now: decode safely (basic version)
+    const payload = JSON.parse(
+      Buffer.from(token.split(".")[1], "base64").toString()
+    );
+
+    return payload.realm_access.roles || [];
+  } catch (err) {
+    return []
+  }
+}

lib/utels.ts

@@ -0,0 +1,8 @@
+export const getTokenFromCookies = (cookieHeader: string | null) => {
+    if (!cookieHeader) return null;
+  
+    return cookieHeader
+      .split("; ")
+      .find((c) => c.startsWith("access_token="))
+      ?.split("=")[1];
+  };