fix: unify tender countdowns and add monthly calendar navigation
This commit is contained in:
@@ -1,8 +1,11 @@
|
||||
import { useDeadlineClock } from '../hooks/useDeadlineClock';
|
||||
import { deadlineInfo } from '../services/tenderCalendar';
|
||||
import React, { useState } from 'react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { Kanban, User, Calendar, MapPin, Star, Plus, ArrowRight, Eye } from 'lucide-react';
|
||||
|
||||
export const KanbanBoard = () => {
|
||||
const now = useDeadlineClock();
|
||||
const { tenders, updateKanbanStatus, setActiveTenderDetail, teamMembers } = useApp();
|
||||
const [selectedPersonel, setSelectedPersonel] = useState('');
|
||||
const [draggedTenderId, setDraggedTenderId] = useState(null);
|
||||
@@ -128,13 +131,11 @@ export const KanbanBoard = () => {
|
||||
#{t.ikn}
|
||||
</span>
|
||||
{t.gorev && (() => {
|
||||
// Teslim = ihale saati; kalan gün geri sayım (gecikme eskalasyonu kendiliğinden)
|
||||
const m = /^(\d{2})\.(\d{2})\.(\d{4})(?:\s+(\d{2}):(\d{2}))?/.exec(t.gorev.teslim || '');
|
||||
if (!m) return null;
|
||||
const kalan = Math.ceil((new Date(+m[3], +m[2] - 1, +m[1], +(m[4] || 23), +(m[5] || 59)) - Date.now()) / 86400000);
|
||||
const renk = kalan < 0 ? 'bg-slate-200 text-slate-600' : kalan <= 2 ? 'bg-red-100 text-red-800' : kalan <= 7 ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800';
|
||||
return <span className={`text-[10px] font-extrabold px-2 py-0.5 rounded ${renk}`} title={`Teslim: ${t.gorev.teslim}`}>
|
||||
{kalan < 0 ? 'süresi geçti' : kalan === 0 ? 'BUGÜN' : `${kalan} gün`}
|
||||
const info = deadlineInfo(t, now);
|
||||
const kalan = info.days;
|
||||
const renk = info.expired || kalan === null ? 'bg-slate-200 text-slate-600' : kalan <= 2 ? 'bg-red-100 text-red-800' : kalan <= 7 ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800';
|
||||
return <span className={`text-[10px] font-extrabold px-2 py-0.5 rounded ${renk}`} title={`İhale: ${t.tarih} ${t.saat || 'saat bilinmiyor'} (Türkiye saati)`}>
|
||||
{info.label}
|
||||
</span>;
|
||||
})()}
|
||||
<button
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { deadlineInfo } from '../services/tenderCalendar';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import {
|
||||
@@ -16,11 +17,9 @@ import { okasAra } from '../services/kalem';
|
||||
|
||||
const SAYFA = 20;
|
||||
|
||||
const gecmisMi = (tarihSaat) => {
|
||||
const m = /^(\d{2})\.(\d{2})\.(\d{4})(?:\s+(\d{2}):(\d{2}))?/.exec(String(tarihSaat || ''));
|
||||
if (!m) return false;
|
||||
const [, g, a, y, ss = '23', dd = '59'] = m;
|
||||
return new Date(+y, +a - 1, +g, +ss, +dd) < new Date();
|
||||
const gecmisMi = tarihSaat => {
|
||||
const [tarih, saat] = String(tarihSaat || '').trim().split(/\s+/);
|
||||
return deadlineInfo({tarih,saat}).expired === true;
|
||||
};
|
||||
|
||||
export const UrunAramaModal = () => {
|
||||
@@ -217,7 +216,7 @@ export const UrunAramaModal = () => {
|
||||
)}
|
||||
<label className="flex items-center gap-1.5 font-semibold text-slate-700 cursor-pointer">
|
||||
<input type="checkbox" checked={sadeceAcik} onChange={(e) => setSadeceAcik(e.target.checked)} className="accent-indigo-600" />
|
||||
Sadece teklif verilebilir ihaleler
|
||||
Süresi geçtiği bilinenleri gizle
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
@@ -293,7 +292,7 @@ export const UrunAramaModal = () => {
|
||||
{liste.length === 0 && (
|
||||
<p className="text-xs text-slate-500 text-center py-6">
|
||||
{sonuc.totalCount > 0
|
||||
? 'Bu sayfadaki sonuçların tarihi geçmiş. "Sadece teklif verilebilir" kutusunu kapatarak görebilirsiniz.'
|
||||
? 'Bu sayfadaki sonuçların tarihi geçmiş. "Süresi geçtiği bilinenleri gizle" kutusunu kapatarak görebilirsiniz.'
|
||||
: 'Bu ürün adı hiçbir teklif cetvelinde bulunamadı. Daha kısa/genel bir terim deneyin.'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { useDeadlineClock } from '../hooks/useDeadlineClock';
|
||||
import React, { useMemo } from 'react';
|
||||
import { CalendarClock } from 'lucide-react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { parseDateTR } from '../services/analytics';
|
||||
import { deadlineInfo } from '../services/tenderCalendar';
|
||||
|
||||
/**
|
||||
* Sağ panel: takipteki / panodaki ihalelerden 14 gün içinde yapılacaklar.
|
||||
* Sunucuya gitmez — liste zaten bellekte. ≤3 gün kırmızı, ≤7 turuncu.
|
||||
*/
|
||||
export const YaklasanSonTarihler = ({ gun = 14 }) => {
|
||||
const now = useDeadlineClock();
|
||||
const { tenders, setActiveTenderDetail } = useApp();
|
||||
const liste = useMemo(() => {
|
||||
const bugun = new Date(); bugun.setHours(0, 0, 0, 0);
|
||||
const sinir = new Date(bugun.getTime() + gun * 86400000);
|
||||
return tenders
|
||||
.filter((t) => t.takipte || t.kanbanStatus || t.gorev)
|
||||
.map((t) => ({ t, d: parseDateTR(t.tarih) }))
|
||||
.filter(({ d }) => d && d >= bugun && d <= sinir)
|
||||
.sort((a, b) => a.d - b.d)
|
||||
.map(({ t, d }) => ({ t, kalan: Math.round((d - bugun) / 86400000) }))
|
||||
.filter(t => t.takipte || t.gorev)
|
||||
.map(t => ({t,info:deadlineInfo(t,now)}))
|
||||
.filter(({info}) => info.days !== null && info.days >= 0 && info.days <= gun && info.expired !== true)
|
||||
.sort((a,b) => a.info.days - b.info.days || (a.info.deadline?.getTime() || Infinity) - (b.info.deadline?.getTime() || Infinity))
|
||||
.map(({t,info}) => ({t,kalan:info.days,label:info.label}))
|
||||
.slice(0, 8);
|
||||
}, [tenders, gun]);
|
||||
}, [tenders, gun, now]);
|
||||
|
||||
const renk = (g) => (g <= 3 ? 'bg-red-600 text-white' : g <= 7 ? 'bg-amber-500 text-white' : 'bg-slate-200 text-slate-800');
|
||||
|
||||
@@ -33,11 +33,11 @@ export const YaklasanSonTarihler = ({ gun = 14 }) => {
|
||||
<div className="p-2 space-y-1">
|
||||
{liste.length === 0 ? (
|
||||
<p className="px-2 py-3 text-xs text-slate-500">{gun} gün içinde yapılacak takipli ihale yok. Yıldızla takibe alın; burada geri sayım başlar.</p>
|
||||
) : liste.map(({ t, kalan }) => (
|
||||
) : liste.map(({ t, kalan, label }) => (
|
||||
<button key={t.id} type="button" onClick={() => setActiveTenderDetail?.(t)}
|
||||
className="w-full flex items-center justify-between gap-2 rounded-lg p-2 text-xs hover:bg-slate-50 text-left">
|
||||
<span className="min-w-0 truncate font-medium text-slate-800" title={t.baslik}>{t.baslik}</span>
|
||||
<span className={`shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-extrabold ${renk(kalan)}`}>{kalan === 0 ? 'BUGÜN' : `${kalan} gün`}</span>
|
||||
<span className={`shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-extrabold ${renk(kalan)}`}>{label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
import { useDeadlineClock } from '../../hooks/useDeadlineClock';
|
||||
import { calendarMonthDays, istanbulDateKey, tenderDateKey, deadlineInfo } from '../../services/tenderCalendar';
|
||||
import React, { useState } from 'react';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { CalendarDays, Clock, MapPin, AlertCircle } from 'lucide-react';
|
||||
|
||||
export const TenderCalendar = () => {
|
||||
const now = useDeadlineClock();
|
||||
const { tenders, setActiveTenderDetail } = useApp();
|
||||
const GUNLER = ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'];
|
||||
const ggaayyyy = (d) => `${String(d.getDate()).padStart(2, '0')}.${String(d.getMonth() + 1).padStart(2, '0')}.${d.getFullYear()}`;
|
||||
// Bugünden başlayan 7 gün; sayılar havuzdaki gerçek ihale tarihlerinden.
|
||||
const daysList = Array.from({ length: 7 }, (_, i) => {
|
||||
const d = new Date(); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() + i);
|
||||
const date = ggaayyyy(d);
|
||||
return { date, label: i === 0 ? `Bugün (${GUNLER[d.getDay()]})` : i === 1 ? `Yarın (${GUNLER[d.getDay()]})` : GUNLER[d.getDay()], count: tenders.filter(t => t.tarih === date).length };
|
||||
});
|
||||
const [selectedDay, setSelectedDay] = useState(daysList[0].date);
|
||||
|
||||
const dayTenders = tenders.filter(t => t.tarih === selectedDay);
|
||||
const today = istanbulDateKey(now);
|
||||
const [month,setMonth] = useState(today.slice(0,7));
|
||||
const [selectedDay, setSelectedDay] = useState(today);
|
||||
const daysList = calendarMonthDays(month).map(day => ({...day,count:tenders.filter(t=>tenderDateKey(t)===day.key).length}));
|
||||
const dayTenders = tenders.filter(t => tenderDateKey(t) === selectedDay);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 my-4 animate-fade-in">
|
||||
@@ -26,30 +23,34 @@ export const TenderCalendar = () => {
|
||||
<CalendarDays className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-black text-slate-900">7 Günlük İhale Takvimi</h1>
|
||||
<p className="text-xs text-slate-500">Önümüzdeki 7 gün içerisinde kapanacak ihaleleri günü gününe takip edin.</p>
|
||||
<h1 className="text-xl font-black text-slate-900">İhale Takvimi</h1>
|
||||
<p className="text-xs text-slate-500">Ay ve gün seçerek ihale tarihlerini görüntüleyin. Saatler Türkiye saatidir.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="block text-sm font-semibold">Takvim ayı
|
||||
<input type="month" value={month} onChange={e => {if(calendarMonthDays(e.target.value).length){setMonth(e.target.value);setSelectedDay(e.target.value+'-01');}}}
|
||||
className="ml-3 border border-slate-300 rounded-lg p-2"/>
|
||||
</label>
|
||||
{/* Day Selector Buttons */}
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-2">
|
||||
{daysList.map(d => (
|
||||
<button
|
||||
key={d.date}
|
||||
onClick={() => setSelectedDay(d.date)}
|
||||
className={`flex-1 min-w-[130px] p-3 rounded-xl border text-center transition-all cursor-pointer ${
|
||||
selectedDay === d.date
|
||||
key={d.key}
|
||||
onClick={() => setSelectedDay(d.key)}
|
||||
className={`min-w-0 p-3 rounded-xl border text-center transition-all cursor-pointer ${
|
||||
selectedDay === d.key
|
||||
? 'bg-purple-600 text-white border-purple-700 shadow-sm font-bold'
|
||||
: 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50 font-semibold'
|
||||
}`}
|
||||
>
|
||||
<span className="text-[11px] block text-purple-200 opacity-90">{d.label}</span>
|
||||
<span className="text-[11px] block opacity-90">{d.label}</span>
|
||||
<span className="text-sm font-black block mt-0.5">{d.date}</span>
|
||||
<span className={`text-[10px] mt-1 inline-block px-2 py-0.5 rounded-full ${
|
||||
selectedDay === d.date ? 'bg-white/20 text-white font-extrabold' : 'bg-purple-100 text-purple-800 font-bold'
|
||||
selectedDay === d.key ? 'bg-white/20 text-white font-extrabold' : 'bg-purple-100 text-purple-800 font-bold'
|
||||
}`}>
|
||||
{d.count} İhale Kapanıyor
|
||||
{d.count} İhale
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
@@ -57,16 +58,19 @@ export const TenderCalendar = () => {
|
||||
|
||||
{/* Tenders List for Selected Day */}
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-sm font-bold">{selectedDay.split('-').reverse().join('.')} tarihli ihaleler</h2>
|
||||
{!dayTenders.length && <p className="text-sm text-slate-500">Bu gün için yüklenen havuzda ihale yok.</p>}
|
||||
{dayTenders.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
role="button" tabIndex={0} onKeyDown={e=>{if(e.key==='Enter' || e.key===' '){e.preventDefault();setActiveTenderDetail(t);}}}
|
||||
onClick={() => setActiveTenderDetail(t)}
|
||||
className="bg-white rounded-xl border border-slate-200 p-4 shadow-xs hover:shadow-md cursor-pointer transition-all flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="bg-purple-100 text-purple-900 text-[10px] font-extrabold px-2 py-0.5 rounded">
|
||||
⏰ {t.saat}
|
||||
⏰ {deadlineInfo(t, now).deadline?.toLocaleTimeString('tr-TR',{hour:'2-digit',minute:'2-digit',timeZone:'Europe/Istanbul'}) || 'Saat doğrulanmalı'}
|
||||
</span>
|
||||
<span className="text-xs text-slate-400 font-mono">#{t.ikn}</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user