FM / tasks

/opt/canhelp/apps/web/src/app/tasks

Name	Size	Mode	Actions
new/	-	0755	rm
[id]/	-	0755	rm
page.tsx	10124	0644	edit dl rm
TaskFiltersClient.tsx	7644	0644	edit dl rm
TaskFiltersForm.tsx	493	0644	edit dl rm
TaskListClient.tsx	5751	0644	edit dl rm
TaskMapClient.tsx	9240	0644	edit dl rm
TaskMapDynamic.tsx	658	0644	edit dl rm
TaskModeToggle.tsx	1589	0644	edit dl rm
TasksAuthGuard.tsx	65	0644	edit dl rm
TaskViewToggle.tsx	2132	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/app/tasks/TaskListClient.tsx (5751B)

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useLocale } from '@/context/locale'
import { getTranslations } from '@/lib/translations'
import type { Locale } from '@/lib/translations'
import { taskTitle, taskDescription, formatPrice } from '@/lib/taskLocale'
import { shortName } from '@/lib/formatName'

const BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'

interface Props {
  initialTasks: any[]
  initialTotal: number
  filterParams: Record<string, string>
  locale: Locale
  catMap: Record<string, string>
  locMap: Record<string, string>
  mode?: 'for_me' | 'all'
}

export function TaskListClient({ initialTasks, initialTotal, filterParams, locale: localeProp, catMap, locMap, mode = 'all' }: Props) {
  const { locale } = useLocale()
  const t = getTranslations(locale)
  const [tasks, setTasks] = useState(initialTasks)
  const [total] = useState(initialTotal)
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const hasMore = tasks.length < total

async function loadMore() {
    setLoading(true)
    try {
      const nextPage = page + 1
      const params = new URLSearchParams({ ...filterParams, page: String(nextPage), limit: '10' })
      const endpoint = mode === 'for_me' ? '/tasks/for-me' : '/tasks'
      const res = await fetch(`${BASE}/api${endpoint}?${params}`, { credentials: 'include' })
      const json = await res.json()
      setTasks(prev => [...prev, ...(json.data || [])])
      setPage(nextPage)
    } finally {
      setLoading(false)
    }
  }

if (tasks.length === 0) {
    return (
      <div className="text-center py-20 text-white/70">
        <p className="text-lg">{t('tasks.empty')}</p>
      </div>
    )
  }

return (
    <div>
      <div className="space-y-4">
        {tasks.map((row: any) => {
          const task = row.task || row
          const customer = row.customer
          return (
            <Link
              key={task.id}
              href={`/tasks/${task.id}`}
              className="block bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md hover:border-green-300 transition"
            >
              <div className="flex justify-between items-start gap-4">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-2">
                    <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
                      {task.category ? (catMap[task.category] ?? task.category) : t('tasks.category.general')}
                    </span>
                    {task.location && (
                      <span className="text-xs text-gray-500">📍 {locMap[task.location] ?? task.location}</span>
                    )}
                  </div>
                  <h2 className="font-semibold text-gray-900 text-lg mb-1 truncate">{taskTitle(task, locale)}</h2>
                  <p className="text-sm text-gray-500 line-clamp-2">{taskDescription(task, locale)}</p>
                </div>
                <div className="text-right shrink-0">
                  {task.budget ? (
                    <>
                      <p className="text-lg font-bold text-green-600">{formatPrice(task.budget)}€</p>
                      {task.budgetNegotiable && (
                        <p className="text-xs text-green-600">{t('task.budget_negotiable')}</p>
                      )}
                    </>
                  ) : task.budgetNegotiable ? (
                    <p className="text-sm font-medium text-green-600">{t('task.budget_negotiable')}</p>
                  ) : null}
                  <p className="text-xs text-gray-600 mt-1">
                    <span className="text-gray-500">{task.deadline ? t('task.deadline') : t('task.created_at')}: </span>
                    {new Date(task.deadline ?? task.createdAt).toLocaleDateString(
                      locale === 'ru' ? 'ru-RU' : locale === 'en' ? 'en-US' : 'el-GR'
                    )}
                  </p>
                  {customer && (
                    <div className="flex items-center justify-end gap-1.5 mt-2">
                      <div className="text-right">
                        <p className="text-xs text-gray-500 leading-none">{shortName(customer.name)}</p>
                        {customer.rating && (
                          <p className="text-xs text-yellow-500 leading-none mt-0.5">★ {Number(customer.rating).toFixed(1)}</p>
                        )}
                      </div>
                      <div className="w-7 h-7 rounded-full overflow-hidden bg-green-100 shrink-0 flex items-center justify-center">
                        {customer.image ? (
                          <img src={customer.image} alt={shortName(customer.name)} className="w-full h-full object-cover" />
                        ) : (
                          <span className="text-green-600 font-semibold text-xs">
                            {shortName(customer.name).charAt(0).toUpperCase()}
                          </span>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </Link>
          )
        })}
      </div>

{hasMore && (
        <div className="flex justify-center mt-8">
          <button
            onClick={loadMore}
            disabled={loading}
            className="px-6 py-2.5 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:border-green-400 hover:text-green-600 disabled:opacity-50 transition"
          >
            {loading ? t('common.loading') : t('tasks.load_more')}
          </button>
        </div>
      )}
    </div>
  )
}

cmd: