fix(client): improve client's UI and UX
This commit is contained in:
@@ -38,7 +38,7 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
|
|||||||
const footer = (
|
const footer = (
|
||||||
<>
|
<>
|
||||||
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
||||||
{t.clients.cancel}
|
{t.actions?.cancel}
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
|
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
|
||||||
{isLoading ? "..." : t.clients.create}
|
{isLoading ? "..." : t.clients.create}
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
|
|||||||
const footer = (
|
const footer = (
|
||||||
<>
|
<>
|
||||||
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
||||||
{t.clients.cancel}
|
{t.actions?.cancel}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="destructive"
|
variant="destructive"
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
|
|||||||
const footer = (
|
const footer = (
|
||||||
<>
|
<>
|
||||||
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
||||||
{t.clients.cancel}
|
{t.actions?.cancel}
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
|
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
|
||||||
{isLoading ? "..." : t.clients.saveChanges}
|
{isLoading ? "..." : t.clients.saveChanges}
|
||||||
|
|||||||
@@ -36,14 +36,13 @@ export default function Clients() {
|
|||||||
const isFa = lang === "fa"
|
const isFa = lang === "fa"
|
||||||
|
|
||||||
const orderingOptions = [
|
const orderingOptions = [
|
||||||
{ value: "-created_at", label: isFa ? "جدیدترین" : "Newest First" },
|
{ value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
|
||||||
{ value: "created_at", label: isFa ? "قدیمیترین" : "Oldest First" },
|
{ value: "created_at", label: t.ordering?.createdAt || "Oldest First" },
|
||||||
{ value: "name", label: isFa ? "نام (الف-ی)" : "Name (A-Z)" },
|
{ value: "name", label: t.ordering?.name || "Name (A-Z)" },
|
||||||
{ value: "-name", label: isFa ? "نام (ی-الف)" : "Name (Z-A)" },
|
{ value: "-name", label: t.ordering?.nameDesc || "Name (Z-A)" },
|
||||||
{ value: "-updated_at", label: isFa ? "اخیراً بروزرسانی شده" : "Recently Updated" },
|
{ value: "-updated_at", label: t.ordering?.updatedAtDesc || "Recently Updated" },
|
||||||
]
|
]
|
||||||
|
|
||||||
// بازگشت به صفحه اول در صورت تغییر فیلتر یا جستجو
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentPage(1)
|
setCurrentPage(1)
|
||||||
}, [debouncedSearch, ordering])
|
}, [debouncedSearch, ordering])
|
||||||
@@ -106,7 +105,7 @@ export default function Clients() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
|
<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 className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
|
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
|
||||||
@@ -130,7 +129,7 @@ export default function Clients() {
|
|||||||
searchPlaceholder={t.clients.searchPlaceholder}
|
searchPlaceholder={t.clients.searchPlaceholder}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Card className="overflow-hidden dark:bg-slate-900 dark:border-slate-800 mb-6">
|
<Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
|
||||||
<div className="p-0">
|
<div className="p-0">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex justify-center items-center p-12 text-slate-500">
|
<div className="flex justify-center items-center p-12 text-slate-500">
|
||||||
|
|||||||
Reference in New Issue
Block a user