akfatimeline 1.0.6 → 1.2.0

package/src/components/Timeline/EventTooltip.js

@@ -1,206 +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;
+// 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/src/components/Timeline/FilterPanel.js

@@ -0,0 +1,179 @@
+// src/components/Timeline/FilterPanel.js (Demo Component)
+
+import React, { useState } from 'react';
+import './Timeline.css';
+
+const FilterPanel = ({ 
+  events, 
+  resources, 
+  onFilterChange,
+  onClearFilters 
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedResources, setSelectedResources] = useState([]);
+  const [selectedStatuses, setSelectedStatuses] = useState([]);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  // Tüm unique status'leri bul
+  const allStatuses = [...new Set(events.map(e => e.status).filter(Boolean))];
+
+  const handleSearchChange = (value) => {
+    setSearchTerm(value);
+    applyFilters({
+      searchTerm: value,
+      resourceIds: selectedResources,
+      statuses: selectedStatuses,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+    });
+  };
+
+  const handleResourceToggle = (resourceId) => {
+    const newResources = selectedResources.includes(resourceId)
+      ? selectedResources.filter(id => id !== resourceId)
+      : [...selectedResources, resourceId];
+    setSelectedResources(newResources);
+    applyFilters({
+      searchTerm,
+      resourceIds: newResources,
+      statuses: selectedStatuses,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+    });
+  };
+
+  const handleStatusToggle = (status) => {
+    const newStatuses = selectedStatuses.includes(status)
+      ? selectedStatuses.filter(s => s !== status)
+      : [...selectedStatuses, status];
+    setSelectedStatuses(newStatuses);
+    applyFilters({
+      searchTerm,
+      resourceIds: selectedResources,
+      statuses: newStatuses,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+    });
+  };
+
+  const handleDateChange = (type, value) => {
+    if (type === 'start') {
+      setStartDate(value);
+      applyFilters({
+        searchTerm,
+        resourceIds: selectedResources,
+        statuses: selectedStatuses,
+        startDate: value ? new Date(value) : null,
+        endDate: endDate ? new Date(endDate) : null,
+      });
+    } else {
+      setEndDate(value);
+      applyFilters({
+        searchTerm,
+        resourceIds: selectedResources,
+        statuses: selectedStatuses,
+        startDate: startDate ? new Date(startDate) : null,
+        endDate: value ? new Date(value) : null,
+      });
+    }
+  };
+
+  const applyFilters = (filters) => {
+    if (onFilterChange) {
+      onFilterChange(filters);
+    }
+  };
+
+  const handleClear = () => {
+    setSearchTerm('');
+    setSelectedResources([]);
+    setSelectedStatuses([]);
+    setStartDate('');
+    setEndDate('');
+    if (onClearFilters) {
+      onClearFilters();
+    }
+  };
+
+  // Tüm resource'ları düzleştir
+  const allResources = resources.flatMap(group => group.resources || []);
+
+  return (
+    <div className="filter-panel">
+      <div className="filter-panel-header">
+        <h3>Filtreler</h3>
+        <button onClick={handleClear} className="filter-clear-btn">
+          Temizle
+        </button>
+      </div>
+
+      <div className="filter-section">
+        <label>Arama</label>
+        <input
+          type="text"
+          placeholder="Event başlığına göre ara..."
+          value={searchTerm}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="filter-search-input"
+        />
+      </div>
+
+      <div className="filter-section">
+        <label>Tarih Aralığı</label>
+        <div className="filter-date-range">
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => handleDateChange('start', e.target.value)}
+            placeholder="Başlangıç"
+            className="filter-date-input"
+          />
+          <span> - </span>
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => handleDateChange('end', e.target.value)}
+            placeholder="Bitiş"
+            className="filter-date-input"
+          />
+        </div>
+      </div>
+
+      <div className="filter-section">
+        <label>Resource'lar</label>
+        <div className="filter-checkbox-group">
+          {allResources.map(resource => (
+            <label key={resource.id} className="filter-checkbox">
+              <input
+                type="checkbox"
+                checked={selectedResources.includes(resource.id)}
+                onChange={() => handleResourceToggle(resource.id)}
+              />
+              <span>{resource.name || resource.id}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="filter-section">
+        <label>Status</label>
+        <div className="filter-checkbox-group">
+          {allStatuses.map(status => (
+            <label key={status} className="filter-checkbox">
+              <input
+                type="checkbox"
+                checked={selectedStatuses.includes(status)}
+                onChange={() => handleStatusToggle(status)}
+              />
+              <span>{status}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterPanel;
+

package/src/components/Timeline/Indicator.js

@@ -1,26 +1,26 @@
-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;