fix ui style

2026-05-21 11:59:02 +07:00
parent 22e66ce493
commit f84d0e3726
51 changed files with 1035 additions and 347 deletions
@@ -28,6 +28,14 @@ import {
  isTripDepartureDayPast,
 } from "@/lib/trip-dates";
 import { previewRefund } from "@/lib/refund-policy";
+import {
+  MapPin,
+  CalendarDays,
+  Wallet,
+  UserRound,
+  Zap,
+  Users,
+} from "lucide-react";

 export async function generateMetadata({
  params,
@@ -309,8 +317,13 @@ export default async function TripDetailPage({
          {/* Info Grid */}
          <div className="grid grid-cols-2 gap-2 sm:gap-3">
            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
-                📍
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 sm:h-10 sm:w-10">
+                <MapPin
+                  size={18}
+                  strokeWidth={1.75}
+                  aria-hidden
+                  className="text-secondary-700"
+                />
              </span>
              <div className="min-w-0">
                <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Lokasi</p>
@@ -319,8 +332,13 @@ export default async function TripDetailPage({
            </div>

            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
-                📅
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary-100 sm:h-10 sm:w-10">
+                <CalendarDays
+                  size={18}
+                  strokeWidth={1.75}
+                  aria-hidden
+                  className="text-secondary-700"
+                />
              </span>
              <div className="min-w-0">
                <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Tanggal</p>
@@ -331,8 +349,13 @@ export default async function TripDetailPage({
            </div>

            <div className="flex items-center gap-2 rounded-xl bg-primary-50 p-3 sm:gap-3 sm:p-4">
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-100 text-sm sm:h-10 sm:w-10 sm:text-lg">
-                💰
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-100 sm:h-10 sm:w-10">
+                <Wallet
+                  size={18}
+                  strokeWidth={1.75}
+                  aria-hidden
+                  className="text-primary-700"
+                />
              </span>
              <div className="min-w-0">
                <p className="text-[10px] font-medium text-primary-600 sm:text-xs">Harga</p>
@@ -343,8 +366,13 @@ export default async function TripDetailPage({
            </div>

            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-3 sm:gap-3 sm:p-4">
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-200 text-sm sm:h-10 sm:w-10 sm:text-lg">
-                👤
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-neutral-200 sm:h-10 sm:w-10">
+                <UserRound
+                  size={18}
+                  strokeWidth={1.75}
+                  aria-hidden
+                  className="text-neutral-600"
+                />
              </span>
              <div className="min-w-0">
                <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Organizer</p>
@@ -372,8 +400,9 @@ export default async function TripDetailPage({
                  Peserta
                </span>
                {spotsLeft > 0 && spotsLeft <= 3 && (
-                  <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-800 sm:text-[11px]">
-                    ⚡ Tinggal {spotsLeft} spot!
+                  <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-800 sm:text-[11px]">
+                    <Zap size={11} strokeWidth={2} aria-hidden />
+                    Tinggal {spotsLeft} spot!
                  </span>
                )}
                {spotsLeft <= 0 && (
@@ -418,8 +447,14 @@ export default async function TripDetailPage({
              )}
            </p>
            {confirmedCount > 0 && (
-              <p className="mt-2 text-[11px] text-neutral-600 sm:text-xs">
-                <span aria-hidden>👥</span> Sudah join:{" "}
+              <p className="mt-2 flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[11px] text-neutral-600 sm:text-xs">
+                <Users
+                  size={13}
+                  strokeWidth={1.75}
+                  aria-hidden
+                  className="text-neutral-400"
+                />
+                Sudah join:{" "}
                <span className="font-medium text-neutral-800">
                  {confirmedParticipants
                    .slice(0, 3)
@@ -547,7 +582,7 @@ export default async function TripDetailPage({
                Belum ada peserta yang dikonfirmasi.{" "}
                {pendingParticipants.length > 0
                  ? "Cek permintaan join di atas untuk menyetujui peserta."
-                  : "Jadilah yang pertama mendaftar! 🎒"}
+                  : "Jadilah yang pertama mendaftar!"}
              </p>
            ) : (
              <ul className="grid gap-2 sm:grid-cols-2">
@@ -578,8 +613,14 @@ export default async function TripDetailPage({
                            {p.user.name}
                          </p>
                          {city && (
-                            <p className="truncate text-[11px] text-neutral-500 sm:text-xs">
-                              📍 {city}
+                            <p className="flex items-center gap-1 truncate text-[11px] text-neutral-500 sm:text-xs">
+                              <MapPin
+                                size={11}
+                                strokeWidth={1.75}
+                                aria-hidden
+                                className="shrink-0"
+                              />
+                              {city}
                            </p>
                          )}
                          {interests.length > 0 && (
@@ -11,6 +11,15 @@ import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
 import { isFreeTrip } from "@/lib/trip-pricing";
 import { categoryMeta } from "@/lib/activity-category";
 import { MidtransPayButton } from "@/features/booking/components/midtrans-pay-button";
+import {
+  ArrowLeft,
+  CalendarDays,
+  MapPin,
+  PartyPopper,
+  CircleCheck,
+  Clock,
+  Check,
+} from "lucide-react";

 export const metadata: Metadata = {
  title: "Detail Pembayaran",
@@ -82,8 +91,15 @@ export default async function PaymentPage({ params, searchParams }: PageProps) {
          <h1 className="mt-0.5 truncate text-base font-bold text-neutral-900 sm:text-lg">
            {trip.title}
          </h1>
-          <p className="mt-1 text-xs text-neutral-500 sm:text-sm">
-            📅 {dateRange} · 📍 {trip.location}
+          <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-neutral-500 sm:text-sm">
+            <span className="inline-flex items-center gap-1">
+              <CalendarDays size={13} strokeWidth={1.75} aria-hidden />
+              {dateRange}
+            </span>
+            <span className="inline-flex items-center gap-1">
+              <MapPin size={13} strokeWidth={1.75} aria-hidden />
+              {trip.location}
+            </span>
          </p>
          <p className="mt-1 text-xs text-neutral-500 sm:text-sm">
            Organizer:{" "}
@@ -102,8 +118,12 @@ export default async function PaymentPage({ params, searchParams }: PageProps) {
  return (
    <div className="mx-auto max-w-2xl px-4 py-6 sm:py-10">
      <div className="mb-4 flex items-center gap-2 text-xs text-neutral-500 sm:text-sm">
-        <Link href={`/trips/${trip.id}`} className="hover:text-primary-600">
-          ← Kembali ke trip
+        <Link
+          href={`/trips/${trip.id}`}
+          className="inline-flex items-center gap-1 hover:text-primary-600"
+        >
+          <ArrowLeft size={14} strokeWidth={1.75} aria-hidden />
+          Kembali ke trip
        </Link>
      </div>

@@ -170,8 +190,13 @@ function FreeTripSection({
 }) {
  return (
    <section className="rounded-2xl border border-emerald-200 bg-emerald-50/60 p-6 text-center shadow-sm sm:p-8">
-      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-2xl">
-        🎉
+      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100">
+        <PartyPopper
+          size={26}
+          strokeWidth={1.75}
+          aria-hidden
+          className="text-emerald-600"
+        />
      </div>
      <h2 className="mb-1 text-lg font-bold text-emerald-900 sm:text-xl">
        Trip ini gratis
@@ -184,10 +209,28 @@ function FreeTripSection({
        <p className="text-[11px] font-semibold uppercase tracking-wide text-emerald-700">
          Status keikutsertaan
        </p>
-        <p className="text-sm font-bold text-neutral-800">
-          {bookingStatus === "PAID"
-            ? "✅ Terkonfirmasi sebagai peserta"
-            : "⏳ Menunggu persetujuan organizer"}
+        <p className="flex items-center gap-1.5 text-sm font-bold text-neutral-800">
+          {bookingStatus === "PAID" ? (
+            <>
+              <CircleCheck
+                size={15}
+                strokeWidth={2}
+                aria-hidden
+                className="text-emerald-600"
+              />
+              Terkonfirmasi sebagai peserta
+            </>
+          ) : (
+            <>
+              <Clock
+                size={15}
+                strokeWidth={2}
+                aria-hidden
+                className="text-amber-600"
+              />
+              Menunggu persetujuan organizer
+            </>
+          )}
        </p>
      </div>

@@ -250,10 +293,15 @@ function PaidTripSection({
      {canPay && <MidtransPayButton tripId={tripId} />}

      {isFullyPaid && (
-        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900 sm:p-5">
+        <div className="flex items-start gap-2 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900 sm:p-5">
+          <CircleCheck
+            size={16}
+            strokeWidth={2}
+            aria-hidden
+            className="mt-0.5 shrink-0 text-emerald-600"
+          />
          <p>
-            ✅ Pembayaran kamu sudah terkonfirmasi. Sampai jumpa di trip
-            bareng{" "}
+            Pembayaran kamu sudah terkonfirmasi. Sampai jumpa di trip bareng{" "}
            <span className="font-semibold">{organizerName}</span>!
          </p>
        </div>
@@ -262,9 +310,10 @@ function PaidTripSection({
      <div className="text-center">
        <Link
          href={`/trips/${tripId}`}
-          className="text-sm text-neutral-500 hover:text-primary-600"
+          className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-primary-600"
        >
-          ← Kembali ke detail trip
+          <ArrowLeft size={14} strokeWidth={1.75} aria-hidden />
+          Kembali ke detail trip
        </Link>
      </div>
    </div>
@@ -298,7 +347,11 @@ function PaymentTimeline({
                  : "bg-neutral-200 text-neutral-500"
              }`}
            >
-              {s.done ? "✓" : i + 1}
+              {s.done ? (
+                <Check size={12} strokeWidth={3} aria-hidden />
+              ) : (
+                i + 1
+              )}
            </span>
            <span
              className={`text-sm ${
@@ -11,6 +11,7 @@ import { siteConfig } from "@/lib/site";
 import { categoryLabel, isActivityCategory } from "@/lib/activity-category";
 import { isVibe } from "@/lib/vibe";
 import type { GroupSize } from "@/server/repositories/trip.repo";
+import { Plus, Search, Tent } from "lucide-react";

 const GROUP_SIZES: GroupSize[] = ["SMALL", "MEDIUM", "LARGE"];
 function isGroupSize(value: unknown): value is GroupSize {
@@ -98,9 +99,10 @@ export default async function TripsPage({ searchParams }: TripsPageProps) {
        </div>
        <Link
          href="/create-trip"
-          className="w-full rounded-xl bg-primary-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700 sm:w-auto"
+          className="inline-flex w-full items-center justify-center gap-1.5 rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700 sm:w-auto"
        >
-          + Buat Trip
+          <Plus size={16} strokeWidth={2} aria-hidden />
+          Buat Trip
        </Link>
      </div>

@@ -113,8 +115,22 @@ export default async function TripsPage({ searchParams }: TripsPageProps) {

      {trips.length === 0 ? (
        <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
-            {hasFilters ? "🔍" : "🏕️"}
+          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 sm:h-16 sm:w-16">
+            {hasFilters ? (
+              <Search
+                size={26}
+                strokeWidth={1.75}
+                aria-hidden
+                className="text-primary-600"
+              />
+            ) : (
+              <Tent
+                size={26}
+                strokeWidth={1.75}
+                aria-hidden
+                className="text-primary-600"
+              />
+            )}
          </div>
          <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
            {hasFilters