Merge pull request #99 from ArduinoDayPhilippines/feat/93-qr-generation

feat/93-qr-generation

Author: marvinjameserosa

frontend/src/components/manage-event/GuestListEmpty.tsx

@@ -0,0 +1,23 @@
+import { Users } from "lucide-react";
+
+interface GuestListEmptyProps {
+  hasGuests: boolean;
+}
+
+export function GuestListEmpty({ hasGuests }: GuestListEmptyProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 md:py-12 text-center">
+      <div className="w-12 h-12 md:w-16 md:h-16 bg-white/5 rounded-full flex items-center justify-center mb-4">
+        <Users size={24} className="text-white/40 md:w-8 md:h-8" />
+      </div>
+      <h3 className="font-urbanist text-sm md:text-base font-medium text-white mb-2">
+        {!hasGuests ? "No Guests Yet" : "No Matching Guests"}
+      </h3>
+      <p className="font-urbanist text-white/60 text-xs md:text-sm max-w-md mb-4 px-4">
+        {!hasGuests
+          ? "Share the event or invite people to get started!"
+          : "Try adjusting your search or filters"}
+      </p>
+    </div>
+  );
+}

frontend/src/components/manage-event/GuestListHeader.tsx

@@ -0,0 +1,26 @@
+import { Download } from "lucide-react";
+
+interface GuestListHeaderProps {
+  guestCount: number;
+  onExport: () => void;
+}
+
+export function GuestListHeader({ guestCount, onExport }: GuestListHeaderProps) {
+  return (
+    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
+      <h2 className="font-urbanist text-lg md:text-xl font-bold text-white">
+        Guest List
+      </h2>
+      <div className="flex gap-2">
+        <button
+          onClick={onExport}
+          disabled={guestCount === 0}
+          className="font-urbanist px-4 py-2 bg-cyan-600 hover:bg-cyan-700 disabled:bg-cyan-600/50 disabled:cursor-not-allowed rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2 whitespace-nowrap"
+        >
+          <Download size={16} />
+          Export
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/manage-event/GuestListSearchFilter.tsx

@@ -0,0 +1,53 @@
+import { Download } from "lucide-react";
+
+interface GuestListSearchFilterProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  statusFilter: string;
+  onStatusFilterChange: (status: string) => void;
+  onExport: () => void;
+  isPending: boolean;
+  guestCount: number;
+}
+
+export function GuestListSearchFilter({
+  searchQuery,
+  onSearchChange,
+  statusFilter,
+  onStatusFilterChange,
+  onExport,
+  isPending,
+  guestCount,
+}: GuestListSearchFilterProps) {
+  return (
+    <div className="flex flex-col md:flex-row gap-3">
+      <div className="flex-1">
+        <input
+          type="text"
+          placeholder="Search guests by name or email..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="font-urbanist w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:border-cyan-500 transition-colors"
+        />
+      </div>
+      <div className="flex gap-2">
+        <select
+          value={statusFilter}
+          onChange={(e) => onStatusFilterChange(e.target.value)}
+          className="font-urbanist px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-white text-sm focus:outline-none focus:border-cyan-500 transition-colors"
+        >
+          <option value="all" style={{ backgroundColor: '#0a1520', color: '#ffffff' }}>All Status</option>
+          <option value="registered" style={{ backgroundColor: '#0a1520', color: '#ffffff' }}>Registered</option>
+          <option value="pending" style={{ backgroundColor: '#0a1520', color: '#ffffff' }}>Pending</option>
+        </select>
+        <button
+          onClick={onExport}
+          disabled={isPending || guestCount === 0}
+          className="p-2.5 bg-white/5 hover:bg-white/10 rounded-lg border border-white/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <Download size={18} className="text-white/60" />
+        </button>
+      </div>
+    </div>
+  );
+}