feat: Initial commit of KROW Workforce Web client (Base44 export)
This commit is contained in:
bwnyasse
147
src/pages/PartnerManagement.jsx
Normal file
147
src/pages/PartnerManagement.jsx
Normal file
@@ -0,0 +1,147 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { base44 } from "@/api/base44Client";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link } from "react-router-dom";
|
||||
import { createPageUrl } from "@/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Briefcase, Plus, Search, MapPin, DollarSign, Edit } from "lucide-react";
|
||||
import PageHeader from "../components/common/PageHeader";
|
||||
|
||||
export default function PartnerManagement() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
const { data: partners = [], isLoading } = useQuery({
|
||||
queryKey: ['partners'],
|
||||
queryFn: () => base44.entities.Partner.list('-created_date'),
|
||||
initialData: [],
|
||||
});
|
||||
|
||||
const filteredPartners = partners.filter(p =>
|
||||
!searchTerm ||
|
||||
p.partner_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
p.partner_number?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-8 bg-slate-50 min-h-screen">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<PageHeader
|
||||
title="Partner Management"
|
||||
subtitle={`${filteredPartners.length} partners • Clients across all sectors`}
|
||||
actions={
|
||||
<Link to={createPageUrl("AddPartner")}>
|
||||
<Button className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Partner
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Search */}
|
||||
<Card className="mb-6 border-slate-200">
|
||||
<CardContent className="p-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||
<Input
|
||||
placeholder="Search partners..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Partners Grid */}
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="h-64 bg-slate-100 animate-pulse rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
) : filteredPartners.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredPartners.map((partner) => (
|
||||
<Card key={partner.id} className="border-2 border-slate-200 hover:border-[#0A39DF] hover:shadow-xl transition-all">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-green-700 rounded-xl flex items-center justify-center text-white font-bold">
|
||||
<Briefcase className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-lg text-[#1C323E] mb-1">
|
||||
{partner.partner_name}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">{partner.partner_number}</p>
|
||||
</div>
|
||||
<Link to={createPageUrl(`EditPartner?id=${partner.id}`)}>
|
||||
<Button variant="ghost" size="icon" className="text-slate-400 hover:text-[#0A39DF] hover:bg-blue-50">
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-slate-600">Type</span>
|
||||
<Badge variant="outline">{partner.partner_type}</Badge>
|
||||
</div>
|
||||
{partner.sector_name && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-slate-600">Sector</span>
|
||||
<span className="font-semibold text-sm text-[#1C323E]">{partner.sector_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{partner.sites && partner.sites.length > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-slate-600 flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3" />
|
||||
Sites
|
||||
</span>
|
||||
<span className="font-semibold text-[#1C323E]">{partner.sites.length}</span>
|
||||
</div>
|
||||
)}
|
||||
{partner.payment_terms && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-slate-600 flex items-center gap-1">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
Terms
|
||||
</span>
|
||||
<span className="font-semibold text-[#1C323E]">{partner.payment_terms}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-200">
|
||||
<Badge className={partner.is_active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}>
|
||||
{partner.is_active ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="border-slate-200">
|
||||
<CardContent className="p-12 text-center">
|
||||
<Briefcase className="w-16 h-16 mx-auto text-slate-300 mb-4" />
|
||||
<h3 className="text-xl font-semibold text-slate-700 mb-2">No Partners Found</h3>
|
||||
<p className="text-slate-500 mb-6">Add your first partner client</p>
|
||||
<Link to={createPageUrl("AddPartner")}>
|
||||
<Button className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add First Partner
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user