akfatimeline 1.2.0 → 2.0.0

package/src/components/Timeline/DailyView.jsx

@@ -0,0 +1,256 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import './Timeline.css';
+
+/**
+ * Daily View Component
+ * Seçili resource ve tarih için günlük saat bazlı timeline görünümü
+ */
+const DailyView = ({
+  isOpen,
+  onClose,
+  resource,
+  date,
+  events = [],
+  onEventCreate,
+  onEventUpdate,
+  onEventDelete,
+  themeType = 'light',
+}) => {
+  const [isCreating, setIsCreating] = useState(false);
+  const [tempEvent, setTempEvent] = useState(null);
+  const containerRef = useRef(null);
+  const timelineRef = useRef(null);
+
+  // Saatleri oluştur (0-23)
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+
+  // O güne ait event'leri filtrele
+  const dayEvents = events.filter(event => {
+    if (!event.startDate || !date) return false;
+    const eventDate = new Date(event.startDate);
+    const selectedDate = new Date(date.fullDate || date);
+    return (
+      eventDate.getFullYear() === selectedDate.getFullYear() &&
+      eventDate.getMonth() === selectedDate.getMonth() &&
+      eventDate.getDate() === selectedDate.getDate() &&
+      event.resourceId === resource?.id
+    );
+  });
+
+  // Saat bazlı event pozisyonu hesapla
+  const getEventPosition = (event) => {
+    const startDate = new Date(event.startDate);
+    const endDate = new Date(event.endDate);
+    const startHour = startDate.getHours() + startDate.getMinutes() / 60;
+    const endHour = endDate.getHours() + endDate.getMinutes() / 60;
+    const duration = endHour - startHour;
+
+    return {
+      top: `${(startHour / 24) * 100}%`,
+      height: `${(duration / 24) * 100}%`,
+    };
+  };
+
+  // Timeline'a tıklandığında
+  const handleTimelineClick = (e) => {
+    if (!onEventCreate || !timelineRef.current) return;
+    
+    const rect = timelineRef.current.getBoundingClientRect();
+    const clickedY = e.clientY - rect.top;
+    const timelineHeight = rect.height;
+    const totalMinutes = Math.max(0, Math.min((clickedY / timelineHeight) * (24 * 60), 24 * 60));
+    
+    const startHour = Math.floor(totalMinutes / 60);
+    const startMinutes = Math.floor(totalMinutes % 60);
+    
+    const startDate = new Date(date.fullDate || date);
+    startDate.setHours(startHour, startMinutes, 0, 0);
+    
+    const endDate = new Date(startDate);
+    endDate.setTime(startDate.getTime() + 30 * 60 * 1000); // Varsayılan 30 dakika
+    
+    setIsCreating(true);
+    setTempEvent({
+      startDate,
+      endDate,
+    });
+  };
+
+  // Mouse hareketi ile event oluşturma
+  const handleMouseMove = useCallback((e) => {
+    if (!isCreating || !tempEvent || !timelineRef.current) return;
+    
+    const rect = timelineRef.current.getBoundingClientRect();
+    const mouseY = e.clientY - rect.top;
+    const timelineHeight = rect.height;
+    const totalMinutes = Math.max(0, Math.min((mouseY / timelineHeight) * (24 * 60), 24 * 60));
+    
+    const endHour = Math.floor(totalMinutes / 60);
+    const endMinutes = Math.floor(totalMinutes % 60);
+    
+    const newEndDate = new Date(tempEvent.startDate);
+    newEndDate.setHours(endHour, endMinutes, 0, 0);
+    
+    // Bitiş saati başlangıçtan önce olamaz
+    if (newEndDate <= tempEvent.startDate) {
+      newEndDate.setTime(tempEvent.startDate.getTime() + 15 * 60 * 1000); // En az 15 dakika
+    }
+    
+    setTempEvent(prev => ({
+      ...prev,
+      endDate: newEndDate,
+    }));
+  }, [isCreating, tempEvent]);
+
+  // Mouse bırakıldığında event oluştur
+  const handleMouseUp = useCallback(() => {
+    if (!isCreating || !tempEvent || !onEventCreate) return;
+    
+    // Minimum süre kontrolü (en az 15 dakika)
+    const duration = tempEvent.endDate.getTime() - tempEvent.startDate.getTime();
+    if (duration < 15 * 60 * 1000) {
+      setIsCreating(false);
+      setTempEvent(null);
+      return; // Çok kısa, event oluşturma
+    }
+    
+    const newEvent = {
+      id: `daily-${Date.now()}`,
+      title: 'Yeni Randevu',
+      startDate: tempEvent.startDate,
+      endDate: tempEvent.endDate,
+      resourceId: resource?.id,
+      isHourly: true, // Saatlik rezervasyon flag'i
+    };
+    
+    onEventCreate(newEvent);
+    setIsCreating(false);
+    setTempEvent(null);
+  }, [isCreating, tempEvent, onEventCreate, resource]);
+
+  // Global mouse event listener'ları
+  useEffect(() => {
+    if (!isCreating) return;
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isCreating, handleMouseMove, handleMouseUp]);
+
+  // Tarih formatı
+  const formatDate = (dateObj) => {
+    if (!dateObj) return '';
+    const d = new Date(dateObj.fullDate || dateObj);
+    return d.toLocaleDateString('tr-TR', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  // Saat formatı
+  const formatHour = (hour) => {
+    return `${hour.toString().padStart(2, '0')}:00`;
+  };
+
+  if (!isOpen || !resource || !date) return null;
+
+  return (
+    <div 
+      className={`daily-view-overlay ${themeType === 'dark' ? 'dark-mode' : ''}`}
+      onClick={onClose}
+    >
+      <div 
+        ref={containerRef}
+        className="daily-view-container"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="daily-view-header">
+          <div className="daily-view-header-content">
+            <h2 className="daily-view-title">{resource.name || resource.id}</h2>
+            <p className="daily-view-date">{formatDate(date)}</p>
+          </div>
+          <button className="daily-view-close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        {/* Timeline Body */}
+        <div className="daily-view-body">
+          {/* Saatler (Sol Taraf) */}
+          <div className="daily-view-hours">
+            {hours.map(hour => (
+              <div key={hour} className="daily-view-hour-label">
+                {formatHour(hour)}
+              </div>
+            ))}
+          </div>
+
+          {/* Timeline Content */}
+          <div 
+            ref={timelineRef}
+            className="daily-view-timeline"
+            onClick={handleTimelineClick}
+          >
+            {/* Saat hücreleri */}
+            {hours.map(hour => (
+              <div
+                key={hour}
+                className="daily-view-hour-cell"
+              />
+            ))}
+            
+            {/* Event'ler (timeline üzerinde absolute position) */}
+            {dayEvents.map(event => {
+              const position = getEventPosition(event);
+              return (
+                <div
+                  key={event.id}
+                  className="daily-view-event"
+                  style={position}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    // Event detayları göster
+                  }}
+                >
+                  <span className="daily-view-event-title">{event.title}</span>
+                  <span className="daily-view-event-time">
+                    {new Date(event.startDate).toLocaleTimeString('tr-TR', { 
+                      hour: '2-digit', 
+                      minute: '2-digit' 
+                    })} - {new Date(event.endDate).toLocaleTimeString('tr-TR', { 
+                      hour: '2-digit', 
+                      minute: '2-digit' 
+                    })}
+                  </span>
+                </div>
+              );
+            })}
+            
+            {/* Geçici event (oluşturuluyor) */}
+            {isCreating && tempEvent && (
+              <div
+                className="daily-view-temp-event"
+                style={getEventPosition({
+                  startDate: tempEvent.startDate,
+                  endDate: tempEvent.endDate,
+                })}
+              >
+                Yeni Randevu
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DailyView;
+

package/src/components/Timeline/EventBadge.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Timeline.css';
+
+/**
+ * Event Badge Component
+ * Önemli event'ler için badge gösterir
+ */
+const EventBadge = ({ 
+  text, 
+  type = 'default', // 'default', 'important', 'urgent', 'new', 'custom'
+  position = 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'
+  className = '',
+  style = {}
+}) => {
+  return (
+    <span 
+      className={`event-badge event-badge-${type} event-badge-${position} ${className}`}
+      style={style}
+    >
+      {text}
+    </span>
+  );
+};
+
+export default EventBadge;
+

package/src/components/Timeline/EventDetailModal.jsx

@@ -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/src/components/Timeline/EventIcon.jsx

@@ -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/src/components/Timeline/EventTooltip.jsx

@@ -0,0 +1,207 @@
+// 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.jsx

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