Package inquiry, UAT related update

apps/edr-passenger-web/backoffice/src/app/packages/page.tsx

@@ -29,6 +29,11 @@ const emptyForm = {
 
 export default function PackagesPage() {
   const [page] = useState(1);
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [showExtraFilters, setShowExtraFilters] = useState(false);
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
   const [form, setForm] = useState(emptyForm);
   const [modalMode, setModalMode] = useState<'create' | 'edit' | null>(null);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -282,6 +287,15 @@ export default function PackagesPage() {
 
   const isPending = createMutation.isPending || updateMutation.isPending;
 
+  const allItems: any[] = data?.items || [];
+  const filteredItems = allItems.filter((p) => {
+    if (search && !p.name.toLowerCase().includes(search.toLowerCase()) && !p.code.toLowerCase().includes(search.toLowerCase())) return false;
+    if (statusFilter && p.status !== statusFilter) return false;
+    if (dateFrom && new Date(p.validFrom).toISOString().split('T')[0] < dateFrom) return false;
+    if (dateTo && new Date(p.validUntil).toISOString().split('T')[0] > dateTo) return false;
+    return true;
+  });
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -292,13 +306,47 @@ export default function PackagesPage() {
         <ActionButton icon={Plus} onClick={openCreate}>New Package</ActionButton>
       </div>
 
-      <DataTable
-        data={data?.items || []}
-        columns={columns}
-        actions={actions}
-        loading={isLoading}
-        emptyMessage="No packages found"
-      />
+      <div className="card">
+        <div className="mb-4 space-y-3">
+          <div className="flex flex-wrap gap-3">
+            <div className="flex-1 min-w-48">
+              <input type="text" placeholder="Search by name or code..." className="input"
+                value={search} onChange={(e) => setSearch(e.target.value)} />
+            </div>
+            <select className="input w-44" value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
+              <option value="">All Status</option>
+              <option value="DRAFT">Draft</option>
+              <option value="ACTIVE">Active</option>
+              <option value="SOLD_OUT">Sold Out</option>
+              <option value="EXPIRED">Expired</option>
+              <option value="CANCELLED">Cancelled</option>
+            </select>
+            <button type="button" className="input w-auto px-4 text-sm font-medium text-primary border-primary/40"
+              onClick={() => setShowExtraFilters(v => !v)}>
+              {showExtraFilters ? 'Hide Filters ▲' : 'More Filters ▼'}
+            </button>
+          </div>
+          {showExtraFilters && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
+              <div>
+                <label className="label">Valid From</label>
+                <input type="date" className="input" value={dateFrom} onChange={(e) => setDateFrom(e.target.value)} />
+              </div>
+              <div>
+                <label className="label">Valid Until</label>
+                <input type="date" className="input" value={dateTo} onChange={(e) => setDateTo(e.target.value)} />
+              </div>
+            </div>
+          )}
+        </div>
+        <DataTable
+          data={filteredItems}
+          columns={columns}
+          actions={actions}
+          loading={isLoading}
+          emptyMessage="No packages found"
+        />
+      </div>
 
       {/* View Modal */}
       <Modal isOpen={!!viewPackage} onClose={() => setViewPackage(null)} title="Package Details" size="lg">