akfatimeline 1.2.0 → 2.0.0

package/dist/Timeline.js

@@ -3015,7 +3015,7 @@ var update = injectStylesIntoStyleTag_default()(Timeline/* default */.A, options
 
        /* harmony default export */ const Timeline_Timeline = (Timeline/* default */.A && Timeline/* default */.A.locals ? Timeline/* default */.A.locals : undefined);
 
-;// ./src/components/Timeline/MasterHeader.js
+;// ./src/components/Timeline/MasterHeader.jsx
 
 
 const MasterHeader = _ref => {
@@ -3098,8 +3098,8 @@ const MasterHeader = _ref => {
   }, "+")));
 };
 /* harmony default export */ const Timeline_MasterHeader = (MasterHeader);
-;// ./src/components/Timeline/ResourcesHeader.js
-// ResourcesHeader.js
+;// ./src/components/Timeline/ResourcesHeader.jsx
+// ResourcesHeader.jsx
 
 
 const ResourcesHeader = _ref => {
@@ -3111,7 +3111,7 @@ const ResourcesHeader = _ref => {
   }, content);
 };
 /* harmony default export */ const Timeline_ResourcesHeader = (ResourcesHeader);
-;// ./src/components/Timeline/Resources.js
+;// ./src/components/Timeline/Resources.jsx
 
 const Resources = _ref => {
   let {
@@ -3192,7 +3192,7 @@ const isDateInRange = (date, startDate, endDate) => {
   const end = parseDate(endDate);
   return d >= start && d <= end;
 };
-;// ./src/components/Timeline/TimelineHeader.js
+;// ./src/components/Timeline/TimelineHeader.jsx
 
  // CSS dosyasını import etmeyi unutma
 
@@ -3413,7 +3413,7 @@ const useEventDragDrop = (events, setEvents, setDropInfo) => {
   };
 };
 /* harmony default export */ const hooks_useEventDragDrop = (useEventDragDrop);
-;// ./src/components/Timeline/Indicator.js
+;// ./src/components/Timeline/Indicator.jsx
 
 const Indicator = _ref => {
   let {
@@ -3442,7 +3442,7 @@ const Indicator = _ref => {
   });
 };
 /* harmony default export */ const Timeline_Indicator = (Indicator);
-;// ./src/components/Timeline/EventIcon.js
+;// ./src/components/Timeline/EventIcon.jsx
 
 
 
@@ -3498,7 +3498,7 @@ const EventIcon = _ref => {
   }, iconContent);
 };
 /* harmony default export */ const Timeline_EventIcon = (EventIcon);
-;// ./src/components/Timeline/EventBadge.js
+;// ./src/components/Timeline/EventBadge.jsx
 
 
 
@@ -3522,7 +3522,7 @@ const EventBadge = _ref => {
   }, text);
 };
 /* harmony default export */ const Timeline_EventBadge = (EventBadge);
-;// ./src/components/Timeline/ContextMenu.js
+;// ./src/components/Timeline/ContextMenu.jsx
 
 
 
@@ -3658,7 +3658,7 @@ const ContextMenu = _ref => {
   })));
 };
 /* harmony default export */ const Timeline_ContextMenu = (ContextMenu);
-;// ./src/components/Timeline/TimelineContent.js
+;// ./src/components/Timeline/TimelineContent.jsx
 function TimelineContent_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function TimelineContent_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? TimelineContent_ownKeys(Object(t), !0).forEach(function (r) { TimelineContent_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : TimelineContent_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function TimelineContent_defineProperty(e, r, t) { return (r = TimelineContent_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -3973,7 +3973,7 @@ const TimelineContent = _ref => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [createNewEventOn, isCreating, mode, tempEvent, events, onCreateEventInfo, setEvents]);
+  }, [createNewEventOn, isCreating, mode, tempEvent, events, onCreateEventInfo, setEvents, totalDays, dates, preventPastEvents, minDate]);
 
   // ------------------- Drag Logic -------------------
   const handleDragStartSafe = (e, eventId) => {
@@ -4402,8 +4402,8 @@ const TimelineContent = _ref => {
   })));
 };
 /* harmony default export */ const Timeline_TimelineContent = (TimelineContent);
