arifal/setrip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add end date and create logo and fix filter

Browse Source
This commit is contained in:
arifal
2026-04-17 00:16:31 +07:00
parent 82c1da9951
commit 7159e9108f
35 changed files with 743 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/create-trip/page.tsx
+104 -18
View File
@@ -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">
Tanggal
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
Tanggal Berangkat — Pulang
</label>
<input
id="date"
name="date"
type="date"
required
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"
<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>
{/* Max Participants */}
<div>
<label htmlFor="maxParticipants" className="mb-1.5 block text-sm font-semibold text-neutral-700">
Maks Peserta
</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 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 px-4 py-2.5 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
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>
{/* Price with Rp format */}
<div>
<label htmlFor="price" className="mb-1.5 block text-sm font-semibold text-neutral-700">
Harga (Rp)
<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"
name="price"
type="number"
id="priceDisplay"
type="text"
inputMode="numeric"
required
min={0}
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"
placeholder="150000"
value={priceDisplay}
onChange={handlePriceChange}
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/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

app/generated/prisma/commonInputTypes.ts
+50
View File
@@ -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/class.ts
+4 -4
View File
File diff suppressed because one or more lines are too long
app/generated/prisma/internal/prismaNamespace.ts
+1
View File
@@ -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
+1
View File
@@ -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
+48 -1
View File
@@ -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
+77
View File
@@ -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
+4
View File
@@ -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
+29 -8
View File
@@ -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="w-full max-w-sm">
<div className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-8 sm:py-12">
{/* 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">
Se<span className="text-primary-600">Trip</span>
<Link href="/" className="mb-3 inline-flex items-center gap-2">
<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
+34 -6
View File
@@ -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 budgetTrips = trips.filter((t) => t.price <= 300000).slice(0, 3);
const latestTrips = trips.slice(0, 6);
const upcomingTrips = trips
.filter((t) => new Date(t.date) <= nextWeek)
.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
+29 -8
View File
@@ -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="w-full max-w-sm">
<div className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center px-4 py-8 sm:py-12">
{/* 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">
Se<span className="text-primary-600">Trip</span>
<Link href="/" className="mb-3 inline-flex items-center gap-2">
<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
+2 -2
View File
@@ -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
+40 -6
View File
@@ -1,9 +1,27 @@
import Link from "next/link";
import { Suspense } from "react";
import { tripService } from "@/server/services/trip.service";
import { TripCard } from "@/features/trip/components/trip-card";
import { TripFilter } from "@/features/trip/components/trip-filter";
export default async function TripsPage() {
const trips = await tripService.getOpenTrips();
interface TripsPageProps {
searchParams: Promise<{ q?: string; from?: string; to?: string }>;
}
export default async function TripsPage({ searchParams }: TripsPageProps) {
const params = await searchParams;
const hasFilters = params.q || params.from || params.to;
const filters = {
q: params.q,
from: params.from,
to: params.to,
};
const [trips, allTrips] = await Promise.all([
tripService.getOpenTrips(filters),
hasFilters ? tripService.getOpenTrips() : null,
]);
const totalCount = hasFilters ? allTrips!.length : trips.length;
return (
<div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
@@ -13,7 +31,9 @@ export default async function TripsPage() {
Open Trip Pendakian
</h1>
<p className="mt-0.5 text-sm text-neutral-500">
{trips.length} trip tersedia — pilih dan langsung join
{hasFilters
? `${trips.length} dari ${totalCount} trip ditemukan`
: `${trips.length} trip tersedia — pilih dan langsung join`}
</p>
</div>
<Link
@@ -24,23 +44,36 @@ export default async function TripsPage() {
</Link>
</div>
{/* Filter */}
<div className="mb-6">
<Suspense fallback={null}>
<TripFilter />
</Suspense>
</div>
{trips.length === 0 ? (
<div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
🏕️
{hasFilters ? "🔍" : "🏕️"}
</div>
<p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
Belum ada trip tersedia
{hasFilters
? "Tidak ada trip yang cocok"
: "Belum ada trip tersedia"}
</p>
<p className="mb-5 text-sm text-neutral-500 sm:mb-6">
Jadilah yang pertama membuat open trip pendakian!
{hasFilters
? "Coba ubah kata kunci atau rentang tanggal pencarian"
: "Jadilah yang pertama membuat open trip pendakian!"}
</p>
{!hasFilters && (
<Link
href="/create-trip"
className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
>
Buat Trip Baru
</Link>
)}
</div>
) : (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -52,6 +85,7 @@ export default async function TripsPage() {
mountain={trip.mountain}
location={trip.location}
date={trip.date}
endDate={trip.endDate}
price={trip.price}
maxParticipants={trip.maxParticipants}
participantCount={trip._count.participants}
components/shared/navbar.tsx
+11 -5
View File
@@ -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">
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white">
S
</span>
<Link href="/" className="flex items-center gap-2">
<Image
src="/images/SeTrip.png"
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
+2
View File
@@ -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
+4 -2
View File
@@ -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
+145
View File
@@ -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 -1
View File
@@ -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
+10
View File
@@ -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
Generated
+91
View File
@@ -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
+1
View File
@@ -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
+2
View File
@@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "Trip" ADD COLUMN "endDate" TIMESTAMP(3);
prisma/schema.prisma
+1
View File
@@ -27,6 +27,7 @@ model Trip {
mountain String
location String
date DateTime
endDate DateTime?
maxParticipants Int
price Int
status TripStatus @default(OPEN)
public/SeTrip.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

public/images/SeTrip.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 KiB

public/images/seed/gunung-gede-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

public/images/seed/gunung-gede-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

public/images/seed/gunung-login.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

public/images/seed/gunung-papandayan-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

public/images/seed/gunung-papandayan-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

public/images/seed/gunung-papandayan-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

public/images/seed/gunung-register.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

server/repositories/trip.repo.ts
+27 -2
View File
@@ -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
+4 -2
View File
@@ -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() {
return tripRepo.findOpen();
async getOpenTrips(filters?: { q?: string; from?: string; to?: string }) {
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 } },