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

i18n: add things, history, projects, labels, filters, timer and points namespaces (Part of #145)

public/locales/en/chores.json

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

public/locales/en/filters.json

@@ -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"
+}

public/locales/en/history.json

@@ -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"
+  }
+}

public/locales/en/labels.json

@@ -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."
+}

public/locales/en/points.json

@@ -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"
+  }
+}

public/locales/en/projects.json

@@ -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"
+  }
+}

public/locales/en/things.json

@@ -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"
+  }
+}

public/locales/en/timer.json

@@ -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."
+}

src/i18n/config.js

@@ -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: {

src/views/Labels/LabelView.jsx

@@ -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',
+      title: t('delete.title'),
-
+      message: t('delete.message'),
-      message:
+      confirmText: t('common:delete'),
-        'Are you sure you want to delete this label? This will remove the label from all tasks.',
-
-      confirmText: '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
+            {t('blurb')}
-            be automatically shared with your circle if they are used on a
-            shared task.
           </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>

src/views/Modals/EditHistoryModal.jsx

@@ -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'
+        label={t('edit.additionalNotes')}
-        placeholder='Additional Notes'
+        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',
+          title: t('edit.deleteTitle'),
-          message: 'Are you sure you want to delete this history?',
+          message: t('edit.deleteMessage'),
-          confirmText: 'Delete',
+          confirmText: t('common:delete'),
-          cancelText: 'Cancel',
+          cancelText: t('common:cancel'),
           color: 'danger',
         }}
       />

src/views/Modals/HistoryDetailModal.jsx

@@ -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 /> },
+  0: { label: t('status.inProgress'), color: 'primary', icon: <AccessTime /> },
-  1: { label: 'Completed', color: 'success', icon: <Check /> },
+  1: { label: t('status.completed'), color: 'success', icon: <Check /> },
-  2: { label: 'Skipped', color: 'warning', icon: <Redo /> },
+  2: { label: t('status.skipped'), color: 'warning', icon: <Redo /> },
-  3: { label: 'Pending Approval', color: 'neutral', icon: <HourglassEmpty /> },
+  3: { label: t('status.pendingApproval'), color: 'neutral', icon: <HourglassEmpty /> },
-  4: { label: 'Rejected', color: 'danger', icon: <ThumbDown /> },
+  4: { label: t('status.rejected'), color: 'danger', icon: <ThumbDown /> },
-  5: { label: 'Missed', color: 'danger', icon: <RunningWithErrors /> },
+  5: { label: t('status.missed'), color: 'danger', icon: <RunningWithErrors /> },
-  6: { label: 'Rescheduled', color: 'warning', icon: <Schedule /> },
+  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'
+            label={t('detail.pointsEarned')}
-            value={`${entry.points} pt${entry.points > 1 ? 's' : ''}`}
+            value={t('detail.points', { count: entry.points })}
           />
         )}
 

src/views/Modals/Inputs/AdvancedFilterBuilder.jsx

@@ -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,

src/views/Modals/Inputs/CreateThingModal.jsx

@@ -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 => {

src/views/Modals/Inputs/EditThingState.jsx

@@ -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 }}
+          secondary={{ label: t('common:cancel'), onClick: onClose }}
-          primary={{ label: 'Update', onClick: handleSave }}
+          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 }}

src/views/Modals/Inputs/IconPickerModal.jsx

@@ -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>

src/views/Modals/Inputs/TimerEditModal.jsx

@@ -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',
+              title: t('toast.sessionUpdatedTitle'),
-              message: 'Timer session has been updated successfully.',
+              message: t('toast.sessionUpdatedMessage'),
             })
             refetchTimer()
             cancelEditingSession(sessionId)
