add end date and create logo and fix filter

app/trips/[id]/page.tsx

@@ -3,7 +3,7 @@ import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { authOptions } from "@/lib/auth";
 import { tripService } from "@/server/services/trip.service";
-import { formatRupiah, formatDate } from "@/lib/utils";
+import { formatRupiah, formatDateRange } from "@/lib/utils";
 import { JoinTripButton } from "@/features/trip/components/join-trip-button";
 import { ImageGallery } from "@/features/trip/components/image-gallery";
 
@@ -98,7 +98,7 @@ export default async function TripDetailPage({
               <div className="min-w-0">
                 <p className="text-[10px] font-medium text-neutral-400 sm:text-xs">Tanggal</p>
                 <p className="truncate text-xs font-semibold text-neutral-800 sm:text-sm">
-                  {formatDate(trip.date)}
+                  {formatDateRange(trip.date, trip.endDate)}
                 </p>
               </div>
             </div>

app/trips/page.tsx

@@ -1,9 +1,27 @@
 import Link from "next/link";
+import { Suspense } from "react";
 import { tripService } from "@/server/services/trip.service";
 import { TripCard } from "@/features/trip/components/trip-card";
+import { TripFilter } from "@/features/trip/components/trip-filter";
 
-export default async function TripsPage() {
-  const trips = await tripService.getOpenTrips();
+interface TripsPageProps {
+  searchParams: Promise<{ q?: string; from?: string; to?: string }>;
+}
+
+export default async function TripsPage({ searchParams }: TripsPageProps) {
+  const params = await searchParams;
+  const hasFilters = params.q || params.from || params.to;
+  const filters = {
+    q: params.q,
+    from: params.from,
+    to: params.to,
+  };
+
+  const [trips, allTrips] = await Promise.all([
+    tripService.getOpenTrips(filters),
+    hasFilters ? tripService.getOpenTrips() : null,
+  ]);
+  const totalCount = hasFilters ? allTrips!.length : trips.length;
 
   return (
     <div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
@@ -13,7 +31,9 @@ export default async function TripsPage() {
             Open Trip Pendakian
           </h1>
           <p className="mt-0.5 text-sm text-neutral-500">
-            {trips.length} trip tersedia — pilih dan langsung join
+            {hasFilters
+              ? `${trips.length} dari ${totalCount} trip ditemukan`
+              : `${trips.length} trip tersedia — pilih dan langsung join`}
           </p>
         </div>
         <Link
@@ -24,23 +44,36 @@ export default async function TripsPage() {
         </Link>
       </div>
 
+      {/* Filter */}
+      <div className="mb-6">
+        <Suspense fallback={null}>
+          <TripFilter />
+        </Suspense>
+      </div>
+
       {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>
           <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
-            Belum ada trip tersedia
+            {hasFilters
+              ? "Tidak ada trip yang cocok"
+              : "Belum ada trip tersedia"}
           </p>
           <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
-            Jadilah yang pertama membuat open trip pendakian!
+            {hasFilters
+              ? "Coba ubah kata kunci atau rentang tanggal pencarian"
+              : "Jadilah yang pertama membuat open trip pendakian!"}
           </p>
-          <Link
-            href="/create-trip"
-            className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
-          >
-            Buat Trip Baru
-          </Link>
+          {!hasFilters && (
+            <Link
+              href="/create-trip"
+              className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
+            >
+              Buat Trip Baru
+            </Link>
+          )}
         </div>
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -52,6 +85,7 @@ export default async function TripsPage() {
               mountain={trip.mountain}
               location={trip.location}
               date={trip.date}
+              endDate={trip.endDate}
               price={trip.price}
               maxParticipants={trip.maxParticipants}
               participantCount={trip._count.participants}