alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
489 lines
16 KiB
TypeScript
489 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import type { ReactNode } from 'react'
|
|
|
|
import { useState } from 'react'
|
|
import { jalaaliMonthLength, toGregorian, toJalaali } from 'jalaali-js'
|
|
import Picker from 'react-mobile-picker'
|
|
import { Controller, useFormContext, type Control, type UseFormReturn } from 'react-hook-form'
|
|
|
|
import ConsumerModal from '@/components/consumer/ConsumerModal'
|
|
import ConsumerPickerTrigger from '@/components/events/create/ConsumerPickerTrigger'
|
|
import Button from '@/components/formElements/Button'
|
|
import AngleLeftIcon from '@/components/icons/AngleLeftIcon'
|
|
import CalendarEditIcon from '@/components/icons/CalendarEditIcon'
|
|
import CalendarIcon from '@/components/icons/CalendarIcon'
|
|
import ClockIcon from '@/components/icons/ClockIcon'
|
|
import CloseLinearIcon from '@/components/icons/CloseLinearIcon'
|
|
import TimeCircleIcon from '@/components/icons/TimeCircleIcon'
|
|
import { buildOutsideLabel } from '@/components/formElements/input/inputUtils'
|
|
import { texts } from '@/texts'
|
|
import { formatNumber } from '@/helpers'
|
|
import { cn } from '@/lib/cn'
|
|
|
|
const HOURS = Array.from({ length: 24 }, (_, index) => String(index))
|
|
const MINUTES = Array.from({ length: 60 }, (_, index) => String(index))
|
|
const MONTHS = Array.from({ length: 12 }, (_, index) => String(index + 1))
|
|
const PERSIAN_MONTHS = texts.common.jalaliMonths
|
|
|
|
export interface DatePickerValue {
|
|
day: string
|
|
month: string
|
|
year: string
|
|
[key: string]: string
|
|
}
|
|
|
|
export interface TimePickerValue {
|
|
hour: string
|
|
minute: string
|
|
[key: string]: string
|
|
}
|
|
|
|
type Variant = 'flat' | 'bordered' | 'faded' | 'underlined'
|
|
|
|
interface Props {
|
|
className?: string
|
|
/** RHF mode: pass control or render under FormProvider. */
|
|
control?: Control
|
|
description?: ReactNode
|
|
disabled?: boolean
|
|
/** Controlled mode (no RHF): inline error text. */
|
|
errorMessage?: string
|
|
kind: 'eventDatePicker' | 'eventTimePicker'
|
|
label?: string
|
|
minDate?: string
|
|
minValue?: number
|
|
name?: string
|
|
placeholder?: string
|
|
readonly?: boolean
|
|
required?: boolean
|
|
size?: 'sm' | 'md' | 'lg'
|
|
triggerStyle?: 'default' | 'consumer'
|
|
/** Controlled date ISO string or time minutes-of-day. */
|
|
value?: string | number
|
|
variant: Variant
|
|
onValueChange?: (value: string | number) => void
|
|
}
|
|
|
|
const toPersianNumber = (value: number | string) => formatNumber(Number(value))
|
|
const padTimePart = (value: number | string) => String(value).padStart(2, '0')
|
|
|
|
function validDateOrToday(value: unknown): Date {
|
|
if (typeof value === 'string' && value.trim()) {
|
|
const parsed = new Date(value)
|
|
|
|
if (Number.isFinite(parsed.getTime())) return parsed
|
|
}
|
|
|
|
return new Date()
|
|
}
|
|
|
|
export function getEventDatePickerValue(value: unknown): DatePickerValue {
|
|
const { jy, jm, jd } = toJalaali(validDateOrToday(value))
|
|
|
|
return { day: String(jd), month: String(jm), year: String(jy) }
|
|
}
|
|
|
|
export function eventDatePickerValueToIso(value: DatePickerValue, previousValue: unknown): string {
|
|
const previousDate = validDateOrToday(previousValue)
|
|
const fallbackYear = toJalaali(previousDate).jy
|
|
const year = Number(value.year) || fallbackYear
|
|
const month = Number(value.month)
|
|
const day = Math.min(Number(value.day), jalaaliMonthLength(year, month))
|
|
const { gy, gm, gd } = toGregorian(year, month, day)
|
|
|
|
return new Date(gy, gm - 1, gd).toISOString()
|
|
}
|
|
|
|
export function getEventTimePickerValue(value: unknown): TimePickerValue {
|
|
const minutes = typeof value === 'number' && Number.isFinite(value) ? Math.min(1439, Math.max(0, Math.floor(value))) : 0
|
|
|
|
return {
|
|
hour: String(Math.floor(minutes / 60)),
|
|
minute: String(minutes % 60),
|
|
}
|
|
}
|
|
|
|
function dateAtStartOfDay(value: unknown): Date {
|
|
const date = validDateOrToday(value)
|
|
|
|
date.setHours(0, 0, 0, 0)
|
|
|
|
return date
|
|
}
|
|
|
|
export function constrainEventDatePickerValue(value: unknown, minDate: unknown): DatePickerValue {
|
|
const minimum = dateAtStartOfDay(minDate)
|
|
const hasExplicitValue =
|
|
(typeof value === 'string' && value.trim() !== '') || (typeof value === 'number' && Number.isFinite(value)) || value instanceof Date
|
|
const current = hasExplicitValue ? dateAtStartOfDay(value) : minimum
|
|
|
|
return getEventDatePickerValue(current < minimum ? minimum.toISOString() : current.toISOString())
|
|
}
|
|
|
|
function pickerDateToTimestamp(value: DatePickerValue): number {
|
|
const { gy, gm, gd } = toGregorian(Number(value.year), Number(value.month), Number(value.day))
|
|
|
|
return new Date(gy, gm - 1, gd).setHours(0, 0, 0, 0)
|
|
}
|
|
|
|
function WheelItem({ value, label, distance, disabled = false }: { value: string; label: string; distance: number; disabled?: boolean }) {
|
|
return (
|
|
<Picker.Item
|
|
key={value}
|
|
aria-disabled={disabled}
|
|
className="flex items-center justify-center text-center"
|
|
data-disabled={disabled ? 'true' : undefined}
|
|
value={value}
|
|
>
|
|
{({ selected }) => (
|
|
<span
|
|
className={cn(
|
|
'font-medium leading-normal transition-all duration-150',
|
|
selected
|
|
? 'text-xl font-semibold text-consumer-text'
|
|
: distance === 1
|
|
? 'text-lg text-secondary-40'
|
|
: 'text-base text-secondary-40',
|
|
disabled && !selected && 'text-secondary-40'
|
|
)}
|
|
data-selected={selected ? 'true' : undefined}
|
|
>
|
|
{label}
|
|
</span>
|
|
)}
|
|
</Picker.Item>
|
|
)
|
|
}
|
|
|
|
export function DateWheel({
|
|
value,
|
|
minDate,
|
|
onChange,
|
|
}: {
|
|
value: DatePickerValue
|
|
minDate: Date
|
|
onChange: (value: DatePickerValue) => void
|
|
}) {
|
|
const minimum = getEventDatePickerValue(minDate.toISOString())
|
|
const selectedYear = Number(value.year)
|
|
const days = Array.from({ length: jalaaliMonthLength(selectedYear, Number(value.month)) }, (_, index) => String(index + 1))
|
|
|
|
const handleChange = (nextValue: DatePickerValue, key: string) => {
|
|
const month = Number(nextValue.month)
|
|
const year =
|
|
key === 'month' ? (month < Number(minimum.month) ? Number(minimum.year) + 1 : Number(minimum.year)) : Number(nextValue.year)
|
|
const maxDay = jalaaliMonthLength(year, month)
|
|
const minimumDay = year === Number(minimum.year) && month === Number(minimum.month) ? Number(minimum.day) : 1
|
|
|
|
onChange({
|
|
...nextValue,
|
|
day: String(Math.max(minimumDay, Math.min(Number(nextValue.day), maxDay))),
|
|
year: String(year),
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col gap-2"
|
|
dir="rtl"
|
|
>
|
|
<div className="grid grid-cols-[1fr_20px_1fr] text-center text-sm font-medium text-black">
|
|
<span>{texts.common.day}</span>
|
|
<span aria-hidden />
|
|
<span>{texts.common.month}</span>
|
|
</div>
|
|
<WheelFrame>
|
|
<Picker
|
|
className="consumer-wheel-picker"
|
|
height={216}
|
|
itemHeight={44}
|
|
value={value}
|
|
wheelMode="natural"
|
|
onChange={handleChange}
|
|
>
|
|
<Picker.Column name="day">
|
|
{days.map((day, index) => (
|
|
<WheelItem
|
|
key={day}
|
|
disabled={pickerDateToTimestamp({ ...value, day }) < minDate.getTime()}
|
|
distance={Math.abs(index - (Number(value.day) - 1))}
|
|
label={toPersianNumber(day)}
|
|
value={day}
|
|
/>
|
|
))}
|
|
</Picker.Column>
|
|
<div className="flex w-5 items-center justify-center text-xl font-semibold text-black">/</div>
|
|
<Picker.Column name="month">
|
|
{MONTHS.map((month, index) => (
|
|
<WheelItem
|
|
key={month}
|
|
distance={Math.abs(index - (Number(value.month) - 1))}
|
|
label={PERSIAN_MONTHS[Number(month) - 1]}
|
|
value={month}
|
|
/>
|
|
))}
|
|
</Picker.Column>
|
|
</Picker>
|
|
</WheelFrame>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function timePickerValueToMinutes(value: TimePickerValue): number {
|
|
return Number(value.hour) * 60 + Number(value.minute)
|
|
}
|
|
|
|
export function TimeWheel({
|
|
value,
|
|
minValue,
|
|
onChange,
|
|
}: {
|
|
value: TimePickerValue
|
|
minValue: number
|
|
onChange: (value: TimePickerValue) => void
|
|
}) {
|
|
const handleChange = (nextValue: TimePickerValue, key: string) => {
|
|
if (key === 'hour' && timePickerValueToMinutes(nextValue) < minValue) {
|
|
const minimum = getEventTimePickerValue(minValue)
|
|
|
|
onChange(Number(nextValue.hour) === Number(minimum.hour) ? minimum : nextValue)
|
|
|
|
return
|
|
}
|
|
|
|
onChange(nextValue)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col gap-2"
|
|
dir="ltr"
|
|
>
|
|
<div className="grid grid-cols-[1fr_20px_1fr] text-center text-sm font-medium text-black">
|
|
<span>{texts.common.hour}</span>
|
|
<span className="w-5" />
|
|
<span>{texts.common.minute}</span>
|
|
</div>
|
|
<WheelFrame>
|
|
<Picker
|
|
className="consumer-wheel-picker"
|
|
height={216}
|
|
itemHeight={44}
|
|
value={value}
|
|
wheelMode="natural"
|
|
onChange={handleChange}
|
|
>
|
|
<Picker.Column name="hour">
|
|
{HOURS.map((hour, index) => (
|
|
<WheelItem
|
|
key={hour}
|
|
disabled={Number(hour) * 60 + 59 < minValue}
|
|
distance={Math.abs(index - Number(value.hour))}
|
|
label={toPersianNumber(hour)}
|
|
value={hour}
|
|
/>
|
|
))}
|
|
</Picker.Column>
|
|
<div className="flex w-5 items-center justify-center text-xl font-semibold text-black">:</div>
|
|
<Picker.Column name="minute">
|
|
{MINUTES.map((minute, index) => (
|
|
<WheelItem
|
|
key={minute}
|
|
disabled={Number(value.hour) * 60 + Number(minute) < minValue}
|
|
distance={Math.abs(index - Number(value.minute))}
|
|
label={toPersianNumber(minute)}
|
|
value={minute}
|
|
/>
|
|
))}
|
|
</Picker.Column>
|
|
</Picker>
|
|
</WheelFrame>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function WheelFrame({ children }: { children: ReactNode }) {
|
|
return <div className="relative overflow-hidden">{children}</div>
|
|
}
|
|
|
|
function triggerClasses(size: Props['size'], variant: Variant, invalid: boolean) {
|
|
return cn(
|
|
'flex w-full items-center justify-between gap-3 px-3 text-right text-sm outline-none transition',
|
|
size === 'sm' ? 'h-9' : size === 'lg' ? 'h-12' : 'h-10',
|
|
variant === 'underlined' ? 'rounded-none border-b bg-transparent' : 'rounded-xl',
|
|
variant === 'bordered' && 'border bg-transparent',
|
|
variant === 'faded' && 'border bg-default-100',
|
|
variant === 'flat' && 'bg-default-100',
|
|
invalid ? 'border-fourth-900 text-fourth-900' : 'border-default-200 text-text-main',
|
|
'disabled:cursor-not-allowed disabled:opacity-50'
|
|
)
|
|
}
|
|
|
|
function useOptionalFormControl(controlProp?: Control): Control | null {
|
|
const context = useFormContext() as UseFormReturn | null
|
|
|
|
return controlProp ?? context?.control ?? null
|
|
}
|
|
|
|
function ScheduleFieldView({
|
|
value,
|
|
errorMessage,
|
|
onChange,
|
|
onBlur,
|
|
...props
|
|
}: Omit<Props, 'value' | 'onValueChange' | 'errorMessage' | 'control' | 'name'> & {
|
|
value: unknown
|
|
errorMessage?: string
|
|
onChange: (value: string | number) => void
|
|
onBlur?: () => void
|
|
}) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [dateDraft, setDateDraft] = useState<DatePickerValue>({ day: '1', month: '1', year: '1400' })
|
|
const [timeDraft, setTimeDraft] = useState<TimePickerValue>({ hour: '0', minute: '0' })
|
|
const isDate = props.kind === 'eventDatePicker'
|
|
const invalid = Boolean(errorMessage)
|
|
|
|
const openPicker = () => {
|
|
if (props.disabled || props.readonly) return
|
|
|
|
if (isDate) {
|
|
setDateDraft(constrainEventDatePickerValue(value, props.minDate))
|
|
} else {
|
|
const minimum = Math.min(1440, Math.max(0, props.minValue ?? 0))
|
|
const current = typeof value === 'number' ? value : minimum
|
|
|
|
setTimeDraft(getEventTimePickerValue(Math.max(current, minimum)))
|
|
}
|
|
setIsOpen(true)
|
|
}
|
|
|
|
const accept = () => {
|
|
if (isDate) {
|
|
onChange(eventDatePickerValueToIso(dateDraft, value))
|
|
} else {
|
|
onChange(Number(timeDraft.hour) * 60 + Number(timeDraft.minute))
|
|
}
|
|
onBlur?.()
|
|
setIsOpen(false)
|
|
}
|
|
|
|
let displayValue = ''
|
|
|
|
if (isDate && typeof value === 'string' && value.trim()) {
|
|
const selected = getEventDatePickerValue(value)
|
|
|
|
displayValue = `${toPersianNumber(selected.day)} ${PERSIAN_MONTHS[Number(selected.month) - 1]}`
|
|
} else if (!isDate && typeof value === 'number') {
|
|
const selected = getEventTimePickerValue(value)
|
|
|
|
displayValue = `${toPersianNumber(padTimePart(selected.hour))}:${toPersianNumber(padTimePart(selected.minute))}`
|
|
}
|
|
|
|
const minimumDate = dateAtStartOfDay(props.minDate)
|
|
const minimumTime = Math.min(1440, Math.max(0, props.minValue ?? 0))
|
|
const draftIsValid = isDate
|
|
? pickerDateToTimestamp(dateDraft) >= minimumDate.getTime()
|
|
: timePickerValueToMinutes(timeDraft) >= minimumTime
|
|
|
|
return (
|
|
<div className={cn('relative flex flex-col gap-1', props.className)}>
|
|
<div className={cn('labelClass flex items-center', invalid && '!text-fourth-900')}>
|
|
{buildOutsideLabel(props.label, isDate ? <CalendarIcon className="size-4" /> : <ClockIcon className="size-4" />, props.required, 0)}
|
|
</div>
|
|
{props.triggerStyle === 'consumer' ? (
|
|
<ConsumerPickerTrigger
|
|
aria-label={props.label ?? (isDate ? texts.common.selectDate : texts.common.selectTime)}
|
|
className={cn(invalid && 'ring-1 ring-danger')}
|
|
disabled={props.disabled}
|
|
onClick={openPicker}
|
|
>
|
|
<span className={displayValue ? undefined : 'text-tertiary-900/70'}>
|
|
{displayValue || props.placeholder || (isDate ? texts.common.selectDate : texts.common.selectTime)}
|
|
</span>
|
|
</ConsumerPickerTrigger>
|
|
) : (
|
|
<Button
|
|
fullWidth
|
|
aria-label={props.label ?? (isDate ? texts.common.selectDate : texts.common.selectTime)}
|
|
className={triggerClasses(props.size, props.variant, invalid)}
|
|
disabled={props.disabled}
|
|
variant="bordered"
|
|
onClick={openPicker}
|
|
>
|
|
<span className="flex w-full items-center justify-between gap-2">
|
|
<span className={displayValue ? undefined : 'text-default-400'}>{displayValue || props.placeholder}</span>
|
|
<span className="text-default-400">{isDate ? <CalendarIcon className="size-4" /> : <ClockIcon className="size-4" />}</span>
|
|
</span>
|
|
</Button>
|
|
)}
|
|
{errorMessage ? <p className="text-xs text-fourth-900">{errorMessage}</p> : null}
|
|
{props.description ? <p className="text-tiny text-default-500">{props.description}</p> : null}
|
|
|
|
<ConsumerModal
|
|
bodyClassName="overflow-hidden"
|
|
cancelIcon={isDate ? <CloseLinearIcon /> : <AngleLeftIcon />}
|
|
cancelLabel={isDate ? texts.common.cancel : texts.common.back}
|
|
isOpen={isOpen}
|
|
submitDisabled={!draftIsValid}
|
|
submitLabel="انتخاب"
|
|
title={props.label ?? (isDate ? texts.common.selectDate : texts.common.selectTime)}
|
|
titleIcon={isDate ? <CalendarEditIcon className="size-4" /> : <TimeCircleIcon className="size-4" />}
|
|
onOpenChange={setIsOpen}
|
|
onSubmit={accept}
|
|
>
|
|
{isDate ? (
|
|
<DateWheel
|
|
minDate={minimumDate}
|
|
value={dateDraft}
|
|
onChange={setDateDraft}
|
|
/>
|
|
) : (
|
|
<TimeWheel
|
|
minValue={minimumTime}
|
|
value={timeDraft}
|
|
onChange={setTimeDraft}
|
|
/>
|
|
)}
|
|
</ConsumerModal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function EventScheduleFieldControl(props: Props) {
|
|
const control = useOptionalFormControl(props.control)
|
|
|
|
if (props.onValueChange) {
|
|
return (
|
|
<ScheduleFieldView
|
|
{...props}
|
|
errorMessage={props.errorMessage}
|
|
value={props.value}
|
|
onChange={props.onValueChange}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (!control || !props.name) {
|
|
throw new Error('EventScheduleFieldControl needs FormProvider/control+name, or onValueChange')
|
|
}
|
|
|
|
return (
|
|
<Controller
|
|
control={control}
|
|
name={props.name}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<ScheduleFieldView
|
|
{...props}
|
|
errorMessage={error?.message}
|
|
value={field.value as string | number | undefined}
|
|
onBlur={field.onBlur}
|
|
onChange={(nextValue) => {
|
|
field.onChange(nextValue)
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
)
|
|
}
|