akfatimeline 1.0.6 → 1.2.0

package/dist/components/Timeline/EventDetailModal.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import './Timeline.css';
+
+const EventDetailModal = ({
+  event,
+  isOpen,
+  onClose,
+  onSave,
+  onDelete,
+  resources = [],
+}) => {
+  const [formData, setFormData] = useState({
+    title: '',
+    startDate: '',
+    endDate: '',
+    resourceId: '',
+    ...event,
+  });
+
+  useEffect(() => {
+    if (event) {
+      setFormData({
+        title: event.title || '',
+        startDate: event.startDate 
+          ? new Date(event.startDate).toISOString().split('T')[0]
+          : '',
+        endDate: event.endDate
+          ? new Date(event.endDate).toISOString().split('T')[0]
+          : '',
+        resourceId: event.resourceId || '',
+        ...event,
+      });
+    }
+  }, [event]);
+
+  if (!isOpen || !event) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onSave) {
+      const updatedEvent = {
+        ...event,
+        ...formData,
+        startDate: new Date(formData.startDate),
+        endDate: new Date(formData.endDate),
+      };
+      onSave(updatedEvent);
+    }
+    onClose();
+  };
+
+  const handleDelete = () => {
+    if (onDelete && window.confirm('Bu event\'i silmek istediğinize emin misiniz?')) {
+      onDelete(event.id);
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Event Düzenle</h2>
+          <button className="modal-close-btn" onClick={onClose}>
+            ×
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="modal-form">
+          <div className="form-group">
+            <label>Başlık</label>
+            <input
+              type="text"
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              required
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Resource</label>
+            <select
+              value={formData.resourceId}
+              onChange={(e) => setFormData({ ...formData, resourceId: e.target.value })}
+              required
+            >
+              <option value="">Seçiniz...</option>
+              {resources.map((resource) => (
+                <option key={resource.id} value={resource.id}>
+                  {resource.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-row">
+            <div className="form-group">
+              <label>Başlangıç Tarihi</label>
+              <input
+                type="date"
+                value={formData.startDate}
+                onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label>Bitiş Tarihi</label>
+              <input
+                type="date"
+                value={formData.endDate}
+                onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="modal-actions">
+            <button type="button" className="btn-delete" onClick={handleDelete}>
+              Sil
+            </button>
+            <div>
+              <button type="button" className="btn-cancel" onClick={onClose}>
+                İptal
+              </button>
+              <button type="submit" className="btn-save">
+                Kaydet
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EventDetailModal;
+

package/dist/components/Timeline/EventIcon.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import './Timeline.css';
+
+/**
+ * Event Icon Component
+ * Event'lerde gösterilecek ikonları render eder
+ */
+const EventIcon = ({ type, className = '' }) => {
+  const getIconContent = () => {
+    switch (type) {
+      case 'balance-warning':
+        return '⚠️'; // Bakiye uyarısı
+      case 'important-note':
+        return '📝'; // Önemli not
+      case 'payment-pending':
+        return '💳'; // Ödeme bekliyor
+      case 'confirmed':
+        return '✅'; // Onaylandı
+      case 'cancelled':
+        return '❌'; // İptal edildi
+      case 'pending':
+        return '⏳'; // Beklemede
+      case 'completed':
+        return '✓'; // Tamamlandı
+      case 'in-progress':
+        return '▶️'; // Devam ediyor
+      case 'alert':
+        return '🔔'; // Uyarı
+      case 'info':
+        return 'ℹ️'; // Bilgi
+      default:
+        return null;
+    }
+  };
+
+  const iconContent = getIconContent();
+  if (!iconContent) return null;
+
+  return (
+    <span className={`event-icon event-icon-${type} ${className}`}>
+      {iconContent}
+    </span>
+  );
+};
+
+export default EventIcon;
+

package/dist/{dist/components → 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;