@rmosyazilim/work-calendar

Rmos Yazılım uygulamaları için not eklenebilen takvim widget'ı. Tek satırla sayfanıza eklenir; yalnızca token ve userId ister.

<RmosCalendar token={token} userId="19" label="Takvim" />

Nedir?

@rmosyazilim/work-calendar, sayfanıza bir takvim butonu ekleyen React bileşenidir. Butona tıklayınca aylık takvim açılır; kullanıcı bir güne sağ tıklayarak o güne not ekler. Notlar Firebase'de kullanıcıya özel saklanır ve gerçek zamanlı güncellenir.

@rmosyazilim/chat-widget ile aynı mimariyi ve tasarım dilini kullanır.

Özellikler

• 🗓️ Aylık takvim — ay ileri/geri, Bugün butonu, hafta pazartesi başlar (Türkçe)
• 🖱️ Sağ tık ile not — güne sağ tık → Not ekle; nota sağ tık → Okundu olarak işaretle / Düzenle / Sil
• 🎨 Renkli notlar — her not kendi rengini alır; aynı gündeki notların renkleri birbirinden farklıdır
• 👁️ Okundu bilgisi — okunmamış notlar belirgin, okunanlar silik; yalnızca Okundu olarak işaretle ile okundu olur
• 🔴 Bildirim rozeti — butonun üstünde bugünün okunmamış not sayısı
• 🔐 Token doğrulama — token RMOS General API'de doğrulanır; geçersizse takvim hiç yüklenmez
• ⚡ Gerçek zamanlı — notlar Firebase Firestore'dan canlı gelir, aynı kullanıcının diğer sekmelerine anında yansır
• 🌗 Light / dark tema — host sayfanın temasını otomatik algılar
• 📦 Sıfır CSS kurulumu — stiller otomatik eklenir; Tailwind veya CSS import gerekmez
• ⚛️ Next.js uyumlu — "use client" hazır, App Router'da doğrudan kullanılır

Kurulum

npm install @rmosyazilim/work-calendar firebase

| Gereksinim | Sürüm | |------------|-------| | react / react-dom | >= 18 | | firebase | >= 11 |

Nasıl kullanılır?

1. Bileşeni ekleyin

Giriş yapmış kullanıcının RMOS token'ını ve userId'sini verin:

import { RmosCalendar } from "@rmosyazilim/work-calendar";

export function Header({ token, userId }: { token: string; userId: string }) {
  return (
    <nav>
      <RmosCalendar token={token} userId={userId} label="Takvim" />
    </nav>
  );
}

Bu kadar. Sayfada bir takvim butonu görünür; tıklayınca takvim açılır.

2. Görünümü seçin

// Menüde ikon + yazı (sidebar, navbar)
<RmosCalendar token={token} userId="19" label="Takvim" />

// Sadece ikon
<RmosCalendar token={token} userId="19" />

// Sağ altta sabit yuvarlak buton
<RmosCalendar token={token} userId="19" floating />

// Sol altta sabit yuvarlak buton
<RmosCalendar token={token} userId="19" floating position="bottom-left" />

3. (İsteğe bağlı) Hataları yakalayın

Token geçersizse takvim yüklenmez ve kartta Token geçersiz yazar. Bunu kendi tarafınızda da yakalamak için:

<RmosCalendar
  token={token}
  userId="19"
  onError={(error) => {
    if (error.invalidToken) {
      // ör. kullanıcıyı tekrar girişe yönlendir
    }
  }}
/>

Next.js (App Router)

Paket "use client" ile derlenmiştir; Server Component içinde doğrudan render edilebilir:

// app/layout.tsx
import { RmosCalendar } from "@rmosyazilim/work-calendar";

export default async function Layout({ children }: { children: React.ReactNode }) {
  const { token, userId } = await getSession(); // kendi oturum bilginiz

  return (
    <html lang="tr">
      <body>
        <RmosCalendar token={token} userId={String(userId)} floating />
        {children}
      </body>
    </html>
  );
}

Kullanıcı ne yapabilir?

| İşlem | Nasıl | |-------|-------| | Not eklemek | Güne sağ tık → Not ekle (veya güne çift tık) | | Notu açmak | Nota tıkla → not pencerede açılır (okundu durumu değişmez) | | Okundu işaretlemek | Nota sağ tık → Okundu olarak işaretle, ya da pencerede başlığın sağındaki ✓✓ ikonu | | Notu düzenlemek | Nota tıkla ya da sağ tık → Notu düzenle | | Notu silmek | Nota sağ tık → Notu sil → Evet, sil (veya pencerede Sil) | | Kaydetmek | Pencerede Kaydet veya Ctrl + Enter | | Kapatmak | Esc ya da kartın dışına tıklama |

Not renkleri

