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
+115 -29
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>
<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"
placeholder="10"
/>
<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 py-2.5 pl-9 pr-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:bg-white"
placeholder="10"
/>
</div>
</div>
<div>
<label htmlFor="price" className="mb-1.5 block text-sm font-semibold text-neutral-700">
Harga (Rp)
</label>
</div>
{/* Price with Rp format */}
<div>
<label htmlFor="priceDisplay" className="mb-1.5 block text-sm font-semibold text-neutral-700">
Harga per Orang
</label>
<div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-neutral-500">
Rp
</span>
<input
id="price"
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
+46 -12
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>
<Link
href="/create-trip"
className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
>
Buat Trip Baru
</Link>
{!hasFilters && (
<Link
href="/create-trip"
className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
>
Buat Trip Baru
</Link>
)}
</div>
) : (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -52,6 +85,7 @@ export default async function TripsPage() {
mountain={trip.mountain}
location={trip.location}
date={trip.date}
endDate={trip.endDate}
price={trip.price}
maxParticipants={trip.maxParticipants}
participantCount={trip._count.participants}