Krow/krowworkforce_controltower
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Aravind
2026-08-17 19:45:29 +05:30
commit 3c27da77a8
510 changed files with 137749 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/components/marketplace/StaffingSearchBar.jsx Normal file
View File

@@ -0,0 +1,139 @@
import React from "react";
import { Search, MapPin, Calendar, Clock, Users, Briefcase, Hourglass } from "lucide-react";
import { Button } from "@/components/ui/button";
const COMMON_ROLES = [
"Bartender", "Prep Cook", "Line Cook", "Server", "Dishwasher",
"Host", "Sous Chef", "Executive Chef", "Pastry Chef", "Barista",
"Food Runner", "Busser", "Event Staff", "Security Guard",
"Janitor", "Facilities Technician", "Cashier", "Concessions"
];
const COMMON_CITIES = [
"San Francisco", "Oakland", "San Jose", "Los Angeles", "Sacramento",
"Fremont", "Berkeley", "Palo Alto", "Napa", "Santa Clara"
];
export default function StaffingSearchBar({ search, setSearch }) {
const update = (field, value) => setSearch(prev => ({ ...prev, [field]: value }));
return (
<div className="bg-white rounded-2xl shadow-xl border border-slate-200 p-2 hover:shadow-2xl transition-shadow">
<div className="flex flex-col lg:flex-row items-stretch gap-1">
{/* Role */}
<div className="flex-1 flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<Briefcase className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
<div className="flex-1 min-w-0">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Role Needed</label>
<input
list="role-list"
placeholder="e.g. Bartender"
value={search.role}
onChange={(e) => update("role", e.target.value)}
className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent placeholder:text-slate-400"
/>
<datalist id="role-list">
{COMMON_ROLES.map(r => <option key={r} value={r} />)}
</datalist>
</div>
</div>
<div className="hidden lg:block w-px bg-slate-200 my-2" />
{/* Location */}
<div className="flex-1 flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<MapPin className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
<div className="flex-1 min-w-0">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Location</label>
<input
list="city-list"
placeholder="e.g. San Francisco"
value={search.location}
onChange={(e) => update("location", e.target.value)}
className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent placeholder:text-slate-400"
/>
<datalist id="city-list">
{COMMON_CITIES.map(c => <option key={c} value={c} />)}
</datalist>
</div>
</div>
<div className="hidden lg:block w-px bg-slate-200 my-2" />
{/* Date */}
<div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<Calendar className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
<div className="flex-1 min-w-0">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Date</label>
<input
type="date"
value={search.date}
onChange={(e) => update("date", e.target.value)}
className="text-sm font-semibold text-slate-800 outline-none bg-transparent"
/>
</div>
</div>
<div className="hidden lg:block w-px bg-slate-200 my-2" />
{/* Start Time */}
<div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<Clock className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
<div className="flex-1 min-w-0">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Start Time</label>
<input
type="time"
value={search.startTime}
onChange={(e) => update("startTime", e.target.value)}
className="text-sm font-semibold text-slate-800 outline-none bg-transparent"
/>
</div>
</div>
<div className="hidden lg:block w-px bg-slate-200 my-2" />
{/* Duration */}
<div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors w-28">
<Hourglass className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
<div className="flex-1 min-w-0">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Hours</label>
<input
type="number"
min="1"
max="24"
value={search.duration}
onChange={(e) => update("duration", e.target.value)}
className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent"
/>
</div>
</div>
<div className="hidden lg:block w-px bg-slate-200 my-2" />
{/* Headcount */}
<div className="flex items-center gap-3 px-4 py-2.5 rounded-xl hover:bg-slate-50 transition-colors w-28">
<Users className="w-5 h-5 text-[#0039A6] flex-shrink-0" />
<div className="flex-1 min-w-0">
<label className="text-[10px] font-bold text-slate-500 uppercase tracking-wide block">Staff</label>
<input
type="number"
min="1"
max="500"
value={search.headcount}
onChange={(e) => update("headcount", e.target.value)}
className="w-full text-sm font-semibold text-slate-800 outline-none bg-transparent"
/>
</div>
</div>
{/* Search Button */}
<Button
className="bg-gradient-to-r from-[#0039A6] to-[#0047C4] text-white font-bold px-6 rounded-xl shadow-md hover:shadow-lg flex items-center gap-2"
>
<Search className="w-5 h-5" />
<span className="hidden lg:inline">Search</span>
</Button>
</div>
</div>
);
}