feat(19-01): add LeadsViewToggle with integrated search + list/kanban pill toggle
- LeadsViewToggle: client wrapper with useState<list|kanban>, useMemo filtered - Search input (left) + pill toggle Lista/Kanban (right) on single row - Filters leads by name/email/company/status/tags across both views - Search state preserved when switching between Lista and Kanban - LeadsSearch.tsx: replaced with re-export of LeadsViewToggle (backward compat)
This commit is contained in:
@@ -1,46 +1,3 @@
|
|||||||
"use client";
|
// LeadsSearch is superseded by LeadsViewToggle (Phase 19).
|
||||||
|
// Re-exported here to avoid breaking any existing import.
|
||||||
import { useState, useMemo } from "react";
|
export { LeadsViewToggle as LeadsSearch } from "@/components/admin/leads/LeadsViewToggle";
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Search } from "lucide-react";
|
|
||||||
import { LeadTable } from "@/components/admin/leads/LeadTable";
|
|
||||||
import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
|
|
||||||
|
|
||||||
export function LeadsSearch({
|
|
||||||
leads,
|
|
||||||
options,
|
|
||||||
}: {
|
|
||||||
leads: LeadWithTags[];
|
|
||||||
options: LeadFieldOptions;
|
|
||||||
}) {
|
|
||||||
const [query, setQuery] = useState("");
|
|
||||||
|
|
||||||
const filtered = useMemo(() => {
|
|
||||||
const q = query.trim().toLowerCase();
|
|
||||||
if (!q) return leads;
|
|
||||||
return leads.filter((l) => {
|
|
||||||
if (l.name.toLowerCase().includes(q)) return true;
|
|
||||||
if (l.email?.toLowerCase().includes(q)) return true;
|
|
||||||
if (l.company?.toLowerCase().includes(q)) return true;
|
|
||||||
if (l.status.toLowerCase().includes(q)) return true;
|
|
||||||
if (l.tags.some((t) => t.toLowerCase().includes(q))) return true;
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
}, [leads, query]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="relative max-w-sm">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="Cerca lead..."
|
|
||||||
value={query}
|
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
|
||||||
className="pl-9 h-9"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<LeadTable leads={filtered} options={options} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,77 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useMemo } from "react";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Search } from "lucide-react";
|
||||||
|
import { LeadTable } from "@/components/admin/leads/LeadTable";
|
||||||
|
import { LeadsKanbanBoard } from "@/components/admin/leads/LeadsKanbanBoard";
|
||||||
|
import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
|
||||||
|
|
||||||
|
export function LeadsViewToggle({
|
||||||
|
leads,
|
||||||
|
options,
|
||||||
|
}: {
|
||||||
|
leads: LeadWithTags[];
|
||||||
|
options: LeadFieldOptions;
|
||||||
|
}) {
|
||||||
|
const [view, setView] = useState<"list" | "kanban">("list");
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
if (!q) return leads;
|
||||||
|
return leads.filter((l) => {
|
||||||
|
if (l.name.toLowerCase().includes(q)) return true;
|
||||||
|
if (l.email?.toLowerCase().includes(q)) return true;
|
||||||
|
if (l.company?.toLowerCase().includes(q)) return true;
|
||||||
|
if (l.status.toLowerCase().includes(q)) return true;
|
||||||
|
if (l.tags.some((t) => t.toLowerCase().includes(q))) return true;
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
}, [leads, query]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<div className="relative max-w-sm flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Cerca lead..."
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
className="pl-9 h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1 bg-[#f4f4f5] rounded-lg p-1 w-fit flex-shrink-0">
|
||||||
|
<button
|
||||||
|
onClick={() => setView("list")}
|
||||||
|
className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
|
||||||
|
view === "list"
|
||||||
|
? "bg-white text-[#1A463C] shadow-sm"
|
||||||
|
: "text-[#71717a] hover:text-[#1a1a1a]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Lista
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setView("kanban")}
|
||||||
|
className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
|
||||||
|
view === "kanban"
|
||||||
|
? "bg-white text-[#1A463C] shadow-sm"
|
||||||
|
: "text-[#71717a] hover:text-[#1a1a1a]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Kanban
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{view === "list" ? (
|
||||||
|
<LeadTable leads={filtered} options={options} />
|
||||||
|
) : (
|
||||||
|
<LeadsKanbanBoard leads={filtered} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user