Fix logic flaws in Partners page: Add separate KYC tab, fix search/filters, add Partner form

src/data/mockPartnerData.ts

@@ -87,6 +87,29 @@ export const mockPartners: Partner[] = [
         },
         tags: ['Corporate', 'High Value'],
         joinedAt: subDays(new Date(), 5).toISOString(),
+        verificationStatus: 'Verified',
+    },
+    {
+        id: 'p5',
+        name: 'New Age Vendors',
+        type: 'Vendor',
+        status: 'Active',
+        logo: '',
+        primaryContact: {
+            name: 'John Doe',
+            email: 'john@newage.com',
+            role: 'Owner'
+        },
+        metrics: {
+            activeDeals: 0,
+            totalRevenue: 0,
+            openBalance: 0,
+            lastActivity: new Date().toISOString(),
+            eventsCount: 0,
+        },
+        tags: ['New'],
+        joinedAt: new Date().toISOString(),
+        verificationStatus: 'Pending',
     }
 ];
 

src/features/partners/PartnerDirectory.tsx

@@ -1,34 +1,147 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
+import { Search, Filter, Plus, Check } from 'lucide-react';
 import { AppLayout } from '@/components/layout/AppLayout';
-import { PartnerFilters } from './components/PartnerFilters';
 import { PartnerCard } from './components/PartnerCard';
 import { mockPartners } from '@/data/mockPartnerData';