-;// ./src/components/Timeline/EventTooltip.js
-// src/components/Timeline/EventTooltip.js
+;// ./src/components/Timeline/EventTooltip.jsx
+// src/components/Timeline/EventTooltip.jsx
 
 const EventTooltip = _ref => {
   let {
@@ -4571,7 +4571,7 @@ const EventTooltip = _ref => {
   }, "\uD83D\uDDD1\uFE0F"), "Sil")));
 };
 /* harmony default export */ const Timeline_EventTooltip = (EventTooltip);
-;// ./src/components/Timeline/EventDetailModal.js
+;// ./src/components/Timeline/EventDetailModal.jsx
 function EventDetailModal_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function EventDetailModal_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? EventDetailModal_ownKeys(Object(t), !0).forEach(function (r) { EventDetailModal_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : EventDetailModal_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function EventDetailModal_defineProperty(e, r, t) { return (r = EventDetailModal_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -4694,7 +4694,7 @@ const EventDetailModal = _ref => {
   }, "Kaydet"))))));
 };
 /* harmony default export */ const Timeline_EventDetailModal = (EventDetailModal);
-;// ./src/components/Timeline/DailyView.js
+;// ./src/components/Timeline/DailyView.jsx
 function DailyView_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function DailyView_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? DailyView_ownKeys(Object(t), !0).forEach(function (r) { DailyView_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : DailyView_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function DailyView_defineProperty(e, r, t) { return (r = DailyView_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -5322,7 +5322,7 @@ const useEventManagement = function () {
   };
 };
 /* harmony default export */ const hooks_useEventManagement = (useEventManagement);
-;// ./src/components/Timeline/Timeline.js
+;// ./src/components/Timeline/Timeline.jsx
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function Timeline_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function Timeline_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? Timeline_ownKeys(Object(t), !0).forEach(function (r) { Timeline_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Timeline_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -5868,38 +5868,6 @@ const Timeline_Timeline_Timeline = _ref => {
       }
     },
     themeType: themeType
-  }), dailyViewOn && /*#__PURE__*/external_react_default().createElement(Timeline_DailyView, {
-    isOpen: dailyView.isOpen,
-    onClose: () => setDailyView({
-      isOpen: false,
-      resource: null,
-      date: null
-    }),
-    resource: dailyView.resource,
-    date: dailyView.date,
-    events: localEvents,
-    onEventCreate: newEvent => {
-      const updatedEvents = [...localEvents, newEvent];
-      setLocalEvents(updatedEvents);
-      if (onEventUpdate) {
-        onEventUpdate(updatedEvents);
-      }
-    },
-    onEventUpdate: updatedEvent => {
-      const updatedEvents = localEvents.map(e => e.id === updatedEvent.id ? updatedEvent : e);
-      setLocalEvents(updatedEvents);
-      if (onEventUpdate) {
-        onEventUpdate(updatedEvents);
-      }
-    },
-    onEventDelete: eventId => {
-      const updatedEvents = localEvents.filter(e => e.id !== eventId);
-      setLocalEvents(updatedEvents);
-      if (onEventUpdate) {
-        onEventUpdate(updatedEvents);
-      }
-    },
-    themeType: themeType
   }));
 };
 /* harmony default export */ const components_Timeline_Timeline = (Timeline_Timeline_Timeline);

package/{src/components/Timeline/DailyView.js → dist/components/Timeline/DailyView.jsx}

