fix revision add datatable and date picker

src/pages/CostRecommendation.tsx

@@ -15,6 +15,8 @@ import {
   Code,
   Stethoscope,
 } from "lucide-react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 
 interface CostRecommendation {
   id: string;
@@ -795,9 +797,11 @@ export default function CostRecommendation() {
   const [error, setError] = useState<string | null>(null);
   const [results, setResults] = useState<ICDRecommendation[]>([]);
   const [visitType, setVisitType] = useState("Kontrol Rutin");
-  const [lastVisitDate, setLastVisitDate] = useState("");
-  const [currentVisitDate, setCurrentVisitDate] = useState(() =>
-    new Date().toISOString().slice(0, 10)
+  const [lastVisitDate, setLastVisitDate] = useState<Date | undefined>(
+    undefined
+  );
+  const [currentVisitDate, setCurrentVisitDate] = useState<Date | undefined>(
+    new Date()
   );
 
   type BpjsMapping = {
@@ -857,12 +861,11 @@ export default function CostRecommendation() {
     mapping: BpjsMapping;
   }[];
 
-  const getDaysBetween = (a: string, b: string) => {
+  const getDaysBetween = (a: Date | undefined, b: Date | undefined) => {
     try {
-      const da = new Date(a + "T00:00:00");
-      const db = new Date(b + "T00:00:00");
+      if (!a || !b) return null;
       const diff = Math.floor(
-        (db.getTime() - da.getTime()) / (1000 * 60 * 60 * 24)
+        (b.getTime() - a.getTime()) / (1000 * 60 * 60 * 24)
       );
       return isNaN(diff) ? null : Math.max(diff, 0);
     } catch {
@@ -1038,24 +1041,33 @@ export default function CostRecommendation() {
               </div>
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Tanggal Kunjungan Terakhir
+                  Tanggal Kunjungan Terakhir{" "}
+                  <span className="text-red-500">*</span>
                 </label>
-                <input
-                  type="date"
-                  value={lastVisitDate}
-                  onChange={(e) => setLastVisitDate(e.target.value)}
+                <DatePicker
+                  selected={lastVisitDate}
+                  onChange={(date) => setLastVisitDate(date || undefined)}
+                  placeholderText="Pilih tanggal kunjungan terakhir"
                   className="w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent p-3"
+                  dateFormat="dd MMM yyyy"
+                  maxDate={new Date()}
+                  required
                 />
               </div>
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Tanggal Kunjungan Saat Ini
+                  Tanggal Kunjungan Saat Ini{" "}
+                  <span className="text-red-500">*</span>
                 </label>
-                <input
-                  type="date"
-                  value={currentVisitDate}
-                  onChange={(e) => setCurrentVisitDate(e.target.value)}
+                <DatePicker
+                  selected={currentVisitDate}
+                  onChange={(date) => setCurrentVisitDate(date || undefined)}
+                  placeholderText="Pilih tanggal kunjungan saat ini"
                   className="w-full rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent p-3"
+                  dateFormat="dd MMM yyyy"
+                  maxDate={new Date()}
+                  minDate={lastVisitDate}
+                  required
                 />
               </div>
             </div>
@@ -1075,7 +1087,12 @@ export default function CostRecommendation() {
             <div className="flex items-center space-x-3">
               <button
                 onClick={handleGenerate}
-                disabled={isLoading || (!diagnosis && !procedure)}
+                disabled={
+                  isLoading ||
+                  (!diagnosis && !procedure) ||
+                  !lastVisitDate ||
+                  !currentVisitDate
+                }
                 className="btn-primary flex items-center space-x-2 disabled:opacity-60"
               >
                 <Search className="h-4 w-4" />