akfatimeline 1.0.4 → 1.0.5

package/dist/dist/components/Timeline/DatePickerComponent.js

@@ -0,0 +1,17 @@
+import React, { useRef, useEffect } from "react";
+import flatpickr from "flatpickr";
+import "flatpickr/dist/themes/material_green.css"; // Tema
+
+const DatePickerComponent = ({ onDateSelect }) => {
+  const pickerRef = useRef();
+
+  useEffect(() => {
+    flatpickr(pickerRef.current, {
+      onChange: ([selectedDate]) => onDateSelect(selectedDate),
+    });
+  }, []);
+
+  return <input type="text" ref={pickerRef} />;
+};
+
+export default DatePickerComponent;

package/dist/dist/components/Timeline/EventTooltip.js

@@ -28,7 +28,7 @@ const EventTooltip = ({ event, position = { top: 0, left: 0 }, onClose, onEdit,
     <div
       style={{
         position: "absolute",
-        top: top - 30, // Tooltip'in biraz yukarıda görünmesi için
+        top: top - 200, // Tooltip'in biraz yukarıda görünmesi için
         left: left + 70,
         transform: "translateX(-50%)",
         backgroundColor: "#ffffff",

package/dist/dist/components/Timeline/Indicator.js

@@ -6,8 +6,7 @@ const Indicator = ({ todayIndex, totalDays }) => {
     return null; // Bugün timeline dışında ise çizgiyi gösterme
   }
 
-  console.log("todayIndex:", todayIndex);
-  console.log("totalDays:", totalDays);
+
 
   return (
     <div

package/dist/dist/components/Timeline/MasterHeader.js

@@ -1,8 +1,10 @@
-// src/components/Timeline/MasterHeader.js
 import React from "react";
 import "./Timeline.css"; // veya MasterHeader.css, eğer ayrı dosyaya koyacaksan
+import "flatpickr/dist/themes/material_green.css"; // Flatpickr Tema
 
 const MasterHeader = ({
+  selectedDate,
+  onDateSelect,
   onToday,
   onAdvance,
   onRetreat,
@@ -10,44 +12,55 @@ const MasterHeader = ({
   onMonthRetreat,
   dayRange,
   setDayRange,
-  isDarkMode,
-  toggleDarkMode,
 }) => {
+  const formattedDate = new Date(
+    selectedDate.getTime() + 24 * 60 * 60 * 1000 - selectedDate.getTimezoneOffset() * 60000
+  )
+    .toISOString()
+    .split("T")[0]; // YYYY-MM-DD formatı
+
   return (
     <div className="master-header-container">
-      <button className="master-header-btn" onClick={onToday}>
-        Today
-      </button>
+      <div className="master-header-buttons">
+        <button className="master-header-btn" onClick={onMonthRetreat}>
+          1 Ay Geri
+        </button>
+
+        <button className="master-header-btn" onClick={onRetreat}>
+          5 Gün Geri
+        </button>
 
-      <button className="master-header-btn" onClick={onMonthRetreat}>
-        1 Ay Geri
-      </button>
+        <input
+  type="date"
+  className="master-header-date-picker"
+  value={formattedDate} // Seçili tarih burada gösteriliyor
+  onChange={(e) => onDateSelect(e.target.value)} // Tarih seçimi
+  onKeyDown={(e) => e.preventDefault()} // Manuel girişleri engelle
+/>
 
-      <button className="master-header-btn" onClick={onRetreat}>
-        5 Gün Geri
-      </button>
 
-      <button className="master-header-btn" onClick={onAdvance}>
-        5 Gün İleri
-      </button>
+        <button className="master-header-btn" onClick={onAdvance}>
+          5 Gün İleri
+        </button>
 
-      <button className="master-header-btn" onClick={onMonthAdvance}>
-        1 Ay İleri
-      </button>
+        <button className="master-header-btn" onClick={onMonthAdvance}>
+          1 Ay İleri
+        </button>
+
+        <button className="master-header-btn" onClick={onToday}>
+          Bugün
+        </button>
+      </div>
 
       <select
         className="master-header-select"
         value={dayRange}
-        onChange={(e) => setDayRange(parseInt(e.target.value))}
+        onChange={(e) => setDayRange(parseInt(e.target.value, 10))}
       >
         <option value={30}>30 Gün</option>
         <option value={60}>60 Gün</option>
         <option value={90}>90 Gün</option>
       </select>
-
-      <button className="master-header-btn" onClick={toggleDarkMode}>
-        {isDarkMode ? "Light Mode" : "Dark Mode"}
-      </button>
     </div>
   );
 };

package/dist/dist/components/Timeline/Timeline.css

@@ -1,4 +1,5 @@
 /* src/components/Timeline/Timeline.css */
+@import "flatpickr/dist/themes/material_green.css";
 
 /* 
   Temel: "sales sayfası" temasıyla uyumlu renkler, 
@@ -376,31 +377,31 @@
 .master-header-container {
   display: flex;
   align-items: center;
+  justify-content: space-between; /* Butonlar solda, select sağda */
   padding: 10px;
-
   background-color: var(--header-background-color);
   color: var(--header-text-color);
+}
 
-  /* eğer border vs. istersen
-  border-bottom: 1px solid var(--border-color);
-  */
+.master-header-buttons {
+  display: flex; /* Yan yana dizilim */
+  align-items: center; /* Dikey hizalama */
 }
 
-/* Butonlar */
 .master-header-btn {
   background-color: transparent;
   color: var(--header-text-color);
   border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 6px 12px;
-  margin-right: 10px;
+  margin-right: 10px; /* Butonlar arasında mesafe */
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 .master-header-btn:hover {
-  background-color: rgba(25, 118, 210, 0.2); /* Light tema hover */
+  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
 }
 
 .dark-mode .master-header-btn:hover {
@@ -411,9 +412,36 @@
   outline: none;
 }
 
+
+
+/* Tarih seçici (Date Picker) */
+.master-header-date-picker {
+  background-color: transparent;
+  color: var(--header-text-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 5px 12px;
+  margin-right: 10px; /* Butonlar arasında mesafe */
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.master-header-date-picker:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Açık tema hover */
+}
+
+.dark-mode .master-header-date-picker:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover */
+}
+
+.master-header-date-picker:focus {
+  outline: none;
+}
+
 /* Select */
 .master-header-select {
-  margin-left: 10px;
+  margin-left: auto; /* Sağa yaslamak için */
   background-color: transparent;
   color: var(--header-text-color);
   border: 1px solid var(--border-color);
@@ -427,6 +455,60 @@
   outline: none;
 }
 
+/* Flatpickr Takvim Kutusu */
+.flatpickr-calendar {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Gölge efekti */
+}
+
+
+/* Flatpickr Günü */
+.flatpickr-day {
+  background-color: var(--background-color); /* Arka plan rengi */
+  color: var(--text-color); /* Yazı rengi */
+  border-radius: 4px; /* Köşeleri yuvarlat */
+  cursor: pointer;
+}
+
+.flatpickr-day:hover {
+  background-color: rgba(25, 118, 210, 0.2); /* Hover efekti */
+}
+
+.dark-mode .flatpickr-day:hover {
+  background-color: rgba(76, 175, 80, 0.2); /* Koyu tema hover efekti */
+}
+
+/* Seçili Gün */
+.flatpickr-day.selected {
+  background-color: #4caf50; /* Seçili gün rengi */
+  color: white; /* Seçili gün yazı rengi */
+}
+
+/* Flatpickr Ay ve Yıl */
+.flatpickr-months .flatpickr-month {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+/* Flatpickr Ay İleri ve Geri Düğmeleri */
+.flatpickr-prev-month, .flatpickr-next-month {
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+/* Koyu Tema Örnekleri */
+.dark-mode .flatpickr-calendar {
+  background-color: #1f2937; /* Koyu tema arka plan */
+  color: #ffffff; /* Koyu tema yazı rengi */
+}
+
+.dark-mode .flatpickr-day.selected {
+  background-color: #4caf50;
+  color: white;
+}
+
 
 /* Container */
 .timeline-content-container {

package/dist/dist/components/Timeline/Timeline.js

@@ -35,32 +35,56 @@ const Timeline = ({
 
   // Yatay scroll özelliği aç/kapa
   horizontalScrollOn = false, // Varsayılan false
+
+  dayRange = 30,
+  setDayRange,
+  themeType = "light", // Tema bilgisi varsayılan olarak light
+
+  eventTooltipOn = true,
+  tooltipComponent: TooltipComponent, // Özelleştirilebilir Tooltip bileşeni
+  tempEventStyle = {},
+  eventStyleResolver = () => ({}),
+
+  onToday,
+  onAdvance,
+  onRetreat,
+  onMonthAdvance,
+  onMonthRetreat,
 }) => {
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
   // ---------------------------------------------------------
   const timelineData = generateTimelineData(2020, 2030); // 10 yıllık veri
   const { dates, monthHeaders } = timelineData;
-
-  // ---------------------------------------------------------
-  // 2) local state
-  // ---------------------------------------------------------
-  const [collapsedGroups, setCollapsedGroups] = useState({});
   const [selectedDate, setSelectedDate] = useState(() => {
     const date = programDate ? new Date(programDate) : new Date();
-    date.setDate(date.getDate() - 3);
+    date.setDate(date.getDate() - 3); // Program tarihinden 3 gün öncesini al
     return date;
   });
+  
+  // ---------------------------------------------------------
+  // 2) local state
+  // ---------------------------------------------------------
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+
   const [localEvents, setLocalEvents] = useState(events);
 
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
 
   // dayRange = ekranda göstermeyi istediğimiz gün/hücre sayısı (ör. 30 gün)
-  const [dayRange, setDayRange] = useState(30);
 
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(themeType === "dark");
+
+  useEffect(() => {
+    if (themeType !== undefined) {
+      setIsDarkMode(themeType === "dark");
+    }
+  }, [themeType]);
 
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => !prev);
+  };
   // ---------------------------------------------------------
   // 3) Sabit hücre genişliği (örneğin 56.95 px)
   //    Container genişliği = dayRange * cellWidth
@@ -119,43 +143,49 @@ const Timeline = ({
 
   // ---------------------------------------------------------
   // 7) Navigation fonksiyonları
-  // ---------------------------------------------------------
+  // ---------------------------------------------------------  const { dates, monthHeaders } = timelineData;
+
+
+
+  const handleDateChange = (newDate) => {
+    setSelectedDate(new Date(newDate));
+  };
+
   const handleToday = () => {
-    const date = programDate ? new Date(programDate) : new Date();
-    date.setDate(date.getDate() - 3);
-    setSelectedDate(date);
+    const today = new Date();
+    today.setDate(today.getDate() - 3); // Bugünden 3 gün öncesini ayarla
+    setSelectedDate(today);
   };
+  
 
-  const handleAdvance = () =>
+  const handleAdvance = () => {
     setSelectedDate((prev) => new Date(prev.getTime() + 5 * 24 * 60 * 60 * 1000));
+  };
 
-  const handleRetreat = () =>
+  const handleRetreat = () => {
     setSelectedDate((prev) => new Date(prev.getTime() - 5 * 24 * 60 * 60 * 1000));
+  };
 
-  const handleMonthRetreat = () =>
+  const handleMonthAdvance = () => {
     setSelectedDate((prev) => {
       const newDate = new Date(prev);
-      newDate.setMonth(newDate.getMonth() - 1);
+      newDate.setMonth(newDate.getMonth() + 1);
       return newDate;
     });
+  };
 
-  const handleMonthAdvance = () =>
+  const handleMonthRetreat = () => {
     setSelectedDate((prev) => {
       const newDate = new Date(prev);
-      newDate.setMonth(newDate.getMonth() + 1);
+      newDate.setMonth(newDate.getMonth() - 1);
       return newDate;
     });
+  };
 
   // ---------------------------------------------------------
   // 8) Dark Mode
   // ---------------------------------------------------------
-  const toggleDarkMode = () => {
-    setIsDarkMode((prevMode) => !prevMode);
-  };
 
-  useEffect(() => {
-    document.body.classList.toggle("dark-mode", isDarkMode);
-  }, [isDarkMode]);
 
   // ---------------------------------------------------------
   // 9) Ay başlıklarını filtrele
@@ -181,21 +211,22 @@ const Timeline = ({
       {masterHeaderView && (
       <div className="timeline-master-header">
         <MasterHeader
+          selectedDate={selectedDate} // Seçili tarihi gönder
+          onDateSelect={handleDateChange}
           onToday={handleToday}
           onAdvance={handleAdvance}
           onRetreat={handleRetreat}
           onMonthAdvance={handleMonthAdvance}
           onMonthRetreat={handleMonthRetreat}
           dayRange={dayRange}
-          setDayRange={setDayRange}  // dayRange'ı burada user değiştirebilir
-          isDarkMode={isDarkMode}
-          toggleDarkMode={toggleDarkMode}
+          setDayRange={setDayRange}
         />
       </div>
 )}
       {/* Body: Sol kısım => Resources, Sağ kısım => timeline */}
       <div className="timeline-body">
-        <div className="timeline-resources-container">
+        <div className="timeline-resources-container"
+        style={{ overflow: "hidden"}}>
         <ResourcesHeader content={resourceHeaderContent} />
         <Resources
             groupedResources={resources}
@@ -205,21 +236,14 @@ const Timeline = ({
           />
         </div>
 
-        {/* 
-          Dış kap => .timeline-scrollable-container
-          horizontalScrollOn => overflow-x auto/hidden 
-        */}
+
         <div
           className="timeline-scrollable-container"
           style={{
             overflowX: horizontalScrollOn ? "auto" : "hidden",
           }}
         >
-          {/*
-            İç kap => .timeline-header-content-wrapper
-            Genişlik => dayRange * cellWidth px (eğer horizontalScrollOn=true)
-            Yoksa 100% (scroll devre dışı)
-          */}
+
           <div
             className="timeline-header-content-wrapper"
             style={{
@@ -231,22 +255,20 @@ const Timeline = ({
               monthHeaders={filteredMonthHeaders}
             />
 
-            <TimelineContent
-              // Props
+<TimelineContent
               groupedResources={resources}
               dates={filteredDates}
               collapsedGroups={collapsedGroups}
               events={localEvents}
               setEvents={setLocalEvents}
-              onEventClick={handleEventClick}
-              todayIndex={todayIndex}
-              totalDays={totalDays}
+              onEventClick={onEventClick}
+              todayIndex={filteredDates.findIndex(
+                (d) => new Date(d.fullDate).toDateString() === new Date().toDateString()
+              )}
               indicatorOn={indicatorOn}
               resourceSettings={resourceSettings}
               toggleGroupCollapse={toggleGroupCollapse}
               setDropInfo={setDropInfo}
-
-              // Yeni prop'lar
               eventsDragOn={eventsDragOn}
               eventsExtendOn={eventsExtendOn}
               createNewEventOn={createNewEventOn}
@@ -254,6 +276,11 @@ const Timeline = ({
               onExtendInfo={onExtendInfo}
               onCreateEventInfo={onCreateEventInfo}
               onEventRightClick={onEventRightClick}
+              eventTooltipOn={eventTooltipOn} // Tooltip kontrolü
+              tooltipComponent={TooltipComponent} // Özelleştirilebilir Tooltip bileşeni
+              tempEventStyle = {tempEventStyle}
+              eventStyleResolver={eventStyleResolver}
+
             />
 
             {/* Tooltip */}