jonas/donetick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #212 from everysingletear/i18n/new-namespaces

Browse Source 
i18n: add things, history, projects, labels, filters, timer and points namespaces (Part of #145)
This commit is contained in:
Mohamad Tarbin
2026-08-13 19:39:39 -04:00
committed by GitHub
parent 8b33ba7c5d f193c46d73
commit ba8d8fbdb1
23 changed files with 580 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/locales/en/chores.json
View File

@@ -71,5 +71,11 @@
"reset": "Reset Timer",
"delete": "Delete Session"
}
},
"toolbar": {
"defaultProject": "Default Project"
},
"sort": {
"assignedToMe": "Assigned to me"
}
}

17
public/locales/en/filters.json Normal file
View File

@@ -0,0 +1,17 @@
{
"builder": {
"errorName": "Please enter a filter name",
"errorConditions": "Please configure at least one filter condition",
"editTitle": "Edit Filter",
"newTitle": "New Filter",
"addConditions": "Add conditions to preview",
"save": "Save Filter",
"name": "Filter Name",
"namePlaceholder": "e.g. Overdue tasks for Alice",
"color": "Color"
},
"nameExists": "A filter with this name already exists",
"tasks_one": "{{count}} task",
"tasks_other": "{{count}} tasks",
"overdue": "{{count}} overdue"
}

89
public/locales/en/history.json Normal file
View File

@@ -0,0 +1,89 @@
{
"edit": {
"title": "Edit History",
"completedDate": "Completed Date",
"note": "Note",
"additionalNotes": "Additional Notes",
"deleteTitle": "Delete History",
"deleteMessage": "Are you sure you want to delete this history?"
},
"status": {
"inProgress": "In Progress",
"completed": "Completed",
"skipped": "Skipped",
"pendingApproval": "Pending Approval",
"rejected": "Rejected",
"missed": "Missed",
"rescheduled": "Rescheduled",
"scheduled": "Scheduled"
},
"badge": {
"onTime": "On Time",
"onTimeLabel": "On time"
},
"detail": {
"title": "Activity Detail",
"openTask": "Open Task",
"editEntry": "Edit Entry",
"performedBy": "Performed by",
"assignedTo": "Assigned to",
"lastUpdated": "Last updated",
"duration": "Duration",
"pointsEarned": "Points earned",
"points_one": "{{count}} pt",
"points_other": "{{count}} pts",
"note": "Note"
},
"charts": {
"noData": "No data available",
"noLabels": "No Labels",
"unassigned": "Unassigned",
"unknownTask": "Unknown Task",
"late": "Late",
"status": {
"title": "Status",
"description": "Completed tasks status"
},
"due": {
"title": "Due Date",
"description": "Current tasks due date"
},
"priority": {
"title": "Priority",
"description": "Tasks by priority"
},
"labels": {
"title": "Labels",
"description": "Tasks by labels"
},
"labelsDuration": {
"title": "Labels (time)",
"description": "Time spent by labels (hours)"
},
"tasksTime": {
"title": "Tasks (time)",
"description": "Time spent by individual tasks (hours)"
},
"assigneeBreakdown": {
"title": "by Assignee",
"description": "Tasks grouped by assignee"
}
},
"filter": {
"status": "Status",
"pending": "Pending",
"labels": "Labels",
"hasNotes": "Has Notes",
"hasPoints": "Has Points",
"timePeriod": "Time Period",
"user": "User"
},
"period": {
"days_one": "{{count}} Day",
"days_other": "{{count}} Days",
"allTime": "All Time"
},
"activities": {
"title": "Activities"
}
}

9
public/locales/en/labels.json Normal file
View File

@@ -0,0 +1,9 @@
{
"shared": "Shared",
"delete": {
"title": "Delete Label",
"message": "Are you sure you want to delete this label? This will remove the label from all tasks."
},
"loadError": "Failed to load labels. Please try again.",
"blurb": "Manage your labels and organize your tasks effectively. Labels will be automatically shared with your circle if they are used on a shared task."
}

74
public/locales/en/points.json Normal file
View File

@@ -0,0 +1,74 @@
{
"redeem": "Redeem Points",
"redeemModal": {
"redeemButton": "Redeem",
"pointsAvailable": "{{count}} points available",
"pointsToRedeem": "Points to Redeem",
"placeholder": "Enter points...",
"cannotExceed": "Cannot exceed available points",
"quickAdd": "Quick Add:",
"aboutToRedeem": "You are about to redeem",
"amount": "{{count}} points",
"remaining": "Remaining: {{count}} points"
},
"leaderboard": {
"titlePoints": "Points Leaderboard",
"titleTasks": "Tasks Leaderboard",
"subtitlePoints": "Rankings based on points earned during the selected time period",
"subtitleTasks": "Rankings based on tasks completed during the selected time period",
"modePoints": "Points",
"modeTasks": "Tasks",
"you": "You",
"tasksAndAvg": "{{tasks}} tasks • {{avg}} avg per task",
"available": "{{count}} available",
"points_one": "{{count}} point",
"points_other": "{{count}} points"
},
"tabs": {
"short7d": "7D",
"short6m": "6M",
"shortAll": "All",
"days7": "7 Days",
"months6": "6 Months",
"allTime": "All Time"
},
"filter": {
"analysisTitle": "Filter & Analysis",
"title": "Filter Points",
"showFor": "Show points for:",
"timePeriod": "Time period:"
},
"cards": {
"available": {
"title": "Available",
"subtext": "Ready to redeem"
},
"redeemed": {
"title": "Redeemed",
"subtext": "Previously used"
},
"total": {
"title": "Total",
"subtext": "All time earned"
},
"period": {
"title": "Period Points",
"allTime": "All time",
"last6Months": "Last 6 months",
"lastDays_one": "Last {{count}} day",
"lastDays_other": "Last {{count}} days"
}
},
"summary": {
"showingFor": "Showing points for",
"unknownUser": "Unknown User",
"overThe": "over the",
"allTime": "All Time",
"last6Months": "Last 6 Months",
"lastDays_one": "Last {{count}} Day",
"lastDays_other": "Last {{count}} Days"
},
"trend": {
"title": "Points Trend"
}
}

24
public/locales/en/projects.json Normal file
View File

@@ -0,0 +1,24 @@
{
"iconPicker": {
"chooseIcon": "Choose Project Icon",
"availableIcons": "Available Icons"
},
"defaultChip": "Default",
"tasks_one": "{{count}} task",
"tasks_other": "{{count}} tasks",
"shared": "Shared",
"delete": {
"title": "Delete Project",
"message": "Are you sure you want to delete \"{{name}}\"? This will remove the project but keep all tasks (they'll move to the Default Project)."
},
"loadError": "Failed to load projects. Please try again.",
"blurb": "Organize your tasks into projects. Create custom workspaces to keep your tasks organized and easily accessible.",
"defaultDescription": "All tasks without a specific project",
"selector": {
"title": "Projects",
"createNew": "Create New Project",
"createNewDescription": "Add a custom project workspace",
"manage": "Manage Projects",
"manageDescription": "View, edit, and organize all projects"
}
}

18
public/locales/en/things.json Normal file
View File

@@ -0,0 +1,18 @@
{
"errName": "Name is required",
"errStateNumber": "State must be a number",
"errStateBool": "State must be true or false",
"errStateRequired": "State is required",
"name": "Name",
"namePlaceholder": "Thing name",
"value": "Value",
"valuePlaceholder": "Thing value",
"updateState": "Update state",
"update": "Update",
"history": {
"overview": "Things Overview",
"visualization": "Data Visualization",
"changeHistory": "Change History",
"updated": "Updated"
}
}

29
public/locales/en/timer.json Normal file
View File

@@ -0,0 +1,29 @@
{
"toast": {
"sessionUpdatedTitle": "Session updated",
"sessionUpdatedMessage": "Timer session has been updated successfully.",
"sessionUpdateFailTitle": "Failed to update session",
"tryAgain": "Please try again.",
"sessionUpdateErrorTitle": "Error updating session",
"sessionDeletedTitle": "Session deleted",
"sessionDeletedMessage": "Timer session has been deleted successfully.",
"sessionDeleteErrorTitle": "Error deleting session",
"deleteConfirmTitle": "Delete Timer Session",
"deleteConfirmMessage": "Are you sure you want to delete this timer session?"
},
"loading": "Loading timer data...",
"noData": "No timer data found for this chore.",
"activeWork": "Active Work",
"breakTime": "Break Time",
"workSessions": "Work Sessions",
"totalTime": "Total Time",
"distribution": "Work vs Break Distribution",
"noActiveTime": "No active time yet",
"sessionBreakdown": "Session Breakdown",
"sessions": "Sessions",
"addSession": "Add Session",
"startTime": "Start Time",
"endTime": "End Time",
"leaveEmpty": "Leave empty if session is ongoing",
"noSessionForChore": "No timer session found for this chore."
}