+import { AddPartnerSheet } from './components/AddPartnerSheet';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    DropdownMenuItem
+} from "@/components/ui/dropdown-menu";
+import { cn } from '@/lib/utils'; // Assuming cn exists
 
 export default function PartnerDirectory() {
     const [searchQuery, setSearchQuery] = useState('');
+    const [statusFilters, setStatusFilters] = useState<string[]>([]);
+    const [activeTab, setActiveTab] = useState("all");
 
-    const filteredPartners = mockPartners.filter(partner =>
+    const allStatuses = ['Active', 'Invited', 'Suspended'];
-        partner.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+
-        partner.type.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    const filteredPartners = useMemo(() => {
-        partner.primaryContact.name.toLowerCase().includes(searchQuery.toLowerCase())
+        let result = mockPartners;
-    );
+
+        // 1. Filter by Tab (KYC status)
+        if (activeTab === 'pending_kyc') {
+            result = result.filter(p => p.verificationStatus === 'Pending');
+        }
+
+        // 2. Filter by Search
+        if (searchQuery) {
+            const lowerQuery = searchQuery.toLowerCase();
+            result = result.filter(partner =>
+                partner.name.toLowerCase().includes(lowerQuery) ||
+                partner.type.toLowerCase().includes(lowerQuery) ||
+                partner.primaryContact.name.toLowerCase().includes(lowerQuery)
+            );
+        }
+
+        // 3. Filter by Status
+        if (statusFilters.length > 0) {
+            result = result.filter(p => statusFilters.includes(p.status));
+        }
+
+        return result;
+    }, [mockPartners, searchQuery, statusFilters, activeTab]);
+
+    const toggleStatusFilter = (status: string) => {
+        setStatusFilters(current =>
+            current.includes(status)
+                ? current.filter(s => s !== status)
+                : [...current, status]
+        );
+    };
 
     return (
         <AppLayout title="Partners">
-            <div className="p-6 max-w-[1600px] mx-auto space-y-8">
+            <div className="p-6 max-w-[1700px] mx-auto space-y-8">
                 <div className="flex flex-col gap-2">
                     <h1 className="text-3xl font-bold tracking-tight">Partner Management</h1>
                     <p className="text-muted-foreground">Manage your relationships with venues, promoters, sponsors, and vendors.</p>
                 </div>
 
-                <div className="bg-card/30 p-1 rounded-xl glass-panel">
+                <div className="flex flex-col sm:flex-row gap-4 justify-between items-center">
-                    <PartnerFilters
+                    <div className="relative w-full sm:w-96">
-                        onSearch={setSearchQuery}
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                        onFilter={() => console.log('Filter clicked')}
+                        <Input
-                        onAdd={() => console.log('Add clicked')}
+                            placeholder="Search partners..."
-                    />
+                            className="pl-10 bg-secondary border-border/50 focus:border-accent"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+                    </div>
+
+                    <div className="flex gap-2 w-full sm:w-auto">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="outline" className={cn("gap-2", statusFilters.length > 0 && "text-accent border-accent")}>
+                                    <Filter className="h-4 w-4" />
+                                    Filter {statusFilters.length > 0 && `(${statusFilters.length})`}
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-56">
+                                <DropdownMenuLabel>Filter by Status</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                {allStatuses.map(status => (
+                                    <DropdownMenuCheckboxItem
+                                        key={status}
+                                        checked={statusFilters.includes(status)}
+                                        onCheckedChange={() => toggleStatusFilter(status)}
+                                    >
+                                        {status}
+                                    </DropdownMenuCheckboxItem>
+                                ))}
+                                {statusFilters.length > 0 && (
+                                    <>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem
+                                            onSelect={() => setStatusFilters([])}
+                                            className="justify-center text-error font-medium"
+                                        >
+                                            Clear Filters
+                                        </DropdownMenuItem>
+                                    </>
+                                )}
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+
+                        <AddPartnerSheet>
+                            <Button className="gap-2 bg-accent text-white hover:bg-accent/90 shadow-lg shadow-accent/20">
+                                <Plus className="h-4 w-4" />
+                                Add Partner
+                            </Button>
+                        </AddPartnerSheet>
+                    </div>
                 </div>
 
+                <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="w-full">
+                    <TabsList className="grid w-full max-w-[400px] grid-cols-2">
+                        <TabsTrigger value="all">All Partners</TabsTrigger>
+                        <TabsTrigger value="pending_kyc">
+                            Pending KYC
+                            {mockPartners.filter(p => p.verificationStatus === 'Pending').length > 0 && (
+                                <span className="ml-2 bg-warning/20 text-warning px-1.5 py-0.5 rounded-full text-[10px]">
+                                    {mockPartners.filter(p => p.verificationStatus === 'Pending').length}
+                                </span>
+                            )}
+                        </TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent value="all" className="mt-6">
+                        {/* Render grid... handled below */}
+                    </TabsContent>
+                    <TabsContent value="pending_kyc" className="mt-6">
+                        {/* Render grid... handled below */}
+                    </TabsContent>
+                </Tabs>
+
                 {filteredPartners.length > 0 ? (
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                         {filteredPartners.map(partner => (

src/features/partners/components/AddPartnerSheet.tsx

@@ -0,0 +1,221 @@
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Loader2, Upload } from "lucide-react";
+
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { toast } from "sonner";
+
+const partnerFormSchema = z.object({
+    name: z.string().min(2, "Name must be at least 2 characters"),
+    type: z.enum(['Venue', 'Promoter', 'Sponsor', 'Vendor', 'Affiliate', 'Other']),
+    email: z.string().email("Invalid email address"),
+    phone: z.string().optional(),
+    website: z.string().url().optional().or(z.literal("")),
+    address: z.string().optional(),
+    contactName: z.string().min(2, "Contact name required"),
+    contactRole: z.string().optional(),
+});
+
+type FormValues = z.infer<typeof partnerFormSchema>;
+
+interface AddPartnerSheetProps {
+    children: React.ReactNode;
+}
+
+export function AddPartnerSheet({ children }: AddPartnerSheetProps) {
+    const [open, setOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(partnerFormSchema),
+        defaultValues: {
+            name: "",
+            type: "Venue",
+            email: "",
+            phone: "",
+            website: "",
+            address: "",
+            contactName: "",
+            contactRole: "",
+        },
+    });
+
+    async function onSubmit(data: FormValues) {
+        setIsSubmitting(true);
+        // Simulate API call
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+
+        console.log("Partner created:", data);
+        toast.success("Partner added successfully");
+
+        setIsSubmitting(false);
+        setOpen(false);
+        form.reset();
+    }
+
+    return (
+        <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+                {children}
+            </SheetTrigger>
+            <SheetContent className="w-[400px] sm:w-[540px] overflow-y-auto">
+                <SheetHeader>
+                    <SheetTitle>Add New Partner</SheetTitle>
+                    <SheetDescription>
+                        Onboard a new partner to the platform.
+                    </SheetDescription>
+                </SheetHeader>
+
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mt-6">
+
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Company Name</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="e.g. Acme Corp" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="type"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Partner Type</FormLabel>
+                                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                        <FormControl>
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Select type" />
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            <SelectItem value="Venue">Venue</SelectItem>
+                                            <SelectItem value="Promoter">Promoter</SelectItem>
+                                            <SelectItem value="Sponsor">Sponsor</SelectItem>
+                                            <SelectItem value="Vendor">Vendor</SelectItem>
+                                            <SelectItem value="Affiliate">Affiliate</SelectItem>
+                                            <SelectItem value="Other">Other</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="space-y-4 border rounded-md p-4 bg-secondary/20">
+                            <h3 className="font-medium text-sm text-muted-foreground">Primary Contact</h3>
+
+                            <FormField
+                                control={form.control}
+                                name="contactName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>Contact Name</FormLabel>
+                                        <FormControl>
+                                            <Input placeholder="John Doe" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <div className="grid grid-cols-2 gap-4">
+                                <FormField
+                                    control={form.control}
+                                    name="email"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Email</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder="john@example.com" {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="phone"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Phone</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder="+91..." {...field} />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="website"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Website</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="https://..." {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="flex justify-end gap-3 pt-4">
+                            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                                Cancel
+                            </Button>
+                            <Button type="submit" disabled={isSubmitting} className="bg-primary text-primary-foreground">
+                                {isSubmitting ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Adding...
+                                    </>
+                                ) : (
+                                    "Add Partner"
+                                )}
+                            </Button>
+                        </div>
+                    </form>
+                </Form>
+            </SheetContent>
+        </Sheet>
+    );
+}

src/features/partners/components/PartnerCard.tsx

@@ -50,12 +50,23 @@ export function PartnerCard({ partner }: PartnerCardProps) {
                         <DropdownMenuContent align="end">
                             <DropdownMenuItem onClick={() => navigate(`/partners/${partner.id}`)}>View Details</DropdownMenuItem>
                             <DropdownMenuItem>Assign to Event</DropdownMenuItem>
-                            <DropdownMenuItem className="text-error">Suspend Partner</DropdownMenuItem>
+                            {partner.status === 'Suspended' ? (
+                                <DropdownMenuItem className="text-success font-medium">Revoke Suspension</DropdownMenuItem>
+                            ) : (
+                                <DropdownMenuItem className="text-error">Suspend Partner</DropdownMenuItem>
+                            )}
                         </DropdownMenuContent>
                     </DropdownMenu>
                 </div>
             </div>
 
+            {partner.verificationStatus === 'Pending' && (
+                <div className="mb-4 bg-warning/10 text-warning px-3 py-1.5 rounded-md text-xs font-medium flex items-center justify-between">
+                    <span>KYC Verification Pending</span>
+                    <Button variant="ghost" size="sm" className="h-6 px-2 text-warning hover:text-warning hover:bg-warning/20">Review</Button>
+                </div>
+            )}
+
             <div className="grid grid-cols-2 gap-4 mt-6 py-4 border-t border-border/30">
                 <div>
                     <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">

src/types/partner.ts

@@ -33,6 +33,7 @@ export const PartnerSchema = z.object({
     tags: z.array(z.string()).default([]),
     notes: z.string().optional(),
     joinedAt: z.string(),
+    verificationStatus: z.enum(['Pending', 'Verified', 'Rejected']).default('Verified'),
 });
 
 export type Partner = z.infer<typeof PartnerSchema>;