@@ -190,15 +192,15 @@ const TimerEditModal = ({ isOpen, onClose, choreId, onTimerUpdate }) => {
           },
           onError: () => {
             showError({
-              title: 'Failed to update session',
+              title: t('toast.sessionUpdateFailTitle'),
-              message: 'Please try again.',
+              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',
+            title: t('toast.sessionDeletedTitle'),
-            message: 'Timer session has been deleted successfully.',
+            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',
+      title: t('toast.deleteConfirmTitle'),
-      message: 'Are you sure you want to delete this timer session?',
+      message: t('toast.deleteConfirmMessage'),
-      confirmText: 'Delete',
+      confirmText: t('common:delete'),
-      cancelText: 'Cancel',
+      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>

src/views/Modals/RedeemPointsModal.jsx

@@ -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>
         )}

src/views/Projects/ProjectView.jsx

@@ -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',
+      title: t('delete.title'),
-      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).`,
+      message: t('delete.message', { name: project?.name }),
-      confirmText: 'Delete',
+      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
+            {t('blurb')}
-            your tasks organized and easily accessible.
           </Typography>
         </Stack>
       </Box>
@@ -378,8 +380,8 @@ const ProjectView = () => {
         <ProjectCardContent
           project={{
             id: 'default',
-            name: 'Default Project',
+            name: t('chores:toolbar.defaultProject'),
-            description: 'All tasks without a specific project',
+            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>

src/views/Things/ThingsHistory.jsx

@@ -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

src/views/User/UserActivities.jsx

@@ -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(
+    // Key by a stable local ISO day (YYYY-MM-DD) so the render-time
-      item.performedAt || item.updatedAt,
+    // formatter (fmt.date) receives a parseable date instead of a
-    ).toLocaleDateString()
+    // 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: 1, label: t('status.completed'), color: 'success', icon: <Check sx={{ fontSize: 14 }} /> },
-          { value: 2, label: 'Skipped', color: 'warning', icon: <Redo sx={{ fontSize: 14 }} /> },
+          { value: 2, label: t('status.skipped'), color: 'warning', icon: <Redo sx={{ fontSize: 14 }} /> },
-          { value: 3, label: 'Pending', color: 'neutral', icon: <HourglassEmpty sx={{ fontSize: 14 }} /> },
+          { value: 3, label: t('filter.pending'), color: 'neutral', icon: <HourglassEmpty sx={{ fontSize: 14 }} /> },
-          { value: 4, label: 'Rejected', color: 'danger', icon: <ThumbDown sx={{ fontSize: 14 }} /> },
+          { value: 4, label: t('status.rejected'), color: 'danger', icon: <ThumbDown sx={{ fontSize: 14 }} /> },
-          { value: 5, label: 'Missed', color: 'danger', icon: <RunningWithErrors sx={{ fontSize: 14 }} /> },
+          { value: 5, label: t('status.missed'), color: 'danger', icon: <RunningWithErrors sx={{ fontSize: 14 }} /> },
-          { value: 6, label: 'Rescheduled', color: 'warning', icon: <Schedule 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: 7, label: t('period.days', { count: 7 }) },
-          { value: 30, label: '30 Days' },
+          { value: 30, label: t('period.days', { count: 30 }) },
-          { value: 90, label: '90 Days' },
+          { value: 90, label: t('period.days', { count: 90 }) },
-          { value: 365, label: 'All Time' },
+          { 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',
+      title: t('charts.status.title'),
-      description: 'Completed tasks status',
+      description: t('charts.status.description'),
     },
     due: {
       data: choreDuePieChartData || [],
-      title: 'Due Date',
+      title: t('charts.due.title'),
-      description: 'Current tasks due date',
+      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',
+      title: t('charts.priority.title'),
-      description: 'Tasks by priority',
+      description: t('charts.priority.description'),
     },
     labels: {
       data: choresLabelsChartData || [],
-      title: 'Labels',
+      title: t('charts.labels.title'),
-      description: 'Tasks by labels',
+      description: t('charts.labels.description'),
     },
     labelsDuration: {
       data: choresLabelsDurationChartData || [],
-      title: 'Labels (time)',
+      title: t('charts.labelsDuration.title'),
-      description: 'Time spent by labels (hours)',
+      description: t('charts.labelsDuration.description'),
     },
     tasksTime: {
       data: tasksTimeChartData || [],
-      title: 'Tasks (time)',
+      title: t('charts.tasksTime.title'),
-      description: 'Time spent by individual tasks (hours)',
+      description: t('charts.tasksTime.description'),
     },
     assigneeBreakdown: {
       data: choresAssigneeBreakdownChartData || [],
-      title: 'by Assignee',
+      title: t('charts.assigneeBreakdown.title'),
-      description: 'Tasks grouped by assignee',
+      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>

src/views/User/UserPoints.jsx

@@ -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', {
+      const dayName = moment(chore.performedAt).format('ddd')
-        weekday: 'short',
-      })
 
       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', {
+      const dayName = moment(chore.performedAt).format('D')
-        day: 'numeric',
-      })
 
       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', {
+      const monthName = moment(chore.performedAt).format('MMM')
-        month: 'short',
-      })
 
       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', {
+      const yearName = moment(chore.performedAt).format('YYYY')
-        year: 'numeric',
-      })
 
       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'
+                  ? t('leaderboard.subtitlePoints')
-                  : 'tasks completed'}{' '}
+                  : t('leaderboard.subtitleTasks')}
-                during the selected time period
               </Typography>
             </Stack>
           </Box>
@@ -358,9 +353,9 @@ const UserPoints = () => {
                   }}
                 >
                   {[
-                    { label: '7D', value: 7 },
+                    { label: t('tabs.short7d'), value: 7 },
-                    { label: '6M', value: 6 * 30 },
+                    { label: t('tabs.short6m'), value: 6 * 30 },
-                    { label: 'All', value: 24 * 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
+                        {t('leaderboard.tasksAndAvg', {
-                        per task
+                          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`
+                        ? t('leaderboard.available', {
-                        : `${user.periodPoints} points`}
+                            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: t('tabs.days7'), value: 7 },
-                    { label: '6 Months', value: 6 * 30 },
+                    { label: t('tabs.months6'), value: 6 * 30 },
-                    { label: 'All Time', value: 24 * 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',
+              title: t('cards.available.title'),
-              text: `${availablePoints} points`,
+              text: t('leaderboard.points', { count: availablePoints }),
-              subtext: 'Ready to redeem',
+              subtext: t('cards.available.subtext'),
             },
             {
               icon: <Redeem />,
-              title: 'Redeemed',
+              title: t('cards.redeemed.title'),
-              text: `${redeemedPoints} points`,
+              text: t('leaderboard.points', { count: redeemedPoints }),
-              subtext: 'Previously used',
+              subtext: t('cards.redeemed.subtext'),
             },
             {
               icon: <AccountBalanceWallet />,
-              title: 'Total',
+              title: t('cards.total.title'),
-              text: `${totalPoints} points`,
+              text: t('leaderboard.points', { count: totalPoints }),
-              subtext: 'All time earned',
+              subtext: t('cards.total.subtext'),
             },
             {
               icon: <TrendingUp />,
-              title: 'Period Points',
+              title: t('cards.period.title'),
-              text: `${periodPoints} points`,
+              text: t('leaderboard.points', { count: periodPoints }),
-              subtext: `${tabValue === 24 * 30 ? 'All time' : tabValue === 6 * 30 ? 'Last 6 months' : `Last ${tabValue} days`}`,
+              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'
+                ? t('summary.last6Months')
-                : `Last ${tabValue} Days`}
+                : 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>
 

src/views/components/ProjectSelector.jsx

@@ -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>