first commit

components/shared/FilterDropdown.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface FilterDropdownOption {
+  value: string | number | null;
+  label: string;
+}
+
+interface FilterDropdownProps {
+  label: string;
+  value: string | number | null;
+  options: FilterDropdownOption[];
+  onChange: (value: string | number | null) => void;
+  icon?: string;
+  disabled?: boolean;
+}
+
+const FilterDropdown: React.FC<FilterDropdownProps> = ({
+  label,
+  value,
+  options,
+  onChange,
+  icon,
+  disabled = false,
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const val = e.target.value;
+    if (val === '') {
+      onChange(null);
+    } else if (!isNaN(Number(val))) {
+      onChange(Number(val));
+    } else {
+      onChange(val);
+    }
+  };
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 mb-2">
+        {icon && <i className={`${icon} mr-2`}></i>}
+        {label}
+      </label>
+      <select
+        value={value === null ? '' : value}
+        onChange={handleChange}
+        disabled={disabled}
+        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 bg-white text-gray-900 disabled:bg-gray-100 disabled:cursor-not-allowed"
+      >
+        {options.map((opt, idx) => (
+          <option key={idx} value={opt.value === null ? '' : opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default FilterDropdown;