233 lines
9.9 KiB
React
233 lines
9.9 KiB
React
|
import { useState } from 'react';
|
||
|
|
import { ChevronDown, Search, Filter, MoreVertical, Plus, Users, TrendingUp, Home as HomeIcon } from 'lucide-react';
|
||
|
|
import BreadCrumb from '../../components/BreadCrumb';
|
||
|
|
|
||
|
|
export default function Customers({ user }) {
|
||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
||
|
|
|
||
|
|
const customers = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: 'Rajesh Kumar',
|
||
|
|
phone: '+91 98765 43210',
|
||
|
|
avatar: 'RK',
|
||
|
|
balance: 45000,
|
||
|
|
type: 'credit',
|
||
|
|
status: 'Active',
|
||
|
|
statusColor: 'bg-green-100 text-green-700',
|
||
|
|
transactions: 24
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: 'Priya Sharma',
|
||
|
|
phone: '+91 98765 43211',
|
||
|
|
avatar: 'PS',
|
||
|
|
balance: 8500,
|
||
|
|
type: 'debit',
|
||
|
|
status: 'Active',
|
||
|
|
statusColor: 'bg-green-100 text-green-700',
|
||
|
|
transactions: 18
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: 'Amit Patel',
|
||
|
|
phone: '+91 98765 43212',
|
||
|
|
avatar: 'AP',
|
||
|
|
balance: 22000,
|
||
|
|
type: 'credit',
|
||
|
|
status: 'Active',
|
||
|
|
statusColor: 'bg-green-100 text-green-700',
|
||
|
|
transactions: 32
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
name: 'Sneha Reddy',
|
||
|
|
phone: '+91 98765 43213',
|
||
|
|
avatar: 'SR',
|
||
|
|
balance: 5000,
|
||
|
|
type: 'debit',
|
||
|
|
status: 'Pending',
|
||
|
|
statusColor: 'bg-yellow-100 text-yellow-700',
|
||
|
|
transactions: 12
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 5,
|
||
|
|
name: 'Vikram Singh',
|
||
|
|
phone: '+91 98765 43214',
|
||
|
|
avatar: 'VS',
|
||
|
|
balance: 15000,
|
||
|
|
type: 'credit',
|
||
|
|
status: 'Active',
|
||
|
|
statusColor: 'bg-green-100 text-green-700',
|
||
|
|
transactions: 28
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 6,
|
||
|
|
name: 'Anjali Gupta',
|
||
|
|
phone: '+91 98765 43215',
|
||
|
|
avatar: 'AG',
|
||
|
|
balance: 3200,
|
||
|
|
type: 'debit',
|
||
|
|
status: 'Active',
|
||
|
|
statusColor: 'bg-green-100 text-green-700',
|
||
|
|
transactions: 9
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const totalCredit = customers.filter(c => c.type === 'credit').reduce((sum, c) => sum + c.balance, 0);
|
||
|
|
const totalDebit = customers.filter(c => c.type === 'debit').reduce((sum, c) => sum + c.balance, 0);
|
||
|
|
|
||
|
|
const breadcrumbItems = [
|
||
|
|
{ icon: <HomeIcon />, label: 'Home', path: '/dashboard', active: false },
|
||
|
|
{ icon: <Users />, label: 'Customers', path: '/customers', active: true }
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{/* Header */}
|
||
|
|
<div className='relative'>
|
||
|
|
<BreadCrumb items={breadcrumbItems} showUser={true} />
|
||
|
|
</div>
|
||
|
|
{/* Summary Cards */}
|
||
|
|
<div className="grid grid-cols-4 gap-5 mb-8">
|
||
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<div className="text-sm text-gray-500 font-medium">Total Customers</div>
|
||
|
|
<div className="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center">
|
||
|
|
<Users className="w-5 h-5 text-purple-600" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-3xl font-bold text-gray-900 mb-2">{customers.length}</div>
|
||
|
|
<div className="flex items-center gap-1 text-xs text-green-600 font-semibold">
|
||
|
|
<TrendingUp className="w-3.5 h-3.5" />
|
||
|
|
+12% from last month
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
|
||
|
|
<div className="text-sm text-gray-500 font-medium mb-4">Total Receivable</div>
|
||
|
|
<div className="text-3xl font-bold text-green-600 mb-2">₹{totalCredit.toLocaleString()}</div>
|
||
|
|
<div className="text-xs text-gray-600 font-medium">From {customers.filter(c => c.type === 'credit').length} customers</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
|
||
|
|
<div className="text-sm text-gray-500 font-medium mb-4">Total Payable</div>
|
||
|
|
<div className="text-3xl font-bold text-red-600 mb-2">₹{totalDebit.toLocaleString()}</div>
|
||
|
|
<div className="text-xs text-gray-600 font-medium">To {customers.filter(c => c.type === 'debit').length} customers</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm hover:shadow-md transition-all">
|
||
|
|
<div className="text-sm text-gray-500 font-medium mb-4">Active Customers</div>
|
||
|
|
<div className="text-3xl font-bold text-gray-900 mb-2">{customers.filter(c => c.status === 'Active').length}</div>
|
||
|
|
<div className="text-xs text-blue-600 font-semibold">{customers.filter(c => c.status === 'Pending').length} pending</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Customers Table */}
|
||
|
|
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm">
|
||
|
|
<div className="p-6 border-b border-gray-200">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-xl font-bold text-gray-900 mb-1">Customer Directory</h2>
|
||
|
|
<p className="text-sm text-gray-500">Manage and view all your customer details</p>
|
||
|
|
</div>
|
||
|
|
<button className="flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-[#FF6B00] to-[#FF8534] text-white rounded-xl text-sm font-semibold hover:shadow-lg transition-all">
|
||
|
|
<Plus className="w-4 h-4" />
|
||
|
|
Add Customer
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 border-b border-gray-200 bg-gray-50">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className="flex-1 relative">
|
||
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Search for customers by name or phone..."
|
||
|
|
value={searchQuery}
|
||
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||
|
|
className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#FF6B00] focus:border-transparent"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<button className="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm font-medium hover:bg-gray-50 transition-colors">
|
||
|
|
<Filter className="w-4 h-4 text-gray-600" />
|
||
|
|
<span>Filter</span>
|
||
|
|
<ChevronDown className="w-4 h-4 text-gray-600" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full">
|
||
|
|
<thead className="bg-gray-50">
|
||
|
|
<tr>
|
||
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||
|
|
Customer
|
||
|
|
</th>
|
||
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||
|
|
Phone
|
||
|
|
</th>
|
||
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||
|
|
Balance
|
||
|
|
</th>
|
||
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||
|
|
Type
|
||
|
|
</th>
|
||
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||
|
|
Transactions
|
||
|
|
</th>
|
||
|
|
<th className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||
|
|
Status
|
||
|
|
</th>
|
||
|
|
<th className="px-6 py-4"></th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
||
|
|
{customers.map((customer) => (
|
||
|
|
<tr key={customer.id} className="hover:bg-gray-50 transition-colors">
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-10 h-10 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-xl flex items-center justify-center text-white text-sm font-semibold shadow-md">
|
||
|
|
{customer.avatar}
|
||
|
|
</div>
|
||
|
|
<span className="text-sm font-medium text-gray-900">{customer.name}</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
|
||
|
|
{customer.phone}
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span className={`text-sm font-bold ${customer.type === 'credit' ? 'text-green-600' : 'text-red-600'}`}>
|
||
|
|
₹{customer.balance.toLocaleString()}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${customer.type === 'credit'
|
||
|
|
? 'bg-green-100 text-green-700'
|
||
|
|
: 'bg-red-100 text-red-700'
|
||
|
|
}`}>
|
||
|
|
{customer.type === 'credit' ? 'You will get' : 'You will give'}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||
|
|
{customer.transactions}
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
||
|
|
<span className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${customer.statusColor}`}>
|
||
|
|
{customer.status}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-right">
|
||
|
|
<button className="text-gray-400 hover:text-gray-600 transition-colors">
|
||
|
|
<MoreVertical className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|