oxios 1.10.1

Oxios Agent OS — Agent Operating System powered by oxi-sdk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

import { createFileRoute } from '@tanstack/react-router'
import { Plus } from 'lucide-react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { CalendarView } from '@/components/calendar/calendar-view'
import { ConflictWarning } from '@/components/calendar/conflict-warning'
import { EventDetail } from '@/components/calendar/event-detail'
import { EventEditor } from '@/components/calendar/event-editor'
import { Button } from '@/components/ui/button'
import {
  useCalendarCreate,
  useCalendarDelete,
  useCalendarEvents,
  useCalendarUpdate,
} from '@/hooks/use-calendar'
import type { CalendarEvent, CreateEventRequest } from '@/types/calendar'

export const Route = createFileRoute('/calendar')({ component: CalendarPage })

function CalendarPage() {
  const { t } = useTranslation()
  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null)
  const [editorOpen, setEditorOpen] = useState(false)
  const [editingEvent, setEditingEvent] = useState<CalendarEvent | undefined>()
  const [defaultStart, setDefaultStart] = useState<Date | undefined>()

  // Date range: past 1 month + next 2 months for the calendar view
  const { from, to } = useMemo(() => {
    const now = new Date()
    const from = new Date(now.getFullYear(), now.getMonth() - 1, 1)
    const to = new Date(now.getFullYear(), now.getMonth() + 2, 0)
    return {
      from: from.toISOString(),
      to: new Date(to.getTime() + 86400000).toISOString(),
    }
  }, [])

  const { data, isLoading } = useCalendarEvents(from, to)
  const events = Array.isArray(data?.events) ? data.events : []

  const createMutation = useCalendarCreate()
  const updateMutation = useCalendarUpdate()
  const deleteMutation = useCalendarDelete()

  const handleCreate = (req: CreateEventRequest) => {
    createMutation.mutate(req, {
      onSuccess: () => setEditorOpen(false),
    })
  }

  const handleDelete = () => {
    if (selectedEvent) {
      deleteMutation.mutate(selectedEvent.uid, {
        onSuccess: () => setSelectedEvent(null),
      })
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">{t('calendar.title')}</h1>
          <p className="text-sm text-muted-foreground">{t('calendar.subtitle')}</p>
        </div>
        <Button
          onClick={() => {
            setEditingEvent(undefined)
            setDefaultStart(new Date())
            setEditorOpen(true)
          }}
        >
          <Plus className="h-4 w-4 mr-1" /> {t('calendar.newEvent')}
        </Button>
      </div>

      {createMutation.data?.conflicts && createMutation.data.conflicts.length > 0 && (
        <ConflictWarning conflicts={createMutation.data.conflicts} />
      )}

      {isLoading ? (
        <div className="flex items-center justify-center h-64 text-muted-foreground">
          {t('calendar.loading')}
        </div>
      ) : (
        <CalendarView
          events={events}
          onEventClick={(uid) => {
            const event = events.find((e) => e.uid === uid)
            if (event) setSelectedEvent(event)
          }}
          onDateClick={(date) => {
            setDefaultStart(date)
            setEditingEvent(undefined)
            setEditorOpen(true)
          }}
        />
      )}

      <EventEditor
        open={editorOpen}
        onClose={() => setEditorOpen(false)}
        event={editingEvent}
        defaultStart={defaultStart}
        onSubmit={(data) => {
          if (editingEvent) {
            updateMutation.mutate(
              { uid: editingEvent.uid, ...data },
              {
                onSuccess: () => setEditorOpen(false),
              },
            )
          } else {
            handleCreate(data as CreateEventRequest)
          }
        }}
        isLoading={createMutation.isPending || updateMutation.isPending}
      />

      {selectedEvent && (
        <EventDetail
          event={selectedEvent}
          onEdit={() => {
            setEditingEvent(selectedEvent)
            setEditorOpen(true)
          }}
          onDelete={handleDelete}
          onClose={() => setSelectedEvent(null)}
        />
      )}
    </div>
  )
}