From a35426c5c814dc8b52e5dadc208cb3a9ee1f76cb Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 15 Mar 2026 02:01:54 +0800
Subject: [PATCH] fix(components): improve components design and user
 experience

---
 src/components/FilterBar.tsx        | 33 ++++++++++++++---------
 src/components/Navbar.tsx           |  6 ++---
 src/components/Pagination.tsx       | 42 ++++++++++++++++-------------
 src/components/Sidebar.tsx          |  8 +++++-
 src/components/ui/TextAreaInput.tsx |  2 +-
 src/components/ui/input.tsx         |  2 +-
 6 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/src/components/FilterBar.tsx b/src/components/FilterBar.tsx
index 4fc49d7..964edfb 100644
--- a/src/components/FilterBar.tsx
+++ b/src/components/FilterBar.tsx
@@ -1,4 +1,6 @@
 import { Search, ArrowUpDown } from 'lucide-react';
+import { Select } from './ui/Select'; 
+import { Input } from './ui/input';
 
 interface FilterBarProps {
   searchQuery: string;
@@ -9,32 +11,37 @@ interface FilterBarProps {
   searchPlaceholder: string;
 }
 
-export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions, searchPlaceholder }: FilterBarProps) {
+export default function FilterBar({ 
+  searchQuery, 
+  setSearchQuery, 
+  ordering, 
+  setOrdering, 
+  orderingOptions, 
+  searchPlaceholder 
+}: FilterBarProps) {
+  
   return (
     <div className="flex flex-col sm:flex-row gap-4 mb-6">
       <div className="relative flex-1">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+        <Search className="absolute left-3 rtl:left-auto rtl:right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
         <input
           type="text"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           placeholder={searchPlaceholder || "Search..."}
-          className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
+          className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
         />
       </div>
+      
       <div className="flex items-center gap-2">
         <ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />
-        <select
+        <Select
           value={ordering}
-          onChange={(e) => setOrdering(e.target.value)}
-          className="w-full sm:w-auto py-2.5 pl-3 pr-8 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow appearance-none"
-        >
-          {orderingOptions.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
+          onChange={setOrdering}
+          options={orderingOptions}
+          className="w-full sm:w-max"
+          buttonClassName="whitespace-nowrap min-w-[150px]" 
+        />
       </div>
     </div>
   );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1f3cda8..28a0b93 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -104,7 +104,7 @@ export function Navbar() {
 
   return (
     <>
-      <header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-8 py-6 flex items-center justify-between transition-colors">
+      <header className="sticky top-0 z-50 border-b border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70 backdrop-blur-md px-8 py-6 flex items-center justify-between transition-colors">
         <div 
           className="flex items-center gap-2 cursor-pointer" 
           onClick={() => navigate("/")}
@@ -196,7 +196,7 @@ export function Navbar() {
       </header>
 
       {showLogoutModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" onClick={() => setShowLogoutModal(false)}>
+        <div className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 px-4" onClick={() => setShowLogoutModal(false)}>
           <div className="w-full max-w-sm rounded-lg bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800" onClick={(e) => e.stopPropagation()}>
             <h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
               {t.confirmLogoutTitle || "Confirm Logout"}
@@ -210,7 +210,7 @@ export function Navbar() {
                 onClick={() => setShowLogoutModal(false)}
                 className="dark:text-white"
               >
-                {t.cancel || "Cancel"}
+                {t.actions?.cancel || "Cancel"}
               </Button>
               <Button
                 variant="destructive"
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 1399895..182946e 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { useTranslation } from '../hooks/useTranslation';
+import { Select } from './ui/Select';
+import { Button } from './ui/button';
 
 interface PaginationProps {
   currentPage: number;
@@ -35,46 +37,48 @@ export const Pagination: React.FC<PaginationProps> = ({
   const endItem = Math.min(currentPage * limit, totalCount);
 
   return (
-    <div className="mt-auto sticky bottom-0 left-0 right-0 z-10 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md flex items-center justify-between py-4 border-t border-slate-200 dark:border-slate-800 px-4 -mx-4 sm:px-0 sm:mx-0">
+    <div className="mt-auto sticky bottom-0 bg-slate-50/60 dark:bg-slate-900/60 backdrop-blur-md left-0 right-0 z-10 flex items-center justify-between py-4 px-4 -mx-4 sm:px-0 sm:mx-0">
       <div className="flex items-center gap-4">
-        <select
-          value={limit}
-          onChange={(e) => {
-            onLimitChange(Number(e.target.value));
+        <Select
+          value={String(limit)}
+          onChange={(val) => {
+            onLimitChange(Number(val));
             onPageChange(1);
           }}
-          className="p-1.5 border rounded-lg text-sm bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          {pageSizeOptions.map((option) => (
-            <option key={option} value={option}>
-              {toPersianNum(option)} {t.pagination?.perPage || 'per page'}
-            </option>
-          ))}
-        </select>
+          options={pageSizeOptions.map((option) => ({
+            value: String(option),
+            label: String(toPersianNum(option)),
+          }))}
+          className="w-20 shrink-0"
+          buttonClassName="" 
+        />
         <span className="text-sm text-slate-500 dark:text-slate-400 hidden sm:inline-block">
           {t.pagination?.showing || 'Showing'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(startItem)}</strong> {t.pagination?.to || '-'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(endItem)}</strong> {t.pagination?.of || 'of'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(totalCount)}</strong>
         </span>
       </div>
 
       <div className="flex items-center gap-3">
-        <button
+        <Button
+          variant="outline"
+          size="sm"
           onClick={() => onPageChange(currentPage - 1)}
           disabled={currentPage === 1}
-          className="px-4 py-1.5 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
         >
           {t.pagination?.previous || 'Previous'}
-        </button>
+        </Button>
         <span className="text-sm text-slate-600 dark:text-slate-400 font-medium hidden sm:inline-block">
           {t.pagination?.page || 'Page'} {toPersianNum(currentPage)} {t.pagination?.of || 'of'} {toPersianNum(totalPages)}
         </span>
-        <button
+        <Button
+          variant="outline"
+          size="sm"
           onClick={() => onPageChange(currentPage + 1)}
           disabled={currentPage >= totalPages}
-          className="px-4 py-1.5 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
         >
           {t.pagination?.next || 'Next'}
-        </button>
+        </Button>
       </div>
+
     </div>
   );
 };
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index f8da475..0065c7a 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -6,7 +6,8 @@ import {
   PanelLeftClose, 
   PanelLeftOpen, 
   PanelRightClose, 
-  PanelRightOpen 
+  PanelRightOpen,
+  Briefcase,
 } from 'lucide-react';
 import { useTranslation } from '../hooks/useTranslation';
 
@@ -31,6 +32,11 @@ export const Sidebar = () => {
       icon: Users, 
       label: t.sidebar?.clients || 'Clients' 
     },
+    { 
+      path: '/projects', 
+      icon: Briefcase, 
+      label: t.sidebar?.projects || 'Projects' 
+    },
   ];
 
   return (
diff --git a/src/components/ui/TextAreaInput.tsx b/src/components/ui/TextAreaInput.tsx
index bae52b5..42d6da0 100644
--- a/src/components/ui/TextAreaInput.tsx
+++ b/src/components/ui/TextAreaInput.tsx
@@ -6,7 +6,7 @@ const TextAreaInput = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
-        className={`flex min-h-50 w-full rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ""}`}
+      className={`flex min-h-50 w-full rounded-md border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ""}`}
         ref={ref}
         {...props}
       />
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index f7da423..6a4c8b0 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
           className={cn(
-            "flex h-10 w-full rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-10 w-full rounded-md border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             className
           )}
         ref={ref}