detail page done

src/widgets/history/ui/historyTableRow.tsx

@@ -0,0 +1,93 @@
+'use client';
+import React from 'react';
+import { HistoryTableRowProps } from '../lib/types';
+import { formatDate, truncateFileName } from '../lib/utils';
+import { ResultBadge } from './resultBadge';
+import { useRouter } from '@/shared/config/i18n/navigation';
+
+export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
+  const router = useRouter();
+  return (
+    <tr className="border-b border-slate-100 hover:bg-slate-50/70 transition-colors duration-100 group">
+      {/* Sender */}
+      <td className="px-4 py-3.5">
+        <span className="text-sm font-medium text-slate-800 whitespace-nowrap">
+          {item.senderFullName}
+        </span>
+      </td>
+
+      {/* File Name */}
+      <td className="px-4 py-3.5">
+        <div className="flex items-center gap-2">
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.75"
+            className="text-slate-400 shrink-0"
+          >
+            <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <span
+            className="text-sm text-slate-600 font-mono"
+            title={item.fileName}
+          >
+            {truncateFileName(item.fileName)}
+          </span>
+        </div>
+      </td>
+
+      {/* Date */}
+      <td className="px-4 py-3.5">
+        <span className="text-sm text-slate-500 whitespace-nowrap">
+          {formatDate(item.date)}
+        </span>
+      </td>
+
+      {/* Amount */}
+      <td className="px-4 py-3.5">
+        <span className="text-sm font-medium text-slate-700 whitespace-nowrap tabular-nums">
+          {item.paymentAmount}
+        </span>
+      </td>
+
+      {/* Result */}
+      <td className="px-4 py-3.5">
+        <ResultBadge result={item.result} />
+      </td>
+
+      {/* View Button */}
+      <td className="px-4 py-3.5 text-right">
+        <button
+          onClick={() => router.push(`/${item.id}`)}
+          aria-label={`View details for ${item.senderFullName}`}
+          className="
+          inline-flex items-center gap-1.5 px-3 py-1.5
+          text-xs font-medium text-slate-600
+          bg-white border border-slate-200 rounded-lg
+          hover:border-slate-300 hover:text-slate-900 hover:bg-slate-50
+          active:scale-95
+          transition-all duration-150
+          focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300
+        "
+        >
+          View
+          <svg
+            width="11"
+            height="11"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 12h14M12 5l7 7-7 7" />
+          </svg>
+        </button>
+      </td>
+    </tr>
+  );
+};