• Her nota 8 renklik paletten rastgele bir renk atanır (renk notun ID'sinden üretilir; sayfa yenilense de aynı kalır).
• Aynı gündeki notlar asla aynı rengi almaz (bir günde 8'den fazla not olursa renkler tekrar eder).
• Renkler light ve dark tema için ayrı ayarlıdır.

Okundu bilgisi

• Yeni not okunmamış başlar: kalın ve renkli görünür.
• Okundu olarak işaretle seçilince okundu olur: soluk (silik) görünür. Nota sadece tıklamak okundu yapmaz.
• Bu seçenek sağ tık menüsünde (ikon + yazı) ve not penceresinde (ikon; üstüne gelince Okundu olarak işaretle yazar) bulunur; yalnızca okunmamış notlarda görünür.
• Okunmamış notlar gün içinde her zaman üstte listelenir.
• Her günün köşesinde o günün okunmamış not sayısı yazar.
• Takvim butonunun üstündeki kırmızı rozet bugüne ait okunmamış not sayısını gösterir (kart kapalıyken de canlı güncellenir).

Nasıl çalışır?

<RmosCalendar token userId />
  │
  ├─ 1. POST /api/Users/LoginByToken?dbid=0   (Authorization: Bearer token)
  │      └─ 200 dışında bir yanıt → "Token geçersiz", takvim yüklenmez
  │
  ├─ 2. GET /api/Firebase/GetFirebaseToken    → Firebase custom token
  │      └─ Firebase oturumu açılır (uid, userId ile aynı olmalı)
  │
  └─ 3. Firestore: calendarNotes/{userId}/notes  → notlar gerçek zamanlı

• API adresi otomatik seçilir: site localhost ya da dev… ile başlıyorsa dev-generalapis.rmosweb.com, aksi halde generalapis.rmosweb.com.
• Yalnızca ekranda görünen ayın notları okunur.
• Firebase oturumu yalnızca o sekmenin belleğinde tutulur; başka sekmede farklı kullanıcıyla giriş yapılması birbirini etkilemez.

Firestore veri yapısı

calendarNotes/{userId}/notes/{noteId}
  date:      "2026-10-15"   // yyyy-MM-dd
  text:      "Toplantı"
  read:      false          // okundu bilgisi
  createdAt: Timestamp
  updatedAt: Timestamp

Chat widget ile aynı Firebase projesini kullanır. Firestore kuralları, kullanıcının yalnızca kendi calendarNotes/{userId} yoluna erişmesine izin vermelidir.

Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|-----------|----------| | token | string | — | RMOS oturum token'ı (zorunlu) | | userId | string | — | Kullanıcı ID (zorunlu); notlar bu ID altında saklanır | | label | string | — | Butonda ikonun yanında görünecek yazı | | floating | boolean | false | Sağ/sol altta sabit yuvarlak buton | | position | "bottom-right" \| "bottom-left" | "bottom-right" | Floating konumu | | title | string | "Rmos Planlama" | Kart başlığı; ay isminin önünde görünür (Rmos Planlama - Ekim 2026) | | description | string | "Not eklemek için bir güne sağ tıklayın." | Kart açıklaması | | defaultOpen | boolean | false | Sayfa açılınca takvim açık gelsin | | onError | (error: CalendarError) => void | — | Token geçersiz (error.invalidToken) veya bağlantı hatası | | className | string | — | Butona eklenecek CSS sınıfı | | style | CSSProperties | — | Sarmalayıcı stili |

Tema

Host sayfanın temasını otomatik takip eder: html/body üzerindeki .dark / .light sınıfı, data-theme, data-bs-theme, data-mantine-color-scheme vb. attribute'lar ya da arka plan rengi. Tema değişince takvim de anında güncellenir; ek ayar gerekmez.

import { useHostTheme } from "@rmosyazilim/work-calendar";

const theme = useHostTheme(); // "light" | "dark"

Kendi arayüzünüz

Hazır butonu kullanmak yerine notları kendi arayüzünüzde göstermek için provider ve hook'ları kullanabilirsiniz:

import { CalendarProvider, useCalendarContext, useNotes } from "@rmosyazilim/work-calendar";

function TodayNotes() {
  const { status, error } = useCalendarContext();
  const { notes, unreadCount, add, markRead } = useNotes("2026-10-15", "2026-10-15");

  if (status === "loading") return <p>Yükleniyor…</p>;
  if (status === "error") return <p>{error?.message}</p>;

  return (
    <div>
      <p>{unreadCount} okunmamış not</p>
      {notes.map((note) => (
        <button key={note.id} onClick={() => markRead(note.id)}>
          {note.text}
        </button>
      ))}
      <button onClick={() => add("2026-10-15", "Yeni not")}>Not ekle</button>
    </div>
  );
}

<CalendarProvider token={token} userId="19">
  <TodayNotes />
</CalendarProvider>

| Export | Açıklama | |--------|----------| | RmosCalendar | Hazır buton + takvim kartı | | CalendarProvider | Token doğrulama + Firebase bağlantısı | | useCalendarContext() | status ("loading" \| "ready" \| "error"), error, userId | | useNotes(from, to) | notes, notesByDate, unreadCount, add, update, remove, markRead | | CalendarView | Provider içinde kullanılabilen aylık takvim görünümü | | useHostTheme() / detectHostTheme() | Host sayfanın teması | | toDateKey(date) | Date → "yyyy-MM-dd" | | CalendarError | invalidToken alanlı hata sınıfı |

Sık karşılaşılan durumlar

Kartta "Token geçersiz" yazıyor. Token süresi dolmuş ya da hatalı. LoginByToken 200 dışında bir yanıt döndü. Kullanıcıyı tekrar giriş yaptırın.

"Token bu kullanıcıya ait değil" yazıyor. Verilen userId, token'ın sahibiyle aynı değil. Giriş yapan kullanıcının ID'sini verin.

Konsolda Missing or insufficient permissions hatası. Firestore kuralları calendarNotes yoluna izin vermiyor. Kurallar yayınlandıktan sonra devreye girmesi ~1 dakika sürebilir.

Lisans

MIT © Rmos Yazılım