add trip image

app/create-trip/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { createTripAction } from "@/features/trip/actions";
+import { ImageUrlInput } from "@/features/trip/components/image-url-input";
 
 const SAMPLE_MOUNTAINS = [
   { name: "Gunung Papandayan", location: "Garut, Jawa Barat" },
@@ -172,6 +173,8 @@ export default function CreateTripPage() {
             />
           </div>
 
+          <ImageUrlInput />
+
           <div className="grid gap-4 sm:grid-cols-3">
             <div>
               <label htmlFor="date" className="mb-1.5 block text-sm font-semibold text-neutral-700">

app/generated/prisma/browser.ts

@@ -27,6 +27,11 @@ export type User = Prisma.UserModel
  * 
  */
 export type Trip = Prisma.TripModel
+/**
+ * Model TripImage
+ * 
+ */
+export type TripImage = Prisma.TripImageModel
 /**
  * Model TripParticipant
  * 

app/generated/prisma/client.ts

@@ -51,6 +51,11 @@ export type User = Prisma.UserModel
  * 
  */
 export type Trip = Prisma.TripModel
+/**
+ * Model TripImage
+ * 
+ */
+export type TripImage = Prisma.TripImageModel
 /**
  * Model TripParticipant
  * 

app/generated/prisma/internal/prismaNamespace.ts

@@ -386,6 +386,7 @@ type FieldRefInputType<Model, FieldType> = Model extends never ? never : FieldRe
 export const ModelName = {
   User: 'User',
   Trip: 'Trip',
+  TripImage: 'TripImage',
   TripParticipant: 'TripParticipant'
 } as const
 
@@ -402,7 +403,7 @@ export type TypeMap<ExtArgs extends runtime.Types.Extensions.InternalArgs = runt
     omit: GlobalOmitOptions
   }
   meta: {
-    modelProps: "user" | "trip" | "tripParticipant"
+    modelProps: "user" | "trip" | "tripImage" | "tripParticipant"
     txIsolationLevel: TransactionIsolationLevel
   }
   model: {
@@ -554,6 +555,80 @@ export type TypeMap<ExtArgs extends runtime.Types.Extensions.InternalArgs = runt
         }
       }
     }
+    TripImage: {
+      payload: Prisma.$TripImagePayload<ExtArgs>
+      fields: Prisma.TripImageFieldRefs
+      operations: {
+        findUnique: {
+          args: Prisma.TripImageFindUniqueArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload> | null
+        }
+        findUniqueOrThrow: {
+          args: Prisma.TripImageFindUniqueOrThrowArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>
+        }
+        findFirst: {
+          args: Prisma.TripImageFindFirstArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload> | null
+        }
+        findFirstOrThrow: {
+          args: Prisma.TripImageFindFirstOrThrowArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>
+        }
+        findMany: {
+          args: Prisma.TripImageFindManyArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>[]
+        }
+        create: {
+          args: Prisma.TripImageCreateArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>
+        }
+        createMany: {
+          args: Prisma.TripImageCreateManyArgs<ExtArgs>
+          result: BatchPayload
+        }
+        createManyAndReturn: {
+          args: Prisma.TripImageCreateManyAndReturnArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>[]
+        }
+        delete: {
+          args: Prisma.TripImageDeleteArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>
+        }
+        update: {
+          args: Prisma.TripImageUpdateArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>
+        }
+        deleteMany: {
+          args: Prisma.TripImageDeleteManyArgs<ExtArgs>
+          result: BatchPayload
+        }
+        updateMany: {
+          args: Prisma.TripImageUpdateManyArgs<ExtArgs>
+          result: BatchPayload
+        }
+        updateManyAndReturn: {
+          args: Prisma.TripImageUpdateManyAndReturnArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>[]
+        }
+        upsert: {
+          args: Prisma.TripImageUpsertArgs<ExtArgs>
+          result: runtime.Types.Utils.PayloadToResult<Prisma.$TripImagePayload>
+        }
+        aggregate: {
+          args: Prisma.TripImageAggregateArgs<ExtArgs>
+          result: runtime.Types.Utils.Optional<Prisma.AggregateTripImage>
+        }
+        groupBy: {
+          args: Prisma.TripImageGroupByArgs<ExtArgs>
+          result: runtime.Types.Utils.Optional<Prisma.TripImageGroupByOutputType>[]
+        }
+        count: {
+          args: Prisma.TripImageCountArgs<ExtArgs>
+          result: runtime.Types.Utils.Optional<Prisma.TripImageCountAggregateOutputType> | number
+        }
+      }
+    }
     TripParticipant: {
       payload: Prisma.$TripParticipantPayload<ExtArgs>
       fields: Prisma.TripParticipantFieldRefs
@@ -689,7 +764,6 @@ export const TripScalarFieldEnum = {
   date: 'date',
   maxParticipants: 'maxParticipants',
   price: 'price',
-  image: 'image',
   status: 'status',
   createdAt: 'createdAt',
   updatedAt: 'updatedAt',
@@ -699,6 +773,17 @@ export const TripScalarFieldEnum = {
 export type TripScalarFieldEnum = (typeof TripScalarFieldEnum)[keyof typeof TripScalarFieldEnum]
 
 
+export const TripImageScalarFieldEnum = {
+  id: 'id',
+  url: 'url',
+  caption: 'caption',
+  order: 'order',
+  tripId: 'tripId'
+} as const
+
+export type TripImageScalarFieldEnum = (typeof TripImageScalarFieldEnum)[keyof typeof TripImageScalarFieldEnum]
+
+
 export const TripParticipantScalarFieldEnum = {
   id: 'id',
   status: 'status',
@@ -920,6 +1005,7 @@ export type PrismaClientOptions = ({
 export type GlobalOmitConfig = {
   user?: Prisma.UserOmit
   trip?: Prisma.TripOmit
+  tripImage?: Prisma.TripImageOmit
   tripParticipant?: Prisma.TripParticipantOmit
 }
 

app/generated/prisma/internal/prismaNamespaceBrowser.ts

@@ -53,6 +53,7 @@ export const AnyNull = runtime.AnyNull
 export const ModelName = {
   User: 'User',
   Trip: 'Trip',
+  TripImage: 'TripImage',
   TripParticipant: 'TripParticipant'
 } as const
 
@@ -94,7 +95,6 @@ export const TripScalarFieldEnum = {
   date: 'date',
   maxParticipants: 'maxParticipants',
   price: 'price',
-  image: 'image',
   status: 'status',
   createdAt: 'createdAt',
   updatedAt: 'updatedAt',
@@ -104,6 +104,17 @@ export const TripScalarFieldEnum = {
 export type TripScalarFieldEnum = (typeof TripScalarFieldEnum)[keyof typeof TripScalarFieldEnum]
 
 
+export const TripImageScalarFieldEnum = {
+  id: 'id',
+  url: 'url',
+  caption: 'caption',
+  order: 'order',
+  tripId: 'tripId'
+} as const
+
+export type TripImageScalarFieldEnum = (typeof TripImageScalarFieldEnum)[keyof typeof TripImageScalarFieldEnum]
+
+
 export const TripParticipantScalarFieldEnum = {
   id: 'id',
   status: 'status',

app/generated/prisma/models.ts

@@ -10,5 +10,6 @@
  */
 export type * from './models/User'
 export type * from './models/Trip'
+export type * from './models/TripImage'
 export type * from './models/TripParticipant'
 export type * from './commonInputTypes'

app/generated/prisma/models/Trip.ts

@@ -45,7 +45,6 @@ export type TripMinAggregateOutputType = {
   date: Date | null
   maxParticipants: number | null
   price: number | null
-  image: string | null
   status: $Enums.TripStatus | null
   createdAt: Date | null
   updatedAt: Date | null
@@ -61,7 +60,6 @@ export type TripMaxAggregateOutputType = {
   date: Date | null
   maxParticipants: number | null
   price: number | null
-  image: string | null
   status: $Enums.TripStatus | null
   createdAt: Date | null
   updatedAt: Date | null
@@ -77,7 +75,6 @@ export type TripCountAggregateOutputType = {
   date: number
   maxParticipants: number
   price: number
-  image: number
   status: number
   createdAt: number
   updatedAt: number
@@ -105,7 +102,6 @@ export type TripMinAggregateInputType = {
   date?: true
   maxParticipants?: true
   price?: true
-  image?: true
   status?: true
   createdAt?: true
   updatedAt?: true
@@ -121,7 +117,6 @@ export type TripMaxAggregateInputType = {
   date?: true
   maxParticipants?: true
   price?: true
-  image?: true
   status?: true
   createdAt?: true
   updatedAt?: true
@@ -137,7 +132,6 @@ export type TripCountAggregateInputType = {
   date?: true
   maxParticipants?: true
   price?: true
-  image?: true
   status?: true
   createdAt?: true
   updatedAt?: true
@@ -240,7 +234,6 @@ export type TripGroupByOutputType = {
   date: Date
   maxParticipants: number
   price: number
-  image: string | null
   status: $Enums.TripStatus
   createdAt: Date
   updatedAt: Date
@@ -279,13 +272,13 @@ export type TripWhereInput = {
   date?: Prisma.DateTimeFilter<"Trip"> | Date | string
   maxParticipants?: Prisma.IntFilter<"Trip"> | number
   price?: Prisma.IntFilter<"Trip"> | number
-  image?: Prisma.StringNullableFilter<"Trip"> | string | null
   status?: Prisma.EnumTripStatusFilter<"Trip"> | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFilter<"Trip"> | Date | string
   updatedAt?: Prisma.DateTimeFilter<"Trip"> | Date | string
   organizerId?: Prisma.StringFilter<"Trip"> | string
   organizer?: Prisma.XOR<Prisma.UserScalarRelationFilter, Prisma.UserWhereInput>
   participants?: Prisma.TripParticipantListRelationFilter
+  images?: Prisma.TripImageListRelationFilter
 }
 
 export type TripOrderByWithRelationInput = {
@@ -297,13 +290,13 @@ export type TripOrderByWithRelationInput = {
   date?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
-  image?: Prisma.SortOrderInput | Prisma.SortOrder
   status?: Prisma.SortOrder
   createdAt?: Prisma.SortOrder
   updatedAt?: Prisma.SortOrder
   organizerId?: Prisma.SortOrder
   organizer?: Prisma.UserOrderByWithRelationInput
   participants?: Prisma.TripParticipantOrderByRelationAggregateInput
+  images?: Prisma.TripImageOrderByRelationAggregateInput
 }
 
 export type TripWhereUniqueInput = Prisma.AtLeast<{
@@ -318,13 +311,13 @@ export type TripWhereUniqueInput = Prisma.AtLeast<{
   date?: Prisma.DateTimeFilter<"Trip"> | Date | string
   maxParticipants?: Prisma.IntFilter<"Trip"> | number
   price?: Prisma.IntFilter<"Trip"> | number
-  image?: Prisma.StringNullableFilter<"Trip"> | string | null
   status?: Prisma.EnumTripStatusFilter<"Trip"> | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFilter<"Trip"> | Date | string
   updatedAt?: Prisma.DateTimeFilter<"Trip"> | Date | string
   organizerId?: Prisma.StringFilter<"Trip"> | string
   organizer?: Prisma.XOR<Prisma.UserScalarRelationFilter, Prisma.UserWhereInput>
   participants?: Prisma.TripParticipantListRelationFilter
+  images?: Prisma.TripImageListRelationFilter
 }, "id">
 
 export type TripOrderByWithAggregationInput = {
@@ -336,7 +329,6 @@ export type TripOrderByWithAggregationInput = {
   date?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
-  image?: Prisma.SortOrderInput | Prisma.SortOrder
   status?: Prisma.SortOrder
   createdAt?: Prisma.SortOrder
   updatedAt?: Prisma.SortOrder
@@ -360,7 +352,6 @@ export type TripScalarWhereWithAggregatesInput = {
   date?: Prisma.DateTimeWithAggregatesFilter<"Trip"> | Date | string
   maxParticipants?: Prisma.IntWithAggregatesFilter<"Trip"> | number
   price?: Prisma.IntWithAggregatesFilter<"Trip"> | number
-  image?: Prisma.StringNullableWithAggregatesFilter<"Trip"> | string | null
   status?: Prisma.EnumTripStatusWithAggregatesFilter<"Trip"> | $Enums.TripStatus
   createdAt?: Prisma.DateTimeWithAggregatesFilter<"Trip"> | Date | string
   updatedAt?: Prisma.DateTimeWithAggregatesFilter<"Trip"> | Date | string
@@ -376,12 +367,12 @@ export type TripCreateInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
   organizer: Prisma.UserCreateNestedOneWithoutTripsInput
   participants?: Prisma.TripParticipantCreateNestedManyWithoutTripInput
+  images?: Prisma.TripImageCreateNestedManyWithoutTripInput
 }
 
 export type TripUncheckedCreateInput = {
@@ -393,12 +384,12 @@ export type TripUncheckedCreateInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
   organizerId: string
   participants?: Prisma.TripParticipantUncheckedCreateNestedManyWithoutTripInput
+  images?: Prisma.TripImageUncheckedCreateNestedManyWithoutTripInput
 }
 
 export type TripUpdateInput = {
@@ -410,12 +401,12 @@ export type TripUpdateInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   organizer?: Prisma.UserUpdateOneRequiredWithoutTripsNestedInput
   participants?: Prisma.TripParticipantUpdateManyWithoutTripNestedInput
+  images?: Prisma.TripImageUpdateManyWithoutTripNestedInput
 }
 
 export type TripUncheckedUpdateInput = {
@@ -427,12 +418,12 @@ export type TripUncheckedUpdateInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   organizerId?: Prisma.StringFieldUpdateOperationsInput | string
   participants?: Prisma.TripParticipantUncheckedUpdateManyWithoutTripNestedInput
+  images?: Prisma.TripImageUncheckedUpdateManyWithoutTripNestedInput
 }
 
 export type TripCreateManyInput = {
@@ -444,7 +435,6 @@ export type TripCreateManyInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
@@ -460,7 +450,6 @@ export type TripUpdateManyMutationInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -475,7 +464,6 @@ export type TripUncheckedUpdateManyInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -501,7 +489,6 @@ export type TripCountOrderByAggregateInput = {
   date?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
-  image?: Prisma.SortOrder
   status?: Prisma.SortOrder
   createdAt?: Prisma.SortOrder
   updatedAt?: Prisma.SortOrder
@@ -522,7 +509,6 @@ export type TripMaxOrderByAggregateInput = {
   date?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
-  image?: Prisma.SortOrder
   status?: Prisma.SortOrder
   createdAt?: Prisma.SortOrder
   updatedAt?: Prisma.SortOrder
@@ -538,7 +524,6 @@ export type TripMinOrderByAggregateInput = {
   date?: Prisma.SortOrder
   maxParticipants?: Prisma.SortOrder
   price?: Prisma.SortOrder
-  image?: Prisma.SortOrder
   status?: Prisma.SortOrder
   createdAt?: Prisma.SortOrder
   updatedAt?: Prisma.SortOrder
@@ -609,6 +594,20 @@ export type EnumTripStatusFieldUpdateOperationsInput = {
   set?: $Enums.TripStatus
 }
 
+export type TripCreateNestedOneWithoutImagesInput = {
+  create?: Prisma.XOR<Prisma.TripCreateWithoutImagesInput, Prisma.TripUncheckedCreateWithoutImagesInput>
+  connectOrCreate?: Prisma.TripCreateOrConnectWithoutImagesInput
+  connect?: Prisma.TripWhereUniqueInput
+}
+
+export type TripUpdateOneRequiredWithoutImagesNestedInput = {
+  create?: Prisma.XOR<Prisma.TripCreateWithoutImagesInput, Prisma.TripUncheckedCreateWithoutImagesInput>
+  connectOrCreate?: Prisma.TripCreateOrConnectWithoutImagesInput
+  upsert?: Prisma.TripUpsertWithoutImagesInput
+  connect?: Prisma.TripWhereUniqueInput
+  update?: Prisma.XOR<Prisma.XOR<Prisma.TripUpdateToOneWithWhereWithoutImagesInput, Prisma.TripUpdateWithoutImagesInput>, Prisma.TripUncheckedUpdateWithoutImagesInput>
+}
+
 export type TripCreateNestedOneWithoutParticipantsInput = {
   create?: Prisma.XOR<Prisma.TripCreateWithoutParticipantsInput, Prisma.TripUncheckedCreateWithoutParticipantsInput>
   connectOrCreate?: Prisma.TripCreateOrConnectWithoutParticipantsInput
@@ -632,11 +631,11 @@ export type TripCreateWithoutOrganizerInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
   participants?: Prisma.TripParticipantCreateNestedManyWithoutTripInput
+  images?: Prisma.TripImageCreateNestedManyWithoutTripInput
 }
 
 export type TripUncheckedCreateWithoutOrganizerInput = {
@@ -648,11 +647,11 @@ export type TripUncheckedCreateWithoutOrganizerInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
   participants?: Prisma.TripParticipantUncheckedCreateNestedManyWithoutTripInput
+  images?: Prisma.TripImageUncheckedCreateNestedManyWithoutTripInput
 }
 
 export type TripCreateOrConnectWithoutOrganizerInput = {
@@ -693,13 +692,92 @@ export type TripScalarWhereInput = {
   date?: Prisma.DateTimeFilter<"Trip"> | Date | string
   maxParticipants?: Prisma.IntFilter<"Trip"> | number
   price?: Prisma.IntFilter<"Trip"> | number
-  image?: Prisma.StringNullableFilter<"Trip"> | string | null
   status?: Prisma.EnumTripStatusFilter<"Trip"> | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFilter<"Trip"> | Date | string
   updatedAt?: Prisma.DateTimeFilter<"Trip"> | Date | string
   organizerId?: Prisma.StringFilter<"Trip"> | string
 }
 
+export type TripCreateWithoutImagesInput = {
+  id?: string
+  title: string
+  description?: string | null
+  mountain: string
+  location: string
+  date: Date | string
+  maxParticipants: number
+  price: number
+  status?: $Enums.TripStatus
+  createdAt?: Date | string
+  updatedAt?: Date | string
+  organizer: Prisma.UserCreateNestedOneWithoutTripsInput
+  participants?: Prisma.TripParticipantCreateNestedManyWithoutTripInput
+}
+
+export type TripUncheckedCreateWithoutImagesInput = {
+  id?: string
+  title: string
+  description?: string | null
+  mountain: string
+  location: string
+  date: Date | string
+  maxParticipants: number
+  price: number
+  status?: $Enums.TripStatus
+  createdAt?: Date | string
+  updatedAt?: Date | string
+  organizerId: string
+  participants?: Prisma.TripParticipantUncheckedCreateNestedManyWithoutTripInput
+}
+
+export type TripCreateOrConnectWithoutImagesInput = {
+  where: Prisma.TripWhereUniqueInput
+  create: Prisma.XOR<Prisma.TripCreateWithoutImagesInput, Prisma.TripUncheckedCreateWithoutImagesInput>
+}
+
+export type TripUpsertWithoutImagesInput = {
+  update: Prisma.XOR<Prisma.TripUpdateWithoutImagesInput, Prisma.TripUncheckedUpdateWithoutImagesInput>
+  create: Prisma.XOR<Prisma.TripCreateWithoutImagesInput, Prisma.TripUncheckedCreateWithoutImagesInput>
+  where?: Prisma.TripWhereInput
+}
+
+export type TripUpdateToOneWithWhereWithoutImagesInput = {
+  where?: Prisma.TripWhereInput
+  data: Prisma.XOR<Prisma.TripUpdateWithoutImagesInput, Prisma.TripUncheckedUpdateWithoutImagesInput>
+}
+
+export type TripUpdateWithoutImagesInput = {
+  id?: Prisma.StringFieldUpdateOperationsInput | string
+  title?: Prisma.StringFieldUpdateOperationsInput | string
+  description?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  mountain?: Prisma.StringFieldUpdateOperationsInput | string
+  location?: Prisma.StringFieldUpdateOperationsInput | string
+  date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
+  price?: Prisma.IntFieldUpdateOperationsInput | number
+  status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
+  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  organizer?: Prisma.UserUpdateOneRequiredWithoutTripsNestedInput
+  participants?: Prisma.TripParticipantUpdateManyWithoutTripNestedInput
+}
+
+export type TripUncheckedUpdateWithoutImagesInput = {
+  id?: Prisma.StringFieldUpdateOperationsInput | string
+  title?: Prisma.StringFieldUpdateOperationsInput | string
+  description?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
+  mountain?: Prisma.StringFieldUpdateOperationsInput | string
+  location?: Prisma.StringFieldUpdateOperationsInput | string
+  date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
+  price?: Prisma.IntFieldUpdateOperationsInput | number
+  status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
+  createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
+  organizerId?: Prisma.StringFieldUpdateOperationsInput | string
+  participants?: Prisma.TripParticipantUncheckedUpdateManyWithoutTripNestedInput
+}
+
 export type TripCreateWithoutParticipantsInput = {
   id?: string
   title: string
@@ -709,11 +787,11 @@ export type TripCreateWithoutParticipantsInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
   organizer: Prisma.UserCreateNestedOneWithoutTripsInput
+  images?: Prisma.TripImageCreateNestedManyWithoutTripInput
 }
 
 export type TripUncheckedCreateWithoutParticipantsInput = {
@@ -725,11 +803,11 @@ export type TripUncheckedCreateWithoutParticipantsInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
   organizerId: string
+  images?: Prisma.TripImageUncheckedCreateNestedManyWithoutTripInput
 }
 
 export type TripCreateOrConnectWithoutParticipantsInput = {
@@ -757,11 +835,11 @@ export type TripUpdateWithoutParticipantsInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   organizer?: Prisma.UserUpdateOneRequiredWithoutTripsNestedInput
+  images?: Prisma.TripImageUpdateManyWithoutTripNestedInput
 }
 
 export type TripUncheckedUpdateWithoutParticipantsInput = {
@@ -773,11 +851,11 @@ export type TripUncheckedUpdateWithoutParticipantsInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   organizerId?: Prisma.StringFieldUpdateOperationsInput | string
+  images?: Prisma.TripImageUncheckedUpdateManyWithoutTripNestedInput
 }
 
 export type TripCreateManyOrganizerInput = {
@@ -789,7 +867,6 @@ export type TripCreateManyOrganizerInput = {
   date: Date | string
   maxParticipants: number
   price: number
-  image?: string | null
   status?: $Enums.TripStatus
   createdAt?: Date | string
   updatedAt?: Date | string
@@ -804,11 +881,11 @@ export type TripUpdateWithoutOrganizerInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   participants?: Prisma.TripParticipantUpdateManyWithoutTripNestedInput
+  images?: Prisma.TripImageUpdateManyWithoutTripNestedInput
 }
 
 export type TripUncheckedUpdateWithoutOrganizerInput = {
@@ -820,11 +897,11 @@ export type TripUncheckedUpdateWithoutOrganizerInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   participants?: Prisma.TripParticipantUncheckedUpdateManyWithoutTripNestedInput
+  images?: Prisma.TripImageUncheckedUpdateManyWithoutTripNestedInput
 }
 
 export type TripUncheckedUpdateManyWithoutOrganizerInput = {
@@ -836,7 +913,6 @@ export type TripUncheckedUpdateManyWithoutOrganizerInput = {
   date?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   maxParticipants?: Prisma.IntFieldUpdateOperationsInput | number
   price?: Prisma.IntFieldUpdateOperationsInput | number
-  image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
   status?: Prisma.EnumTripStatusFieldUpdateOperationsInput | $Enums.TripStatus
   createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
   updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
@@ -849,10 +925,12 @@ export type TripUncheckedUpdateManyWithoutOrganizerInput = {
 
 export type TripCountOutputType = {
   participants: number
+  images: number
 }
 
 export type TripCountOutputTypeSelect<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
   participants?: boolean | TripCountOutputTypeCountParticipantsArgs
+  images?: boolean | TripCountOutputTypeCountImagesArgs
 }
 
 /**
@@ -872,6 +950,13 @@ export type TripCountOutputTypeCountParticipantsArgs<ExtArgs extends runtime.Typ
   where?: Prisma.TripParticipantWhereInput
 }
 
+/**
+ * TripCountOutputType without action
+ */
+export type TripCountOutputTypeCountImagesArgs<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
+  where?: Prisma.TripImageWhereInput
+}
+
 
 export type TripSelect<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetSelect<{
   id?: boolean
@@ -882,13 +967,13 @@ export type TripSelect<ExtArgs extends runtime.Types.Extensions.InternalArgs = r
   date?: boolean
   maxParticipants?: boolean
   price?: boolean
-  image?: boolean
   status?: boolean
   createdAt?: boolean
   updatedAt?: boolean
   organizerId?: boolean
   organizer?: boolean | Prisma.UserDefaultArgs<ExtArgs>
   participants?: boolean | Prisma.Trip$participantsArgs<ExtArgs>
+  images?: boolean | Prisma.Trip$imagesArgs<ExtArgs>
   _count?: boolean | Prisma.TripCountOutputTypeDefaultArgs<ExtArgs>
 }, ExtArgs["result"]["trip"]>
 
@@ -901,7 +986,6 @@ export type TripSelectCreateManyAndReturn<ExtArgs extends runtime.Types.Extensio
   date?: boolean
   maxParticipants?: boolean
   price?: boolean
-  image?: boolean
   status?: boolean
   createdAt?: boolean
   updatedAt?: boolean
@@ -918,7 +1002,6 @@ export type TripSelectUpdateManyAndReturn<ExtArgs extends runtime.Types.Extensio
   date?: boolean
   maxParticipants?: boolean
   price?: boolean
-  image?: boolean
   status?: boolean
   createdAt?: boolean
   updatedAt?: boolean
@@ -935,17 +1018,17 @@ export type TripSelectScalar = {
   date?: boolean
   maxParticipants?: boolean
   price?: boolean
-  image?: boolean
   status?: boolean
   createdAt?: boolean
   updatedAt?: boolean
   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" | "image" | "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" | "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>
+  images?: boolean | Prisma.Trip$imagesArgs<ExtArgs>
   _count?: boolean | Prisma.TripCountOutputTypeDefaultArgs<ExtArgs>
 }
 export type TripIncludeCreateManyAndReturn<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
@@ -960,6 +1043,7 @@ export type $TripPayload<ExtArgs extends runtime.Types.Extensions.InternalArgs =
   objects: {
     organizer: Prisma.$UserPayload<ExtArgs>
     participants: Prisma.$TripParticipantPayload<ExtArgs>[]
+    images: Prisma.$TripImagePayload<ExtArgs>[]
   }
   scalars: runtime.Types.Extensions.GetPayloadResult<{
     id: string
@@ -970,7 +1054,6 @@ export type $TripPayload<ExtArgs extends runtime.Types.Extensions.InternalArgs =
     date: Date
     maxParticipants: number
     price: number
-    image: string | null
     status: $Enums.TripStatus
     createdAt: Date
     updatedAt: Date
@@ -1371,6 +1454,7 @@ export interface Prisma__TripClient<T, Null = never, ExtArgs extends runtime.Typ
   readonly [Symbol.toStringTag]: "PrismaPromise"
   organizer<T extends Prisma.UserDefaultArgs<ExtArgs> = {}>(args?: Prisma.Subset<T, Prisma.UserDefaultArgs<ExtArgs>>): Prisma.Prisma__UserClient<runtime.Types.Result.GetResult<Prisma.$UserPayload<ExtArgs>, T, "findUniqueOrThrow", GlobalOmitOptions> | Null, Null, ExtArgs, GlobalOmitOptions>
   participants<T extends Prisma.Trip$participantsArgs<ExtArgs> = {}>(args?: Prisma.Subset<T, Prisma.Trip$participantsArgs<ExtArgs>>): Prisma.PrismaPromise<runtime.Types.Result.GetResult<Prisma.$TripParticipantPayload<ExtArgs>, T, "findMany", GlobalOmitOptions> | Null>
+  images<T extends Prisma.Trip$imagesArgs<ExtArgs> = {}>(args?: Prisma.Subset<T, Prisma.Trip$imagesArgs<ExtArgs>>): Prisma.PrismaPromise<runtime.Types.Result.GetResult<Prisma.$TripImagePayload<ExtArgs>, T, "findMany", GlobalOmitOptions> | Null>
   /**
    * Attaches callbacks for the resolution and/or rejection of the Promise.
    * @param onfulfilled The callback to execute when the Promise is resolved.
@@ -1408,7 +1492,6 @@ export interface TripFieldRefs {
   readonly date: Prisma.FieldRef<"Trip", 'DateTime'>
   readonly maxParticipants: Prisma.FieldRef<"Trip", 'Int'>
   readonly price: Prisma.FieldRef<"Trip", 'Int'>
-  readonly image: Prisma.FieldRef<"Trip", 'String'>
   readonly status: Prisma.FieldRef<"Trip", 'TripStatus'>
   readonly createdAt: Prisma.FieldRef<"Trip", 'DateTime'>
   readonly updatedAt: Prisma.FieldRef<"Trip", 'DateTime'>
@@ -1837,6 +1920,30 @@ export type Trip$participantsArgs<ExtArgs extends runtime.Types.Extensions.Inter
   distinct?: Prisma.TripParticipantScalarFieldEnum | Prisma.TripParticipantScalarFieldEnum[]
 }
 
+/**
+ * Trip.images
+ */
+export type Trip$imagesArgs<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
+  /**
+   * Select specific fields to fetch from the TripImage
+   */
+  select?: Prisma.TripImageSelect<ExtArgs> | null
+  /**
+   * Omit specific fields from the TripImage
+   */
+  omit?: Prisma.TripImageOmit<ExtArgs> | null
+  /**
+   * Choose, which related nodes to fetch as well
+   */
+  include?: Prisma.TripImageInclude<ExtArgs> | null
+  where?: Prisma.TripImageWhereInput
+  orderBy?: Prisma.TripImageOrderByWithRelationInput | Prisma.TripImageOrderByWithRelationInput[]
+  cursor?: Prisma.TripImageWhereUniqueInput
+  take?: number
+  skip?: number
+  distinct?: Prisma.TripImageScalarFieldEnum | Prisma.TripImageScalarFieldEnum[]
+}
+
 /**
  * Trip without action
  */

app/globals.css

@@ -41,10 +41,6 @@
   --color-neutral-900: #111827;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 body {
   background-color: #f9fafb;
   color: #1f2937;

app/layout.tsx

@@ -28,6 +28,7 @@ export default function RootLayout({
   return (
     <html
       lang="id"
+      data-scroll-behavior="smooth"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="flex min-h-full flex-col bg-neutral-50">

app/page.tsx

@@ -85,7 +85,7 @@ export default async function HomePage() {
               </div>
             </div>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {upcomingTrips.slice(0, 3).map((trip) => (
+              {upcomingTrips.slice(0, 3).map((trip, i) => (
                 <TripCard
                   key={trip.id}
                   id={trip.id}
@@ -98,6 +98,8 @@ export default async function HomePage() {
                   participantCount={trip._count.participants}
                   organizerName={trip.organizer.name}
                   status={trip.status}
+                  coverImage={trip.images[0]?.url}
+                  priority={i === 0}
                 />
               ))}
             </div>
@@ -161,6 +163,7 @@ export default async function HomePage() {
                   participantCount={trip._count.participants}
                   organizerName={trip.organizer.name}
                   status={trip.status}
+                  coverImage={trip.images[0]?.url}
                 />
               ))}
             </div>
@@ -197,6 +200,7 @@ export default async function HomePage() {
                   participantCount={trip._count.participants}
                   organizerName={trip.organizer.name}
                   status={trip.status}
+                  coverImage={trip.images[0]?.url}
                 />
               ))}
             </div>

app/trips/[id]/page.tsx

@@ -5,6 +5,7 @@ import { authOptions } from "@/lib/auth";
 import { tripService } from "@/server/services/trip.service";
 import { formatRupiah, formatDate } from "@/lib/utils";
 import { JoinTripButton } from "@/features/trip/components/join-trip-button";
+import { ImageGallery } from "@/features/trip/components/image-gallery";
 
 export default async function TripDetailPage({
   params,
@@ -49,33 +50,35 @@ export default async function TripDetailPage({
       </div>
 
       <div className="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm">
-        {/* Header — dark theme */}
-        <div className="relative overflow-hidden bg-neutral-800 px-6 py-8">
-          <div className="absolute inset-0 bg-linear-to-br from-primary-900/40 to-secondary-900/30" />
-          <div className="relative">
-            <div className="flex items-start justify-between">
-              <div>
-                <h1 className="text-2xl font-bold text-white">{trip.title}</h1>
-                <p className="mt-1 flex items-center gap-1.5 text-neutral-300">
-                  <span>🏔️</span> {trip.mountain}
-                </p>
-              </div>
-              <span
-                className={`rounded-full px-3 py-1 text-xs font-bold ${
-                  trip.status === "OPEN"
-                    ? "bg-primary-500/20 text-primary-300 ring-1 ring-primary-400/30"
-                    : trip.status === "FULL"
-                    ? "bg-amber-500/20 text-amber-300 ring-1 ring-amber-400/30"
-                    : "bg-neutral-500/20 text-neutral-400 ring-1 ring-neutral-500/30"
-                }`}
-              >
-                {trip.status}
-              </span>
+        {/* Image Gallery */}
+        <ImageGallery images={trip.images} />
+
+        {/* Title bar */}
+        <div className="border-b border-neutral-100 px-6 py-4">
+          <div className="flex items-start justify-between">
+            <div>
+              <h1 className="text-xl font-bold text-neutral-800">
+                {trip.title}
+              </h1>
+              <p className="mt-0.5 flex items-center gap-1.5 text-sm text-neutral-500">
+                🏔️ {trip.mountain}
+              </p>
             </div>
+            <span
+              className={`rounded-full px-3 py-1 text-xs font-bold ${
+                trip.status === "OPEN"
+                  ? "bg-primary-100 text-primary-700"
+                  : trip.status === "FULL"
+                  ? "bg-amber-100 text-amber-700"
+                  : "bg-neutral-100 text-neutral-500"
+              }`}
+            >
+              {trip.status}
+            </span>
           </div>
         </div>
 
-        <div className="p-6 space-y-6">
+        <div className="space-y-6 p-6">
           {/* Info Grid */}
           <div className="grid gap-3 sm:grid-cols-2">
             <div className="flex items-center gap-3 rounded-xl bg-neutral-50 p-4">

app/trips/page.tsx

@@ -57,6 +57,7 @@ export default async function TripsPage() {
               participantCount={trip._count.participants}
               organizerName={trip.organizer.name}
               status={trip.status}
+              coverImage={trip.images[0]?.url}
             />
           ))}
         </div>