@@ -253,3 +253,4 @@ const DailyView = ({
 };
 
 export default DailyView;
+

package/{src/components/Timeline/EventTooltip.js → dist/components/Timeline/EventTooltip.jsx}

@@ -1,206 +1,207 @@
-// src/components/Timeline/EventTooltip.js
-import React from "react";
-
-const EventTooltip = ({ event, position = { top: 0, left: 0 }, onClose, onEdit, onDelete }) => {
-  if (!event) return null;
-
-  const { top, left } = position;
-
-  // Rezervasyon durumuna göre renk belirleme
-  const getStatusColor = (status) => {
-    switch (status) {
-      case "Confirmed":
-        return "#4caf50"; // Yeşil
-      case "Pending":
-        return "#ff9800"; // Turuncu
-      case "Cancelled":
-        return "#f44336"; // Kırmızı
-      case "Completed":
-        return "#2196f3"; // Mavi
-      default:
-        return "#9e9e9e"; // Gri
-    }
-  };
-
-  const statusColor = getStatusColor(event.status);
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: top - 200, // Tooltip'in biraz yukarıda görünmesi için
-        left: left + 70,
-        transform: "translateX(-50%)",
-        backgroundColor: "#ffffff",
-        color: "#333333",
-        borderRadius: "10px",
-        boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
-        fontSize: "16px",
-        zIndex: 1000,
-        pointerEvents: "auto", // Tooltip'in tıklanabilir olmasını sağlar
-        whiteSpace: "normal",
-        maxWidth: "400px",
-        width: "100%",
-        transition: "opacity 0.3s ease, transform 0.3s ease",
-      }}
-    >
-      {/* Kapatma Butonu */}
-      {onClose && (
-        <button
-          onClick={onClose}
-          style={{
-            position: "absolute",
-            top: "10px",
-            right: "15px",
-            background: "transparent",
-            border: "none",
-            color: "#aaa",
-            fontSize: "24px",
-            cursor: "pointer",
-            transition: "color 0.2s",
-          }}
-          aria-label="Kapat"
-          onMouseOver={(e) => (e.target.style.color = "#000")}
-          onMouseOut={(e) => (e.target.style.color = "#aaa")}
-        >
-          &times;
-        </button>
-      )}
-
-      {/* Header */}
-      <div
-        style={{
-          backgroundColor: statusColor,
-          color: "#ffffff",
-          padding: "15px 20px",
-          borderTopLeftRadius: "10px",
-          borderTopRightRadius: "10px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "5px",
-        }}
-      >
-        <div style={{ fontWeight: "bold", fontSize: "18px" }}>{event.title}</div>
-        <div style={{ fontSize: "14px" }}>Rezervasyon ID: {event.reservationId}</div>
-      </div>
-
-      {/* İçerik */}
-      <div style={{ padding: "20px", display: "flex", flexDirection: "column", gap: "15px" }}>
-  {/* Misafirler */}
-  {Array.isArray(event.guestNames) && (
-    <div>
-      <strong>Misafirler:</strong> {event.guestNames.join(", ")}
-    </div>
-  )}
-
-  {/* Giriş ve Çıkış Tarihleri */}
-  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px" }}>
-    <div>
-      <strong>Giriş:</strong> {new Date(event.startDate).toLocaleDateString()}
-    </div>
-    <div>
-      <strong>Çıkış:</strong> {new Date(event.endDate).toLocaleDateString()}
-    </div>
-  </div>
-
-  {/* Ödeme Bilgileri */}
-  {(event.totalAmount !== undefined || event.amountPaid !== undefined) && (
-    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px" }}>
-      {event.amountPaid !== undefined && (
-        <div>
-          <strong>Ödenen Miktar:</strong> ${event.amountPaid.toFixed(2)}
-        </div>
-      )}
-      {event.totalAmount !== undefined && (
-        <div>
-          <strong>Toplam Borç:</strong> ${event.totalAmount.toFixed(2)}
-        </div>
-      )}
-    </div>
-  )}
-
-  {/* Rezervasyon Durumu */}
-  {event.status && (
-    <div>
-      <strong>Durum:</strong> {event.status}
-    </div>
-  )}
-
-  {/* Rezervasyon Notu */}
-  {event.note && (
-    <div>
-      <strong>Not:</strong> {event.note}
-    </div>
-  )}
-</div>
-
-
-      {/* Footer */}
-      <div
-        style={{
-          padding: "15px 20px",
-          borderTop: "1px solid #ddd",
-          display: "flex",
-          justifyContent: "flex-end",
-          gap: "10px",
-          borderBottomLeftRadius: "10px",
-          borderBottomRightRadius: "10px",
-        }}
-      >
-        {/* Düzenle Butonu */}
-        {onEdit && (
-          <button
-            onClick={() => onEdit(event)}
-            style={{
-              padding: "8px 16px",
-              backgroundColor: "#2196f3",
-              color: "#ffffff",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer",
-              fontSize: "14px",
-              display: "flex",
-              alignItems: "center",
-              gap: "5px",
-              transition: "background-color 0.2s",
-            }}
-            onMouseOver={(e) => (e.target.style.backgroundColor = "#1976d2")}
-            onMouseOut={(e) => (e.target.style.backgroundColor = "#2196f3")}
-          >
-            {/* Düzenle İkonu */}
-            <span role="img" aria-label="Düzenle">✏️</span>
-            Düzenle
-          </button>
-        )}
-
-        {/* Sil Butonu */}
-        {onDelete && (
-          <button
-            onClick={() => onDelete(event.id)}
-            style={{
-              padding: "8px 16px",
-              backgroundColor: "#f44336",
-              color: "#ffffff",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer",
-              fontSize: "14px",
-              display: "flex",
-              alignItems: "center",
-              gap: "5px",
-              transition: "background-color 0.2s",
-            }}
-            onMouseOver={(e) => (e.target.style.backgroundColor = "#d32f2f")}
-            onMouseOut={(e) => (e.target.style.backgroundColor = "#f44336")}
-          >
-            {/* Sil İkonu */}
-            <span role="img" aria-label="Sil">🗑️</span>
-            Sil
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default EventTooltip;
+// src/components/Timeline/EventTooltip.jsx
+import React from "react";
+
+const EventTooltip = ({ event, position = { top: 0, left: 0 }, onClose, onEdit, onDelete }) => {
+  if (!event) return null;
+
+  const { top, left } = position;
+
+  // Rezervasyon durumuna göre renk belirleme
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "Confirmed":
+        return "#4caf50"; // Yeşil
+      case "Pending":
+        return "#ff9800"; // Turuncu
+      case "Cancelled":
+        return "#f44336"; // Kırmızı
+      case "Completed":
+        return "#2196f3"; // Mavi
+      default:
+        return "#9e9e9e"; // Gri
+    }
+  };
+
+  const statusColor = getStatusColor(event.status);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: top - 200, // Tooltip'in biraz yukarıda görünmesi için
+        left: left + 70,
+        transform: "translateX(-50%)",
+        backgroundColor: "#ffffff",
+        color: "#333333",
+        borderRadius: "10px",
+        boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
+        fontSize: "16px",
+        zIndex: 1000,
+        pointerEvents: "auto", // Tooltip'in tıklanabilir olmasını sağlar
+        whiteSpace: "normal",
+        maxWidth: "400px",
+        width: "100%",
+        transition: "opacity 0.3s ease, transform 0.3s ease",
+      }}
+    >
+      {/* Kapatma Butonu */}
+      {onClose && (
+        <button
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            top: "10px",
+            right: "15px",
+            background: "transparent",
+            border: "none",
+            color: "#aaa",
+            fontSize: "24px",
+            cursor: "pointer",
+            transition: "color 0.2s",
+          }}
+          aria-label="Kapat"
+          onMouseOver={(e) => (e.target.style.color = "#000")}
+          onMouseOut={(e) => (e.target.style.color = "#aaa")}
+        >
+          &times;
+        </button>
+      )}
+
+      {/* Header */}
+      <div
+        style={{
+          backgroundColor: statusColor,
+          color: "#ffffff",
+          padding: "15px 20px",
+          borderTopLeftRadius: "10px",
+          borderTopRightRadius: "10px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "5px",
+        }}
+      >
+        <div style={{ fontWeight: "bold", fontSize: "18px" }}>{event.title}</div>
+        <div style={{ fontSize: "14px" }}>Rezervasyon ID: {event.reservationId}</div>
+      </div>
+
+      {/* İçerik */}
+      <div style={{ padding: "20px", display: "flex", flexDirection: "column", gap: "15px" }}>
+  {/* Misafirler */}
+  {Array.isArray(event.guestNames) && (
+    <div>
+      <strong>Misafirler:</strong> {event.guestNames.join(", ")}
+    </div>
+  )}
+
+  {/* Giriş ve Çıkış Tarihleri */}
+  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px" }}>
+    <div>
+      <strong>Giriş:</strong> {new Date(event.startDate).toLocaleDateString()}
+    </div>
+    <div>
+      <strong>Çıkış:</strong> {new Date(event.endDate).toLocaleDateString()}
+    </div>
+  </div>
+
+  {/* Ödeme Bilgileri */}
+  {(event.totalAmount !== undefined || event.amountPaid !== undefined) && (
+    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px" }}>
+      {event.amountPaid !== undefined && (
+        <div>
+          <strong>Ödenen Miktar:</strong> ${event.amountPaid.toFixed(2)}
+        </div>
+      )}
+      {event.totalAmount !== undefined && (
+        <div>
+          <strong>Toplam Borç:</strong> ${event.totalAmount.toFixed(2)}
+        </div>
+      )}
+    </div>
+  )}
+
+  {/* Rezervasyon Durumu */}
+  {event.status && (
+    <div>
+      <strong>Durum:</strong> {event.status}
+    </div>
+  )}
+
+  {/* Rezervasyon Notu */}
+  {event.note && (
+    <div>
+      <strong>Not:</strong> {event.note}
+    </div>
+  )}
+</div>
+
+
+      {/* Footer */}
+      <div
+        style={{
+          padding: "15px 20px",
+          borderTop: "1px solid #ddd",
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "10px",
+          borderBottomLeftRadius: "10px",
+          borderBottomRightRadius: "10px",
+        }}
+      >
+        {/* Düzenle Butonu */}
+        {onEdit && (
+          <button
+            onClick={() => onEdit(event)}
+            style={{
+              padding: "8px 16px",
+              backgroundColor: "#2196f3",
+              color: "#ffffff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "14px",
+              display: "flex",
+              alignItems: "center",
+              gap: "5px",
+              transition: "background-color 0.2s",
+            }}
+            onMouseOver={(e) => (e.target.style.backgroundColor = "#1976d2")}
+            onMouseOut={(e) => (e.target.style.backgroundColor = "#2196f3")}
+          >
+            {/* Düzenle İkonu */}
+            <span role="img" aria-label="Düzenle">✏️</span>
+            Düzenle
+          </button>
+        )}
+
+        {/* Sil Butonu */}
+        {onDelete && (
+          <button
+            onClick={() => onDelete(event.id)}
+            style={{
+              padding: "8px 16px",
+              backgroundColor: "#f44336",
+              color: "#ffffff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "14px",
+              display: "flex",
+              alignItems: "center",
+              gap: "5px",
+              transition: "background-color 0.2s",
+            }}
+            onMouseOver={(e) => (e.target.style.backgroundColor = "#d32f2f")}
+            onMouseOut={(e) => (e.target.style.backgroundColor = "#f44336")}
+          >
+            {/* Sil İkonu */}
+            <span role="img" aria-label="Sil">🗑️</span>
+            Sil
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EventTooltip;
+

package/{src/components/Timeline/Indicator.js → dist/components/Timeline/Indicator.jsx}

@@ -1,26 +1,27 @@
-import React from "react";
-
-const Indicator = ({ todayIndex, totalDays }) => {
-  if (todayIndex < 0 || todayIndex >= totalDays) {
-    return null; // Bugün timeline dışında ise çizgiyi gösterme
-  }
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: 0,
-        left: `calc(${(todayIndex + 0.5) / totalDays} * 100%)`, // Günün ortasına yerleştirmek için +0.5
-        width: "2px",
-        height: "100%",
-        backgroundColor: "transparent",
-        zIndex: 5,
-        borderStyle: "dashed", // Kesikli çizgi için
-        borderWidth: "0 0 0 2px", // Sadece sol tarafa kesikli çizgi
-        borderColor: "red",
-      }}
-    ></div>
-  );
-};
-
-export default Indicator;
+import React from "react";
+
+const Indicator = ({ todayIndex, totalDays }) => {
+  if (todayIndex < 0 || todayIndex >= totalDays) {
+    return null; // Bugün timeline dışında ise çizgiyi gösterme
+  }
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: `calc(${(todayIndex + 0.5) / totalDays} * 100%)`, // Günün ortasına yerleştirmek için +0.5
+        width: "2px",
+        height: "100%",
+        backgroundColor: "transparent",
+        zIndex: 5,
+        borderStyle: "dashed", // Kesikli çizgi için
+        borderWidth: "0 0 0 2px", // Sadece sol tarafa kesikli çizgi
+        borderColor: "red",
+      }}
+    ></div>
+  );
+};
+
+export default Indicator;
+