create public layout and admin and fix escrow and refund
This commit is contained in:
arifal
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import { signOut } from "next-auth/react";
|
||||
|
||||
const NAV_ITEMS: { href: string; label: string; icon: string }[] = [
|
||||
{ href: "/admin", label: "Dashboard", icon: "📊" },
|
||||
{ href: "/admin/verifications", label: "Verifikasi", icon: "🪪" },
|
||||
{ href: "/admin/refunds", label: "Refund", icon: "↩️" },
|
||||
{ href: "/admin/payouts", label: "Payout", icon: "💸" },
|
||||
];
|
||||
|
||||
interface AdminSidebarProps {
|
||||
user: { name: string; email: string };
|
||||
}
|
||||
|
||||
export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||
const pathname = usePathname();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile top bar */}
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-4 lg:hidden">
|
||||
<Link href="/admin" className="flex items-center gap-2">
|
||||
<Image
|
||||
src="/images/SeTrip.png"
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
className="h-7 w-7 object-contain"
|
||||
/>
|
||||
<span className="text-sm font-bold text-neutral-800">
|
||||
SeTrip <span className="text-primary-600">Admin</span>
|
||||
</span>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="flex h-9 w-9 items-center justify-center rounded-lg text-neutral-600 hover:bg-neutral-100"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={open}
|
||||
>
|
||||
{open ? (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||||
<path d="M5 5l10 10M15 5L5 15" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||||
<path d="M3 5h14M3 10h14M3 15h14" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Mobile drawer backdrop */}
|
||||
{open && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Tutup menu"
|
||||
onClick={() => setOpen(false)}
|
||||
className="fixed inset-0 z-30 bg-neutral-900/30 lg:hidden"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-neutral-200 bg-white transition-transform lg:sticky lg:top-0 lg:h-screen lg:translate-x-0 ${
|
||||
open ? "translate-x-0" : "-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex h-16 items-center gap-2.5 border-b border-neutral-200 px-5">
|
||||
<Image
|
||||
src="/images/SeTrip.png"
|
||||
alt=""
|
||||
width={32}
|
||||
height={32}
|
||||
className="h-8 w-8 object-contain"
|
||||
/>
|
||||
<div className="leading-tight">
|
||||
<p className="text-base font-bold text-neutral-800">
|
||||
SeTrip
|
||||
</p>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-primary-600">
|
||||
Admin Panel
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 overflow-y-auto p-3">
|
||||
<ul className="space-y-1">
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/admin" && pathname?.startsWith(item.href));
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? "bg-primary-600 text-white"
|
||||
: "text-neutral-700 hover:bg-neutral-100"
|
||||
}`}
|
||||
>
|
||||
<span aria-hidden className="text-base">
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="my-4 border-t border-neutral-100" />
|
||||
|
||||
<ul className="space-y-1">
|
||||
<li>
|
||||
<Link
|
||||
href="/"
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex items-center gap-3 rounded-lg px-3 py-2 text-xs font-medium text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700"
|
||||
>
|
||||
<span aria-hidden>↩</span>
|
||||
<span>Lihat situs publik</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="border-t border-neutral-100 p-3">
|
||||
<div className="flex items-center gap-2 rounded-lg px-2 py-2">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-xs font-semibold text-neutral-800">
|
||||
{user.name}
|
||||
</p>
|
||||
<p className="truncate text-[10px] text-neutral-500">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => signOut({ callbackUrl: "/" })}
|
||||
className="rounded-lg px-2 py-1 text-[11px] font-medium text-neutral-500 hover:bg-red-50 hover:text-red-600"
|
||||
title="Keluar"
|
||||
>
|
||||
Keluar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import Link from "next/link";
|
||||
import { siteConfig } from "@/lib/site";
|
||||
|
||||
const LEGAL_LINKS = [
|
||||
{ href: "/terms", label: "Syarat & Ketentuan" },
|
||||
{ href: "/privacy", label: "Kebijakan Privasi" },
|
||||
] as const;
|
||||
|
||||
const EXPLORE_LINKS = [
|
||||
{ href: "/trips", label: "Open Trip" },
|
||||
{ href: "/people", label: "Cari Teman" },
|
||||
{ href: "/create-trip", label: "Buat Trip" },
|
||||
] as const;
|
||||
|
||||
export function Footer() {
|
||||
const year = new Date().getFullYear();
|
||||
return (
|
||||
<footer className="mt-12 border-t border-neutral-200 bg-white">
|
||||
<div className="mx-auto max-w-6xl px-4 py-8 sm:py-10">
|
||||
<div className="grid gap-8 sm:grid-cols-3">
|
||||
<div>
|
||||
<Link href="/" className="inline-flex items-center gap-2">
|
||||
<span className="text-lg font-bold text-neutral-800">
|
||||
Se<span className="text-primary-600">Trip</span>
|
||||
</span>
|
||||
</Link>
|
||||
<p className="mt-2 max-w-xs text-xs text-neutral-500">
|
||||
{siteConfig.slogan} Gabung trip & aktivitas, kenal stranger jadi
|
||||
travel buddies.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-3 text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Jelajah
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm">
|
||||
{EXPLORE_LINKS.map((l) => (
|
||||
<li key={l.href}>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-neutral-600 hover:text-primary-700"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-3 text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Kebijakan
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm">
|
||||
{LEGAL_LINKS.map((l) => (
|
||||
<li key={l.href}>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-neutral-600 hover:text-primary-700"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-col items-start justify-between gap-2 border-t border-neutral-100 pt-4 text-xs text-neutral-500 sm:flex-row sm:items-center">
|
||||
<p>
|
||||
© {year} {siteConfig.name}. Pergi bareng, bukan sendiri.
|
||||
</p>
|
||||
<p className="text-[11px] text-neutral-400">
|
||||
Pembayaran ditahan (escrow) sampai trip selesai · refund manual oleh
|
||||
admin
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user