feat(client): add client's page + CRUD operations modals
This commit is contained in:
194
src/pages/Clients.tsx
Normal file
194
src/pages/Clients.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
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"
|
||||
|
||||
export default function Clients() {
|
||||
const { activeWorkspace } = useWorkspace()
|
||||
const [clients, setClients] = useState<Client[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
// 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: isFa ? "جدیدترین" : "Newest First" },
|
||||
{ value: "created_at", label: isFa ? "قدیمیترین" : "Oldest First" },
|
||||
{ value: "name", label: isFa ? "نام (الف-ی)" : "Name (A-Z)" },
|
||||
{ value: "-name", label: isFa ? "نام (ی-الف)" : "Name (Z-A)" },
|
||||
{ value: "-updated_at", label: isFa ? "اخیراً بروزرسانی شده" : "Recently Updated" },
|
||||
]
|
||||
|
||||
// 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 data: any = await getClients(activeWorkspace.id, debouncedSearch, ordering)
|
||||
setClients(data?.results || (Array.isArray(data) ? data : []))
|
||||
} 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
|
||||
}
|
||||
}
|
||||
|
||||
// Refetch when workspace, debounced search, or ordering changes
|
||||
useEffect(() => {
|
||||
fetchClientsList()
|
||||
}, [activeWorkspace?.id, debouncedSearch, ordering])
|
||||
|
||||
if (!activeWorkspace) {
|
||||
return (
|
||||
<div className="p-6 text-center text-slate-500">
|
||||
{t.clients.selectWorkspace}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
|
||||
<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-900 dark:border-slate-800">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user