Merge branch 'fix/daily-checklist' into 'development'

[FIX/FE] Daily Checklist

See merge request mbugroup/lti-web-client!483

src/figma-make/components/base/date-picker.tsx

@@ -20,6 +20,7 @@ interface DatePickerProps {
   disabled?: boolean;
   placeholder?: string;
   formatDisplay?: (date: string) => string;
+  hasError?: boolean;
 }
 
 export function DatePicker({
@@ -28,6 +29,7 @@ export function DatePicker({
   disabled = false,
   placeholder = 'Select date',
   formatDisplay,
+  hasError = false,
 }: DatePickerProps) {
   const [open, setOpen] = useState(false);
   const [currentMonth, setCurrentMonth] = useState(() => {
@@ -154,7 +156,7 @@ export function DatePicker({
         <Button
           variant='outline'
           disabled={disabled}
-          className='w-full justify-start text-left font-normal border-gray-200 hover:bg-gray-50'
+          className={`w-full justify-start text-left font-normal hover:bg-gray-50 ${hasError ? 'border-red-500 focus:ring-red-500' : 'border-gray-200'}`}
         >
           <CalendarIcon className='mr-2 h-4 w-4 text-gray-500' />
           {date ? (

src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx

@@ -181,6 +181,8 @@ export function DailyChecklistContent() {
   const [initialLoading, setInitialLoading] = useState(!!checklistIdFromUrl);
 
   const [emptyKandangEndDate, setEmptyKandangEndDate] = useState<string>('');
+  const [emptyKandangEndDateError, setEmptyKandangEndDateError] =
+    useState<string>('');
 
   const [existingDocuments, setExistingDocuments] = useState<Document[]>([]);
   const [documents, setDocuments] = useState<File[]>([]);
@@ -788,6 +790,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (emptyKandang && !emptyKandangEndDate) {
+      setEmptyKandangEndDateError('Tanggal akhir kandang kosong wajib diisi');
+      return;
+    }
+
     setIsLoadingDraft(true);
 
     try {
@@ -865,6 +872,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (emptyKandang && !emptyKandangEndDate) {
+      setEmptyKandangEndDateError('Tanggal akhir kandang kosong wajib diisi');
+      return;
+    }
+
     if (!isKandangEmpty) {
       if (selectedEmployees.length === 0) {
         toast.error('Pilih minimal 1 ABK');
@@ -1224,11 +1236,20 @@ export function DailyChecklistContent() {
                     <div className='mt-1.5'>
                       <DatePicker
                         date={emptyKandangEndDate}
-                        onDateChange={setEmptyKandangEndDate}
+                        onDateChange={(val) => {
+                          setEmptyKandangEndDate(val);
+                          if (val) setEmptyKandangEndDateError('');
+                        }}
                         disabled={!isChecklistStatusDraft}
                         placeholder='Pilih tanggal'
                         formatDisplay={formatDateForDisplay}
+                        hasError={!!emptyKandangEndDateError}
                       />
+                      {emptyKandangEndDateError && (
+                        <p className='text-xs text-red-500 mt-1'>
+                          {emptyKandangEndDateError}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>