FactuGES_ERP/packages/rdx-ui/src/components/form/DatePickerField.tsx

// DatePickerField.tsx

import {
  Button,
  Calendar,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@repo/shadcn-ui/components";
import { CalendarIcon, LockIcon } from "lucide-react";

import { cn } from "@repo/shadcn-ui/lib/utils";
import { format } from "date-fns";
import { Control, FieldPath, FieldValues } from "react-hook-form";
import { useTranslation } from "../../locales/i18n.ts";

type DatePickerFieldProps<TFormValues extends FieldValues> = {
  control: Control<TFormValues>;
  name: FieldPath<TFormValues>;
  label?: string;
  placeholder?: string;
  description?: string;
  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;
  className?: string;
  formatDateFn?: (iso: string) => string;
};

export function DatePickerField<TFormValues extends FieldValues>({
  control,
  name,
  label,
  placeholder,
  description,
  disabled = false,
  required = false,
  readOnly = false,
  className,
  formatDateFn = (iso) => format(new Date(iso), "dd/MM/yyyy"),
}: DatePickerFieldProps<TFormValues>) {
  const { t } = useTranslation();
  const isDisabled = disabled || readOnly;

  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem className={cn("space-y-0", className)}>
          {label && (
            <div className='flex justify-between items-center'>
              <FormLabel className='m-0'>{label}</FormLabel>
              {required && <span className='text-xs text-destructive'>{t("common.required")}</span>}
            </div>
          )}
          <Popover>
            <PopoverTrigger asChild>
              <FormControl>
                <Button
                  variant='outline'
                  disabled={isDisabled}
                  className={cn(
                    "w-full justify-start text-left font-normal",
                    !field.value && "text-muted-foreground",
                    disabled && "bg-muted text-muted-foreground cursor-not-allowed",
                    readOnly && !disabled && "bg-muted text-foreground cursor-default"
                  )}
                >
                  {readOnly ? (
                    <LockIcon className='mr-2 h-4 w-4 opacity-70' />
                  ) : (
                    <CalendarIcon className='mr-2 h-4 w-4' />
                  )}
                  {field.value ? formatDateFn(field.value) : placeholder}
                </Button>
              </FormControl>
            </PopoverTrigger>
            <PopoverContent className='w-auto p-0'>
              <Calendar
                mode='single'
                selected={field.value ? new Date(field.value) : undefined}
                onSelect={(date) => {
                  if (!readOnly) {
                    field.onChange(date?.toISOString());
                  }
                }}
                initialFocus
              />
            </PopoverContent>
          </Popover>

          <p className={cn("text-xs text-muted-foreground", !description && "invisible")}>
            {description || "\u00A0"}
          </p>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}