akfatimeline 1.0.6 → 1.2.0

package/src/App.js

@@ -1,54 +1,170 @@
 import React, { useState } from "react";
 import Timeline from "./components/Timeline/Timeline";
 import EventTooltip from "./components/Timeline/EventTooltip"; // Tooltip bileşenini import ediyoruz
+import AutocompleteSelect from "./components/Timeline/AutocompleteSelect"; // AutocompleteSelect bileşenini import ediyoruz
 
 const App = () => {
-  const programDate = "2025-01-08";
+  // Bugünün tarihini al ve programDate olarak kullan
+  const today = new Date();
+  const programDate = today.toISOString().split('T')[0]; // YYYY-MM-DD formatı
+  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
 
+  const [dayRange, setDayRange] = useState(30);
+  const [themeType, setThemeType] = useState("dark");
+  const [eventAlignmentMode, setEventAlignmentMode] = useState("center"); // "center" | "full"
+  const [zoomLevel, setZoomLevel] = useState(1.0); // Zoom seviyesi (1.0 = %100)
+  const [selectedResource, setSelectedResource] = useState(null); // Autocomplete için seçili değer
+  const [cellContextMenuOn, setCellContextMenuOn] = useState(true); // Cell context menu açık/kapalı
+  
+  // Event Management ve Keyboard Shortcuts
+  const [eventManagementOn, setEventManagementOn] = useState(true);
+  const [keyboardShortcutsOn, setKeyboardShortcutsOn] = useState(true);
+  
+  // Event Icons & Badges
+  const [eventIconsOn, setEventIconsOn] = useState(true);
+  const [eventBadgesOn, setEventBadgesOn] = useState(true);
+  
+  // Loading State
+  const [isLoading, setIsLoading] = useState(false);
+  
+  // Cell Tooltip için örnek fiyat verisi
+  // Her gün için farklı fiyatlar tanımlanabilir
+  const getCellTooltipContent = (resource, dateObj) => {
+    const date = new Date(dateObj.fullDate);
+    const dateString = date.toISOString().split('T')[0]; // YYYY-MM-DD formatı
+    
+    // Örnek: Her resource ve tarih için farklı fiyatlar
+    // Bu veri API'den, state'ten veya başka bir kaynaktan gelebilir
+    const priceMap = {
+      // Resource ID'ye göre fiyatlar
+      "lux-101": {
+        // Tarih bazlı fiyatlar (opsiyonel - yoksa default kullanılır)
+        "2025-12-15": 250,
+        "2025-12-16": 280,
+        "2025-12-17": 300,
+        // Varsayılan fiyatlar
+        base: 150,
+        weekend: 200,
+      },
+      "lux-102": {
+        "2025-01-15": 240,
+        "2025-01-16": 270,
+        base: 150,
+        weekend: 200,
+      },
+      "deluxe-201": {
+        "2025-01-15": 180,
+        "2025-01-16": 200,
+        base: 100,
+        weekend: 150,
+      },
+      "deluxe-202": {
+        base: 100,
+        weekend: 150,
+      },
+    };
+    
+    const dayOfWeek = date.getDay();
+    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
+    
+    // Fiyat hesaplama: Önce tarih bazlı fiyat, yoksa hafta sonu/base fiyat
+    const resourcePrices = priceMap[resource.id] || { base: 80, weekend: 120 };
+    let price = resourcePrices[dateString]; // Tarih bazlı fiyat var mı?
+    
+    if (price === undefined) {
+      // Tarih bazlı fiyat yoksa, hafta sonu/base fiyatı kullan
+      price = isWeekend ? resourcePrices.weekend : resourcePrices.base;
+    }
+    
+    return (
+      <div>
+        <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
+          {resource.name}
+        </div>
+        <div style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
+          {dateObj.display}
+        </div>
+        <div style={{ marginTop: '4px', fontSize: '14px', fontWeight: '600' }}>
+          Fiyat: {price}₺
+        </div>
+        {isWeekend && !resourcePrices[dateString] && (
+          <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>
+            (Hafta Sonu)
+          </div>
+        )}
+        {resourcePrices[dateString] && (
+          <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>
+            (Özel Fiyat)
+          </div>
+        )}
+      </div>
+    );
+  };
+  
+  // Event tarihlerini bugünden itibaren oluştur
   const events = [
     {
       id: "lux-101-1",
       title: "Room 101 Cleaning",
-      startDate: new Date("2025-01-01"),
-      endDate: new Date("2025-01-03"),
+      startDate: new Date(todayDate.getTime()),
+      endDate: new Date(todayDate.getTime() + 2 * 24 * 60 * 60 * 1000), // +2 gün
       resourceId: "lux-101",
       status: "Completed", // Tamamlanmış
+      balanceWarning: false, // Bakiye uyarısı yok (bakiye = 0)
+      balance: 0, // Bakiye: 0 TL
+      hasImportantNote: true, // Önemli not var
+      note: "Özel temizlik talimatları: Halılar özel şampuan ile temizlenecek",
     },
     {
       id: "lux-101-2",
       title: "Room 101 Maintenance",
-      startDate: new Date("2025-01-03"),
-      endDate: new Date("2025-01-05"),
+      startDate: new Date(todayDate.getTime() + 2 * 24 * 60 * 60 * 1000), // +2 gün
+      endDate: new Date(todayDate.getTime() + 4 * 24 * 60 * 60 * 1000), // +4 gün
       resourceId: "lux-101",
       status: "In-progress", // Devam Ediyor
+      balanceWarning: true, // Bakiye uyarısı var (bakiye > 0)
+      balance: 1500, // Kalan bakiye: 1500 TL
+      paymentPending: true, // Ödeme bekliyor
+      isUrgent: true, // Acil
+      note: "Acil bakım gerekiyor - Klima arızası",
     },
     {
       id: "lux-101-3",
       title: "Room 101 Inspection",
-      startDate: new Date("2025-01-05"),
-      endDate: new Date("2025-01-07"),
+      startDate: new Date(todayDate.getTime() + 4 * 24 * 60 * 60 * 1000), // +4 gün
+      endDate: new Date(todayDate.getTime() + 6 * 24 * 60 * 60 * 1000), // +6 gün
       resourceId: "lux-101",
       status: "Cancelled", // İptal
+      balanceWarning: false, // Bakiye uyarısı yok
+      balance: 0, // Bakiye: 0 TL
+      hasImportantNote: false, // Not yok
     },
     {
       id: "lux-102-1",
       title: "Room 102 Cleaning",
-      startDate: new Date("2025-01-07"),
-      endDate: new Date("2025-01-10"),
+      startDate: new Date(todayDate.getTime() + 6 * 24 * 60 * 60 * 1000), // +6 gün
+      endDate: new Date(todayDate.getTime() + 9 * 24 * 60 * 60 * 1000), // +9 gün
       resourceId: "lux-102",
       status: "Completed",
+      isNew: true, // Yeni event
+      balanceWarning: false, // Bakiye uyarısı yok
+      balance: 0, // Bakiye: 0 TL
+      hasImportantNote: false, // Not yok
     },
     {
       id: "lux-102-2",
       title: "Room 102 Maintenance",
-      startDate: new Date("2025-01-10"),
-      endDate: new Date("2025-01-15"),
+      startDate: new Date(todayDate.getTime() + 9 * 24 * 60 * 60 * 1000), // +9 gün
+      endDate: new Date(todayDate.getTime() + 14 * 24 * 60 * 60 * 1000), // +14 gün
       resourceId: "lux-102",
       status: "In-progress",
+      isImportant: true, // Önemli event
+      balanceWarning: true, // Bakiye uyarısı var
+      balance: 2500, // Kalan bakiye: 2500 TL
+      hasImportantNote: true, // Önemli not var
+      note: "VIP müşteri - Özel istekler: Yatak odası çiçeklerle süslenecek",
     },
   ];
-  
-
 
 const resources = [
   {
@@ -118,10 +234,84 @@ const resources = [
         };
     }
   };
-  
-  
-  const [dayRange, setDayRange] = useState(30);
-  const [themeType, setThemeType] = useState("dark");
+
+  // Event Icon Resolver - Event'e göre ikon tipi döndürür
+  const eventIconResolver = (event) => {
+    // Öncelik sırası: Bakiye uyarısı > Önemli not > Ödeme bekliyor > Durum
+    
+    // Bakiye kontrolü - Eğer balanceWarning true ise veya balance > 0 ise
+    if (event.balanceWarning || (event.balance && event.balance > 0)) {
+      return 'balance-warning';
+    }
+    
+    // Önemli not kontrolü
+    if (event.hasImportantNote || event.note) {
+      return 'important-note';
+    }
+    
+    // Ödeme bekliyor
+    if (event.paymentPending) {
+      return 'payment-pending';
+    }
+    
+    // Durum bazlı ikonlar
+    switch (event.status) {
+      case "Completed":
+        return 'completed';
+      case "In-progress":
+        return 'in-progress';
+      case "Cancelled":
+        return 'cancelled';
+      case "Pending":
+        return 'pending';
+      default:
+        return null;
+    }
+  };
+
+  // Event Badge Resolver - Event'e göre badge bilgisi döndürür
+  const eventBadgeResolver = (event) => {
+    // Öncelik sırası: Acil > Önemli > Yeni > Özel badge
+    
+    // Acil event için badge
+    if (event.isUrgent) {
+      return {
+        text: 'ACİL',
+        type: 'urgent',
+        position: 'top-right',
+      };
+    }
+    
+    // Önemli event için badge
+    if (event.isImportant) {
+      return {
+        text: 'ÖNEMLİ',
+        type: 'important',
+        position: 'top-right',
+      };
+    }
+    
+    // Yeni event için badge
+    if (event.isNew) {
+      return {
+        text: 'YENİ',
+        type: 'new',
+        position: 'top-left',
+      };
+    }
+    
+    // Özel badge
+    if (event.badge) {
+      return {
+        text: event.badge.text,
+        type: event.badge.type || 'custom',
+        position: event.badge.position || 'top-right',
+        style: event.badge.style,
+      };
+    }
+    
+    return null;
+  };
 
   const toggleTheme = () => {
     setThemeType((prev) => (prev === "light" ? "dark" : "light"));
@@ -166,7 +356,25 @@ const resources = [
       <button onClick={toggleTheme}>
         Temayı Değiştir ({themeType === "dark" ? "Karanlık" : "Aydınlık"})
       </button>
-      <div style={{ margin: "20px 0" }}>
+      <div style={{ margin: "20px 0", display: "flex", gap: "10px", flexWrap: "wrap" }}>
+        <button onClick={() => setEventAlignmentMode(eventAlignmentMode === "center" ? "full" : "center")}>
+          Hizalama: {eventAlignmentMode === "center" ? "Gün Ortası" : "Tam Gün"}
+        </button>
+        <button onClick={() => setEventManagementOn(!eventManagementOn)}>
+          Event Yönetimi: {eventManagementOn ? "Açık" : "Kapalı"}
+        </button>
+        <button onClick={() => setKeyboardShortcutsOn(!keyboardShortcutsOn)}>
+          Klavye Kısayolları: {keyboardShortcutsOn ? "Açık" : "Kapalı"}
+        </button>
+        <button onClick={() => setEventIconsOn(!eventIconsOn)}>
+          Event İkonları: {eventIconsOn ? "Açık" : "Kapalı"}
+        </button>
+        <button onClick={() => setEventBadgesOn(!eventBadgesOn)}>
+          Event Badge'leri: {eventBadgesOn ? "Açık" : "Kapalı"}
+        </button>
+        <button onClick={() => setIsLoading(!isLoading)}>
+          Loading: {isLoading ? "Açık" : "Kapalı"}
+        </button>
         <button onClick={handleToday}>Bugüne Git</button>
         <button onClick={handleRetreat}>5 Gün Geri</button>
         <button onClick={handleAdvance}>5 Gün İleri</button>
@@ -183,6 +391,12 @@ const resources = [
         dayRange={dayRange}
         setDayRange={setDayRange}
         themeType={themeType} // Tema türü prop olarak geçiliyor
+        zoomLevel={zoomLevel}
+        setZoomLevel={setZoomLevel}
+        zoomOn={true}
+        minZoomLevel={0.5}
+        maxZoomLevel={3.0}
+        zoomStep={0.25}
         onToday={handleToday}
         onAdvance={handleAdvance}
         onRetreat={handleRetreat}
@@ -200,7 +414,74 @@ const resources = [
         setDropInfo={handleDropInfo} // Callback'i buradan bağlıyoruz
         onExtendInfo={handleExtendInfo} // Uzatma bilgisi
         onCreateEventInfo={handleCreateEventInfo} // Yeni etkinlik bilgisi
-        indicatorDate="2025-01-09" // İstediğiniz tarihi gönderin
+        indicatorDate={programDate} // Bugünün tarihi
+        eventAlignmentMode={eventAlignmentMode}
+        preventPastEvents={true} // Geçmiş tarihlere rezervasyon oluşturmayı engelle
+        highlightWeekends={true} // Hafta sonlarını farklı renkte göster
+        cellTooltipOn={true} // Cell tooltip'lerini aktif et
+        cellTooltipResolver={getCellTooltipContent} // Fiyat bilgisi göster
+        eventIconsOn={eventIconsOn} // Event ikonlarını aktif et
+        eventIconResolver={eventIconResolver} // İkon resolver
+        eventBadgesOn={eventBadgesOn} // Event badge'lerini aktif et
+        eventBadgeResolver={eventBadgeResolver} // Badge resolver
+        isLoading={isLoading} // Loading state
+        loadingType="spinner" // Loading tipi
+        cellContextMenuOn={cellContextMenuOn} // Cell context menu aktif
+        cellContextMenuItems={[
+          {
+            id: 'daily-timeline',
+            label: 'Günlük Timeline Görüntüsü Oluştur',
+            icon: '📊',
+            onClick: (resource, date) => {
+              // Timeline.js'te handle edilecek
+              console.log('Daily Timeline:', { resource, date });
+            },
+            tooltip: 'Seçili resource ve tarih için günlük timeline görüntüsü oluştur',
+          },
+          {
+            id: 'separator-1',
+            separator: true,
+          },
+          {
+            id: 'view-details',
+            label: 'Detayları Görüntüle',
+            icon: '👁️',
+            onClick: (resource, date) => {
+              console.log('View Details:', { resource, date });
+            },
+          },
+          {
+            id: 'create-event',
+            label: 'Yeni Rezervasyon Oluştur',
+            icon: '➕',
+            onClick: (resource, date) => {
+              const dateObj = new Date(date.fullDate);
+              alert(`"${resource.name || resource.id}" için ${dateObj.toLocaleDateString('tr-TR')} tarihinde yeni rezervasyon oluşturulacak.`);
+            },
+          },
+        ]}
+        onCellContextMenu={(resource, date, event) => {
+          console.log('Context menu opened:', { resource, date, event });
+        }}
+        resourceHeaderContent={
+          <AutocompleteSelect
+            options={[
+              { id: 1, name: "Luxury Rooms", group: "Luxury" },
+              { id: 2, name: "Deluxe Rooms", group: "Deluxe" },
+              { id: 3, name: "Standard Rooms", group: "Standard" },
+              { id: 4, name: "Suite Rooms", group: "Suite" },
+              { id: 5, name: "Penthouse", group: "Luxury" },
+            ]}
+            value={selectedResource}
+            onChange={(value, option) => {
+              setSelectedResource(value);
+              console.log("Seçilen:", option);
+            }}
+            placeholder="Oda grubu seçiniz..."
+            getOptionLabel={(option) => option.name}
+            getOptionValue={(option) => option.id}
+          />
+        }
 
       />
     </div>

package/src/components/Timeline/AutocompleteSelect.js

@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./Timeline.css";
+
+const AutocompleteSelect = ({
+  options = [],
+  value = null,
+  onChange = () => {},
+  placeholder = "Seçiniz...",
+  getOptionLabel = (option) => option?.label || option?.name || String(option),
+  getOptionValue = (option) => option?.value || option?.id || option,
+  filterOptions = (options, inputValue) => {
+    if (!inputValue) return options;
+    const lowerInput = inputValue.toLowerCase();
+    return options.filter((option) => {
+      const label = getOptionLabel(option).toLowerCase();
+      return label.includes(lowerInput);
+    });
+  },
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // Seçili değerin label'ını bul
+  const selectedOption = options.find(
+    (opt) => getOptionValue(opt) === value
+  );
+  const displayValue = selectedOption
+    ? getOptionLabel(selectedOption)
+    : inputValue || placeholder;
+
+  // Input değiştiğinde filtrele
+  useEffect(() => {
+    if (isOpen) {
+      const filtered = filterOptions(options, inputValue);
+      setFilteredOptions(filtered);
+    } else {
+      setFilteredOptions(options);
+    }
+  }, [inputValue, isOpen, options, filterOptions]);
+
+  // Dışarı tıklandığında kapat
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setInputValue("");
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setIsOpen(true);
+  };
+
+  const handleSelect = (option) => {
+    const optionValue = getOptionValue(option);
+    onChange(optionValue, option);
+    setInputValue("");
+    setIsOpen(false);
+  };
+
+  const handleFocus = () => {
+    setIsOpen(true);
+    if (selectedOption) {
+      setInputValue(getOptionLabel(selectedOption));
+    }
+  };
+
+  const handleBlur = () => {
+    // Input blur olduğunda hemen kapatma, click outside ile kapatılacak
+    setTimeout(() => {
+      if (!containerRef.current?.contains(document.activeElement)) {
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue("");
+        }
+      }
+    }, 200);
+  };
+
+  return (
+    <div className="autocomplete-select-container" ref={containerRef}>
+      <div
+        className={`autocomplete-select-input ${isOpen ? "open" : ""}`}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          inputRef.current?.focus();
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={isOpen ? inputValue : displayValue}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          className="autocomplete-select-input-field"
+        />
+        <span className="autocomplete-select-arrow">
+          {isOpen ? "▲" : "▼"}
+        </span>
+      </div>
+
+      {isOpen && (
+        <div className="autocomplete-select-dropdown">
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((option, index) => {
+              const optionValue = getOptionValue(option);
+              const optionLabel = getOptionLabel(option);
+              const isSelected = optionValue === value;
+
+              return (
+                <div
+                  key={index}
+                  className={`autocomplete-select-option ${
+                    isSelected ? "selected" : ""
+                  }`}
+                  onClick={() => handleSelect(option)}
+                  onMouseDown={(e) => e.preventDefault()} // Blur'u engelle
+                >
+                  {optionLabel}
+                </div>
+              );
+            })
+          ) : (
+            <div className="autocomplete-select-no-results">
+              Sonuç bulunamadı
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AutocompleteSelect;
+

package/src/components/Timeline/ContextMenu.js

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './Timeline.css';
+
+/**
+ * Context Menu Component
+ * Sağ tık menüsü için özelleştirilebilir menü bileşeni
+ */
+const ContextMenu = ({ 
+  isOpen, 
+  position, 
+  onClose, 
+  menuItems = [],
+  resource = null,
+  date = null,
+}) => {
+  const menuRef = useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = useState(position);
+
+  // Menü pozisyonunu mouse'a yakın tut ve ekran sınırları içinde tut
+  useEffect(() => {
+    if (!menuRef.current || !position || !isOpen) {
+      setAdjustedPosition(position);
+      return;
+    }
+
+    // Menü render edildikten sonra pozisyonu ayarla
+    const updatePosition = () => {
+      const menuRect = menuRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let adjustedX = position.x;
+      let adjustedY = position.y;
+
+      // Sağa taşma kontrolü
+      if (position.x + menuRect.width > viewportWidth) {
+        adjustedX = position.x - menuRect.width;
+      }
+
+      // Aşağıya taşma kontrolü
+      if (position.y + menuRect.height > viewportHeight) {
+        adjustedY = position.y - menuRect.height;
+      }
+
+      // Sola taşma kontrolü
+      if (adjustedX < 10) {
+        adjustedX = 10;
+      }
+
+      // Yukarıya taşma kontrolü
+      if (adjustedY < 10) {
+        adjustedY = 10;
+      }
+
+      setAdjustedPosition({ x: adjustedX, y: adjustedY });
+    };
+
+    // Menü render edildikten sonra pozisyonu güncelle
+    setTimeout(updatePosition, 0);
+  }, [position, isOpen]);
+
+  // Menü dışına tıklanınca kapat
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+      // Scroll olduğunda menüyü kapat
+      document.addEventListener('scroll', onClose, true);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener('scroll', onClose, true);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen || !position) return null;
+
+  const handleItemClick = (item) => {
+    if (item.onClick) {
+      item.onClick(resource, date);
+    }
+    if (item.closeOnClick !== false) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      className="context-menu"
+      style={{
+        position: 'fixed',
+        left: `${(adjustedPosition?.x ?? position.x) - 150}px`,
+        top: `${(adjustedPosition?.y ?? position.y) - 150}px`,
+        zIndex: 10005,
+      }}
+    >
+      <div className="context-menu-content">
+        {menuItems.length === 0 ? (
+          <div className="context-menu-item context-menu-item-disabled">
+            Menü öğesi yok
+          </div>
+        ) : (
+          menuItems.map((item, index) => {
+            if (item.separator) {
+              return <div key={`separator-${index}`} className="context-menu-separator" />;
+            }
+
+            if (item.hidden) {
+              return null;
+            }
+
+            return (
+              <div
+                key={item.id || index}
+                className={`context-menu-item ${item.disabled ? 'context-menu-item-disabled' : ''} ${item.danger ? 'context-menu-item-danger' : ''}`}
+                onClick={() => !item.disabled && handleItemClick(item)}
+                title={item.tooltip || item.label}
+              >
+                {item.icon && <span className="context-menu-item-icon">{item.icon}</span>}
+                <span className="context-menu-item-label">{item.label}</span>
+                {item.shortcut && (
+                  <span className="context-menu-item-shortcut">{item.shortcut}</span>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ContextMenu;
+