feat: add inline time edit and log editing modal

- Add inline time editing in log list (click on time to edit)
- Add edit button with pencil icon for each log entry
- Modify AddLogModal to support both create and edit modes
- Wire up updateLog from useLogs hook in Dashboard

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vadim Sobinin
2026-02-02 17:13:27 +03:00
parent e0e4f85ee1
commit d59d41f215
4 changed files with 202 additions and 16 deletions

View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import { format, startOfMonth, endOfMonth, addMonths, subMonths } from 'date-fns';
import { ru } from 'date-fns/locale';
import { useLogs } from '../hooks/useLogs';
import { useLogs, type TimeLog } from '../hooks/useLogs';
import { LogList } from './LogList';
import { AddLogModal } from './AddLogModal';
import { ReportModal } from './ReportModal';
@@ -15,11 +15,12 @@ export function Dashboard({ username, onLogout }: Props) {
const [currentDate, setCurrentDate] = useState(new Date());
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
const [isReportModalOpen, setIsReportModalOpen] = useState(false);
const [editingLog, setEditingLog] = useState<TimeLog | null>(null);
const startDate = format(startOfMonth(currentDate), 'yyyy-MM-dd');
const endDate = format(endOfMonth(currentDate), 'yyyy-MM-dd');
const { logs, isLoading, createLog, deleteLog } = useLogs(startDate, endDate);
const { logs, isLoading, createLog, updateLog, deleteLog } = useLogs(startDate, endDate);
const totalMinutes = logs.reduce((sum, log) => sum + log.minutes, 0);
const totalHours = Math.floor(totalMinutes / 60);
@@ -34,6 +35,28 @@ export function Dashboard({ username, onLogout }: Props) {
}
};
const handleEdit = (log: TimeLog) => {
setEditingLog(log);
setIsAddModalOpen(true);
};
const handleUpdateTime = async (id: string, time: string) => {
await updateLog({ id, data: { time } });
};
const handleSave = async (data: { date: string; time: string; description: string }) => {
if (editingLog) {
await updateLog({ id: editingLog.id, data });
} else {
await createLog(data);
}
};
const handleCloseModal = () => {
setIsAddModalOpen(false);
setEditingLog(null);
};
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
@@ -93,7 +116,13 @@ export function Dashboard({ username, onLogout }: Props) {
</div>
{/* Logs */}
<LogList logs={logs} onDelete={handleDelete} isLoading={isLoading} />
<LogList
logs={logs}
onDelete={handleDelete}
onEdit={handleEdit}
onUpdateTime={handleUpdateTime}
isLoading={isLoading}
/>
</main>
{/* Floating buttons */}
@@ -121,8 +150,9 @@ export function Dashboard({ username, onLogout }: Props) {
{/* Modals */}
<AddLogModal
isOpen={isAddModalOpen}
onClose={() => setIsAddModalOpen(false)}
onSave={createLog}
onClose={handleCloseModal}
onSave={handleSave}
editingLog={editingLog}
/>
<ReportModal
isOpen={isReportModalOpen}