14
src/i18n/config.js
View File

@@ -22,7 +22,19 @@ i18n
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
ns: ['common', 'settings', 'chores', 'auth'],
ns: [
'auth',
'common',
'settings',
'chores',
'labels',
'history',
'filters',
'things',
'projects',
'timer',
'points',
],
defaultNS: 'common',
detection: {

28
src/views/Labels/LabelView.jsx
View File

@@ -11,6 +11,7 @@ import {
Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import LabelModal from '../Modals/Inputs/LabelModal'
import {
@@ -32,6 +33,7 @@ import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
import { useLabels } from './LabelQueries'
const LabelCardContent = ({ label, currentUserId, onToggleActions }) => {
const { t } = useTranslation('labels')
// Check if current user owns this label
const isOwnedByCurrentUser = label.created_by === currentUserId
@@ -124,7 +126,7 @@ const LabelCardContent = ({ label, currentUserId, onToggleActions }) => {
fontWeight: 'md',
}}
>
Shared
{t('shared')}
</Chip>
)}
</Box>
@@ -149,6 +151,7 @@ const LabelCardContent = ({ label, currentUserId, onToggleActions }) => {
}
const LabelView = () => {
const { t } = useTranslation('labels')
const { data: labels, isLabelsLoading, isError } = useLabels()
const { data: userProfile } = useUserProfile()
@@ -173,14 +176,11 @@ const LabelView = () => {
const handleDeleteClicked = id => {
setConfirmationModel({
isOpen: true,
title: 'Delete Label',
message:
'Are you sure you want to delete this label? This will remove the label from all tasks.',
confirmText: 'Delete',
title: t('delete.title'),
message: t('delete.message'),
confirmText: t('common:delete'),
color: 'danger',
cancelText: 'Cancel',
cancelText: t('common:cancel'),
onClose: confirmed => {
if (confirmed === true) {
handleDeleteLabel(id)
@@ -230,7 +230,7 @@ const LabelView = () => {
if (isError) {
return (
<Typography color='danger' textAlign='center'>
Failed to load labels. Please try again.
{t('loadError')}
</Typography>
)
}
@@ -244,12 +244,10 @@ const LabelView = () => {
level='h3'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Labels
{t('common:navigation.labels')}
</Typography>
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
Manage your labels and organize your tasks effectively. Labels will
be automatically shared with your circle if they are used on a
shared task.
{t('blurb')}
</Typography>
</Stack>
</Box>
@@ -300,7 +298,7 @@ const LabelView = () => {
>
<EditIcon sx={{ fontSize: 20 }} />
<Typography level='body-xs' sx={{ mt: 0.5 }}>
Edit
{t('common:edit')}
</Typography>
</Box>
</SwipeAction>
@@ -319,7 +317,7 @@ const LabelView = () => {
>
<DeleteIcon sx={{ fontSize: 20 }} />
<Typography level='body-xs' sx={{ mt: 0.5 }}>
Delete
{t('common:delete')}
</Typography>
</Box>
</SwipeAction>

26
src/views/Modals/EditHistoryModal.jsx
View File

@@ -1,12 +1,14 @@
import { FormLabel, Input } from '@mui/joy'
import moment from 'moment'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import ModalActions from '../../components/common/ModalActions'
import { useResponsiveModal } from '../../hooks/useResponsiveModal'
import ConfirmationModal from './Inputs/ConfirmationModal'
function EditHistoryModal({ config, historyRecord }) {
const { t } = useTranslation('history')
const { ResponsiveModal } = useResponsiveModal()
const [completedDate, setCompletedDate] = useState('')
@@ -40,12 +42,12 @@ function EditHistoryModal({ config, historyRecord }) {
onClose={config?.onClose}
size='lg'
// fullWidth={true}
title='Edit History'
title={t('edit.title')}
footer={
<ModalActions
secondary={{ label: 'Cancel', onClick: config.onClose }}
secondary={{ label: t('common:cancel'), onClick: config.onClose }}
primary={{
label: 'Save',
label: t('common:save'),
onClick: () =>
config.onSave({
id: historyRecord.id,
@@ -57,7 +59,7 @@ function EditHistoryModal({ config, historyRecord }) {
/>
}
>
<FormLabel>Due Date</FormLabel>
<FormLabel>{t('chores:dueDate')}</FormLabel>
<Input
type='datetime-local'
value={dueDate}
@@ -66,7 +68,7 @@ function EditHistoryModal({ config, historyRecord }) {
}}
sx={{ mb: 2 }}
/>
<FormLabel>Completed Date</FormLabel>
<FormLabel>{t('edit.completedDate')}</FormLabel>
<Input
type='datetime-local'
value={completedDate}
@@ -75,12 +77,12 @@ function EditHistoryModal({ config, historyRecord }) {
}}
sx={{ mb: 2 }}
/>
<FormLabel>Note</FormLabel>
<FormLabel>{t('edit.note')}</FormLabel>
<Input
fullWidth
multiline
label='Additional Notes'
placeholder='Additional Notes'
label={t('edit.additionalNotes')}
placeholder={t('edit.additionalNotes')}
value={notes}
onChange={e => {
if (e.target.value.trim() === '') {
@@ -104,10 +106,10 @@ function EditHistoryModal({ config, historyRecord }) {
}
setIsDeleteModalOpen(false)
},
title: 'Delete History',
message: 'Are you sure you want to delete this history?',
confirmText: 'Delete',
cancelText: 'Cancel',
title: t('edit.deleteTitle'),
message: t('edit.deleteMessage'),
confirmText: t('common:delete'),
cancelText: t('common:cancel'),
color: 'danger',
}}
/>

42
src/views/Modals/HistoryDetailModal.jsx
View File

@@ -14,6 +14,7 @@ import {
} from '@mui/icons-material'
import { Avatar, Box, Button, Chip, Divider, Stack, Typography } from '@mui/joy'
import moment from 'moment'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import ModalActions from '../../components/common/ModalActions'
import { useLocalization } from '../../contexts/LocalizationContext'
@@ -22,13 +23,13 @@ import { TASK_COLOR } from '../../utils/Colors.jsx'
import RichTextEditor from '../components/RichTextEditor.jsx'
const STATUS_CONFIG = {
0: { label: 'In Progress', color: 'primary', icon: <AccessTime /> },
1: { label: 'Completed', color: 'success', icon: <Check /> },
2: { label: 'Skipped', color: 'warning', icon: <Redo /> },
3: { label: 'Pending Approval', color: 'neutral', icon: <HourglassEmpty /> },
4: { label: 'Rejected', color: 'danger', icon: <ThumbDown /> },
5: { label: 'Missed', color: 'danger', icon: <RunningWithErrors /> },
6: { label: 'Rescheduled', color: 'warning', icon: <Schedule /> },
0: { label: t('status.inProgress'), color: 'primary', icon: <AccessTime /> },
1: { label: t('status.completed'), color: 'success', icon: <Check /> },
2: { label: t('status.skipped'), color: 'warning', icon: <Redo /> },
3: { label: t('status.pendingApproval'), color: 'neutral', icon: <HourglassEmpty /> },
4: { label: t('status.rejected'), color: 'danger', icon: <ThumbDown /> },
5: { label: t('status.missed'), color: 'danger', icon: <RunningWithErrors /> },
6: { label: t('status.rescheduled'), color: 'warning', icon: <Schedule /> },
}
const DetailRow = ({ icon, label, value, children }) => (
@@ -55,6 +56,8 @@ const DetailRow = ({ icon, label, value, children }) => (
)
const TimingBadge = ({ historyEntry }) => {
const { t } = useTranslation('history')
if (!historyEntry.dueDate || !historyEntry.performedAt) return null
if ([0, 5, 6].includes(historyEntry.status)) return null
@@ -71,7 +74,7 @@ const TimingBadge = ({ historyEntry }) => {
sx={{ backgroundColor: TASK_COLOR.COMPLETED, color: 'white' }}
startDecorator={<Check />}
>
On Time
{t('badge.onTime')}
</Chip>
)
} else if (performedAt.isBefore(dueDate)) {
@@ -103,6 +106,7 @@ const TimingBadge = ({ historyEntry }) => {
}
function HistoryDetailModal({ config }) {
const { t } = useTranslation('history')
const { ResponsiveModal } = useResponsiveModal()
const { fmt } = useLocalization()
const navigate = useNavigate()
@@ -114,7 +118,9 @@ function HistoryDetailModal({ config }) {
const statusCfg = STATUS_CONFIG[entry.status] ?? STATUS_CONFIG[1]
const isFirstSchedule = entry.status === 6 && !entry.dueDate
const statusLabel = isFirstSchedule ? 'Scheduled' : statusCfg.label
const statusLabel = isFirstSchedule
? t('status.scheduled')
: t(statusCfg.labelKey)
const performer = performers.find(p => p.userId === entry.completedBy)
const assignedTo = performers.find(p => p.userId === entry.assignedTo)
const isDifferentAssignee =
@@ -138,7 +144,7 @@ function HistoryDetailModal({ config }) {
<ResponsiveModal
open={config?.isOpen}
onClose={config?.onClose}
title='Activity Detail'
title={t('detail.title')}
footer={
<ModalActions>
{entry.choreId && (
@@ -151,7 +157,7 @@ function HistoryDetailModal({ config }) {
navigate(`/chores/${entry.choreId}`)
}}
>
Open Task
{t('detail.openTask')}
</Button>
)}
{config?.onEdit && (
@@ -159,7 +165,7 @@ function HistoryDetailModal({ config }) {
startDecorator={<Edit sx={{ fontSize: 16 }} />}
onClick={() => config.onEdit(entry)}
>
Edit Entry
{t('detail.editEntry')}
</Button>
)}
</ModalActions>
@@ -196,7 +202,7 @@ function HistoryDetailModal({ config }) {
{performer && (
<DetailRow
icon={<Check sx={{ fontSize: 16 }} />}
label='Performed by'
label={t('detail.performedBy')}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
<Avatar
@@ -216,7 +222,7 @@ function HistoryDetailModal({ config }) {
{isDifferentAssignee && assignedTo && (
<DetailRow
icon={<Person sx={{ fontSize: 16 }} />}
label='Assigned to'
label={t('detail.assignedTo')}
value={assignedTo.displayName}
/>
)}
@@ -259,7 +265,7 @@ function HistoryDetailModal({ config }) {
{showUpdatedAt && (
<DetailRow
icon={<Update sx={{ fontSize: 16 }} />}
label='Last updated'
label={t('detail.lastUpdated')}
value={fmt.dateTime(entry.updatedAt)}
/>
)}
@@ -268,7 +274,7 @@ function HistoryDetailModal({ config }) {
{entry.duration > 0 && (
<DetailRow
icon={<Schedule sx={{ fontSize: 16 }} />}
label='Duration'
label={t('detail.duration')}
value={formatDuration(entry.duration)}
/>
)}
@@ -277,8 +283,8 @@ function HistoryDetailModal({ config }) {
{entry.points > 0 && (
<DetailRow
icon={<Typography sx={{ fontSize: 14 }}>★</Typography>}
label='Points earned'
value={`${entry.points} pt${entry.points > 1 ? 's' : ''}`}
label={t('detail.pointsEarned')}
value={t('detail.points', { count: entry.points })}
/>
)}

28
src/views/Modals/Inputs/AdvancedFilterBuilder.jsx
View File

@@ -11,6 +11,7 @@ import FilterBuilderContent, {
import { FILTER_COLORS } from '../../../utils/Colors'
import { applyFilter } from '../../../utils/FilterEngine'
import { useFilters } from '../../Filters/FilterQueries'
import { useTranslation } from 'react-i18next'
const EMPTY_FILTERS = []
@@ -25,6 +26,7 @@ const AdvancedFilterBuilder = ({
userProfile = null,
editingFilter = null,
}) => {
const { t } = useTranslation('filters')
const [filterName, setFilterName] = useState('')
const [filterColor, setFilterColor] = useState(FILTER_COLORS[0].value)
const [selections, setSelections] = useState(defaultSelections())
@@ -76,15 +78,15 @@ const AdvancedFilterBuilder = ({
const handleSave = () => {
if (!filterName.trim()) {
setError('Please enter a filter name')
setError(t('builder.errorName'))
return
}
if (filterNameExists(filterName.trim(), editingFilter?.id)) {
setError('A filter with this name already exists')
setError(t('nameExists'))
return
}
if (conditions.length === 0) {
setError('Please configure at least one filter condition')
setError(t('builder.errorConditions'))
return
}
onSave({
@@ -106,7 +108,7 @@ const AdvancedFilterBuilder = ({
maxHeight='92vh'
title={
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{editingFilter ? 'Edit Filter' : 'New Filter'}
{editingFilter ? t('builder.editTitle') : t('builder.newTitle')}
{activeConditionCount > 0 && (
<Chip size='sm' variant='solid' color='primary'>
{activeConditionCount} condition
@@ -129,17 +131,17 @@ const AdvancedFilterBuilder = ({
{conditions.length > 0 ? (
<>
<Chip size='sm' variant='soft' color='neutral'>
{previewCount} task{previewCount !== 1 ? 's' : ''}
{t('tasks', { count: previewCount })}
</Chip>
{previewOverdueCount > 0 && (
<Chip size='sm' variant='solid' color='danger'>
{previewOverdueCount} overdue
{t('overdue', { count: previewOverdueCount })}
</Chip>
)}
</>
) : (
<Typography level='body-xs' sx={{ color: 'text.tertiary' }}>
Add conditions to preview
{t('builder.addConditions')}
</Typography>
)}
</Box>
@@ -147,7 +149,7 @@ const AdvancedFilterBuilder = ({
{/* Actions */}
<ModalActions>
<Button variant='outlined' color='neutral' onClick={onClose}>
Cancel
{t('common:cancel')}
</Button>
<Button
variant='solid'
@@ -155,7 +157,7 @@ const AdvancedFilterBuilder = ({
startDecorator={<Save sx={{ fontSize: 16 }} />}
onClick={handleSave}
>
Save Filter
{t('builder.save')}
</Button>
</ModalActions>
</Box>
@@ -168,10 +170,10 @@ const AdvancedFilterBuilder = ({
level='body-xs'
sx={{ mb: 0.75, color: 'text.secondary', fontWeight: 600 }}
>
Filter Name
{t('builder.name')}
</Typography>
<Input
placeholder='e.g. Overdue tasks for Alice'
placeholder={t('builder.namePlaceholder')}
value={filterName}
onChange={e => {
setFilterName(e.target.value)
@@ -193,13 +195,13 @@ const AdvancedFilterBuilder = ({
level='body-xs'
sx={{ mb: 0.75, color: 'text.secondary', fontWeight: 600 }}
>
Color
{t('builder.color')}
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
{FILTER_COLORS.map(c => (
<Box
key={c.value}
title={c.name}
title={t(`common:colors.${c.key}`)}
onClick={() => setFilterColor(c.value)}
sx={{
width: 26,

24
src/views/Modals/Inputs/CreateThingModal.jsx
View File

@@ -10,8 +10,10 @@ import {
import { useEffect, useState } from 'react'
import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { useTranslation } from 'react-i18next'
function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
const { t } = useTranslation('things')
const { ResponsiveModal } = useResponsiveModal()
const [name, setName] = useState(currentThing?.name || '')
@@ -33,17 +35,17 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
const isValid = () => {
const newErrors = {}
if (!name || name.trim() === '') {
newErrors.name = 'Name is required'
newErrors.name = t('errName')
}
if (type === 'number' && isNaN(state)) {
newErrors.state = 'State must be a number'
newErrors.state = t('errStateNumber')
}
if (type === 'boolean' && !['true', 'false'].includes(state)) {
newErrors.state = 'State must be true or false'
newErrors.state = t('errStateBool')
}
if ((type === 'text' && !state) || state.trim() === '') {
newErrors.state = 'State is required'
newErrors.state = t('errStateRequired')
}
setErrors(newErrors)
@@ -67,7 +69,7 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
footer={
<ModalActions
secondary={{
label: 'Cancel',
label: t('common:cancel'),
onClick: onClose,
}}
primary={{
@@ -78,9 +80,9 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
}
>
<FormControl>
<Typography>Name</Typography>
<Typography>{t('name')}</Typography>
<Textarea
placeholder='Thing name'
placeholder={t('namePlaceholder')}
value={name}
onChange={e => setName(e.target.value)}
sx={{ minWidth: 300 }}
@@ -101,9 +103,9 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
</FormControl>
{type === 'text' && (
<FormControl>
<Typography>Value</Typography>
<Typography>{t('value')}</Typography>
<Input
placeholder='Thing value'
placeholder={t('valuePlaceholder')}
value={state || ''}
onChange={e => setState(e.target.value)}
sx={{ minWidth: 300 }}
@@ -113,9 +115,9 @@ function CreateThingModal({ isOpen, onClose, onSave, currentThing }) {
)}
{type === 'number' && (
<FormControl>
<Typography>Value</Typography>
<Typography>{t('value')}</Typography>
<Input
placeholder='Thing value'
placeholder={t('valuePlaceholder')}
type='number'
value={state || ''}
onChange={e => {

14
src/views/Modals/Inputs/EditThingState.jsx
View File

@@ -2,8 +2,10 @@ import { FormControl, FormHelperText, Input, Typography } from '@mui/joy'
import { useState } from 'react'
import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { useTranslation } from 'react-i18next'
function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
const { t } = useTranslation('things')
const { ResponsiveModal } = useResponsiveModal()
const [state, setState] = useState(currentThing?.state || '')
@@ -13,7 +15,7 @@ function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
const newErrors = {}
if (state.trim() === '') {
newErrors.state = 'State is required'
newErrors.state = t('errStateRequired')
}
setErrors(newErrors)
@@ -38,18 +40,18 @@ function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
open={isOpen}
onClose={onClose}
size='sm'
title='Update state'
title={t('updateState')}
footer={
<ModalActions
secondary={{ label: 'Cancel', onClick: onClose }}
primary={{ label: 'Update', onClick: handleSave }}
secondary={{ label: t('common:cancel'), onClick: onClose }}
primary={{ label: t('update'), onClick: handleSave }}
/>
}
>
<FormControl>
<Typography>Value</Typography>
<Typography>{t('value')}</Typography>
<Input
placeholder='Thing value'
placeholder={t('valuePlaceholder')}
value={state || ''}
onChange={e => setState(e.target.value)}
sx={{ minWidth: 300 }}

10
src/views/Modals/Inputs/IconPickerModal.jsx
View File

@@ -3,6 +3,7 @@ import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
import { getTextColorFromBackgroundColor } from '../../../utils/Colors'
import PROJECT_ICONS from '../../../utils/ProjectIcons'
import { useTranslation } from 'react-i18next'
const IconPickerModal = ({
isOpen,
@@ -11,6 +12,7 @@ const IconPickerModal = ({
currentIcon,
projectColor,
}) => {
const { t } = useTranslation('projects')
const { ResponsiveModal } = useResponsiveModal()
const handleIconClick = iconValue => {
@@ -25,13 +27,13 @@ const IconPickerModal = ({
size='lg'
fullWidth={true}
unmountDelay={250}
title='Choose Project Icon'
title={t('iconPicker.chooseIcon')}
footer={
<ModalActions secondary={{ label: 'Cancel', onClick: onClose }} />
<ModalActions secondary={{ label: t('common:cancel'), onClick: onClose }} />
}
>
<FormControl>
<FormLabel>Available Icons</FormLabel>
<FormLabel>{t('iconPicker.availableIcons')}</FormLabel>
<Grid
container
spacing={1}
@@ -85,7 +87,7 @@ const IconPickerModal = ({
lineHeight: 1.2,
}}
>
{iconData.name}
{t(`icons.${iconData.key}`)}
</Typography>
</Box>
</Grid>

66
src/views/Modals/Inputs/TimerEditModal.jsx
View File

@@ -12,6 +12,7 @@ import {
} from '@mui/joy'
import moment from 'moment'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useLocalization } from '../../../contexts/LocalizationContext'
import ModalActions from '../../../components/common/ModalActions'
import { useResponsiveModal } from '../../../hooks/useResponsiveModal'
@@ -24,6 +25,7 @@ import {
import ConfirmationModal from './ConfirmationModal'
const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
const { t } = useTranslation('timer')
const { ResponsiveModal } = useResponsiveModal()
const { fmt } = useLocalization()
@@ -181,8 +183,8 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
{
onSuccess: () => {
showSuccess({
title: 'Session updated',
message: 'Timer session has been updated successfully.',
title: t('toast.sessionUpdatedTitle'),
message: t('toast.sessionUpdatedMessage'),
})
refetchTimer()
cancelEditingSession(sessionId)
@@ -190,15 +192,15 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
},
onError: () => {
showError({
title: 'Failed to update session',
message: 'Please try again.',
title: t('toast.sessionUpdateFailTitle'),
message: t('toast.tryAgain'),
})
},
},
)
} catch (error) {
showError({
title: 'Error updating session',
title: t('toast.sessionUpdateErrorTitle'),
message: error.message,
})
} finally {
@@ -213,15 +215,15 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
{
onSuccess: () => {
showSuccess({
title: 'Session deleted',
message: 'Timer session has been deleted successfully.',
title: t('toast.sessionDeletedTitle'),
message: t('toast.sessionDeletedMessage'),
})
refetchTimer()
onTimerUpdate?.()
},
onError: error => {
showError({
title: 'Error deleting session',
title: t('toast.sessionDeleteErrorTitle'),
message: error.message,
})
},
@@ -235,10 +237,10 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
const confirmDeleteSession = sessionId => {
setConfirmDeleteConfig({
isOpen: true,
title: 'Delete Timer Session',
message: 'Are you sure you want to delete this timer session?',
confirmText: 'Delete',
cancelText: 'Cancel',
title: t('toast.deleteConfirmTitle'),
message: t('toast.deleteConfirmMessage'),
confirmText: t('common:delete'),
cancelText: t('common:cancel'),
color: 'danger',
onClose: isConfirmed => {
if (isConfirmed) {
@@ -310,23 +312,23 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
tertiary={
!loading && timerData && !editingSessions[timerData.id]
? {
label: 'Delete',
label: t('common:delete'),
color: 'danger',
onClick: () => confirmDeleteSession(timerData.id),
}
: undefined
}
secondary={{ label: 'Close', onClick: handleClose }}
secondary={{ label: t('common:close'), onClick: handleClose }}
primary={
!loading && timerData
? editingSessions[timerData.id]
? {
label: 'Save',
label: t('common:save'),
onClick: () => saveSession(timerData.id),
loading,
}
: {
label: 'Edit',
label: t('common:edit'),
startDecorator: <Edit />,
onClick: () => startEditingSession(),
}
@@ -337,13 +339,13 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
>
{loading && (
<Alert color='neutral' sx={{ mb: 2 }}>
Loading timer data...
{t('loading')}
</Alert>
)}
{!loading && !timerData && (
<Alert color='warning' sx={{ mb: 2 }}>
No timer data found for this chore.
{t('noData')}
</Alert>
)}
@@ -403,7 +405,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
color: 'text.primary',
}}
>
Active Work
{t('activeWork')}
</Typography>
</Box>
<Box>
@@ -457,7 +459,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
color: 'text.primary',
}}
>
Break Time
{t('breakTime')}
</Typography>
</Box>
<Box>
@@ -511,7 +513,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
color: 'text.primary',
}}
>
Work Sessions
{t('workSessions')}
</Typography>
</Box>
<Box>
@@ -565,7 +567,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
color: 'text.primary',
}}
>
Total Time
{t('totalTime')}
</Typography>
</Box>
<Box>
@@ -597,12 +599,12 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
level='body-xs'
sx={{ color: 'text.secondary', fontWeight: 'medium' }}
>
Work vs Break Distribution
{t('distribution')}
</Typography>
<Typography level='body-xs' sx={{ color: 'text.tertiary' }}>
{calculateCurrentActiveDuration() > 0
? `${Math.round((calculateCurrentActiveDuration() / calculateTotalDuration()) * 100)}% active`
: 'No active time yet'}
: t('noActiveTime')}
</Typography>
</Box>
<Box
@@ -630,7 +632,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
{/* Time Session */}
<Box>
<Typography level='h4' sx={{ mb: 2 }}>
Session Breakdown
{t('sessionBreakdown')}
</Typography>
<Box>
@@ -644,7 +646,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
level='body-sm'
sx={{ fontWeight: 'bold', mb: 2 }}
>
Work Sessions ({timerData.pauseLog.length})
{t('workSessions')} ({timerData.pauseLog.length})
</Typography>
<Box
@@ -795,7 +797,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
level='body-sm'
sx={{ fontWeight: 'bold' }}
>
Sessions
{t('sessions')}
</Typography>
<Button
size='sm'
@@ -803,7 +805,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
startDecorator={<Add />}
onClick={() => addPauseLogEntry(timerData.id)}
>
Add Session
{t('addSession')}
</Button>
</Box>
@@ -855,7 +857,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
level='body-xs'
sx={{ fontWeight: 'bold' }}
>
Start Time
{t('startTime')}
</Typography>
<Input
type='datetime-local'
@@ -878,7 +880,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
level='body-xs'
sx={{ fontWeight: 'bold' }}
>
End Time
{t('endTime')}
</Typography>
<Input
type='datetime-local'
@@ -903,7 +905,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
}
/>
<FormHelperText>
Leave empty if session is ongoing
{t('leaveEmpty')}
</FormHelperText>
</FormControl>
@@ -941,7 +943,7 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
{!timerData && (
<Alert color='neutral' sx={{ mt: 2 }}>
No timer session found for this chore.
{t('noSessionForChore')}
</Alert>
)}
</Box>

26
src/views/Modals/RedeemPointsModal.jsx
View File

@@ -11,6 +11,7 @@ import {
Stack,
Typography,
} from '@mui/joy'
import { useTranslation } from 'react-i18next'
import { useEffect, useState } from 'react'
import ModalActions from '../../components/common/ModalActions.jsx'
@@ -18,6 +19,7 @@ import { useResponsiveModal } from '../../hooks/useResponsiveModal.js'
import { resolvePhotoURL } from '../../utils/Helpers.jsx'
function RedeemPointsModal({ config }) {
const { t } = useTranslation('points')
const { ResponsiveModal } = useResponsiveModal()
const [points, setPoints] = useState(0)
@@ -56,12 +58,12 @@ function RedeemPointsModal({ config }) {
open={config?.isOpen}
onClose={config?.onClose}
size='md'
title='Redeem Points'
title={t('redeem')}
footer={
<ModalActions
secondary={{ label: 'Cancel', onClick: config?.onClose }}
secondary={{ label: t('common:cancel'), onClick: config?.onClose }}
primary={{
label: 'Redeem',
label: t('redeemModal.redeemButton'),
startDecorator: <CreditCard />,
disabled: !canRedeem,
onClick: () =>
@@ -103,7 +105,7 @@ function RedeemPointsModal({ config }) {
startDecorator={<Toll />}
sx={{ mt: 0.5 }}
>
{config?.available || 0} points available
{t('redeemModal.pointsAvailable', { count: config?.available || 0 })}
</Chip>
</Box>
</Stack>
@@ -112,7 +114,7 @@ function RedeemPointsModal({ config }) {
{/* Points Input Section */}
<FormControl>
<FormLabel sx={{ fontWeight: 600, mb: 1 }}>
Points to Redeem
{t('redeemModal.pointsToRedeem')}
</FormLabel>
<Input
type='number'
@@ -124,7 +126,7 @@ function RedeemPointsModal({ config }) {
input: {
min: 0,
max: config?.available || 0,
placeholder: 'Enter points...',
placeholder: t('redeemModal.placeholder'),
},
}}
onChange={e => handlePointsChange(e.target.value)}
@@ -140,7 +142,7 @@ function RedeemPointsModal({ config }) {
/>
{points > config?.available && (
<Typography level='body-xs' sx={{ color: 'danger.500', mt: 0.5 }}>
Cannot exceed available points
{t('redeemModal.cannotExceed')}
</Typography>
)}
</FormControl>
@@ -148,7 +150,7 @@ function RedeemPointsModal({ config }) {
{/* Quick Selection Buttons */}
<Box>
<Typography level='body-sm' sx={{ fontWeight: 600, mb: 1.5 }}>
Quick Add:
{t('redeemModal.quickAdd')}
</Typography>
<Stack
direction='row'
@@ -199,19 +201,21 @@ function RedeemPointsModal({ config }) {
}}
>
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
You are about to redeem
{t('redeemModal.aboutToRedeem')}
</Typography>
<Typography
level='h4'
sx={{ color: 'primary.600', fontWeight: 700 }}
>
{points} points
{t('redeemModal.amount', { count: points })}
</Typography>
<Typography
level='body-xs'
sx={{ color: 'text.secondary', mt: 0.5 }}
>
Remaining: {(config?.available || 0) - points} points
{t('redeemModal.remaining', {
count: (config?.available || 0) - points,
})}
</Typography>
</Card>
)}

34
src/views/Projects/ProjectView.jsx
View File

@@ -11,6 +11,7 @@ import {
Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import ProjectModal from '../Modals/Inputs/ProjectModal'
@@ -40,6 +41,7 @@ const ProjectCardContent = ({
onCardClick,
onToggleActions,
}) => {
const { t } = useTranslation('projects')
// Check if current user owns this project
const isOwnedByCurrentUser = project.created_by === currentUserId
const isDefaultProject = project.id === 'default'
@@ -144,7 +146,7 @@ const ProjectCardContent = ({
fontWeight: 'md',
}}
>
Default
{t('defaultChip')}
</Chip>
)}
</Typography>
@@ -178,7 +180,7 @@ const ProjectCardContent = ({
color: 'primary.500',
}}
>
{taskCount} tasks
{t('tasks', { count: taskCount })}
</Chip>
{!isOwnedByCurrentUser && !isDefaultProject && (
@@ -193,7 +195,7 @@ const ProjectCardContent = ({
fontWeight: 'md',
}}
>
Shared
{t('shared')}
</Chip>
)}
</Box>
@@ -218,6 +220,7 @@ const ProjectCardContent = ({
}
const ProjectView = () => {
const { t } = useTranslation('projects')
const { data: projects, isProjectsLoading, isError } = useProjects()
const { data: userProfile } = useUserProfile()
const { data: chores = { res: [] } } = useChores(false) // false to exclude archived
@@ -250,11 +253,11 @@ const ProjectView = () => {
const project = userProjects.find(p => p.id === id)
setConfirmationModel({
isOpen: true,
title: 'Delete Project',
message: `Are you sure you want to delete "${project?.name}"? This will remove the project but keep all tasks (they'll move to the Default Project).`,
confirmText: 'Delete',
title: t('delete.title'),
message: t('delete.message', { name: project?.name }),
confirmText: t('common:delete'),
color: 'danger',
cancelText: 'Cancel',
cancelText: t('common:cancel'),
onClose: confirmed => {
if (confirmed === true) {
handleDeleteProject(id)
@@ -347,7 +350,7 @@ const ProjectView = () => {
if (isError) {
return (
<Typography color='danger' textAlign='center'>
Failed to load projects. Please try again.
{t('loadError')}
</Typography>
)
}
@@ -360,11 +363,10 @@ const ProjectView = () => {
level='h3'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Projects
{t('common:navigation.projects')}
</Typography>
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
Organize your tasks into projects. Create custom workspaces to keep
your tasks organized and easily accessible.
{t('blurb')}
</Typography>
</Stack>
</Box>
@@ -378,8 +380,8 @@ const ProjectView = () => {
<ProjectCardContent
project={{
id: 'default',
name: 'Default Project',
description: 'All tasks without a specific project',
name: t('chores:toolbar.defaultProject'),
description: t('defaultDescription'),
icon: 'FolderOpen',
color: '#1976d2',
created_by: userProfile?.id,
@@ -389,7 +391,7 @@ const ProjectView = () => {
onCardClick={() =>
handleCardClick({
id: 'default',
name: 'Default Project',
name: t('chores:toolbar.defaultProject'),
icon: 'FolderOpen',
color: '#1976d2',
})
@@ -429,7 +431,7 @@ const ProjectView = () => {
>
<EditIcon sx={{ fontSize: 20 }} />
<Typography level='body-xs' sx={{ mt: 0.5 }}>
Edit
{t('common:edit')}
</Typography>
</Box>
</SwipeAction>
@@ -450,7 +452,7 @@ const ProjectView = () => {
>
<DeleteIcon sx={{ fontSize: 20 }} />
<Typography level='body-xs' sx={{ mt: 0.5 }}>
Delete
{t('common:delete')}
</Typography>
</Box>
</SwipeAction>

10
src/views/Things/ThingsHistory.jsx
View File

@@ -10,6 +10,7 @@ import {
TrendingUp,
Update,
} from '@mui/icons-material'
import { useTranslation } from 'react-i18next'
import {
Avatar,
Box,
@@ -41,6 +42,7 @@ import { useThingHistory } from '../../queries/ThingQueries'
import LoadingComponent from '../components/Loading'
const ThingsHistory = () => {
const { t } = useTranslation('things')
const { id } = useParams()
const theme = useTheme()
const { fmt } = useLocalization()
@@ -186,7 +188,7 @@ const ThingsHistory = () => {
level='title-md'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Things Overview
{t('history.overview')}
</Typography>
</Box>
@@ -266,7 +268,7 @@ const ThingsHistory = () => {
level='title-md'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Data Visualization
{t('history.visualization')}
</Typography>
</Box>
)}
@@ -328,7 +330,7 @@ const ThingsHistory = () => {
level='title-md'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Change History
{t('history.changeHistory')}
</Typography>
</Box>
<Box sx={{ borderRadius: 'sm', p: 1, boxShadow: 'md' }}>
@@ -379,7 +381,7 @@ const ThingsHistory = () => {
display: { xs: 'none', sm: 'block' },
}}
>
Updated
{t('history.updated')}
</Typography>
<Chip

114
src/views/User/UserActivities.jsx
View File

@@ -48,14 +48,21 @@ import { useLabels } from '../Labels/LabelQueries'
import { ChoresGrouper } from '../../utils/Chores'
import { COLORS, TASK_COLOR } from '../../utils/Colors.jsx'
import LoadingComponent from '../components/Loading'
import { useTranslation } from 'react-i18next'
const groupByDate = history => {
const aggregated = {}
for (let i = 0; i < history.length; i++) {
const item = history[i]
const date = new Date(
item.performedAt || item.updatedAt,
).toLocaleDateString()
// Key by a stable local ISO day (YYYY-MM-DD) so the render-time
// formatter (fmt.date) receives a parseable date instead of a
// locale-formatted string, which produced "Invalid date".
const d = new Date(item.performedAt || item.updatedAt || item.createdAt)
const date = isNaN(d.getTime())
? 'unknown'
: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
d.getDate(),
).padStart(2, '0')}`
if (!aggregated[date]) {
aggregated[date] = []
}
@@ -83,6 +90,7 @@ const ChoreHistoryItem = ({
onViewNote,
onViewDetails,
}) => {
const { t } = useTranslation('history')
const cfg = statusConfig[status] ?? statusConfig[1]
return (
@@ -136,7 +144,7 @@ const ChoreHistoryItem = ({
</Typography>
{points && (
<Chip size='sm' color='success' startDecorator={<Toll />}>
{`${points} points`}
{t('detail.points', { count: points })}
</Chip>
)}
{notes && (
@@ -151,7 +159,7 @@ const ChoreHistoryItem = ({
onViewNote?.(notes)
}}
>
Note
{t('detail.note')}
</Chip>
)}
</Box>
@@ -174,7 +182,7 @@ const ChoreHistoryTimeline = ({
{Object.entries(groupedHistory).map(([date, items]) => (
<Box key={date} sx={{ mb: 4 }}>
<Typography level='title-sm' sx={{ mb: 0.5 }}>
{fmt.date(date)}
{date === 'unknown' ? '—' : fmt.date(date)}
</Typography>
<Divider />
<Stack spacing={1}>
@@ -197,7 +205,7 @@ const ChoreHistoryTimeline = ({
)
}
const renderPieChart = (data, size, isPrimary, chartType = null) => {
const renderPieChart = (t, data, size, isPrimary, chartType = null) => {
// Filter out items with zero or negative values
const validData = data.filter(item => item.value > 0)
@@ -216,7 +224,7 @@ const renderPieChart = (data, size, isPrimary, chartType = null) => {
}}
>
<Typography level='body-sm' color='neutral'>
No data available
{t('charts.noData')}
</Typography>
</Box>
)
@@ -400,6 +408,7 @@ const USER_FILTER = (history, userId) => {
}
const UserActivites = () => {
const { t } = useTranslation('history')
const { data: userProfile } = useUserProfile()
const [tabValue, setTabValue] = React.useState(7)
@@ -448,16 +457,16 @@ const UserActivites = () => {
() => [
{
id: 'status',
label: 'Status',
label: t('filter.status'),
type: 'multi-select',
icon: <Checklist />,
options: [
{ value: 1, label: 'Completed', color: 'success', icon: <Check sx={{ fontSize: 14 }} /> },
{ value: 2, label: 'Skipped', color: 'warning', icon: <Redo sx={{ fontSize: 14 }} /> },
{ value: 3, label: 'Pending', color: 'neutral', icon: <HourglassEmpty sx={{ fontSize: 14 }} /> },
{ value: 4, label: 'Rejected', color: 'danger', icon: <ThumbDown sx={{ fontSize: 14 }} /> },
{ value: 5, label: 'Missed', color: 'danger', icon: <RunningWithErrors sx={{ fontSize: 14 }} /> },
{ value: 6, label: 'Rescheduled', color: 'warning', icon: <Schedule sx={{ fontSize: 14 }} /> },
{ value: 1, label: t('status.completed'), color: 'success', icon: <Check sx={{ fontSize: 14 }} /> },
{ value: 2, label: t('status.skipped'), color: 'warning', icon: <Redo sx={{ fontSize: 14 }} /> },
{ value: 3, label: t('filter.pending'), color: 'neutral', icon: <HourglassEmpty sx={{ fontSize: 14 }} /> },
{ value: 4, label: t('status.rejected'), color: 'danger', icon: <ThumbDown sx={{ fontSize: 14 }} /> },
{ value: 5, label: t('status.missed'), color: 'danger', icon: <RunningWithErrors sx={{ fontSize: 14 }} /> },
{ value: 6, label: t('status.rescheduled'), color: 'warning', icon: <Schedule sx={{ fontSize: 14 }} /> },
],
filterFn: (item, values) => values.includes(item.status),
},
@@ -465,7 +474,7 @@ const UserActivites = () => {
? [
{
id: 'label',
label: 'Labels',
label: t('filter.labels'),
type: 'multi-select',
icon: <Style />,
options: userLabels.map(l => ({
@@ -492,20 +501,20 @@ const UserActivites = () => {
: []),
{
id: 'hasNotes',
label: 'Has Notes',
label: t('filter.hasNotes'),
type: 'boolean',
icon: <EventNote />,
filterFn: item => !!item.notes,
},
{
id: 'hasPoints',
label: 'Has Points',
label: t('filter.hasPoints'),
type: 'boolean',
icon: <Toll />,
filterFn: item => (item.points ?? 0) > 0,
},
],
[userLabels],
[userLabels, t],
)
const {
@@ -520,20 +529,20 @@ const UserActivites = () => {
() => [
{
id: 'timePeriod',
label: 'Time Period',
label: t('filter.timePeriod'),
type: 'single-select',
icon: <CalendarMonth />,
defaultValue: 7,
options: [
{ value: 7, label: '7 Days' },
{ value: 30, label: '30 Days' },
{ value: 90, label: '90 Days' },
{ value: 365, label: 'All Time' },
{ value: 7, label: t('period.days', { count: 7 }) },
{ value: 30, label: t('period.days', { count: 30 }) },
{ value: 90, label: t('period.days', { count: 90 }) },
{ value: 365, label: t('period.allTime') },
],
},
{
id: 'completedBy',
label: 'User',
label: t('filter.user'),
type: 'single-select',
icon: <Person />,
options: circleUsers.map(u => ({
@@ -544,7 +553,7 @@ const UserActivites = () => {
},
...clientFilterDefs,
],
[circleUsers, clientFilterDefs],
[circleUsers, clientFilterDefs, t],
)
// Merge server-driven and client-driven active filter states for the bar
@@ -686,7 +695,7 @@ const UserActivites = () => {
// Add unlabeled tasks if there are any
if (unlabeledCount > 0) {
result.push({
label: 'No Labels',
label: t('charts.noLabels'),
value: unlabeledCount,
color: TASK_COLOR.ANYTIME,
id: 'unlabeled',
@@ -709,7 +718,9 @@ const UserActivites = () => {
const assignee = circleUsers.find(
user => user.userId === chore.assignedTo,
)
const assigneeName = assignee ? assignee.displayName : 'Unassigned'
const assigneeName = assignee
? assignee.displayName
: t('charts.unassigned')
const assigneeId = chore.assignedTo || 'unassigned'
if (assigneeCounts[assigneeId]) {
@@ -802,7 +813,7 @@ const UserActivites = () => {
// Add unlabeled tasks duration if there is any
if (unlabeledDuration > 0) {
result.push({
label: 'No Labels',
label: t('charts.noLabels'),
value: Math.round((unlabeledDuration / 3600) * 10) / 10, // Convert to hours and round to 1 decimal
color: TASK_COLOR.ANYTIME,
id: 'unlabeled',
@@ -823,7 +834,7 @@ const UserActivites = () => {
// Iterate through ChoreHistory to get actual time spent per task
history.forEach(historyItem => {
const duration = historyItem.duration || 0 // duration in seconds from ChoreHistory
const taskName = historyItem.choreName || 'Unknown Task'
const taskName = historyItem.choreName || t('charts.unknownTask')
if (taskDurations[taskName]) {
taskDurations[taskName].duration += duration
@@ -886,7 +897,7 @@ const UserActivites = () => {
if (totalCompleted > 0) {
result.push({
label: `On time`,
label: t('badge.onTimeLabel'),
value: totalCompleted,
color: TASK_COLOR.COMPLETED,
id: 1,
@@ -895,7 +906,7 @@ const UserActivites = () => {
if (totalLate > 0) {
result.push({
label: `Late`,
label: t('charts.late'),
value: totalLate,
color: TASK_COLOR.LATE,
id: 2,
@@ -904,7 +915,7 @@ const UserActivites = () => {
if (totalNoDueDate > 0) {
result.push({
label: `Completed`,
label: t('status.completed'),
value: totalNoDueDate,
color: TASK_COLOR.ANYTIME,
id: 3,
@@ -919,43 +930,43 @@ const UserActivites = () => {
const chartData = {
history: {
data: historyPieChartData || [],
title: 'Status',
description: 'Completed tasks status',
title: t('charts.status.title'),
description: t('charts.status.description'),
},
due: {
data: choreDuePieChartData || [],
title: 'Due Date',
description: 'Current tasks due date',
title: t('charts.due.title'),
description: t('charts.due.description'),
},
// assigned: {
// data: choresAssignedChartData,
// title: 'Assigned to me',
// title: t('chores:sort.assignedToMe'),
// description: 'Tasks assigned to you vs others',
// },
priority: {
data: choresPriorityChartData || [],
title: 'Priority',
description: 'Tasks by priority',
title: t('charts.priority.title'),
description: t('charts.priority.description'),
},
labels: {
data: choresLabelsChartData || [],
title: 'Labels',
description: 'Tasks by labels',
title: t('charts.labels.title'),
description: t('charts.labels.description'),
},
labelsDuration: {
data: choresLabelsDurationChartData || [],
title: 'Labels (time)',
description: 'Time spent by labels (hours)',
title: t('charts.labelsDuration.title'),
description: t('charts.labelsDuration.description'),
},
tasksTime: {
data: tasksTimeChartData || [],
title: 'Tasks (time)',
description: 'Time spent by individual tasks (hours)',
title: t('charts.tasksTime.title'),
description: t('charts.tasksTime.description'),
},
assigneeBreakdown: {
data: choresAssigneeBreakdownChartData || [],
title: 'by Assignee',
description: 'Tasks grouped by assignee',
title: t('charts.assigneeBreakdown.title'),
description: t('charts.assigneeBreakdown.description'),
},
}
if (!userProfile) {
@@ -976,7 +987,7 @@ const UserActivites = () => {
level='title-md'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Activities
{t('activities.title')}
</Typography>
</Box>
@@ -1025,7 +1036,7 @@ const UserActivites = () => {
onViewNote={notes => {
setNoteViewerConfig({
isOpen: true,
title: 'Note',
title: t('detail.note'),
content: notes,
onClose: () => setNoteViewerConfig({ isOpen: false }),
})
@@ -1153,6 +1164,7 @@ const UserActivites = () => {
}}
>
{renderPieChart(
t,
chartData[selectedChart].data,
300, // Increased size for better chart container
true,
@@ -1216,7 +1228,7 @@ const UserActivites = () => {
alignItems: 'center',
}}
>
{renderPieChart(data, 70, false)}
{renderPieChart(t, data, 70, false)}
</Box>
</Card>
</Grid>

122
src/views/User/UserPoints.jsx
View File

@@ -40,6 +40,8 @@ import {
Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react'
import moment from 'moment'
import { useTranslation } from 'react-i18next'
import LoadingComponent from '../components/Loading.jsx'
import { useChoresHistory } from '../../queries/ChoreQueries.jsx'
@@ -48,6 +50,7 @@ import { RedeemPoints } from '../../utils/Fetcher.jsx'
import { resolvePhotoURL } from '../../utils/Helpers.jsx'
import RedeemPointsModal from '../Modals/RedeemPointsModal'
const UserPoints = () => {
const { t } = useTranslation('points')
const [tabValue, setTabValue] = useState(7)
const [isRedeemModalOpen, setIsRedeemModalOpen] = useState(false)
const [leaderboardMode, setLeaderboardMode] = useState('points') // 'points' or 'tasks'
@@ -104,15 +107,13 @@ const UserPoints = () => {
const currentDate = new Date()
currentDate.setDate(currentDate.getDate() - i)
daysAggregated.push({
label: currentDate.toLocaleString('en-US', { weekday: 'short' }),
label: moment(currentDate).format('ddd'),
points: 0,
tasks: 0,
})
}
history.forEach(chore => {
const dayName = new Date(chore.performedAt).toLocaleString('en-US', {
weekday: 'short',
})
const dayName = moment(chore.performedAt).format('ddd')
const dayIndex = daysAggregated.findIndex(dayData => {
if (userId)
@@ -133,15 +134,13 @@ const UserPoints = () => {
const currentDate = new Date()
currentDate.setDate(currentDate.getDate() - i)
daysAggregated.push({
label: currentDate.toLocaleString('en-US', { day: 'numeric' }),
label: moment(currentDate).format('D'),
points: 0,
tasks: 0,
})
}
history.forEach(chore => {
const dayName = new Date(chore.performedAt).toLocaleString('en-US', {
day: 'numeric',
})
const dayName = moment(chore.performedAt).format('D')
const dayIndex = daysAggregated.findIndex(dayData => {
if (userId)
@@ -164,15 +163,13 @@ const UserPoints = () => {
const currentMonth = new Date()
currentMonth.setMonth(currentMonth.getMonth() - i)
monthlyAggregated.push({
label: currentMonth.toLocaleString('en-US', { month: 'short' }),
label: moment(currentMonth).format('MMM'),
points: 0,
tasks: 0,
})
}
history.forEach(chore => {
const monthName = new Date(chore.performedAt).toLocaleString('en-US', {
month: 'short',
})
const monthName = moment(chore.performedAt).format('MMM')
const monthIndex = monthlyAggregated.findIndex(monthData => {
if (userId)
@@ -195,15 +192,13 @@ const UserPoints = () => {
const currentYear = new Date()
currentYear.setFullYear(currentYear.getFullYear() - i)
yearlyAggregated.push({
label: currentYear.toLocaleString('en-US', { year: 'numeric' }),
label: moment(currentYear).format('YYYY'),
points: 0,
tasks: 0,
})
}
history.forEach(chore => {
const yearName = new Date(chore.performedAt).toLocaleString('en-US', {
year: 'numeric',
})
const yearName = moment(chore.performedAt).format('YYYY')
const yearIndex = yearlyAggregated.findIndex(yearData => {
if (userId)
@@ -305,14 +300,14 @@ const UserPoints = () => {
level='h3'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
{leaderboardMode === 'points' ? 'Points' : 'Tasks'} Leaderboard
{leaderboardMode === 'points'
? t('leaderboard.titlePoints')
: t('leaderboard.titleTasks')}
</Typography>
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
Rankings based on{' '}
{leaderboardMode === 'points'
? 'points earned'
: 'tasks completed'}{' '}
during the selected time period
? t('leaderboard.subtitlePoints')
: t('leaderboard.subtitleTasks')}
</Typography>
</Stack>
</Box>
@@ -358,9 +353,9 @@ const UserPoints = () => {
}}
>
{[
{ label: '7D', value: 7 },
{ label: '6M', value: 6 * 30 },
{ label: 'All', value: 24 * 30 },
{ label: t('tabs.short7d'), value: 7 },
{ label: t('tabs.short6m'), value: 6 * 30 },
{ label: t('tabs.shortAll'), value: 24 * 30 },
].map((tab, index) => (
<Tab
key={index}
@@ -408,7 +403,7 @@ const UserPoints = () => {
sx={{ cursor: 'pointer' }}
onClick={() => setLeaderboardMode('points')}
>
Points
{t('leaderboard.modePoints')}
</Chip>
<SwapHoriz
sx={{ fontSize: '0.875rem', color: 'text.tertiary' }}
@@ -420,7 +415,7 @@ const UserPoints = () => {
sx={{ cursor: 'pointer' }}
onClick={() => setLeaderboardMode('tasks')}
>
Tasks
{t('leaderboard.modeTasks')}
</Chip>
</Box>
</Box>
@@ -512,7 +507,7 @@ const UserPoints = () => {
color='primary'
sx={{ ml: 1 }}
>
You
{t('leaderboard.you')}
</Chip>
)}
</Typography>
@@ -520,8 +515,10 @@ const UserPoints = () => {
level='body-xs'
sx={{ color: 'text.secondary' }}
>
{user.periodTasks} tasks • {user.avgPointsPerTask} avg
per task
{t('leaderboard.tasksAndAvg', {
tasks: user.periodTasks,
avg: user.avgPointsPerTask,
})}
</Typography>
</Stack>
</Box>
@@ -552,8 +549,12 @@ const UserPoints = () => {
</Box>
<Typography level='body-xs' sx={{ color: 'text.tertiary' }}>
{leaderboardMode === 'points'
? `${user.availablePoints} available`
: `${user.periodPoints} points`}
? t('leaderboard.available', {
count: user.availablePoints,
})
: t('leaderboard.points', {
count: user.periodPoints,
})}
</Typography>
</Stack>
@@ -591,7 +592,7 @@ const UserPoints = () => {
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
<Analytics sx={{ fontSize: '1.5rem', color: 'primary.500' }} />
<Typography level='h4' sx={{ fontWeight: 'lg', color: 'text.primary' }}>
Filter & Analysis
{t('filter.analysisTitle')}
</Typography>
</Box>
@@ -610,7 +611,7 @@ const UserPoints = () => {
>
<Stack spacing={2}>
<Typography level='title-sm' sx={{ color: 'text.secondary' }}>
Filter Points
{t('filter.title')}
</Typography>
<Stack
@@ -621,7 +622,7 @@ const UserPoints = () => {
{/* User Filter */}
<Box sx={{ flex: 1, minWidth: 200 }}>
<Typography level='body-sm' sx={{ mb: 1, fontWeight: 500 }}>
Show points for:
{t('filter.showFor')}
</Typography>
<Select
sx={{
@@ -688,7 +689,7 @@ const UserPoints = () => {
{/* Time Period Filter */}
<Box sx={{ flex: 1, minWidth: 200 }}>
<Typography level='body-sm' sx={{ mb: 1, fontWeight: 500 }}>
Time period:
{t('filter.timePeriod')}
</Typography>
<Tabs
onChange={(e, tabValue) => {
@@ -713,9 +714,9 @@ const UserPoints = () => {
}}
>
{[
{ label: '7 Days', value: 7 },
{ label: '6 Months', value: 6 * 30 },
{ label: 'All Time', value: 24 * 30 },
{ label: t('tabs.days7'), value: 7 },
{ label: t('tabs.months6'), value: 6 * 30 },
{ label: t('tabs.allTime'), value: 24 * 30 },
].map((tab, index) => (
<Tab
key={index}
@@ -759,7 +760,7 @@ const UserPoints = () => {
}}
sx={{ mt: 'auto' }}
>
Redeem Points
{t('redeem')}
</Button>
</Box>
)}
@@ -788,27 +789,32 @@ const UserPoints = () => {
const pointsCards = [
{
icon: <Toll />,
title: 'Available',
text: `${availablePoints} points`,
subtext: 'Ready to redeem',
title: t('cards.available.title'),
text: t('leaderboard.points', { count: availablePoints }),
subtext: t('cards.available.subtext'),
},
{
icon: <Redeem />,
title: 'Redeemed',
text: `${redeemedPoints} points`,
subtext: 'Previously used',
title: t('cards.redeemed.title'),
text: t('leaderboard.points', { count: redeemedPoints }),
subtext: t('cards.redeemed.subtext'),
},
{
icon: <AccountBalanceWallet />,
title: 'Total',
text: `${totalPoints} points`,
subtext: 'All time earned',
title: t('cards.total.title'),
text: t('leaderboard.points', { count: totalPoints }),
subtext: t('cards.total.subtext'),
},
{
icon: <TrendingUp />,
title: 'Period Points',
text: `${periodPoints} points`,
subtext: `${tabValue === 24 * 30 ? 'All time' : tabValue === 6 * 30 ? 'Last 6 months' : `Last ${tabValue} days`}`,
title: t('cards.period.title'),
text: t('leaderboard.points', { count: periodPoints }),
subtext:
tabValue === 24 * 30
? t('cards.period.allTime')
: tabValue === 6 * 30
? t('cards.period.last6Months')
: t('cards.period.lastDays', { count: tabValue }),
},
]
@@ -871,24 +877,24 @@ const UserPoints = () => {
{/* Current Filter Summary */}
<Box sx={{ mb: 3, textAlign: 'center' }}>
<Typography level='body-sm' sx={{ color: 'text.secondary' }}>
Showing points for{' '}
{t('summary.showingFor')}{' '}
<Typography
component='span'
sx={{ fontWeight: 600, color: 'primary.500' }}
>
{circleUsers.find(user => user.userId === selectedUser)
?.displayName || 'Unknown User'}
?.displayName || t('summary.unknownUser')}
</Typography>{' '}
over the{' '}
{t('summary.overThe')}{' '}
<Typography
component='span'
sx={{ fontWeight: 600, color: 'primary.500' }}
>
{tabValue === 24 * 30
? 'All Time'
? t('summary.allTime')
: tabValue === 6 * 30
? 'Last 6 Months'
: `Last ${tabValue} Days`}
? t('summary.last6Months')
: t('summary.lastDays', { count: tabValue })}
</Typography>
</Typography>
</Box>
@@ -908,7 +914,7 @@ const UserPoints = () => {
level='h4'
sx={{ fontWeight: 'lg', color: 'text.primary' }}
>
Points Trend
{t('trend.title')}
</Typography>
</Box>

14
src/views/components/ProjectSelector.jsx
View File

@@ -10,6 +10,7 @@ import {
MenuItem,
Typography,
} from '@mui/joy'
import { useTranslation } from 'react-i18next'
import { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import KeyboardShortcutHint from '../../components/common/KeyboardShortcutHint'
@@ -25,6 +26,7 @@ const ProjectSelector = ({
onProjectSelect,
showKeyboardShortcuts = false,
}) => {
const { t } = useTranslation('projects')
const { data: projects = [], isLoading } = useProjects()
const navigate = useNavigate()
@@ -265,7 +267,7 @@ const ProjectSelector = ({
</ListItemDecorator>
<ListItemContent>
<Typography level='title-sm' sx={{ fontWeight: 600 }}>
Projects
{t('selector.title')}
</Typography>
</ListItemContent>
</MenuItem>
@@ -339,7 +341,7 @@ const ProjectSelector = ({
: 'var(--joy-palette-text-primary)',
}}
>
Default Project
{t('chores:toolbar.defaultProject')}
</Typography>
{effectiveSelectedProject === 'Default Project' && (
<Check
@@ -477,13 +479,13 @@ const ProjectSelector = ({
fontWeight: 500,
}}
>
Create New Project
{t('selector.createNew')}
</Typography>
<Typography
level='body-xs'
sx={{ color: 'var(--joy-palette-text-tertiary)' }}
>
Add a custom project workspace
{t('selector.createNewDescription')}
</Typography>
</ListItemContent>
</MenuItem>
@@ -512,13 +514,13 @@ const ProjectSelector = ({
fontWeight: 500,
}}
>
Manage Projects
{t('selector.manage')}
</Typography>
<Typography
level='body-xs'
sx={{ color: 'var(--joy-palette-text-tertiary)' }}
>
View, edit, and organize all projects
{t('selector.manageDescription')}
</Typography>
</ListItemContent>
</MenuItem>