akfatimeline 1.0.6 → 1.1.1

package/src/components/Timeline/DailyView.js

@@ -0,0 +1,255 @@
+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/DatePickerComponent.js

@@ -1,17 +1,13 @@
-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;
+import React from "react";
+
+const DatePickerComponent = ({ onDateSelect }) => {
+  return (
+    <input
+      type="date"
+      onChange={(e) => onDateSelect(new Date(e.target.value))}
+      className="master-header-date-picker"
+    />
+  );
+};
+
+export default DatePickerComponent;

package/src/components/Timeline/DragAndDropHandler.js

@@ -1,35 +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;
+/**
+ * "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/src/components/Timeline/EventBadge.js

@@ -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.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/src/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;
+