akfatimeline 1.0.2 → 1.0.5

package/public/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/public/dist/dist/components/Timeline/DragAndDropHandler.js

@@ -0,0 +1,35 @@
+/**
+ * "dd/mm/yyyy" formatındaki bir tarih string'ini Date objesine dönüştürür.
+ * Eğer dateInput bir string değilse, direkt Date objesini döndürür.
+ * @param {string | Object | Date} dateInput - "dd/mm/yyyy" formatında tarih stringi veya {fullDate: Date, display: string} objesi veya Date objesi.
+ * @returns {Date} - Date objesi.
+ */
+export const parseDate = (dateInput) => {
+  if (dateInput instanceof Date) {
+    return dateInput;
+  }
+ if (typeof dateInput === 'string') {
+        const [day, month, year] = dateInput.split("/").map(Number);
+      return new Date(year, month - 1, day);
+    } else if (typeof dateInput === 'object' && dateInput.fullDate instanceof Date) {
+        return new Date(dateInput.fullDate);
+    }
+      else {
+      console.error("parseDate received invalid input:", dateInput);
+      return new Date(); // veya hata fırlat
+    }
+  };
+  
+  /**
+   * Bir tarihin belirli bir aralık içinde olup olmadığını kontrol eder.
+   * @param {string | Object | Date} date - "dd/mm/yyyy" formatında tarih stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+   * @param {string | Object | Date} startDate - "dd/mm/yyyy" formatında başlangıç tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+   * @param {string | Object | Date} endDate - "dd/mm/yyyy" formatında bitiş tarihi stringi, {fullDate: Date, display: string} objesi veya Date objesi.
+   * @returns {boolean} - Tarih aralık içinde ise true, değilse false.
+   */
+  export const isDateInRange = (date, startDate, endDate) => {
+    const d = parseDate(date);
+    const start = parseDate(startDate);
+    const end = parseDate(endDate);
+    return d >= start && d <= end;
+  };

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

@@ -0,0 +1,206 @@
+// 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;

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

@@ -0,0 +1,29 @@
+import React from "react";
+
+const Indicator = ({ todayIndex, totalDays }) => {
+  if (todayIndex < 0 || todayIndex >= totalDays) {
+    console.log("Indicator not visible: Out of bounds");
+    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;

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

@@ -0,0 +1,68 @@
+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,
+  onMonthAdvance,
+  onMonthRetreat,
+  dayRange,
+  setDayRange,
+}) => {
+  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">
+      <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>
+
+        <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={onAdvance}>
+          5 Gün İ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, 10))}
+      >
+        <option value={30}>30 Gün</option>
+        <option value={60}>60 Gün</option>
+        <option value={90}>90 Gün</option>
+      </select>
+    </div>
+  );
+};
+
+export default MasterHeader;

package/public/dist/dist/components/Timeline/Resources.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+const Resources = ({
+  groupedResources = [], // Kaynakların listesi
+  collapsedGroups = {}, // Grupların açık/kapalı durumunu tutan nesne
+  toggleGroupCollapse, // Grupları açma/kapama fonksiyonu
+  resourceSettings = {
+    showIdAsName: false, // Varsayılan: `name` varsa onu göster, yoksa `id`
+    isGrouped: true, // Varsayılan: Gruplama açık
+    isCollapsible: true, // Varsayılan: Gruplar açılıp kapanabilir
+  },
+}) => {
+  const { showIdAsName, isGrouped, isCollapsible } = resourceSettings;
+
+  return (
+    <div className="timeline-resources">
+      {isGrouped ? (
+        // Gruplama aktif
+        groupedResources.map((group, groupIndex) => (
+          <div key={groupIndex} className="resource-group">
+            {/* Grup Başlığı */}
+            <div
+              className="resource-group-header"
+              onClick={() => isCollapsible && toggleGroupCollapse(group.groupName)}
+            >
+              {group.groupName}{" "}
+              {isCollapsible && (collapsedGroups[group.groupName] ? "▲" : "▼")}
+            </div>
+
+            {/* Grup İçindeki Kaynaklar */}
+            {!collapsedGroups[group.groupName] &&
+              group.resources.map((resource, resourceIndex) => (
+                <div key={resourceIndex} className="resource-cell">
+                  {showIdAsName ? resource.id : resource.name || resource.id}
+                  {/* Eğer `name` yoksa `id` kullanılır */}
+                </div>
+              ))}
+          </div>
+        ))
+      ) : (
+        // Gruplama yok
+        groupedResources.flatMap((group) => group.resources).map((resource, resourceIndex) => (
+          <div key={resourceIndex} className="resource-cell">
+            {showIdAsName ? resource.id : resource.name || resource.id}
+            {/* Eğer `name` yoksa `id` kullanılır */}
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default Resources;

package/public/dist/dist/components/Timeline/ResourcesHeader.js

@@ -0,0 +1,14 @@
+// ResourcesHeader.js
+import React from "react";
+import "./Timeline.css";
+
+const ResourcesHeader = ({ content }) => {
+  return (
+    <div className="resources-header">
+      {/* content => string veya React node */}
+      {content}
+    </div>
+  );
+};
+
+export default ResourcesHeader;