feat(reports): sort web breakdown tables

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>