add end date and create logo and fix filter

app/create-trip/page.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import { createTripAction } from "@/features/trip/actions";
 import { ImageUrlInput } from "@/features/trip/components/image-url-input";
 
@@ -18,12 +20,25 @@ const SAMPLE_MOUNTAINS = [
   { name: "Gunung Guntur", location: "Garut, Jawa Barat" },
 ];
 
+function formatRupiahInput(value: string): string {
+  const num = value.replace(/\D/g, "");
+  return num.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}
+
+function parseRupiahInput(value: string): string {
+  return value.replace(/\./g, "");
+}
+
 export default function CreateTripPage() {
   const { data: session } = useSession();
   const router = useRouter();
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+  const [priceDisplay, setPriceDisplay] = useState("");
+
   if (!session?.user) {
     return (
       <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4">
@@ -48,9 +63,23 @@ export default function CreateTripPage() {
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setError("");
+
+    if (!startDate) {
+      setError("Tanggal berangkat harus diisi");
+      return;
+    }
+
     setLoading(true);
 
     const formData = new FormData(e.currentTarget);
+    // Set date values from DatePicker state
+    formData.set("date", startDate.toISOString().split("T")[0]);
+    if (endDate) {
+      formData.set("endDate", endDate.toISOString().split("T")[0]);
+    }
+    // Set raw price number
+    formData.set("price", parseRupiahInput(priceDisplay));
+
     const result = await createTripAction(formData);
 
     setLoading(false);
@@ -79,6 +108,17 @@ export default function CreateTripPage() {
     }
   }
 
+  function handleDateChange(dates: [Date | null, Date | null]) {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  }
+
+  function handlePriceChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value.replace(/\D/g, "");
+    setPriceDisplay(raw ? formatRupiahInput(raw) : "");
+  }
+
   return (
     <div className="mx-auto max-w-2xl px-4 py-6 sm:py-8">
       <div className="mb-4 sm:mb-6">
@@ -175,46 +215,92 @@ export default function CreateTripPage() {
 
           <ImageUrlInput />
 
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4">
+          {/* Date Range & Participants & Price */}
+          <div className="grid gap-4 sm:grid-cols-2">
+            {/* Date Range Picker */}
             <div>
-              <label htmlFor="date" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+              <label className="mb-1.5 block text-sm font-semibold text-neutral-700">
-                Tanggal
+                Tanggal Berangkat — Pulang
               </label>
-              <input
+              <div className="relative">
-                id="date"
+                <span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
-                name="date"
+                  <svg
-                type="date"
+                    xmlns="http://www.w3.org/2000/svg"
-                required
+                    viewBox="0 0 20 20"
-                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 focus:bg-white"
+                    fill="currentColor"
-              />
+                    className="h-4 w-4"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </span>
+                <DatePicker
+                  selectsRange
+                  startDate={startDate}
+                  endDate={endDate}
+                  onChange={handleDateChange}
+                  minDate={new Date()}
+                  placeholderText="Pilih tanggal..."
+                  dateFormat="dd MMM yyyy"
+                  isClearable
+                  className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
+                />
+              </div>
             </div>
+
+            {/* Max Participants */}
             <div>
               <label htmlFor="maxParticipants" className="mb-1.5 block text-sm font-semibold text-neutral-700">
                 Maks Peserta
               </label>
-              <input
+              <div className="relative">
-                id="maxParticipants"
+                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
-                name="maxParticipants"
+                  <svg
-                type="number"
+                    xmlns="http://www.w3.org/2000/svg"
-                required
+                    viewBox="0 0 20 20"
-                min={1}
+                    fill="currentColor"
-                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
+                    className="h-4 w-4"
-                placeholder="10"
+                  >
-              />
+                    <path d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z" />
+                  </svg>
+                </span>
+                <input
+                  id="maxParticipants"
+                  name="maxParticipants"
+                  type="number"
+                  required
+                  min={1}
+                  className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
+                  placeholder="10"
+                />
+              </div>
             </div>
-            <div>
+          </div>
-              <label htmlFor="price" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+
-                Harga (Rp)
+          {/* Price with Rp format */}
-              </label>
+          <div>
+            <label htmlFor="priceDisplay" className="mb-1.5 block text-sm font-semibold text-neutral-700">
+              Harga per Orang
+            </label>
+            <div className="relative">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-neutral-500">
+                Rp
+              </span>
               <input
-                id="price"
+                id="priceDisplay"
-                name="price"
+                type="text"
-                type="number"
+                inputMode="numeric"
                 required
-                min={0}
+                value={priceDisplay}
-                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
+                onChange={handlePriceChange}
-                placeholder="150000"
+                className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-10 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
+                placeholder="150.000"
               />
+              {/* Hidden input for form submission */}
+              <input type="hidden" name="price" value={parseRupiahInput(priceDisplay)} />
             </div>
           </div>
 

app/generated/prisma/commonInputTypes.ts

@@ -110,6 +110,17 @@ export type DateTimeWithAggregatesFilter<$PrismaModel = never> = {
   _max?: Prisma.NestedDateTimeFilter<$PrismaModel>
 }
 
+export type DateTimeNullableFilter<$PrismaModel = never> = {
+  equals?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel> | null
+  in?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  notIn?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  lt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  lte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  not?: Prisma.NestedDateTimeNullableFilter<$PrismaModel> | Date | string | null
+}
+
 export type IntFilter<$PrismaModel = never> = {
   equals?: number | Prisma.IntFieldRefInput<$PrismaModel>
   in?: number[] | Prisma.ListIntFieldRefInput<$PrismaModel>
@@ -128,6 +139,20 @@ export type EnumTripStatusFilter<$PrismaModel = never> = {
   not?: Prisma.NestedEnumTripStatusFilter<$PrismaModel> | $Enums.TripStatus
 }
 
+export type DateTimeNullableWithAggregatesFilter<$PrismaModel = never> = {
+  equals?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel> | null
+  in?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  notIn?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  lt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  lte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  not?: Prisma.NestedDateTimeNullableWithAggregatesFilter<$PrismaModel> | Date | string | null
+  _count?: Prisma.NestedIntNullableFilter<$PrismaModel>
+  _min?: Prisma.NestedDateTimeNullableFilter<$PrismaModel>
+  _max?: Prisma.NestedDateTimeNullableFilter<$PrismaModel>
+}
+
 export type IntWithAggregatesFilter<$PrismaModel = never> = {
   equals?: number | Prisma.IntFieldRefInput<$PrismaModel>
   in?: number[] | Prisma.ListIntFieldRefInput<$PrismaModel>
@@ -280,6 +305,17 @@ export type NestedDateTimeWithAggregatesFilter<$PrismaModel = never> = {
   _max?: Prisma.NestedDateTimeFilter<$PrismaModel>
 }
 
+export type NestedDateTimeNullableFilter<$PrismaModel = never> = {
+  equals?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel> | null
+  in?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  notIn?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  lt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  lte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  not?: Prisma.NestedDateTimeNullableFilter<$PrismaModel> | Date | string | null
+}
+
 export type NestedEnumTripStatusFilter<$PrismaModel = never> = {
   equals?: $Enums.TripStatus | Prisma.EnumTripStatusFieldRefInput<$PrismaModel>
   in?: $Enums.TripStatus[] | Prisma.ListEnumTripStatusFieldRefInput<$PrismaModel>
@@ -287,6 +323,20 @@ export type NestedEnumTripStatusFilter<$PrismaModel = never> = {
   not?: Prisma.NestedEnumTripStatusFilter<$PrismaModel> | $Enums.TripStatus
 }
 
+export type NestedDateTimeNullableWithAggregatesFilter<$PrismaModel = never> = {
+  equals?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel> | null
+  in?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  notIn?: Date[] | string[] | Prisma.ListDateTimeFieldRefInput<$PrismaModel> | null
+  lt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  lte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gt?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  gte?: Date | string | Prisma.DateTimeFieldRefInput<$PrismaModel>
+  not?: Prisma.NestedDateTimeNullableWithAggregatesFilter<$PrismaModel> | Date | string | null
+  _count?: Prisma.NestedIntNullableFilter<$PrismaModel>
+  _min?: Prisma.NestedDateTimeNullableFilter<$PrismaModel>
+  _max?: Prisma.NestedDateTimeNullableFilter<$PrismaModel>
+}
+
 export type NestedIntWithAggregatesFilter<$PrismaModel = never> = {
   equals?: number | Prisma.IntFieldRefInput<$PrismaModel>
   in?: number[] | Prisma.ListIntFieldRefInput<$PrismaModel>

app/generated/prisma/internal/prismaNamespace.ts

@@ -762,6 +762,7 @@ export const TripScalarFieldEnum = {
   mountain: 'mountain',
   location: 'location',
   date: 'date',
+  endDate: 'endDate',
   maxParticipants: 'maxParticipants',
   price: 'price',
   status: 'status',

app/generated/prisma/internal/prismaNamespaceBrowser.ts

@@ -93,6 +93,7 @@ export const TripScalarFieldEnum = {
   mountain: 'mountain',
   location: 'location',
   date: 'date',
+  endDate: 'endDate',
   maxParticipants: 'maxParticipants',
   price: 'price',
   status: 'status',

app/generated/prisma/models/Trip.ts

@@ -43,6 +43,7 @@ export type TripMinAggregateOutputType = {
   mountain: string | null
   location: string | null
   date: Date | null
+  endDate: Date | null
   maxParticipants: number | null
   price: number | null
   status: $Enums.TripStatus | null
@@ -58,6 +59,7 @@ export type TripMaxAggregateOutputType = {
   mountain: string | null
   location: string | null
   date: Date | null
+  endDate: Date | null
   maxParticipants: number | null
   price: number | null
   status: $Enums.TripStatus | null
@@ -73,6 +75,7 @@ export type TripCountAggregateOutputType = {
   mountain: number
   location: number
   date: number
+  endDate: number
   maxParticipants: number
   price: number
   status: number
@@ -100,6 +103,7 @@ export type TripMinAggregateInputType = {
   mountain?: true
   location?: true
   date?: true
+  endDate?: true
   maxParticipants?: true
   price?: true
   status?: true
@@ -115,6 +119,7 @@ export type TripMaxAggregateInputType = {
   mountain?: true
   location?: true
   date?: true
+  endDate?: true
   maxParticipants?: true
   price?: true
   status?: true
@@ -130,6 +135,7 @@ export type TripCountAggregateInputType = {
   mountain?: true
   location?: true
   date?: true
+  endDate?: true
   maxParticipants?: true
   price?: true
   status?: true
@@ -232,6 +238,7 @@ export type TripGroupByOutputType = {
   mountain: string
   location: string
   date: Date
+  endDate: Date | null
   maxParticipants: number
   price: number
   status: $Enums.TripStatus
@@ -270,6 +277,7 @@ export type TripWhereInput = {
   mountain?: Prisma.StringFilter<"Trip"> | string
   location?: Prisma.StringFilter<"Trip"> | string
   date?: Prisma.DateTimeFilter<"Trip"> | Date | string
+  endDate?: Prisma.DateTimeNullableFilter<"Trip"> | Date | string | null
   maxParticipants?: Prisma.IntFilter<"Trip"> | number
   price?: Prisma.IntFilter<"Trip"> | number
   status?: Prisma.EnumTripStatusFilter<"Trip"> | $Enums.TripStatus
@@ -288,6 +296,7 @@ export type TripOrderByWithRelationInput = {
   mountain?: Prisma.SortOrder
   location?: Prisma.SortOrder
   date?: Prisma.SortOrder
+  endDate?: Prisma.SortOrderInput | Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
   status?: Prisma.SortOrder
@@ -309,6 +318,7 @@ export type TripWhereUniqueInput = Prisma.AtLeast<{
   mountain?: Prisma.StringFilter<"Trip"> | string
   location?: Prisma.StringFilter<"Trip"> | string
   date?: Prisma.DateTimeFilter<"Trip"> | Date | string
+  endDate?: Prisma.DateTimeNullableFilter<"Trip"> | Date | string | null
   maxParticipants?: Prisma.IntFilter<"Trip"> | number
   price?: Prisma.IntFilter<"Trip"> | number
   status?: Prisma.EnumTripStatusFilter<"Trip"> | $Enums.TripStatus
@@ -327,6 +337,7 @@ export type TripOrderByWithAggregationInput = {
   mountain?: Prisma.SortOrder
   location?: Prisma.SortOrder
   date?: Prisma.SortOrder
+  endDate?: Prisma.SortOrderInput | Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
   status?: Prisma.SortOrder
@@ -350,6 +361,7 @@ export type TripScalarWhereWithAggregatesInput = {
   mountain?: Prisma.StringWithAggregatesFilter<"Trip"> | string
   location?: Prisma.StringWithAggregatesFilter<"Trip"> | string
   date?: Prisma.DateTimeWithAggregatesFilter<"Trip"> | Date | string
+  endDate?: Prisma.DateTimeNullableWithAggregatesFilter<"Trip"> | Date | string | null
   maxParticipants?: Prisma.IntWithAggregatesFilter<"Trip"> | number
   price?: Prisma.IntWithAggregatesFilter<"Trip"> | number
   status?: Prisma.EnumTripStatusWithAggregatesFilter<"Trip"> | $Enums.TripStatus
@@ -365,6 +377,7 @@ export type TripCreateInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -382,6 +395,7 @@ export type TripUncheckedCreateInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -399,6 +413,7 @@ export type TripUpdateInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -416,6 +431,7 @@ export type TripUncheckedUpdateInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -433,6 +449,7 @@ export type TripCreateManyInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -448,6 +465,7 @@ export type TripUpdateManyMutationInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -462,6 +480,7 @@ export type TripUncheckedUpdateManyInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -487,6 +506,7 @@ export type TripCountOrderByAggregateInput = {
   mountain?: Prisma.SortOrder
   location?: Prisma.SortOrder
   date?: Prisma.SortOrder
+  endDate?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
   status?: Prisma.SortOrder
@@ -507,6 +527,7 @@ export type TripMaxOrderByAggregateInput = {
   mountain?: Prisma.SortOrder
   location?: Prisma.SortOrder
   date?: Prisma.SortOrder
+  endDate?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
   status?: Prisma.SortOrder
@@ -522,6 +543,7 @@ export type TripMinOrderByAggregateInput = {
   mountain?: Prisma.SortOrder
   location?: Prisma.SortOrder
   date?: Prisma.SortOrder
+  endDate?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
   status?: Prisma.SortOrder
@@ -582,6 +604,10 @@ export type TripUncheckedUpdateManyWithoutOrganizerNestedInput = {
   deleteMany?: Prisma.TripScalarWhereInput | Prisma.TripScalarWhereInput[]
 }
 
+export type NullableDateTimeFieldUpdateOperationsInput = {
+  set?: Date | string | null
+}
+
 export type IntFieldUpdateOperationsInput = {
   set?: number
   increment?: number
@@ -629,6 +655,7 @@ export type TripCreateWithoutOrganizerInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -645,6 +672,7 @@ export type TripUncheckedCreateWithoutOrganizerInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -690,6 +718,7 @@ export type TripScalarWhereInput = {
   mountain?: Prisma.StringFilter<"Trip"> | string
   location?: Prisma.StringFilter<"Trip"> | string
   date?: Prisma.DateTimeFilter<"Trip"> | Date | string
+  endDate?: Prisma.DateTimeNullableFilter<"Trip"> | Date | string | null
   maxParticipants?: Prisma.IntFilter<"Trip"> | number
   price?: Prisma.IntFilter<"Trip"> | number
   status?: Prisma.EnumTripStatusFilter<"Trip"> | $Enums.TripStatus
@@ -705,6 +734,7 @@ export type TripCreateWithoutImagesInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -721,6 +751,7 @@ export type TripUncheckedCreateWithoutImagesInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -753,6 +784,7 @@ export type TripUpdateWithoutImagesInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -769,6 +801,7 @@ export type TripUncheckedUpdateWithoutImagesInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -785,6 +818,7 @@ export type TripCreateWithoutParticipantsInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -801,6 +835,7 @@ export type TripUncheckedCreateWithoutParticipantsInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -833,6 +868,7 @@ export type TripUpdateWithoutParticipantsInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -849,6 +885,7 @@ export type TripUncheckedUpdateWithoutParticipantsInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -865,6 +902,7 @@ export type TripCreateManyOrganizerInput = {
   mountain: string
   location: string
   date: Date | string
+  endDate?: Date | string | null
   maxParticipants: number
   price: number
   status?: $Enums.TripStatus
@@ -879,6 +917,7 @@ export type TripUpdateWithoutOrganizerInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -895,6 +934,7 @@ export type TripUncheckedUpdateWithoutOrganizerInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -911,6 +951,7 @@ export type TripUncheckedUpdateManyWithoutOrganizerInput = {
   mountain?: Prisma.StringFieldUpdateOperationsInput | string
   location?: Prisma.StringFieldUpdateOperationsInput | string
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  endDate?: Prisma.NullableDateTimeFieldUpdateOperationsInput | Date | string | null
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
@@ -965,6 +1006,7 @@ export type TripSelect<ExtArgs extends runtime.Types.Extensions.InternalArgs = r
   mountain?: boolean
   location?: boolean
   date?: boolean
+  endDate?: boolean
   maxParticipants?: boolean
   price?: boolean
   status?: boolean
@@ -984,6 +1026,7 @@ export type TripSelectCreateManyAndReturn<ExtArgs extends runtime.Types.Extensio
   mountain?: boolean
   location?: boolean
   date?: boolean
+  endDate?: boolean
   maxParticipants?: boolean
   price?: boolean
   status?: boolean
@@ -1000,6 +1043,7 @@ export type TripSelectUpdateManyAndReturn<ExtArgs extends runtime.Types.Extensio
   mountain?: boolean
   location?: boolean
   date?: boolean
+  endDate?: boolean
   maxParticipants?: boolean
   price?: boolean
   status?: boolean
@@ -1016,6 +1060,7 @@ export type TripSelectScalar = {
   mountain?: boolean
   location?: boolean
   date?: boolean
+  endDate?: boolean
   maxParticipants?: boolean
   price?: boolean
   status?: boolean
@@ -1024,7 +1069,7 @@ export type TripSelectScalar = {
   organizerId?: boolean
 }
 
-export type TripOmit<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetOmit<"id" | "title" | "description" | "mountain" | "location" | "date" | "maxParticipants" | "price" | "status" | "createdAt" | "updatedAt" | "organizerId", ExtArgs["result"]["trip"]>
+export type TripOmit<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetOmit<"id" | "title" | "description" | "mountain" | "location" | "date" | "endDate" | "maxParticipants" | "price" | "status" | "createdAt" | "updatedAt" | "organizerId", ExtArgs["result"]["trip"]>
 export type TripInclude<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
   organizer?: boolean | Prisma.UserDefaultArgs<ExtArgs>
   participants?: boolean | Prisma.Trip$participantsArgs<ExtArgs>
@@ -1052,6 +1097,7 @@ export type $TripPayload<ExtArgs extends runtime.Types.Extensions.InternalArgs =
     mountain: string
     location: string
     date: Date
+    endDate: Date | null
     maxParticipants: number
     price: number
     status: $Enums.TripStatus
@@ -1490,6 +1536,7 @@ export interface TripFieldRefs {
   readonly mountain: Prisma.FieldRef<"Trip", 'String'>
   readonly location: Prisma.FieldRef<"Trip", 'String'>
   readonly date: Prisma.FieldRef<"Trip", 'DateTime'>
+  readonly endDate: Prisma.FieldRef<"Trip", 'DateTime'>
   readonly maxParticipants: Prisma.FieldRef<"Trip", 'Int'>
   readonly price: Prisma.FieldRef<"Trip", 'Int'>
   readonly status: Prisma.FieldRef<"Trip", 'TripStatus'>

app/globals.css

@@ -55,3 +55,80 @@ select:focus {
   border-color: #16a34a;
   box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
 }
+
+/* react-datepicker theme overrides */
+.react-datepicker {
+  font-family: inherit !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 1rem !important;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
+}
+
+.react-datepicker__header {
+  background: #f9fafb !important;
+  border-bottom: 1px solid #e5e7eb !important;
+  border-radius: 1rem 1rem 0 0 !important;
+  padding-top: 12px !important;
+}
+
+.react-datepicker__current-month {
+  font-weight: 700 !important;
+  color: #1f2937 !important;
+  font-size: 0.875rem !important;
+}
+
+.react-datepicker__day-name {
+  color: #6b7280 !important;
+  font-weight: 500 !important;
+  font-size: 0.75rem !important;
+}
+
+.react-datepicker__day {
+  border-radius: 0.5rem !important;
+  font-size: 0.8125rem !important;
+  color: #1f2937 !important;
+}
+
+.react-datepicker__day:hover {
+  background: #dcfce7 !important;
+  color: #15803d !important;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--range-start,
+.react-datepicker__day--range-end {
+  background: #16a34a !important;
+  color: #fff !important;
+}
+
+.react-datepicker__day--in-range,
+.react-datepicker__day--in-selecting-range {
+  background: #dcfce7 !important;
+  color: #166534 !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background: #bbf7d0 !important;
+  color: #166534 !important;
+}
+
+.react-datepicker__day--disabled {
+  color: #d1d5db !important;
+}
+
+.react-datepicker__navigation-icon::before {
+  border-color: #6b7280 !important;
+}
+
+.react-datepicker__navigation:hover *::before {
+  border-color: #16a34a !important;
+}
+
+.react-datepicker__close-icon::after {
+  background-color: #9ca3af !important;
+  font-size: 14px !important;
+}
+
+.react-datepicker__close-icon:hover::after {
+  background-color: #16a34a !important;
+}

app/layout.tsx

@@ -18,6 +18,10 @@ export const metadata: Metadata = {
   title: "SeTrip",
   description:
     "Cari open trip pendakian gunung, gabung bareng, nikmati petualangan ke gunung-gunung Jawa Barat.",
+  icons: {
+    icon: "/SeTrip.ico",
+    apple: "/images/SeTrip.png",
+  },
 };
 
 export default function RootLayout({

app/login/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import Image from "next/image";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -36,20 +37,40 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-8 sm:py-12">
+    <div className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-8 sm:py-12">
-      <div className="w-full max-w-sm">
+      {/* Background image */}
+      <Image
+        src="/images/seed/gunung-login.jpg"
+        alt=""
+        fill
+        className="object-cover"
+        priority
+      />
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-neutral-900/60 backdrop-blur-[2px]" />
+
+      <div className="relative z-10 w-full max-w-sm">
         {/* Header */}
         <div className="mb-6 text-center sm:mb-8">
-          <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
+          <Link href="/" className="mb-3 inline-flex items-center gap-2">
-            Se<span className="text-primary-600">Trip</span>
+            <Image
+              src="/images/SeTrip.png"
+              alt="SeTrip"
+              width={40}
+              height={40}
+              className="h-10 w-10 object-contain"
+            />
+            <span className="text-2xl font-bold text-white">
+              Se<span className="text-primary-400">Trip</span>
+            </span>
           </Link>
-          <p className="text-sm text-neutral-500">
+          <p className="text-sm text-neutral-300">
             Login dan mulai petualangan ke gunung
           </p>
         </div>
 
         {/* Card */}
-        <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <div className="rounded-2xl border border-white/10 bg-white/95 p-6 shadow-2xl backdrop-blur-sm">
           {error && (
             <div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
               {error}
@@ -95,9 +116,9 @@ export default function LoginPage() {
           </form>
         </div>
 
-        <p className="mt-5 text-center text-sm text-neutral-500">
+        <p className="mt-5 text-center text-sm text-neutral-300">
           Belum punya akun?{" "}
-          <Link href="/register" className="font-semibold text-primary-600 hover:text-primary-700">
+          <Link href="/register" className="font-semibold text-primary-400 hover:text-primary-300">
             Daftar sekarang
           </Link>
         </p>

app/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
+import Image from "next/image";
 import { tripService } from "@/server/services/trip.service";
 import { TripCard } from "@/features/trip/components/trip-card";
-import { SearchBar } from "@/features/trip/components/search-bar";
 
 export default async function HomePage() {
   const trips = await tripService.getOpenTrips();
@@ -9,15 +9,35 @@ export default async function HomePage() {
   const now = new Date();
   const nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
 
-  const upcomingTrips = trips.filter((t) => new Date(t.date) <= nextWeek);
+  const upcomingTrips = trips
-  const budgetTrips = trips.filter((t) => t.price <= 300000).slice(0, 3);
+    .filter((t) => new Date(t.date) <= nextWeek)
-  const latestTrips = trips.slice(0, 6);
+    .slice(0, 3);
+
+  const upcomingIds = new Set(upcomingTrips.map((t) => t.id));
+
+  const latestTrips = trips
+    .filter((t) => !upcomingIds.has(t.id))
+    .slice(0, 6);
+
+  const shownIds = new Set([...upcomingIds, ...latestTrips.map((t) => t.id)]);
+
+  const budgetTrips = trips
+    .filter((t) => !shownIds.has(t.id) && t.price <= 300000)
+    .slice(0, 3);
 
   return (
     <div className="relative min-h-screen bg-neutral-50">
       {/* ========== HERO ========== */}
       <section className="relative overflow-hidden bg-neutral-900">
-        <div className="absolute inset-0 bg-linear-to-br from-primary-900/90 via-neutral-900/80 to-secondary-900/70" />
+        {/* Logo background full */}
+        <Image
+          src="/images/SeTrip.png"
+          alt=""
+          fill
+          className="object-cover opacity-10 brightness-150"
+          priority
+        />
+        <div className="absolute inset-0 bg-linear-to-br from-primary-900/85 via-neutral-900/75 to-secondary-900/80" />
 
         <div className="relative mx-auto max-w-4xl px-4 pb-10 pt-8 text-center sm:pb-14 sm:pt-12 lg:pb-16 lg:pt-14">
           {/* Brand badge */}
@@ -41,7 +61,12 @@ export default async function HomePage() {
             petualangan ke gunung-gunung Jawa Barat.
           </p>
 
-          <SearchBar />
+          <Link
+            href="/trips"
+            className="inline-block rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 transition-all hover:bg-primary-500 hover:scale-105 active:scale-95 sm:px-8 sm:py-3 sm:text-base"
+          >
+            Cari Trip Sekarang
+          </Link>
 
           {/* Stats */}
           <div className="mt-8 flex justify-center gap-6 sm:mt-10 sm:gap-10 lg:gap-12">
@@ -92,6 +117,7 @@ export default async function HomePage() {
                   mountain={trip.mountain}
                   location={trip.location}
                   date={trip.date}
+                  endDate={trip.endDate}
                   price={trip.price}
                   maxParticipants={trip.maxParticipants}
                   participantCount={trip._count.participants}
@@ -157,6 +183,7 @@ export default async function HomePage() {
                   mountain={trip.mountain}
                   location={trip.location}
                   date={trip.date}
+                  endDate={trip.endDate}
                   price={trip.price}
                   maxParticipants={trip.maxParticipants}
                   participantCount={trip._count.participants}
@@ -194,6 +221,7 @@ export default async function HomePage() {
                   mountain={trip.mountain}
                   location={trip.location}
                   date={trip.date}
+                  endDate={trip.endDate}
                   price={trip.price}
                   maxParticipants={trip.maxParticipants}
                   participantCount={trip._count.participants}

app/register/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
+import Image from "next/image";
 import { registerAction } from "@/features/auth/actions";
 
 export default function RegisterPage() {
@@ -42,20 +43,40 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="flex min-h-[calc(100vh-3.5rem)] items-center justify-center px-4 py-8 sm:py-12">
+    <div className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-8 sm:py-12">
-      <div className="w-full max-w-sm">
+      {/* Background image */}
+      <Image
+        src="/images/seed/gunung-register.jpg"
+        alt=""
+        fill
+        className="object-cover"
+        priority
+      />
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-neutral-900/60 backdrop-blur-[2px]" />
+
+      <div className="relative z-10 w-full max-w-sm">
         {/* Header */}
         <div className="mb-6 text-center sm:mb-8">
-          <Link href="/" className="mb-4 inline-block text-2xl font-bold text-neutral-800">
+          <Link href="/" className="mb-3 inline-flex items-center gap-2">
-            Se<span className="text-primary-600">Trip</span>
+            <Image
+              src="/images/SeTrip.png"
+              alt="SeTrip"
+              width={40}
+              height={40}
+              className="h-10 w-10 object-contain"
+            />
+            <span className="text-2xl font-bold text-white">
+              Se<span className="text-primary-400">Trip</span>
+            </span>
           </Link>
-          <p className="text-sm text-neutral-500">
+          <p className="text-sm text-neutral-300">
             Daftar dan mulai cari trip pendakian
           </p>
         </div>
 
         {/* Card */}
-        <div className="rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <div className="rounded-2xl border border-white/10 bg-white/95 p-6 shadow-2xl backdrop-blur-sm">
           {error && (
             <div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
               {error}
@@ -129,9 +150,9 @@ export default function RegisterPage() {
           </form>
         </div>
 
-        <p className="mt-5 text-center text-sm text-neutral-500">
+        <p className="mt-5 text-center text-sm text-neutral-300">
           Sudah punya akun?{" "}
-          <Link href="/login" className="font-semibold text-primary-600 hover:text-primary-700">
+          <Link href="/login" className="font-semibold text-primary-400 hover:text-primary-300">
             Login
           </Link>
         </p>

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() {
+interface TripsPageProps {
-  const trips = await tripService.getOpenTrips();
+  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
+          {!hasFilters && (
-            href="/create-trip"
+            <Link
-            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"
+              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>
+              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}

components/shared/navbar.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { useSession, signOut } from "next-auth/react";
 
 export function Navbar() {
@@ -10,12 +11,17 @@ export function Navbar() {
 
   return (
     <nav className="sticky top-0 z-40 border-b border-neutral-200 bg-white/90 backdrop-blur-md">
-      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
         {/* Logo */}
-        <Link href="/" className="flex items-center gap-1.5">
+        <Link href="/" className="flex items-center gap-2">
-          <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white">
+          <Image
-            S
+            src="/images/SeTrip.png"
-          </span>
+            alt="SeTrip"
+            width={44}
+            height={44}
+            className="h-11 w-11 object-contain"
+            priority
+          />
           <span className="text-lg font-bold text-neutral-800">
             Se<span className="text-primary-600">Trip</span>
           </span>

features/trip/actions.ts

@@ -18,6 +18,7 @@ export async function createTripAction(formData: FormData) {
     mountain: formData.get("mountain") as string,
     location: formData.get("location") as string,
     date: formData.get("date") as string,
+    endDate: (formData.get("endDate") as string) || undefined,
     maxParticipants: formData.get("maxParticipants") as string,
     price: formData.get("price") as string,
   };
@@ -37,6 +38,7 @@ export async function createTripAction(formData: FormData) {
     const trip = await tripService.createTrip({
       ...result.data,
       date: new Date(result.data.date),
+      endDate: result.data.endDate ? new Date(result.data.endDate) : undefined,
       organizerId: session.user.id,
       imageUrls: imageUrls.length > 0 ? imageUrls : undefined,
     });

features/trip/components/trip-card.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { formatRupiah, formatDate } from "@/lib/utils";
+import { formatRupiah, formatDateRange } from "@/lib/utils";
 
 interface TripCardProps {
   id: string;
@@ -8,6 +8,7 @@ interface TripCardProps {
   mountain: string;
   location: string;
   date: Date | string;
+  endDate?: Date | string | null;
   price: number;
   maxParticipants: number;
   participantCount: number;
@@ -23,6 +24,7 @@ export function TripCard({
   mountain,
   location,
   date,
+  endDate,
   price,
   maxParticipants,
   participantCount,
@@ -78,7 +80,7 @@ export function TripCard({
             </div>
             <div className="flex items-center gap-1.5">
               <span className="text-xs text-secondary-500">📅</span>{" "}
-              {formatDate(date)}
+              {formatDateRange(date, endDate)}
             </div>
             <div className="flex items-center gap-1.5">
               <span className="text-xs text-secondary-500">👤</span>{" "}

features/trip/components/trip-filter.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+export function TripFilter() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [query, setQuery] = useState(searchParams.get("q") ?? "");
+  const [startDate, setStartDate] = useState<Date | null>(
+    searchParams.get("from") ? new Date(searchParams.get("from")!) : null
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    searchParams.get("to") ? new Date(searchParams.get("to")!) : null
+  );
+
+  function handleDateChange(dates: [Date | null, Date | null]) {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+
+    // When both dates are cleared (via X button), auto-submit to reset results
+    if (!start && !end) {
+      const params = new URLSearchParams();
+      if (query.trim()) params.set("q", query.trim());
+      const qs = params.toString();
+      router.push(`/trips${qs ? `?${qs}` : ""}`);
+    }
+  }
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    const params = new URLSearchParams();
+    if (query.trim()) params.set("q", query.trim());
+    if (startDate) params.set("from", startDate.toISOString().split("T")[0]);
+    if (endDate) params.set("to", endDate.toISOString().split("T")[0]);
+
+    const qs = params.toString();
+    router.push(`/trips${qs ? `?${qs}` : ""}`);
+  }
+
+  function handleReset() {
+    setQuery("");
+    setStartDate(null);
+    setEndDate(null);
+    router.push("/trips");
+  }
+
+  const hasFilters = query || startDate || endDate;
+
+  return (
+    <form
+      onSubmit={handleSearch}
+      className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5"
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:gap-3">
+        {/* Search input */}
+        <div className="flex-1">
+          <label className="mb-1.5 block text-xs font-medium text-neutral-500">
+            Cari trip
+          </label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                className="h-4 w-4"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </span>
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Gunung, lokasi, atau nama trip..."
+              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
+            />
+          </div>
+        </div>
+
+        {/* Date range */}
+        <div className="sm:w-64">
+          <label className="mb-1.5 block text-xs font-medium text-neutral-500">
+            Rentang tanggal berangkat
+          </label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                className="h-4 w-4"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </span>
+            <DatePicker
+              selectsRange
+              startDate={startDate}
+              endDate={endDate}
+              onChange={handleDateChange}
+              minDate={new Date()}
+              placeholderText="Pilih tanggal..."
+              dateFormat="dd MMM yyyy"
+              isClearable
+              className="w-full rounded-xl border border-neutral-200 bg-neutral-50 py-2.5 pl-9 pr-3 text-sm text-neutral-800 placeholder:text-neutral-400 focus:border-primary-500 focus:bg-white"
+            />
+          </div>
+        </div>
+
+        {/* Buttons */}
+        <div className="flex gap-2 sm:shrink-0">
+          <button
+            type="submit"
+            className="flex-1 rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-primary-600/20 transition-colors hover:bg-primary-700 sm:flex-none"
+          >
+            Cari
+          </button>
+          {hasFilters && (
+            <button
+              type="button"
+              onClick={handleReset}
+              className="rounded-xl border border-neutral-200 px-3 py-2.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-700"
+            >
+              Reset
+            </button>
+          )}
+        </div>
+      </div>
+    </form>
+  );
+}

features/trip/schemas.ts

@@ -5,7 +5,11 @@ export const createTripSchema = z.object({
   description: z.string().optional(),
   mountain: z.string().min(2, "Nama gunung harus diisi"),
   location: z.string().min(2, "Lokasi harus diisi"),
-  date: z.string().refine((val) => !isNaN(Date.parse(val)), "Tanggal tidak valid"),
+  date: z.string().refine((val) => !isNaN(Date.parse(val)), "Tanggal berangkat tidak valid"),
+  endDate: z
+    .string()
+    .optional()
+    .refine((val) => !val || !isNaN(Date.parse(val)), "Tanggal pulang tidak valid"),
   maxParticipants: z.coerce.number().min(1, "Minimal 1 peserta"),
   price: z.coerce.number().min(0, "Harga tidak valid"),
 });

lib/utils.ts

@@ -17,3 +17,13 @@ export function formatDate(date: Date | string): string {
     dateStyle: "long",
   }).format(new Date(date));
 }
+
+export function formatDateRange(
+  start: Date | string,
+  end?: Date | string | null
+): string {
+  const startStr = formatDate(start);
+  if (!end) return startStr;
+  const endStr = formatDate(end);
+  return `${startStr} — ${endStr}`;
+}

package-lock.json

@@ -19,6 +19,7 @@
         "pg": "^8.20.0",
         "prisma": "^7.7.0",
         "react": "19.2.4",
+        "react-datepicker": "^9.1.0",
         "react-dom": "19.2.4",
         "zod": "^4.3.6"
       },
@@ -944,6 +945,59 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.19",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.19.tgz",
+      "integrity": "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.8",
+        "@floating-ui/utils": "^0.2.11",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.11",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.11.tgz",
@@ -3864,6 +3918,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.20",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
@@ -7368,6 +7432,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-9.1.0.tgz",
+      "integrity": "sha512-lOp+m5bc+ttgtB5MHEjwiVu4nlp4CvJLS/PG1OiOe5pmg9kV73pEqO8H0Geqvg2E8gjqTaL9eRhSe+ZpeKP3nA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.15",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0"
+      },
+      "peerDependencies": {
+        "date-fns-tz": "^3.0.0",
+        "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "date-fns-tz": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
@@ -8087,6 +8172,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "pg": "^8.20.0",
     "prisma": "^7.7.0",
     "react": "19.2.4",
+    "react-datepicker": "^9.1.0",
     "react-dom": "19.2.4",
     "zod": "^4.3.6"
   },

prisma/migrations/20260416165210_add_end_date/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Trip" ADD COLUMN     "endDate" TIMESTAMP(3);

prisma/schema.prisma

@@ -27,6 +27,7 @@ model Trip {
   mountain        String
   location        String
   date            DateTime
+  endDate         DateTime?
   maxParticipants Int
   price           Int
   status          TripStatus @default(OPEN)

server/repositories/trip.repo.ts

@@ -13,9 +13,34 @@ export const tripRepo = {
     });
   },
 
-  async findOpen() {
+  async findOpen(filters?: { q?: string; from?: string; to?: string }) {
+    const where: Prisma.TripWhereInput = {
+      status: "OPEN",
+      date: { gte: new Date() },
+    };
+
+    if (filters?.q) {
+      where.OR = [
+        { title: { contains: filters.q, mode: "insensitive" } },
+        { mountain: { contains: filters.q, mode: "insensitive" } },
+        { location: { contains: filters.q, mode: "insensitive" } },
+      ];
+    }
+
+    if (filters?.from || filters?.to) {
+      const dateFilter: Prisma.DateTimeFilter = { gte: new Date() };
+      if (filters.from) {
+        const fromDate = new Date(filters.from);
+        if (fromDate > new Date()) dateFilter.gte = fromDate;
+      }
+      if (filters.to) {
+        dateFilter.lte = new Date(filters.to + "T23:59:59.999Z");
+      }
+      where.date = dateFilter;
+    }
+
     return prisma.trip.findMany({
-      where: { status: "OPEN", date: { gte: new Date() } },
+      where,
       include: {
         organizer: { select: { id: true, name: true, image: true } },
         images: { orderBy: { order: "asc" }, take: 1 },

server/services/trip.service.ts

@@ -7,6 +7,7 @@ interface CreateTripInput {
   mountain: string;
   location: string;
   date: Date;
+  endDate?: Date;
   maxParticipants: number;
   price: number;
   organizerId: string;
@@ -14,8 +15,8 @@ interface CreateTripInput {
 }
 
 export const tripService = {
-  async getOpenTrips() {
+  async getOpenTrips(filters?: { q?: string; from?: string; to?: string }) {
-    return tripRepo.findOpen();
+    return tripRepo.findOpen(filters);
   },
 
   async getAllTrips() {
@@ -43,6 +44,7 @@ export const tripService = {
       mountain: input.mountain,
       location: input.location,
       date: input.date,
+      endDate: input.endDate,
       maxParticipants: input.maxParticipants,
       price: input.price,
       organizer: { connect: { id: input.organizerId } },