220 lines
8.0 KiB
TypeScript
220 lines
8.0 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
|
|
import { useWorkspace } from "../context/WorkspaceContext"
|
|
import { useTranslation } from "../hooks/useTranslation"
|
|
import { type Client } from "../types/client"
|
|
import { getClients } from "../api/clients"
|
|
import CreateClientModal from "../components/CreateClientModal"
|
|
import EditClientModal from "../components/EditClientModal"
|
|
import DeleteClientModal from "../components/DeleteClientModal"
|
|
import FilterBar from "../components/FilterBar"
|
|
import { Button } from "../components/ui/button"
|
|
import { Card } from "../components/ui/card"
|
|
import { Pagination } from "../components/Pagination"
|
|
|
|
export default function Clients() {
|
|
const { activeWorkspace } = useWorkspace()
|
|
const [clients, setClients] = useState<Client[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
// Pagination States
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
const [totalItems, setTotalItems] = useState(0)
|
|
const [limit, setLimit] = useState(10)
|
|
|
|
// Filter States
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [debouncedSearch, setDebouncedSearch] = useState("")
|
|
const [ordering, setOrdering] = useState("-created_at")
|
|
|
|
// Modal States
|
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
|
|
const [editClient, setEditClient] = useState<Client | null>(null)
|
|
const [deleteClient, setDeleteClient] = useState<Client | null>(null)
|
|
|
|
const { t, lang } = useTranslation()
|
|
const isFa = lang === "fa"
|
|
|
|
const orderingOptions = [
|
|
{ value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
|
|
{ value: "created_at", label: t.ordering?.createdAt || "Oldest First" },
|
|
{ value: "name", label: t.ordering?.name || "Name (A-Z)" },
|
|
{ value: "-name", label: t.ordering?.nameDesc || "Name (Z-A)" },
|
|
{ value: "-updated_at", label: t.ordering?.updatedAtDesc || "Recently Updated" },
|
|
]
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1)
|
|
}, [debouncedSearch, ordering])
|
|
|
|
// Debounce search input to avoid spamming the API
|
|
useEffect(() => {
|
|
const handler = setTimeout(() => {
|
|
setDebouncedSearch(searchQuery)
|
|
}, 500)
|
|
return () => clearTimeout(handler)
|
|
}, [searchQuery])
|
|
|
|
const fetchClientsList = async () => {
|
|
if (!activeWorkspace?.id) {
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
|
|
setIsLoading(true)
|
|
try {
|
|
const offset = (currentPage - 1) * limit
|
|
const data: any = await getClients(activeWorkspace.id, debouncedSearch, ordering, limit, offset)
|
|
|
|
const items = data?.results || (Array.isArray(data) ? data : [])
|
|
const count = data?.count !== undefined ? data.count : items.length
|
|
|
|
setClients(items)
|
|
setTotalItems(count)
|
|
} catch (error) {
|
|
console.error(t.clients.errors.fetchFailed, error)
|
|
setClients([])
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const formatDate = (dateStr: string | undefined) => {
|
|
if (!dateStr) return "-"
|
|
try {
|
|
const date = new Date(dateStr)
|
|
return new Intl.DateTimeFormat(isFa ? "fa-IR" : "en-US", {
|
|
dateStyle: "long",
|
|
timeZone: "Asia/Tehran"
|
|
}).format(date)
|
|
} catch (e) {
|
|
return dateStr
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchClientsList()
|
|
}, [activeWorkspace?.id, debouncedSearch, ordering, currentPage, limit])
|
|
|
|
if (!activeWorkspace) {
|
|
return (
|
|
<div className="p-6 text-center text-slate-500">
|
|
{t.clients.selectWorkspace}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
|
|
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
|
|
{t.clients.description(activeWorkspace.name)}
|
|
</p>
|
|
</div>
|
|
|
|
<Button onClick={() => setIsCreateModalOpen(true)} className="flex items-center gap-2">
|
|
<Plus className="w-4 h-4" />
|
|
{t.clients.addClient}
|
|
</Button>
|
|
</div>
|
|
|
|
<FilterBar
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
ordering={ordering}
|
|
setOrdering={setOrdering}
|
|
orderingOptions={orderingOptions}
|
|
searchPlaceholder={t.clients.searchPlaceholder}
|
|
/>
|
|
|
|
<Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
|
|
<div className="p-0">
|
|
{isLoading ? (
|
|
<div className="flex justify-center items-center p-12 text-slate-500">
|
|
<Loader2 className="w-8 h-8 animate-spin" />
|
|
</div>
|
|
) : clients.length === 0 ? (
|
|
<div className="text-center p-12">
|
|
<Building2 className="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3" />
|
|
<h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
|
|
<p className="text-slate-500 dark:text-slate-400 mt-1">
|
|
{searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<ul className="divide-y divide-slate-200 dark:divide-slate-800">
|
|
{clients.map((client) => (
|
|
<li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="font-medium text-slate-900 dark:text-white truncate">{client.name}</h4>
|
|
{client.notes && (
|
|
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
|
|
{client.notes}
|
|
</p>
|
|
)}
|
|
<div className="text-[11px] text-slate-400 mt-3 font-medium">
|
|
{t.clients.addedOn}: {formatDate(client.created_at)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setEditClient(client)}
|
|
className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setDeleteClient(client)}
|
|
className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{!isLoading && clients.length > 0 && (
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalCount={totalItems}
|
|
limit={limit}
|
|
onPageChange={setCurrentPage}
|
|
onLimitChange={setLimit}
|
|
/>
|
|
)}
|
|
|
|
<CreateClientModal
|
|
isOpen={isCreateModalOpen}
|
|
onClose={() => setIsCreateModalOpen(false)}
|
|
onSuccess={fetchClientsList}
|
|
workspaceId={activeWorkspace.id}
|
|
/>
|
|
|
|
<EditClientModal
|
|
isOpen={!!editClient}
|
|
onClose={() => setEditClient(null)}
|
|
onSuccess={fetchClientsList}
|
|
client={editClient}
|
|
/>
|
|
|
|
<DeleteClientModal
|
|
isOpen={!!deleteClient}
|
|
onClose={() => setDeleteClient(null)}
|
|
onSuccess={fetchClientsList}
|
|
client={deleteClient}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|