feat(reports): sort web breakdown tables

src/components/Pagination.tsx

@@ -63,8 +63,8 @@ export const Pagination: React.FC<PaginationProps> = ({
   }, [currentPage, totalPages]);
 
   return (
-    <div className="sticky bottom-0 left-0 right-0 z-10 mt-auto -mx-4 border-t border-slate-200/80 bg-white/90 px-4 py-4 backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/90 sm:mx-0 sm:rounded-3xl sm:border sm:px-5">
+    <div className="sticky bottom-0 left-0 right-0 z-10 mt-auto -mx-4 border-t border-slate-200/80 bg-white/95 px-4 py-3 shadow-[0_-10px_30px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/95 dark:shadow-[0_-10px_30px_rgba(0,0,0,0.24)] md:-mx-6 md:px-6">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div className="mx-auto flex w-full max-w-7xl gap-3 flex-row items-center justify-between">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:justify-start">
           <div className="flex items-center gap-3">
             <Select
@@ -78,9 +78,9 @@ export const Pagination: React.FC<PaginationProps> = ({
                 label: String(toPersianNum(option)),
               }))}
               className="w-24 shrink-0"
-              buttonClassName="h-10 rounded-2xl border-slate-200 bg-slate-50 font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
+              buttonClassName="h-9 rounded-lg border-slate-200 bg-slate-50 font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
             />
-            <span className="inline-flex h-10 items-center rounded-2xl border border-slate-200 bg-slate-50 px-4 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 sm:hidden">
+            <span className="inline-flex h-9 items-center rounded-lg border border-slate-200 bg-slate-50 px-3 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 sm:hidden">
               {toPersianNum(currentPage)} / {toPersianNum(totalPages)}
             </span>
           </div>
@@ -98,7 +98,7 @@ export const Pagination: React.FC<PaginationProps> = ({
                   type="button"
                   onClick={() => onPageChange(pageItem)}
                   className={cn(
-                    'inline-flex h-10 min-w-10 items-center justify-center rounded-2xl border px-3 text-sm font-semibold transition-colors',
+                    'inline-flex h-9 min-w-9 items-center justify-center rounded-lg border px-3 text-sm font-semibold transition-colors',
                     pageItem === currentPage
                       ? 'border-sky-500 bg-sky-500 text-white shadow-sm'
                       : 'border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800',
@@ -109,7 +109,7 @@ export const Pagination: React.FC<PaginationProps> = ({
               ) : (
                 <span
                   key={`${pageItem}-${index}`}
-                  className="inline-flex h-10 min-w-10 items-center justify-center rounded-2xl text-slate-400 dark:text-slate-500"
+                  className="inline-flex h-9 min-w-9 items-center justify-center rounded-lg text-slate-400 dark:text-slate-500"
                 >
                   <MoreHorizontal className="h-4 w-4" />
                 </span>
@@ -123,7 +123,7 @@ export const Pagination: React.FC<PaginationProps> = ({
               size="sm"
               onClick={() => onPageChange(currentPage - 1)}
               disabled={currentPage === 1}
-              className="h-10 rounded-2xl border-slate-200 bg-slate-50 px-4 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+              className="h-9 rounded-lg border-slate-200 bg-slate-50 px-3 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
             >
               <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
               {t.pagination?.previous || 'Previous'}
@@ -138,7 +138,7 @@ export const Pagination: React.FC<PaginationProps> = ({
               size="sm"
               onClick={() => onPageChange(currentPage + 1)}
               disabled={currentPage >= totalPages}
-              className="h-10 rounded-2xl border-slate-200 bg-slate-50 px-4 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+              className="h-9 rounded-lg border-slate-200 bg-slate-50 px-3 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
             >
               {t.pagination?.next || 'Next'}
               <ChevronRight className="h-4 w-4 rtl:rotate-180" />

src/components/reports/ReportsTablePanel.tsx

@@ -92,6 +92,9 @@ const formatDisplayDateTime = (value: string, lang: "en" | "fa") => {
 const percentageMap = (rows?: PercentageRow[]) =>
   new Map((rows || []).map((row) => [row.id, `${formatAmount(row.percentage, "en")}%`]));
 
+const numericPercentageMap = (rows?: PercentageRow[]) =>
+  new Map((rows || []).map((row) => [row.id, Number(row.percentage) || 0]));
+
 function LoadingBlock({ className }: { className: string }) {
   return <div className={`animate-pulse rounded-2xl bg-slate-200/80 dark:bg-slate-800/80 ${className}`} />;
 }
@@ -152,14 +155,28 @@ function BreakdownTable({
   financialOnly: boolean;
 }) {
   const hourPercentageById = useMemo(() => percentageMap(hourPercentages), [hourPercentages]);
+  const hourPercentageNumberById = useMemo(() => numericPercentageMap(hourPercentages), [hourPercentages]);
   const incomePercentageById = useMemo(() => percentageMap(incomePercentages), [incomePercentages]);
+  const sortedRows = useMemo(
+    () =>
+      [...rows].sort((left, right) => {
+        const percentageDelta =
+          (hourPercentageNumberById.get(right.id) || 0) - (hourPercentageNumberById.get(left.id) || 0);
+        if (percentageDelta !== 0) return percentageDelta;
+        if (right.billable_seconds !== left.billable_seconds) {
+          return right.billable_seconds - left.billable_seconds;
+        }
+        return left.name.localeCompare(right.name);
+      }),
+    [hourPercentageNumberById, rows],
+  );
 
   return (
     <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
       <div className="mb-4 text-sm font-semibold text-slate-900 dark:text-white">{title}</div>
 
       <div className="space-y-3 sm:hidden">
-        {rows.map((row) => (
+        {sortedRows.map((row) => (
           <div key={row.id} className="rounded-2xl border border-slate-200 bg-slate-50/80 p-3 dark:border-slate-800 dark:bg-slate-950/70">
             <div className="text-sm font-semibold text-slate-900 dark:text-white">{row.name}</div>
             <div className="mt-3 grid grid-cols-2 gap-3 text-xs text-slate-600 dark:text-slate-300">
@@ -229,7 +246,7 @@ function BreakdownTable({
             </tr>
           </thead>
           <tbody>
-            {rows.map((row) => (
+            {sortedRows.map((row) => (
               <tr key={row.id} className="border-b border-slate-100 last:border-b-0 dark:border-slate-800/80">
                 <td className="px-3 py-3 font-medium text-slate-900 dark:text-slate-100">{row.name}</td>
                 <td className="px-3 py-3 text-slate-700 dark:text-slate-300">{localizeDigits(row.billable_duration, lang)}</td>