create review and profile
This commit is contained in:
arifal
@@ -0,0 +1,217 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { profileService } from "@/server/services/profile.service";
|
||||
import { TripCard } from "@/features/trip/components/trip-card";
|
||||
import { ProfileTripRow } from "@/features/profile/components/profile-trip-row";
|
||||
|
||||
export default async function ProfilePage() {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user) {
|
||||
redirect("/login?callbackUrl=/profile");
|
||||
}
|
||||
|
||||
const data = await profileService.getProfileDashboard(session.user.id);
|
||||
const { user, organizedTrips, activeJoined, cancelledJoined, reviewable } =
|
||||
data;
|
||||
|
||||
const memberSince = new Intl.DateTimeFormat("id-ID", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
}).format(user.createdAt);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-4 py-6 sm:py-8">
|
||||
<div className="mb-6 flex flex-col gap-4 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
{user.image ? (
|
||||
<Image
|
||||
src={user.image}
|
||||
alt=""
|
||||
width={72}
|
||||
height={72}
|
||||
className="h-[72px] w-[72px] rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center rounded-full bg-primary-600 text-2xl font-bold text-white">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-xl font-bold text-neutral-800 sm:text-2xl">
|
||||
{user.name}
|
||||
</h1>
|
||||
<p className="mt-0.5 truncate text-sm text-neutral-500">{user.email}</p>
|
||||
<p className="mt-1 text-xs text-neutral-400">
|
||||
Anggota sejak {memberSince}
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-neutral-500">
|
||||
Di sini kamu bisa lihat trip yang kamu buat sebagai{" "}
|
||||
<span className="font-semibold text-primary-700">organizer</span>,
|
||||
trip yang kamu{" "}
|
||||
<span className="font-semibold text-secondary-700">ikuti</span>{" "}
|
||||
sebagai peserta, dan{" "}
|
||||
<span className="font-semibold text-amber-700">ulasan</span> untuk
|
||||
trip yang sudah selesai (lewat halaman trip).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href="/create-trip"
|
||||
className="shrink-0 rounded-xl bg-primary-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-md hover:bg-primary-700"
|
||||
>
|
||||
+ Buat trip
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Trip selesai — akses ulasan (trip ini tidak muncul di Open Trip) */}
|
||||
{reviewable.length > 0 && (
|
||||
<section className="mb-8 rounded-2xl border border-amber-200 bg-amber-50/60 p-4 sm:p-5">
|
||||
<h2 className="mb-1 text-base font-bold text-amber-900 sm:text-lg">
|
||||
Trip selesai & ulasan
|
||||
</h2>
|
||||
<p className="mb-4 text-xs text-amber-900/80 sm:text-sm">
|
||||
Trip yang sudah lewat tidak tampil di daftar Open Trip. Buka trip di
|
||||
bawah ini lalu scroll ke bagian ulasan di halaman detail untuk
|
||||
memberi atau mengubah rating.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{reviewable.map((p) => {
|
||||
const t = p.trip;
|
||||
const hasReview = t.reviews.length > 0;
|
||||
return (
|
||||
<li key={p.id}>
|
||||
<ProfileTripRow
|
||||
href={`/trips/${t.id}`}
|
||||
title={t.title}
|
||||
mountain={t.mountain}
|
||||
date={t.date}
|
||||
endDate={t.endDate}
|
||||
rightSlot={
|
||||
<span
|
||||
className={
|
||||
hasReview
|
||||
? "text-secondary-700"
|
||||
: "font-bold text-amber-800"
|
||||
}
|
||||
>
|
||||
{hasReview ? "Ubah ulasan →" : "Beri ulasan →"}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-2">
|
||||
<section>
|
||||
<h2 className="mb-3 text-base font-bold text-neutral-800 sm:text-lg">
|
||||
Trip yang kamu buat
|
||||
<span className="ml-2 text-sm font-normal text-neutral-400">
|
||||
({organizedTrips.length})
|
||||
</span>
|
||||
</h2>
|
||||
{organizedTrips.length === 0 ? (
|
||||
<p className="rounded-xl border border-dashed border-neutral-200 bg-neutral-50 px-4 py-6 text-center text-sm text-neutral-500">
|
||||
Belum ada trip.{" "}
|
||||
<Link href="/create-trip" className="font-semibold text-primary-600">
|
||||
Buat trip pertama
|
||||
</Link>
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{organizedTrips.map((trip) => (
|
||||
<TripCard
|
||||
key={trip.id}
|
||||
id={trip.id}
|
||||
title={trip.title}
|
||||
mountain={trip.mountain}
|
||||
location={trip.location}
|
||||
date={trip.date}
|
||||
endDate={trip.endDate}
|
||||
price={trip.price}
|
||||
maxParticipants={trip.maxParticipants}
|
||||
participantCount={trip._count.participants}
|
||||
organizerName={`${user.name} (Kamu)`}
|
||||
status={trip.status}
|
||||
coverImage={trip.images[0]?.url}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 text-base font-bold text-neutral-800 sm:text-lg">
|
||||
Trip yang kamu ikuti
|
||||
<span className="ml-2 text-sm font-normal text-neutral-400">
|
||||
({activeJoined.length})
|
||||
</span>
|
||||
</h2>
|
||||
{activeJoined.length === 0 ? (
|
||||
<p className="rounded-xl border border-dashed border-neutral-200 bg-neutral-50 px-4 py-6 text-center text-sm text-neutral-500">
|
||||
Belum join trip.{" "}
|
||||
<Link href="/trips" className="font-semibold text-primary-600">
|
||||
Cari open trip
|
||||
</Link>
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{activeJoined.map((p) => {
|
||||
const t = p.trip;
|
||||
return (
|
||||
<li key={p.id}>
|
||||
<ProfileTripRow
|
||||
href={`/trips/${t.id}`}
|
||||
title={t.title}
|
||||
mountain={t.mountain}
|
||||
date={t.date}
|
||||
endDate={t.endDate}
|
||||
rightSlot={
|
||||
<span className="text-neutral-400">
|
||||
{p.status === "CONFIRMED" ? "Terdaftar" : p.status}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{cancelledJoined.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<h3 className="mb-2 text-sm font-semibold text-neutral-500">
|
||||
Riwayat batal ({cancelledJoined.length})
|
||||
</h3>
|
||||
<ul className="space-y-2 opacity-80">
|
||||
{cancelledJoined.map((p) => {
|
||||
const t = p.trip;
|
||||
return (
|
||||
<li key={p.id}>
|
||||
<ProfileTripRow
|
||||
href={`/trips/${t.id}`}
|
||||
title={t.title}
|
||||
mountain={t.mountain}
|
||||
date={t.date}
|
||||
endDate={t.endDate}
|
||||
rightSlot={
|
||||
<span className="text-red-500/90">Dibatalkan</span>
|
||||
}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user