diff --git a/package-lock.json b/package-lock.json index 051f7e0..00bab7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "@react-pdf/renderer": "^4.5.1", + "downshift": "^9.4.0", "focus-trap-react": "^12.0.0", "next": "16.2.6", "pocketbase": "^0.26.8", @@ -223,9 +224,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz", + "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -2668,6 +2669,12 @@ "node": ">=12.20" } }, + "node_modules/compute-scroll-into-view": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz", + "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==", + "license": "MIT" + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -2946,6 +2953,28 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/downshift": { + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/downshift/-/downshift-9.4.0.tgz", + "integrity": "sha512-yIwyzRYzycKwMZhvOahsn4BmRr4Ffi0JymdWOtTDhR+LGDEXCZHTcwgUbNBC/oZLT6YrR46iwJe/BrQUS5ClQQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "compute-scroll-into-view": "^3.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0", + "tslib": "^2.8.1" + }, + "peerDependencies": { + "react": ">=16.12.0" + } + }, + "node_modules/downshift/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", diff --git a/package.json b/package.json index 1f0e01b..b9c8690 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "dependencies": { "@react-pdf/renderer": "^4.5.1", + "downshift": "^9.4.0", "focus-trap-react": "^12.0.0", "next": "16.2.6", "pocketbase": "^0.26.8", diff --git a/src/app/globals.css b/src/app/globals.css index d34c2ab..84f1f75 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -213,12 +213,12 @@ textarea { font: inherit; } .form-row + .form-row { - margin-top: var(--space-s); + margin-top: var(--space-xs); } .form-row.flex-fields { display: flex; - gap: var(--space-m); + gap: var(--space-s); } .form-label { @@ -232,7 +232,7 @@ textarea { border-radius: var(--border-radius-small); border: 1px solid var(--c-gray-light); background-color: var(--c-beige-transparent); - padding: 1em; + padding: 0.6em; width: 100%; } .form-input.outlined { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index cf8a9dc..df51029 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import { AuthProvider } from '@/contexts/AuthContext'; import { GlobalProvider } from '@/contexts/GlobalContext'; import { ClientProvider } from '@/contexts/ClientContext'; import { TaskProvider } from '@/contexts/TaskContext'; +import { CategoryProvider } from '@/contexts/CategoryContext'; import { InvoiceProvider } from '@/contexts/InvoiceContext'; import { ProjectProvider } from '@/contexts/ProjectContext'; import IconLogo from '@/icons/logo'; @@ -55,13 +56,15 @@ export default function RootLayout({ - - - - {children} - - - + + + + + {children} + + + + diff --git a/src/components/category-picker/category-picker.module.css b/src/components/category-picker/category-picker.module.css new file mode 100644 index 0000000..62ceb02 --- /dev/null +++ b/src/components/category-picker/category-picker.module.css @@ -0,0 +1,106 @@ +.picker { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.comboboxWrapper { + position: relative; + display: flex; + align-items: center; + gap: var(--space-xs); +} + +.input { + flex: 1; + min-width: 0; +} + +.close { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + border-radius: 50%; + color: var(--c-gray-dark); + transition: + background-color 0.2s, + color 0.2s; +} + +.close:hover { + background-color: var(--c-beige-transparent); + color: var(--c-black); +} + +.menu { + position: absolute; + z-index: 1; + top: calc(100% + var(--space-xs)); + left: 0; + right: 0; + max-height: 6rem; + overflow-y: auto; + margin: 0; + padding: 0; + list-style: none; + + background-color: var(--c-white); + border-radius: var(--border-radius-small); +} + +.menuOpen { + border: 1px solid var(--bg-accent-border); +} + +.menuItem { + padding: var(--space-xs) var(--space-s); + font-size: var(--step--1); + cursor: pointer; +} + +.menuItemHighlighted { + background-color: var(--c-off-white); +} + +.tagGroup { + display: flex; + flex-wrap: wrap; + gap: var(--space-xs); +} + +.pill { + display: inline-flex; + align-items: center; + gap: 0.35em; + font-size: var(--step--1); + font-weight: var(--weight-semibold); + padding: 0.2em 0.4em 0.2em 0.75em; + border-radius: 100px; + background: var(--c-beige); + color: var(--c-black); + white-space: nowrap; +} + +.pillActive { + outline: 2px solid var(--c-midnight-green); + outline-offset: 1px; +} + +.remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.2em; + height: 1.2em; + border-radius: 50%; + line-height: 1; + color: inherit; + transition: background-color 0.2s; +} + +.remove:hover { + background-color: rgba(0, 0, 0, 0.1); +} diff --git a/src/components/category-picker/index.tsx b/src/components/category-picker/index.tsx new file mode 100644 index 0000000..c324988 --- /dev/null +++ b/src/components/category-picker/index.tsx @@ -0,0 +1,205 @@ +'use client'; + +import { useState } from 'react'; +import { useTagGroup, useCombobox } from 'downshift'; +import { Category } from '@/types'; +import styles from './category-picker.module.css'; + +const CREATE_ID = '__create__'; + +export default function CategoryPicker({ + id, + selectedIds, + categories, + onAdd, + onRemove, + onFocus, + onClose, + disabled = false, + inputClassName = 'form-input', +}: { + id: string; + selectedIds: string[]; + categories: Category[]; + onAdd: (name: string) => void; + onRemove: (categoryId: string) => void; + onFocus?: (e: React.FocusEvent) => void; + onClose?: () => void; + disabled?: boolean; + inputClassName?: string; +}) { + const [inputValue, setInputValue] = useState(''); + + const selectedCategories = selectedIds + .map((categoryId) => + categories.find((category) => category.id === categoryId), + ) + .filter((category): category is Category => Boolean(category)); + + // `items` is passed as a controlled prop so the selection this renders + // always matches selectedIds (owned by the parent), rather than letting + // useTagGroup keep its own copy. addItem/onItemsChange are still what + // drive additions and removals -- their results are just translated into + // the parent's onAdd/onRemove instead of being treated as the source of + // truth themselves. + const { + addItem, + getTagProps, + getTagRemoveProps, + getTagGroupProps, + activeIndex, + } = useTagGroup({ + items: selectedCategories, + getTagId: (index) => `${id}-tag-${index}`, + onItemsChange: ({ items: newItems }) => { + if (!newItems) { + return; + } + + if (newItems.length > selectedCategories.length) { + const added = newItems.find( + (item) => + !selectedCategories.some((category) => category.id === item.id), + ); + if (added) { + onAdd(added.name); + } + } else { + const removed = selectedCategories.find( + (category) => !newItems.some((item) => item.id === category.id), + ); + if (removed) { + onRemove(removed.id); + } + } + }, + }); + + const availableCategories = categories.filter( + (category) => !selectedIds.includes(category.id), + ); + + const trimmedInput = inputValue.trim(); + const filteredCategories = trimmedInput + ? availableCategories.filter((category) => + category.name.toLowerCase().includes(trimmedInput.toLowerCase()), + ) + : availableCategories; + + const hasExactMatch = availableCategories.some( + (category) => category.name.toLowerCase() === trimmedInput.toLowerCase(), + ); + + const itemsToAdd: Category[] = + trimmedInput && !hasExactMatch + ? [...filteredCategories, { id: CREATE_ID, name: trimmedInput }] + : filteredCategories; + + const { + isOpen, + getMenuProps, + getInputProps, + highlightedIndex, + getItemProps, + openMenu, + } = useCombobox({ + items: itemsToAdd, + inputValue, + itemToKey: (item) => item?.id ?? '', + itemToString: (item) => item?.name ?? '', + onInputValueChange: ({ inputValue: newValue }) => { + setInputValue(newValue ?? ''); + }, + onSelectedItemChange({ selectedItem }) { + if (selectedItem) { + addItem(selectedItem); + } + }, + stateReducer(_state, actionAndChanges) { + const { changes, type } = actionAndChanges; + + if ( + changes.selectedItem && + type !== useCombobox.stateChangeTypes.InputBlur + ) { + return { + ...changes, + inputValue: '', + highlightedIndex: 0, + isOpen: false, + }; + } + + return changes; + }, + }); + + return ( +
+
+ { + openMenu(); + onFocus?.(e); + }, + })} + className={`${inputClassName} ${styles.input}`} + /> + + {onClose && ( + + )} + +
    0 ? styles.menuOpen : '', + ].join(' ')} + > + {isOpen && + itemsToAdd.map((item, index) => ( +
  • + {item.id === CREATE_ID ? `Create "${item.name}"` : item.name} +
    • + ))} +
+
+ + {selectedCategories.length > 0 && ( +
+ {selectedCategories.map((category, index) => ( + + {category.name} + + + ))} +
+ )} +
+ ); +} diff --git a/src/components/invoice-task-item/index.tsx b/src/components/invoice-task-item/index.tsx index a324715..dff5aef 100644 --- a/src/components/invoice-task-item/index.tsx +++ b/src/components/invoice-task-item/index.tsx @@ -60,10 +60,10 @@ export default function EditInvoiceTask({
setIsHourly(!isHourly)} - onLabel="Hourly" - offLabel="Fixed" + onLabel="Fixed" + offLabel="Hourly" size="small" />
diff --git a/src/components/task-form/index.tsx b/src/components/task-form/index.tsx index df0fd4a..b117c0e 100644 --- a/src/components/task-form/index.tsx +++ b/src/components/task-form/index.tsx @@ -1,7 +1,9 @@ import { useState } from 'react'; import { useTasks } from '@/contexts/TaskContext'; +import { useCategories } from '@/contexts/CategoryContext'; import SlideUpModalForm from '@/components/slide-up-modal-form'; import Toggle from '@/components/toggle'; +import CategoryPicker from '@/components/category-picker'; import { Client, Task } from '@/types'; import styles from './task-form.module.css'; @@ -15,9 +17,12 @@ export default function TaskForm({ client: Client; }) { const { addTask } = useTasks(); + const { categories, getOrCreateCategory } = useCategories(); const [description, setDescription] = useState(''); const [value, setValue] = useState(''); const [isHourly, setIsHourly] = useState(true); + const [date, setDate] = useState(''); + const [categoryIds, setCategoryIds] = useState([]); const [error, setError] = useState(''); const [prevVisible, setPrevVisible] = useState(visible); @@ -27,10 +32,23 @@ export default function TaskForm({ setDescription(''); setValue(''); setIsHourly(true); + setDate(''); + setCategoryIds([]); setError(''); } } + const handleAddCategory = async (name: string) => { + const category = await getOrCreateCategory(name); + if (category && !categoryIds.includes(category.id)) { + setCategoryIds([...categoryIds, category.id]); + } + }; + + const handleRemoveCategory = (categoryId: string) => { + setCategoryIds(categoryIds.filter((id) => id !== categoryId)); + }; + const handleSubmit = async () => { setError(''); @@ -54,6 +72,14 @@ export default function TaskForm({ task.price = Number(value); } + if (date) { + task.date = date; + } + + if (categoryIds.length) { + task.categories = categoryIds; + } + await addTask(task); } catch (err) { console.error(err); @@ -89,10 +115,10 @@ export default function TaskForm({
setIsHourly(!isHourly)} - onLabel="Hourly" - offLabel="Fixed" + onLabel="Fixed" + offLabel="Hourly" />
@@ -111,6 +137,34 @@ export default function TaskForm({
+ +
+
+ + setDate(e.target.value)} + /> +
+ +
+ + +
+
); diff --git a/src/components/task-form/task-form.module.css b/src/components/task-form/task-form.module.css index 34bbf75..1da3673 100644 --- a/src/components/task-form/task-form.module.css +++ b/src/components/task-form/task-form.module.css @@ -25,3 +25,21 @@ .fixedValueInput input { padding-left: calc(var(--space-s) * 1.8); } + +.metaRow { + flex-direction: column; +} + +.metaField { + width: 100%; +} + +@media screen and (min-width: 580px) { + .metaRow { + flex-direction: row; + } + + .metaField { + flex: 1; + } +} diff --git a/src/components/task-item/index.tsx b/src/components/task-item/index.tsx index fb46235..bb88283 100644 --- a/src/components/task-item/index.tsx +++ b/src/components/task-item/index.tsx @@ -2,10 +2,13 @@ import { useCallback, useState, useRef } from 'react'; import sanitizeHtml from 'sanitize-html'; import { useTasks } from '@/contexts/TaskContext'; import { useNewInvoice } from '@/contexts/NewInvoiceContext'; +import { useCategories } from '@/contexts/CategoryContext'; import Button from '@/components/button'; import Toggle from '@/components/toggle'; +import CategoryPicker from '@/components/category-picker'; import IconTrash from '@/icons/trash'; import IconCheckmark from '@/icons/checkmark'; +import IconPlus from '@/icons/plus'; import { moneyFormatter, taskCost } from '@/utils'; import { Task } from '@/types'; import styles from './task-item.module.css'; @@ -13,6 +16,7 @@ import styles from './task-item.module.css'; export default function TaskItem({ task, rate }: { task: Task; rate: number }) { const { isInvoicing, addTask, removeTask } = useNewInvoice(); const { updateTask, deleteTask } = useTasks(); + const { categories, getOrCreateCategory } = useCategories(); const [isSaving, setIsSaving] = useState(false); const [isConfirmingDeletion, setConfirmDelettion] = useState(false); const [isDeleting, setIsDeleting] = useState(false); @@ -20,8 +24,16 @@ export default function TaskItem({ task, rate }: { task: Task; rate: number }) { const [statusMessage, setStatusMessage] = useState(''); const [description, setDescription] = useState(task.description); const [hours, setHours] = useState(task.hours); - const [price, setPrice] = useState(() => task.isHourly ? 0 : taskCost(task, rate)); + const [price, setPrice] = useState(() => + task.isHourly ? 0 : taskCost(task, rate), + ); const [isHourly, setIsHourly] = useState(task.isHourly); + const [date, setDate] = useState(task.date || ''); + const [isAddingDate, setIsAddingDate] = useState(false); + const [categoryIds, setCategoryIds] = useState( + task.categories || [], + ); + const [isCategoryPickerOpen, setIsCategoryPickerOpen] = useState(false); const hoursInputRef = useRef(null); const costInputRef = useRef(null); const [prevIsInvoicing, setPrevIsInvoicing] = useState(isInvoicing); @@ -123,6 +135,74 @@ export default function TaskItem({ task, rate }: { task: Task; rate: number }) { } }; + const onDateBlur = useCallback( + async (e: React.FocusEvent) => { + // Compare against task.date (the last-persisted value) rather than + // the local `date` state -- onChange already updated `date` to match + // the newly picked value before blur fires, so comparing against it + // here would always see them as equal and skip the save. + const previousDate = task.date || ''; + const newDate = e.currentTarget.value; + + if (previousDate === newDate) { + setStatusMessage(''); + if (!newDate) { + setIsAddingDate(false); + } + return; + } + + setDate(newDate); + try { + await triggerTaskSave({ ...task, date: newDate || null }); + if (!newDate) { + setIsAddingDate(false); + } + // eslint-disable-next-line + } catch (error) { + setDate(previousDate); + } + }, + [task, triggerTaskSave], + ); + + const handleAddCategory = useCallback( + async (name: string) => { + const oldCategoryIds = categoryIds; + const category = await getOrCreateCategory(name); + + if (!category || oldCategoryIds.includes(category.id)) { + return; + } + + const newCategoryIds = [...oldCategoryIds, category.id]; + setCategoryIds(newCategoryIds); + try { + await triggerTaskSave({ ...task, categories: newCategoryIds }); + // eslint-disable-next-line + } catch (error) { + setCategoryIds(oldCategoryIds); + } + }, + [categoryIds, task, triggerTaskSave, getOrCreateCategory], + ); + + const handleRemoveCategory = useCallback( + async (categoryId: string) => { + const oldCategoryIds = categoryIds; + const newCategoryIds = oldCategoryIds.filter((id) => id !== categoryId); + + setCategoryIds(newCategoryIds); + try { + await triggerTaskSave({ ...task, categories: newCategoryIds }); + // eslint-disable-next-line + } catch (error) { + setCategoryIds(oldCategoryIds); + } + }, + [categoryIds, task, triggerTaskSave], + ); + const handleUnitToggle = async () => { const newIsHourly = !isHourly; setIsHourly(newIsHourly); @@ -181,7 +261,9 @@ export default function TaskItem({ task, rate }: { task: Task; rate: number }) { className={`weight-extrabold ${styles.taskCost} ${!isHourly ? styles.taskCostHoverable : ''}`} ref={costInputRef} > -
{moneyFormatter.format(displayedPrice || 0)}
+
+ {moneyFormatter.format(displayedPrice || 0)} +
{!isHourly && ( @@ -269,6 +351,93 @@ export default function TaskItem({ task, rate }: { task: Task; rate: number }) { +
+

+ Date + {date || isAddingDate ? ( + setStatusMessage('Editing...')} + onChange={(e) => setDate(e.target.value)} + onBlur={onDateBlur} + /> + ) : ( + + )} +

+ +
+ {isCategoryPickerOpen ? ( + <> + + Categories: + + setIsCategoryPickerOpen(false)} + /> + + ) : categoryIds.length > 0 ? ( +
+ {categoryIds.map((categoryId) => { + const category = categories.find((c) => c.id === categoryId); + if (!category) { + return null; + } + return ( + + {category.name} + + + ); + })} + +
+ ) : ( + + )} +
+
+ {isConfirmingDeletion && (

Do you really want to delete this task?

diff --git a/src/components/task-item/task-item.module.css b/src/components/task-item/task-item.module.css index af3d022..074cbbf 100644 --- a/src/components/task-item/task-item.module.css +++ b/src/components/task-item/task-item.module.css @@ -7,7 +7,6 @@ align-items: center; gap: var(--space-xs) var(--space-m); position: relative; - overflow: hidden; } .taskCost { @@ -23,7 +22,8 @@ .costInput, .description, .costDisplay, -.hours { +.hours, +.dateInput { transition: border-color 0.2s; padding: var(--space-xs); border: 1px dashed transparent; @@ -31,20 +31,34 @@ } .task:not(.invoicingActive):hover .description, -.task:not(.invoicingActive):hover .taskCostHoverable .costDisplay, +.task:not(.invoicingActive):hover .costDisplay, .task:not(.invoicingActive):hover .hours, -.task:not(.invoicingActive):hover .costInput { +.task:not(.invoicingActive):hover .costInput, +.task:not(.invoicingActive):hover .dateInput { border-color: var(--c-beige); } .task:not(.invoicingActive) .description:focus, .task:not(.invoicingActive) .hours:focus, -.task:not(.invoicingActive) .costInput:focus { +.task:not(.invoicingActive) .costDisplay:focus, +.task:not(.invoicingActive) .costInput:focus, +.task:not(.invoicingActive) .dateInput:focus { border-color: var(--c-midnight-green); border-style: solid; outline: none; } +.categoryInput { + padding: var(--space-xs); + border: 1px solid var(--bg-accent-border); + border-radius: var(--border-radius-small); + outline: none; +} + +.categoryInput:focus { + border-color: var(--c-midnight-green); +} + .costInput { position: absolute; top: 0; @@ -119,3 +133,96 @@ display: flex; gap: var(--space-m); } + +.taskMeta { + display: flex; + flex-wrap: wrap; + gap: var(--space-s); + align-items: center; + grid-column: 1 / -1; +} + +.categoryWrapper { + padding-left: var(--space-xs); +} + +.addDateButton { + margin-left: var(--space-xs); +} + +.categoriesDisplay { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-xs); +} + +.pill { + display: inline-flex; + align-items: center; + gap: 0.35em; + font-size: var(--step--1); + font-weight: var(--weight-semibold); + padding: 0.2em 0.4em 0.2em 0.75em; + border-radius: 100px; + background: var(--c-beige); + color: var(--c-black); + white-space: nowrap; +} + +.remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.2em; + height: 1.2em; + border-radius: 50%; + line-height: 1; + color: inherit; + transition: background-color 0.2s; +} + +.remove:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.categoryToggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.5em; + height: 1.5em; + border-radius: 50%; + color: var(--c-gray-dark); + transition: + background-color 0.2s, + color 0.2s; +} + +.categoryToggle svg { + width: 0.9em; + height: 0.9em; +} + +.categoryToggle:hover { + background-color: var(--c-beige-transparent); + color: var(--c-black); +} + +.addButton { + display: inline-flex; + align-items: center; + gap: 0.35em; + font-size: var(--step--1); + color: var(--c-gray-dark); + transition: color 0.2s; +} + +.addButton:hover { + color: var(--c-black); +} + +.addButton svg { + width: 0.9em; + height: 0.9em; +} diff --git a/src/contexts/CategoryContext.tsx b/src/contexts/CategoryContext.tsx new file mode 100644 index 0000000..2e50d46 --- /dev/null +++ b/src/contexts/CategoryContext.tsx @@ -0,0 +1,106 @@ +// contexts/CategoryContext.tsx +'use client'; + +import { RecordModel } from 'pocketbase'; +import pb from '@/lib/pocketbase'; +import { + ReactNode, + createContext, + useContext, + useEffect, + useRef, + useState, +} from 'react'; +import { useAuth } from '@/contexts/AuthContext'; +import { Category } from '@/types'; + +interface CategoryContextType { + areCategoriesLoaded: boolean; + categories: Category[]; + getOrCreateCategory: (name: string) => Promise; +} + +const CategoryContext = createContext( + undefined, +); + +const recordToCategory = (record: RecordModel): Category => ({ + id: record.id, + name: record.name, +}); + +export const CategoryProvider = ({ children }: { children: ReactNode }) => { + const [areCategoriesLoaded, setCategoriesLoaded] = useState(false); + const [categories, setCategories] = useState([]); + const { user } = useAuth(); + const hasFetchedRef = useRef(false); + const [prevUser, setPrevUser] = useState(user); + + if (prevUser !== user) { + setPrevUser(user); + if (!user) { + setCategories([]); + setCategoriesLoaded(false); + } + } + + useEffect(() => { + if (!user) { + hasFetchedRef.current = false; + return; + } + if (hasFetchedRef.current) return; + hasFetchedRef.current = true; + + async function fetchCategories() { + try { + const records = await pb.collection('categories').getFullList(); + setCategoriesLoaded(true); + setCategories(records.map(recordToCategory)); + } catch (error) { + console.error('Error fetching categories:', error); + } + } + + fetchCategories(); + }, [user]); + + const getOrCreateCategory = async ( + name: string, + ): Promise => { + const trimmed = name.trim(); + if (!trimmed) { + return null; + } + + const existing = categories.find( + (category) => category.name.toLowerCase() === trimmed.toLowerCase(), + ); + if (existing) { + return existing; + } + + const record = await pb + .collection('categories') + .create({ name: trimmed, user: user?.id }); + const category = recordToCategory(record); + setCategories((oldCategories) => [...oldCategories, category]); + return category; + }; + + return ( + + {children} + + ); +}; + +export const useCategories = () => { + const context = useContext(CategoryContext); + if (!context) { + throw new Error('useCategories must be used within a CategoryProvider'); + } + return context; +}; diff --git a/src/contexts/TaskContext.tsx b/src/contexts/TaskContext.tsx index 7b3de71..e90d810 100644 --- a/src/contexts/TaskContext.tsx +++ b/src/contexts/TaskContext.tsx @@ -36,6 +36,12 @@ const recordToTask = (record: RecordModel): Task => ({ isHourly: record.isHourly, hours: record.hours, price: record.price, + // PocketBase returns Date fields as a full timestamp (e.g. + // "2026-07-24 00:00:00.000Z"), but only accepts an + // exact YYYY-MM-DD value -- anything else is silently rejected and shown + // as blank, which looks like the date never saved even though it did. + date: record.date ? record.date.slice(0, 10) : null, + categories: record.categories, }); export const TaskProvider = ({ children }: { children: ReactNode }) => { diff --git a/src/types.ts b/src/types.ts index df12543..51e01a0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,6 +14,13 @@ export interface Task { isHourly: boolean; hours?: number | null; price?: number | null; + date?: string | null; + categories?: string[] | null; +} + +export interface Category { + id: string; + name: string; } export interface InvoicedTask {