tickte-system/src/components/TicketFilters.jsx

import { useState } from 'react'
import { FaCaretDown } from 'react-icons/fa6'

const TICKET_TYPES = [
  'Home Office', 'Holidays', 'Trip', 'Supportrequest', 'Change Request',
  'Maintenance', 'Project', 'Controlling', 'Development', 'Documentation',
  'Meeting/Conference', 'IT Management', 'IT Security', 'Procurement',
  'Rollout', 'Emergency Call', 'Other Services'
]

const SYSTEMS = [
  'Account View', 'Client', 'Cofano', 'Credentials', 'Diamant', 'Docuware',
  'EDI', 'eMail', 'Employee', 'Invoice', 'LBase', 'Medical Office', 'Network',
  'O365', 'PDF Viewer', 'Printer', 'Reports', 'Server', 'Time Tracking',
  'TK', 'TOS', 'Vivendi NG', 'VGM', '(W)LAN', '(W)WAN', 'WOMS', 'n/a'
]

const STATUSES = [
  'Open', 'Occupied', 'Assigned', 'Awaiting', 'Added Info',
  'In Test', 'Halted', 'Aborted', 'Cancelled', 'Closed'
]

const PRIORITIES = [
  { value: 0, label: 'None' },
  { value: 1, label: 'Low' },
  { value: 2, label: 'Medium' },
  { value: 3, label: 'High' },
  { value: 4, label: 'Critical' }
]

export default function TicketFilters({ filters, onChange, onApply }) {
  const [localFilters, setLocalFilters] = useState(filters)

  const handleCheckboxChange = (category, value) => {
    const current = localFilters[category] || []
    const updated = current.includes(value)
      ? current.filter(v => v !== value)
      : [...current, value]
    setLocalFilters({ ...localFilters, [category]: updated })
  }

  const handleInputChange = (field, value) => {
    setLocalFilters({ ...localFilters, [field]: value })
  }

  const handleApply = () => {
    onChange(localFilters)
    onApply()
  }

  return (
    <tr className="bg-dark-grey text-white">
      <td className="text-center">
        <input
          type="text"
          placeholder="WOID"
          className="form-control"
          style={{ width: '80px', background: '#616161', color: '#fff', border: 'none' }}
          value={localFilters.woid || ''}
          onChange={(e) => handleInputChange('woid', e.target.value)}
        />
      </td>
      <td>
        <input
          type="text"
          placeholder="Created"
          className="form-control"
          style={{ width: '100px', background: '#616161', color: '#fff', border: 'none' }}
          value={localFilters.createdDate || ''}
          onChange={(e) => handleInputChange('createdDate', e.target.value)}
        />
      </td>
      <td>
        <div className="dropdown">
          <button className="btn btn-dark">
            Type / Location <FaCaretDown />
          </button>
          <div className="dropdown-content" style={{ maxHeight: '300px', overflowY: 'auto' }}>
            {TICKET_TYPES.map(type => (
              <label key={type} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <input
                  type="checkbox"
                  checked={(localFilters.type || []).includes(type)}
                  onChange={() => handleCheckboxChange('type', type)}
                />
                {type}
              </label>
            ))}
          </div>
        </div>
      </td>
      <td>
        <div className="dropdown">
          <button className="btn btn-dark">
            System <FaCaretDown />
          </button>
          <div className="dropdown-content" style={{ maxHeight: '300px', overflowY: 'auto' }}>
            {SYSTEMS.map(system => (
              <label key={system} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <input
                  type="checkbox"
                  checked={(localFilters.system || []).includes(system)}
                  onChange={() => handleCheckboxChange('system', system)}
                />
                {system}
              </label>
            ))}
          </div>
        </div>
      </td>
      <td>
        <input
          type="text"
          placeholder="Customer or Location"
          className="form-control"
          style={{ width: '150px', background: '#616161', color: '#fff', border: 'none' }}
          value={localFilters.customer || ''}
          onChange={(e) => handleInputChange('customer', e.target.value)}
        />
      </td>
      <td>
        <input
          type="text"
          placeholder="User or Topic"
          className="form-control"
          style={{ width: '150px', background: '#616161', color: '#fff', border: 'none' }}
          value={localFilters.userTopic || ''}
          onChange={(e) => handleInputChange('userTopic', e.target.value)}
        />
      </td>
      <td>
        <div className="dropdown">
          <button className="btn btn-dark">
            Status <FaCaretDown />
          </button>
          <div className="dropdown-content">
            {STATUSES.map(status => (
              <label key={status} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <input
                  type="checkbox"
                  checked={(localFilters.status || []).includes(status)}
                  onChange={() => handleCheckboxChange('status', status)}
                />
                {status}
              </label>
            ))}
          </div>
        </div>
      </td>
      <td>
        <div className="dropdown">
          <button className="btn btn-dark">
            Priority <FaCaretDown />
          </button>
          <div className="dropdown-content">
            {PRIORITIES.map(p => (
              <label key={p.value} className="dropdown-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <input
                  type="checkbox"
                  checked={(localFilters.priority || []).includes(p.value)}
                  onChange={() => handleCheckboxChange('priority', p.value)}
                />
                {p.label}
              </label>
            ))}
          </div>
        </div>
      </td>
      <td className="text-center">Approval</td>
      <td className="text-center">
        <button className="btn btn-green" onClick={handleApply}>
          Apply!
        </button>
      </td>
    </tr>
  )
}