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/TaskFiltersClient.tsx (7644B)

'use client'

import { useState } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { useLocale } from '@/context/locale'
import { TaskCategoryPicker } from '@/components/TaskCategoryPicker'
import { TaskLocationPicker } from '@/components/TaskLocationPicker'

interface Props {
  categories: any[]
  locationTree: any[]
  budgetRange: { min: number; max: number }
  initialMode: 'for_me' | 'all'
  initialQ?: string
  initialCategory?: string
  initialLocation?: string
  initialBudgetMin?: string
  initialBudgetMax?: string
}

export function TaskFiltersClient({
  categories,
  locationTree,
  budgetRange,
  initialMode,
  initialQ,
  initialCategory,
  initialLocation,
  initialBudgetMin,
  initialBudgetMax,
}: Props) {
  const router = useRouter()
  const pathname = usePathname()
  const { t, locale } = useLocale()
  const catLocale = locale === 'en' ? 'en' : locale === 'ru' ? 'ru' : locale === 'uk' ? 'uk' : 'el'

const [mode, setMode] = useState<'for_me' | 'all'>(initialMode)
  const [q, setQ] = useState(initialQ ?? '')
  const [selectedCategory, setSelectedCategory] = useState(initialCategory ?? '')
  const [selectedLocation, setSelectedLocation] = useState(initialLocation ?? '')

const hasFilter = !!(initialQ || initialCategory || initialLocation || initialBudgetMin || initialBudgetMax)

function buildUrl(overrides: Record<string, string | undefined>) {
    const base: Record<string, string | undefined> = {
      mode: mode === 'for_me' ? undefined : 'all',
      q: q || undefined,
      category: selectedCategory || undefined,
      location: selectedLocation || undefined,
      budgetMin: initialBudgetMin || undefined,
      budgetMax: initialBudgetMax || undefined,
      ...overrides,
    }
    const qs = new URLSearchParams()
    for (const [k, v] of Object.entries(base)) {
      if (v) qs.set(k, v)
    }
    return `${pathname}${qs.toString() ? '?' + qs.toString() : ''}`
  }

function handleModeChange(newMode: 'for_me' | 'all') {
    setMode(newMode)
    setSelectedCategory('')
    router.push(buildUrl({ mode: newMode === 'for_me' ? undefined : 'all', category: undefined }))
  }

function handleCategoryChange(slug: string) {
    setSelectedCategory(slug)
    router.push(buildUrl({ category: slug || undefined }))
  }

function handleLocationChange(slug: string) {
    setSelectedLocation(slug)
    router.push(buildUrl({ location: slug || undefined }))
  }

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const fd = new FormData(e.currentTarget)
    const budgetMin = (fd.get('budgetMin') as string) || undefined
    const budgetMax = (fd.get('budgetMax') as string) || undefined
    router.push(buildUrl({ budgetMin, budgetMax }))
  }

function handleReset() {
    setQ('')
    setSelectedCategory('')
    setSelectedLocation('')
    router.push(mode === 'for_me' ? '/tasks' : '/tasks?mode=all')
  }

const forMeLabel = t('find_tasks.for_me')
  const allLabel = t('find_tasks.all')
  const locAnyLabel = t('create.field.location.any')
  const locAllLabel = t('create.field.location.all')
  const catPlaceholder = t('filter.category.all')

