Compare commits
2 Commits
57f7764bf5
...
306396ae43
| Author | SHA1 | Date | |
|---|---|---|---|
| 306396ae43 | |||
| b836d08b10 |
@@ -10,7 +10,8 @@
|
|||||||
"PowerShell(npx prisma generate 2>&1)",
|
"PowerShell(npx prisma generate 2>&1)",
|
||||||
"PowerShell(npx tsc --noEmit 2>&1)",
|
"PowerShell(npx tsc --noEmit 2>&1)",
|
||||||
"PowerShell(npx eslint server/services/refund.service.ts server/repositories/refund.repo.ts features/refund app/admin/refunds 2>&1)",
|
"PowerShell(npx eslint server/services/refund.service.ts server/repositories/refund.repo.ts features/refund app/admin/refunds 2>&1)",
|
||||||
"PowerShell(npx eslint server lib features app 2>&1)"
|
"PowerShell(npx eslint server lib features app 2>&1)",
|
||||||
|
"Bash(npx eslint *)"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -64,6 +64,16 @@ select:focus {
|
|||||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Input wrapper isi penuh lebar parent + popper di atas konten lain */
|
||||||
|
.react-datepicker-wrapper,
|
||||||
|
.react-datepicker__input-container {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-popper {
|
||||||
|
z-index: 50 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.react-datepicker__header {
|
.react-datepicker__header {
|
||||||
background: #f9fafb !important;
|
background: #f9fafb !important;
|
||||||
border-bottom: 1px solid #e5e7eb !important;
|
border-bottom: 1px solid #e5e7eb !important;
|
||||||
@@ -132,3 +142,46 @@ select:focus {
|
|||||||
.react-datepicker__close-icon:hover::after {
|
.react-datepicker__close-icon:hover::after {
|
||||||
background-color: #16a34a !important;
|
background-color: #16a34a !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dropdown bulan / tahun (mode select) */
|
||||||
|
.react-datepicker__month-select,
|
||||||
|
.react-datepicker__year-select {
|
||||||
|
border: 1px solid #e5e7eb !important;
|
||||||
|
border-radius: 0.5rem !important;
|
||||||
|
padding: 2px 4px !important;
|
||||||
|
font-size: 0.8125rem !important;
|
||||||
|
background: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pemilih jam (showTimeSelectOnly) */
|
||||||
|
.react-datepicker__time-container {
|
||||||
|
width: 96px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-container
|
||||||
|
.react-datepicker__time
|
||||||
|
.react-datepicker__time-box {
|
||||||
|
width: 96px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker-time__header {
|
||||||
|
font-weight: 700 !important;
|
||||||
|
color: #1f2937 !important;
|
||||||
|
font-size: 0.8125rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-list-item {
|
||||||
|
font-size: 0.8125rem !important;
|
||||||
|
color: #1f2937 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-list-item:hover {
|
||||||
|
background: #dcfce7 !important;
|
||||||
|
color: #15803d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-datepicker__time-list-item--selected {
|
||||||
|
background: #16a34a !important;
|
||||||
|
color: #fff !important;
|
||||||
|
font-weight: 700 !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,255 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Komponen pemilih tanggal & jam bersama — satu-satunya tempat aplikasi
|
||||||
|
* memakai `react-datepicker`. Semua field tanggal/jam (form & filter) harus
|
||||||
|
* lewat sini supaya tampilan + locale konsisten.
|
||||||
|
*
|
||||||
|
* - `DateField` → satu tanggal (controlled atau uncontrolled untuk form).
|
||||||
|
* - `DateRangeField` → rentang tanggal (berangkat–pulang, filter).
|
||||||
|
* - `TimeField` → jam "HH:mm" (itinerary).
|
||||||
|
*
|
||||||
|
* Tema visual di-override di `app/globals.css` (blok `.react-datepicker`).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import ReactDatePicker, { registerLocale } from "react-datepicker";
|
||||||
|
import { id as idLocale } from "date-fns/locale";
|
||||||
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
|
import {
|
||||||
|
formatLocalCalendarYmd,
|
||||||
|
localCalendarDateFromYmd,
|
||||||
|
} from "@/lib/trip-dates";
|
||||||
|
import { isValidTimeFormat } from "@/lib/itinerary";
|
||||||
|
|
||||||
|
registerLocale("id", idLocale);
|
||||||
|
|
||||||
|
const FIELD_CLS =
|
||||||
|
"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";
|
||||||
|
|
||||||
|
function CalendarIcon() {
|
||||||
|
return (
|
||||||
|
<span className="pointer-events-none 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ClockIcon() {
|
||||||
|
return (
|
||||||
|
<span className="pointer-events-none 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="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .284.16.544.415.67l3 1.5a.75.75 0 00.67-1.34L10.75 9.54V5z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DateFieldProps {
|
||||||
|
/** Mode controlled. Kalau `undefined`, komponen jalan uncontrolled. */
|
||||||
|
value?: Date | null;
|
||||||
|
/** Nilai awal untuk mode uncontrolled (mis. di dalam form GET/POST biasa). */
|
||||||
|
defaultValue?: Date | null;
|
||||||
|
/**
|
||||||
|
* Nilai awal uncontrolled berupa `YYYY-MM-DD`. Dipakai saat parent adalah
|
||||||
|
* Server Component (mis. filter admin) — string di-parse di browser supaya
|
||||||
|
* tidak ada pergeseran timezone server↔klien.
|
||||||
|
*/
|
||||||
|
defaultValueYmd?: string;
|
||||||
|
onChange?: (date: Date | null) => void;
|
||||||
|
/** Kalau diisi, render hidden input `YYYY-MM-DD` supaya ikut ter-submit form. */
|
||||||
|
name?: string;
|
||||||
|
id?: string;
|
||||||
|
minDate?: Date;
|
||||||
|
maxDate?: Date;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
required?: boolean;
|
||||||
|
/** Dropdown bulan + tahun — cocok untuk tanggal lahir. */
|
||||||
|
withMonthYearDropdown?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Pemilih satu tanggal. */
|
||||||
|
export function DateField({
|
||||||
|
value,
|
||||||
|
defaultValue = null,
|
||||||
|
defaultValueYmd,
|
||||||
|
onChange,
|
||||||
|
name,
|
||||||
|
id,
|
||||||
|
minDate,
|
||||||
|
maxDate,
|
||||||
|
placeholder = "Pilih tanggal...",
|
||||||
|
disabled = false,
|
||||||
|
required = false,
|
||||||
|
withMonthYearDropdown = false,
|
||||||
|
}: DateFieldProps) {
|
||||||
|
const isControlled = value !== undefined;
|
||||||
|
const [internal, setInternal] = useState<Date | null>(
|
||||||
|
() => (defaultValueYmd ? localCalendarDateFromYmd(defaultValueYmd) : defaultValue)
|
||||||
|
);
|
||||||
|
const current = isControlled ? value : internal;
|
||||||
|
|
||||||
|
function handleChange(date: Date | null) {
|
||||||
|
if (!isControlled) setInternal(date);
|
||||||
|
onChange?.(date);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default rentang masuk akal untuk picker bulan/tahun (mis. tanggal lahir).
|
||||||
|
const effectiveMin =
|
||||||
|
minDate ??
|
||||||
|
(withMonthYearDropdown
|
||||||
|
? new Date(new Date().getFullYear() - 120, 0, 1)
|
||||||
|
: undefined);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<CalendarIcon />
|
||||||
|
<ReactDatePicker
|
||||||
|
id={id}
|
||||||
|
selected={current ?? null}
|
||||||
|
onChange={handleChange}
|
||||||
|
locale="id"
|
||||||
|
dateFormat="dd MMM yyyy"
|
||||||
|
minDate={effectiveMin}
|
||||||
|
maxDate={maxDate}
|
||||||
|
disabled={disabled}
|
||||||
|
required={required}
|
||||||
|
placeholderText={placeholder}
|
||||||
|
isClearable={!required && !disabled}
|
||||||
|
showMonthDropdown={withMonthYearDropdown}
|
||||||
|
showYearDropdown={withMonthYearDropdown}
|
||||||
|
dropdownMode="select"
|
||||||
|
className={FIELD_CLS}
|
||||||
|
wrapperClassName="w-full"
|
||||||
|
/>
|
||||||
|
{name && (
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name={name}
|
||||||
|
value={current ? formatLocalCalendarYmd(current) : ""}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DateRangeFieldProps {
|
||||||
|
startDate: Date | null;
|
||||||
|
endDate: Date | null;
|
||||||
|
onChange: (start: Date | null, end: Date | null) => void;
|
||||||
|
minDate?: Date;
|
||||||
|
placeholder?: string;
|
||||||
|
id?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Pemilih rentang tanggal (berangkat–pulang, filter). */
|
||||||
|
export function DateRangeField({
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
onChange,
|
||||||
|
minDate,
|
||||||
|
placeholder = "Pilih tanggal...",
|
||||||
|
id,
|
||||||
|
}: DateRangeFieldProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<CalendarIcon />
|
||||||
|
<ReactDatePicker
|
||||||
|
id={id}
|
||||||
|
selectsRange
|
||||||
|
startDate={startDate}
|
||||||
|
endDate={endDate}
|
||||||
|
onChange={(dates) => {
|
||||||
|
const [start, end] = dates as [Date | null, Date | null];
|
||||||
|
onChange(start, end);
|
||||||
|
}}
|
||||||
|
locale="id"
|
||||||
|
dateFormat="dd MMM yyyy"
|
||||||
|
minDate={minDate}
|
||||||
|
isClearable
|
||||||
|
placeholderText={placeholder}
|
||||||
|
className={FIELD_CLS}
|
||||||
|
wrapperClassName="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeStringToDate(value: string): Date | null {
|
||||||
|
if (!isValidTimeFormat(value)) return null;
|
||||||
|
const [h, m] = value.split(":").map(Number);
|
||||||
|
const d = new Date();
|
||||||
|
d.setHours(h, m, 0, 0);
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dateToTimeString(d: Date): string {
|
||||||
|
const h = String(d.getHours()).padStart(2, "0");
|
||||||
|
const m = String(d.getMinutes()).padStart(2, "0");
|
||||||
|
return `${h}:${m}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TimeFieldProps {
|
||||||
|
/** Jam dalam format "HH:mm", atau "" kalau kosong. */
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
id?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
/** Tampilkan tombol clear (untuk jam opsional, mis. jam selesai). */
|
||||||
|
clearable?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Pemilih jam "HH:mm" 24-jam dengan interval 15 menit. */
|
||||||
|
export function TimeField({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
id,
|
||||||
|
placeholder = "--:--",
|
||||||
|
disabled = false,
|
||||||
|
clearable = false,
|
||||||
|
}: TimeFieldProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<ClockIcon />
|
||||||
|
<ReactDatePicker
|
||||||
|
id={id}
|
||||||
|
selected={timeStringToDate(value)}
|
||||||
|
onChange={(d: Date | null) => onChange(d ? dateToTimeString(d) : "")}
|
||||||
|
showTimeSelect
|
||||||
|
showTimeSelectOnly
|
||||||
|
timeIntervals={15}
|
||||||
|
timeCaption="Jam"
|
||||||
|
dateFormat="HH:mm"
|
||||||
|
timeFormat="HH:mm"
|
||||||
|
locale="id"
|
||||||
|
disabled={disabled}
|
||||||
|
isClearable={clearable && !disabled}
|
||||||
|
placeholderText={placeholder}
|
||||||
|
className={FIELD_CLS}
|
||||||
|
wrapperClassName="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import { DateField } from "@/components/shared/date-picker";
|
||||||
|
|
||||||
interface AdminFilterBarProps {
|
interface AdminFilterBarProps {
|
||||||
/** URL base (mis. `/admin/refunds`) yang menerima query params. */
|
/** URL base (mis. `/admin/refunds`) yang menerima query params. */
|
||||||
action: string;
|
action: string;
|
||||||
@@ -45,12 +47,11 @@ export function AdminFilterBar({
|
|||||||
>
|
>
|
||||||
Dari tanggal
|
Dari tanggal
|
||||||
</label>
|
</label>
|
||||||
<input
|
<DateField
|
||||||
id="filter-dateFrom"
|
id="filter-dateFrom"
|
||||||
name="dateFrom"
|
name="dateFrom"
|
||||||
type="date"
|
defaultValueYmd={values.dateFrom}
|
||||||
defaultValue={values.dateFrom ?? ""}
|
placeholder="Dari tanggal"
|
||||||
className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400 focus:bg-white"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -61,12 +62,11 @@ export function AdminFilterBar({
|
|||||||
>
|
>
|
||||||
Sampai tanggal
|
Sampai tanggal
|
||||||
</label>
|
</label>
|
||||||
<input
|
<DateField
|
||||||
id="filter-dateTo"
|
id="filter-dateTo"
|
||||||
name="dateTo"
|
name="dateTo"
|
||||||
type="date"
|
defaultValueYmd={values.dateTo}
|
||||||
defaultValue={values.dateTo ?? ""}
|
placeholder="Sampai tanggal"
|
||||||
className="w-full rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400 focus:bg-white"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { submitVerificationAction } from "@/features/organizer/actions";
|
import { submitVerificationAction } from "@/features/organizer/actions";
|
||||||
|
import { DateField } from "@/components/shared/date-picker";
|
||||||
|
|
||||||
type Initial = {
|
type Initial = {
|
||||||
fullName: string;
|
fullName: string;
|
||||||
@@ -21,23 +22,31 @@ type UploadKind = "ktp" | "liveness";
|
|||||||
const ACCEPT_MIME = "image/jpeg,image/png,image/webp";
|
const ACCEPT_MIME = "image/jpeg,image/png,image/webp";
|
||||||
const MAX_BYTES = 5 * 1024 * 1024;
|
const MAX_BYTES = 5 * 1024 * 1024;
|
||||||
|
|
||||||
function toYmd(d: Date): string {
|
|
||||||
const y = d.getUTCFullYear();
|
|
||||||
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
|
|
||||||
const day = String(d.getUTCDate()).padStart(2, "0");
|
|
||||||
return `${y}-${m}-${day}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function VerifyForm({ initial }: { initial: Initial }) {
|
export function VerifyForm({ initial }: { initial: Initial }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [ktpKey, setKtpKey] = useState(initial?.ktpImageKey ?? "");
|
const [ktpKey, setKtpKey] = useState(initial?.ktpImageKey ?? "");
|
||||||
const [livenessKey, setLivenessKey] = useState(initial?.livenessKey ?? "");
|
const [livenessKey, setLivenessKey] = useState(initial?.livenessKey ?? "");
|
||||||
|
// `birthDate` dari DB tersimpan sebagai tengah malam UTC — baca pakai getter
|
||||||
|
// UTC supaya hari kalender yang tampil di picker tidak bergeser.
|
||||||
|
const [birthDate, setBirthDate] = useState<Date | null>(
|
||||||
|
initial
|
||||||
|
? new Date(
|
||||||
|
initial.birthDate.getUTCFullYear(),
|
||||||
|
initial.birthDate.getUTCMonth(),
|
||||||
|
initial.birthDate.getUTCDate()
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setError("");
|
setError("");
|
||||||
|
if (!birthDate) {
|
||||||
|
setError("Tanggal lahir wajib diisi");
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!ktpKey || !livenessKey) {
|
if (!ktpKey || !livenessKey) {
|
||||||
setError("Foto KTP dan foto memegang kertas SETRIP wajib diunggah");
|
setError("Foto KTP dan foto memegang kertas SETRIP wajib diunggah");
|
||||||
return;
|
return;
|
||||||
@@ -102,15 +111,21 @@ export function VerifyForm({ initial }: { initial: Initial }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
<label
|
||||||
|
htmlFor="birthDate"
|
||||||
|
className="mb-1.5 block text-sm font-semibold text-neutral-700"
|
||||||
|
>
|
||||||
Tanggal Lahir
|
Tanggal Lahir
|
||||||
</label>
|
</label>
|
||||||
<input
|
<DateField
|
||||||
|
id="birthDate"
|
||||||
name="birthDate"
|
name="birthDate"
|
||||||
type="date"
|
value={birthDate}
|
||||||
|
onChange={setBirthDate}
|
||||||
|
maxDate={new Date()}
|
||||||
|
withMonthYearDropdown
|
||||||
required
|
required
|
||||||
defaultValue={initial ? toYmd(new Date(initial.birthDate)) : ""}
|
placeholder="Pilih tanggal lahir"
|
||||||
className={inputCls}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:col-span-2">
|
<div className="sm:col-span-2">
|
||||||
|
|||||||
@@ -2,8 +2,7 @@
|
|||||||
|
|
||||||
import { useMemo, useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import DatePicker from "react-datepicker";
|
import { DateRangeField, TimeField } from "@/components/shared/date-picker";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
|
||||||
import { createTripAction } from "@/features/trip/actions";
|
import { createTripAction } from "@/features/trip/actions";
|
||||||
import { ImageUrlInput } from "@/features/trip/components/image-url-input";
|
import { ImageUrlInput } from "@/features/trip/components/image-url-input";
|
||||||
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
|
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
|
||||||
@@ -885,40 +884,35 @@ function ItineraryBuilder({
|
|||||||
>
|
>
|
||||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-start">
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-start">
|
||||||
<div className="flex shrink-0 gap-2">
|
<div className="flex shrink-0 gap-2">
|
||||||
<div>
|
<div className="w-32">
|
||||||
<label className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
<label
|
||||||
|
htmlFor={`itin-${dayIdx}-${itemIdx}-start`}
|
||||||
|
className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
|
||||||
|
>
|
||||||
Mulai
|
Mulai
|
||||||
</label>
|
</label>
|
||||||
<input
|
<TimeField
|
||||||
type="time"
|
id={`itin-${dayIdx}-${itemIdx}-start`}
|
||||||
value={item.startTime}
|
value={item.startTime}
|
||||||
onChange={(e) =>
|
onChange={(v) =>
|
||||||
updateItem(
|
updateItem(dayIdx, itemIdx, "startTime", v)
|
||||||
dayIdx,
|
|
||||||
itemIdx,
|
|
||||||
"startTime",
|
|
||||||
e.target.value
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
className="w-30 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="w-32">
|
||||||
<label className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
|
<label
|
||||||
|
htmlFor={`itin-${dayIdx}-${itemIdx}-end`}
|
||||||
|
className="mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-neutral-500"
|
||||||
|
>
|
||||||
Selesai
|
Selesai
|
||||||
</label>
|
</label>
|
||||||
<input
|
<TimeField
|
||||||
type="time"
|
id={`itin-${dayIdx}-${itemIdx}-end`}
|
||||||
value={item.endTime}
|
value={item.endTime}
|
||||||
onChange={(e) =>
|
onChange={(v) =>
|
||||||
updateItem(
|
updateItem(dayIdx, itemIdx, "endTime", v)
|
||||||
dayIdx,
|
|
||||||
itemIdx,
|
|
||||||
"endTime",
|
|
||||||
e.target.value
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
className="w-30 rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-800 focus:border-primary-400"
|
clearable
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1021,36 +1015,12 @@ function StepSchedule({
|
|||||||
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
<label className="mb-1.5 block text-sm font-semibold text-neutral-700">
|
||||||
Tanggal berangkat — pulang
|
Tanggal berangkat — pulang
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<DateRangeField
|
||||||
<span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
|
startDate={startDate}
|
||||||
<svg
|
endDate={endDate}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
onChange={(s, e) => onDateChange(s, e)}
|
||||||
viewBox="0 0 20 20"
|
minDate={new Date()}
|
||||||
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={(dates) => {
|
|
||||||
const [s, e] = dates as [Date | null, Date | null];
|
|
||||||
onDateChange(s, e);
|
|
||||||
}}
|
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -2,9 +2,11 @@
|
|||||||
|
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import DatePicker from "react-datepicker";
|
import { DateRangeField } from "@/components/shared/date-picker";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import {
|
||||||
import { formatLocalCalendarYmd } from "@/lib/trip-dates";
|
formatLocalCalendarYmd,
|
||||||
|
localCalendarDateFromYmd,
|
||||||
|
} from "@/lib/trip-dates";
|
||||||
import {
|
import {
|
||||||
ACTIVITY_CATEGORIES,
|
ACTIVITY_CATEGORIES,
|
||||||
categoryMeta,
|
categoryMeta,
|
||||||
@@ -43,12 +45,14 @@ export function TripFilter() {
|
|||||||
isGroupSize(initialGroup) ? initialGroup : null
|
isGroupSize(initialGroup) ? initialGroup : null
|
||||||
);
|
);
|
||||||
const [query, setQuery] = useState(searchParams.get("q") ?? "");
|
const [query, setQuery] = useState(searchParams.get("q") ?? "");
|
||||||
const [startDate, setStartDate] = useState<Date | null>(
|
const [startDate, setStartDate] = useState<Date | null>(() => {
|
||||||
searchParams.get("from") ? new Date(searchParams.get("from")!) : null
|
const from = searchParams.get("from");
|
||||||
);
|
return from ? localCalendarDateFromYmd(from) : null;
|
||||||
const [endDate, setEndDate] = useState<Date | null>(
|
});
|
||||||
searchParams.get("to") ? new Date(searchParams.get("to")!) : null
|
const [endDate, setEndDate] = useState<Date | null>(() => {
|
||||||
);
|
const to = searchParams.get("to");
|
||||||
|
return to ? localCalendarDateFromYmd(to) : null;
|
||||||
|
});
|
||||||
|
|
||||||
function buildParams(overrides?: {
|
function buildParams(overrides?: {
|
||||||
category?: ActivityCategory | null;
|
category?: ActivityCategory | null;
|
||||||
@@ -287,33 +291,12 @@ export function TripFilter() {
|
|||||||
<label className="mb-1.5 block text-xs font-medium text-neutral-500">
|
<label className="mb-1.5 block text-xs font-medium text-neutral-500">
|
||||||
Tanggal
|
Tanggal
|
||||||
</label>
|
</label>
|
||||||
<div className="relative">
|
<DateRangeField
|
||||||
<span className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-neutral-400">
|
startDate={startDate}
|
||||||
<svg
|
endDate={endDate}
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
onChange={(start, end) => handleDateChange([start, end])}
|
||||||
viewBox="0 0 20 20"
|
minDate={new Date()}
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
{/* Buttons */}
|
{/* Buttons */}
|
||||||
|
|||||||
@@ -40,6 +40,20 @@ export function formatLocalCalendarYmd(d: Date): string {
|
|||||||
return `${y}-${m}-${day}`;
|
return `${y}-${m}-${day}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Kebalikan `formatLocalCalendarYmd`: `YYYY-MM-DD` → `Date` di tengah malam
|
||||||
|
* **lokal** browser. Dipakai untuk seed nilai awal date picker dari query
|
||||||
|
* string / DB tanpa pergeseran timezone. Return null kalau format tidak valid.
|
||||||
|
*/
|
||||||
|
export function localCalendarDateFromYmd(ymd: string): Date | null {
|
||||||
|
const parts = ymd.trim().slice(0, 10).split("-").map(Number);
|
||||||
|
const y = parts[0];
|
||||||
|
const m = parts[1];
|
||||||
|
const d = parts[2];
|
||||||
|
if (!y || !m || !d) return null;
|
||||||
|
return new Date(y, m - 1, d);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Simpan `trip.date` / `trip.endDate`: string `YYYY-MM-DD` diartikan sebagai
|
* Simpan `trip.date` / `trip.endDate`: string `YYYY-MM-DD` diartikan sebagai
|
||||||
* **hari kalender UTC** yang sama (selaras dengan filter Open Trip).
|
* **hari kalender UTC** yang sama (selaras dengan filter Open Trip).
|
||||||
|
|||||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "setrip",
|
"name": "setrip",
|
||||||
"version": "0.16.2",
|
"version": "0.16.3",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "setrip",
|
"name": "setrip",
|
||||||
"version": "0.16.2",
|
"version": "0.16.3",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@next-auth/prisma-adapter": "^1.0.7",
|
"@next-auth/prisma-adapter": "^1.0.7",
|
||||||
"@prisma/adapter-pg": "^7.7.0",
|
"@prisma/adapter-pg": "^7.7.0",
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "setrip",
|
"name": "setrip",
|
||||||
"version": "0.16.2",
|
"version": "0.16.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
Reference in New Issue
Block a user