return (
    <div>
      {/* Mode toggle inside sidebar */}
      <div className="flex gap-1 bg-gray-100 p-1 rounded-xl mb-5">
        <button
          type="button"
          onClick={() => handleModeChange('for_me')}
          className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition ${
            mode === 'for_me' ? 'bg-white text-green-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          {forMeLabel}
        </button>
        <button
          type="button"
          onClick={() => handleModeChange('all')}
          className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition ${
            mode === 'all' ? 'bg-white text-green-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          {allLabel}
        </button>
      </div>

<form onSubmit={handleSubmit} className="space-y-4">
        {/* Search */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">{t('tasks.search')}</label>
          <input
            name="q"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder={t('tasks.search.placeholder')}
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
          />
        </div>

{/* Category — only shown in "all" mode */}
        {mode === 'all' && categories.length > 0 && (
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('create.field.category')}</label>
            <TaskCategoryPicker
              categories={categories}
              locale={catLocale}
              value={selectedCategory}
              onChange={handleCategoryChange}
              placeholder={catPlaceholder}
            />
          </div>
        )}

{/* Location */}
        {locationTree.length > 0 && (
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{t('create.field.location')}</label>
            <TaskLocationPicker
              locations={locationTree}
              value={selectedLocation}
              onChange={handleLocationChange}
              anyLabel={locAnyLabel}
              allLabel={locAllLabel}
            />
          </div>
        )}

{/* Budget */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">{t('tasks.field.budget')}</label>
          {budgetRange.max > 0 && (
            <p className="text-xs text-gray-400 mb-2">
              {t('tasks.budget.range')} {budgetRange.min}€ — {budgetRange.max}€
            </p>
          )}
          <div className="flex items-center gap-2">
            <input
              name="budgetMin"
              type="number"
              min={0}
              defaultValue={initialBudgetMin}
              placeholder={budgetRange.min ? String(budgetRange.min) : t('tasks.budget.from')}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
            />
            <span className="text-gray-400 shrink-0">—</span>
            <input
              name="budgetMax"
              type="number"
              min={0}
              defaultValue={initialBudgetMax}
              placeholder={budgetRange.max ? String(budgetRange.max) : t('tasks.budget.to')}
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
            />
          </div>
        </div>

<button
          type="submit"
          className="w-full bg-green-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-green-700"
        >
          {t('tasks.search.btn')}
        </button>

{hasFilter && (
          <button
            type="button"
            onClick={handleReset}
            className="w-full flex items-center justify-center gap-1.5 py-2 rounded-lg text-sm font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-50 border border-gray-200 transition-colors"
          >
            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
            {t('tasks.filter.reset')}
          </button>
        )}
      </form>
    </div>
  )
}

'use client' import { useState } from 'react' import { useRouter, usePathname } from 'next/navigation' import { useLocale } from '@/context/locale' import { TaskCategoryPicker } from '@/components/TaskCategoryPicker' import { TaskLocationPicker } from '@/components/TaskLocationPicker' interface Props { categories: any[] locationTree: any[] budgetRange: { min: number; max: number } initialMode: 'for_me' | 'all' initialQ?: string initialCategory?: string initialLocation?: string initialBudgetMin?: string initialBudgetMax?: string } export function TaskFiltersClient({ categories, locationTree, budgetRange, initialMode, initialQ, initialCategory, initialLocation, initialBudgetMin, initialBudgetMax, }: Props) { const router = useRouter() const pathname = usePathname() const { t, locale } = useLocale() const catLocale = locale === 'en' ? 'en' : locale === 'ru' ? 'ru' : locale === 'uk' ? 'uk' : 'el' const [mode, setMode] = useState<'for_me' | 'all'>(initialMode) const [q, setQ] = useState(initialQ ?? '') const [selectedCategory, setSelectedCategory] = useState(initialCategory ?? '') const [selectedLocation, setSelectedLocation] = useState(initialLocation ?? '') const hasFilter = !!(initialQ || initialCategory || initialLocation || initialBudgetMin || initialBudgetMax) function buildUrl(overrides: Record) { const base: Record = { mode: mode === 'for_me' ? undefined : 'all', q: q || undefined, category: selectedCategory || undefined, location: selectedLocation || undefined, budgetMin: initialBudgetMin || undefined, budgetMax: initialBudgetMax || undefined, ...overrides, } const qs = new URLSearchParams() for (const [k, v] of Object.entries(base)) { if (v) qs.set(k, v) } return `${pathname}${qs.toString() ? '?' + qs.toString() : ''}` } function handleModeChange(newMode: 'for_me' | 'all') { setMode(newMode) setSelectedCategory('') router.push(buildUrl({ mode: newMode === 'for_me' ? undefined : 'all', category: undefined })) } function handleCategoryChange(slug: string) { setSelectedCategory(slug) router.push(buildUrl({ category: slug || undefined })) } function handleLocationChange(slug: string) { setSelectedLocation(slug) router.push(buildUrl({ location: slug || undefined })) } function handleSubmit(e: React.FormEvent) { e.preventDefault() const fd = new FormData(e.currentTarget) const budgetMin = (fd.get('budgetMin') as string) || undefined const budgetMax = (fd.get('budgetMax') as string) || undefined router.push(buildUrl({ budgetMin, budgetMax })) } function handleReset() { setQ('') setSelectedCategory('') setSelectedLocation('') router.push(mode === 'for_me' ? '/tasks' : '/tasks?mode=all') } const forMeLabel = t('find_tasks.for_me') const allLabel = t('find_tasks.all') const locAnyLabel = t('create.field.location.any') const locAllLabel = t('create.field.location.all') const catPlaceholder = t('filter.category.all') return (

{/* Mode toggle inside sidebar */}

{/* Search */}

{t('tasks.search')} setQ(e.target.value)} placeholder={t('tasks.search.placeholder')} className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400" />

{/* Category — only shown in "all" mode */} {mode === 'all' && categories.length > 0 && (

{t('create.field.category')}

)} {/* Location */} {locationTree.length > 0 && (

{t('create.field.location')}

)} {/* Budget */}

{t('tasks.field.budget')} {budgetRange.max > 0 && (

{t('tasks.budget.range')} {budgetRange.min}€ — {budgetRange.max}€

)}

—

{hasFilter && ( )}

) }