changed

src/widgets/cabinet/ui/tables/PaymentsTable.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { CheckCircle, Clock, XCircle } from 'lucide-react';
+import type { Payment } from '../../lib/types';
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+const STATUS_MAP = {
+  paid: {
+    label: "To'landi",
+    icon: CheckCircle,
+    cls: 'text-emerald-600 bg-emerald-50',
+  },
+  pending: {
+    label: 'Kutilmoqda',
+    icon: Clock,
+    cls: 'text-amber-600  bg-amber-50',
+  },
+  failed: { label: 'Xato', icon: XCircle, cls: 'text-red-600    bg-red-50' },
+} as const;
+
+// ─── Component ─────────────────────────────────────────────────────────────────
+
+interface PaymentsTableProps {
+  data: Payment[];
+}
+
+export const PaymentsTable: React.FC<PaymentsTableProps> = ({ data }) => (
+  <div className="space-y-4">
+    <div>
+      <h2 className="text-xl font-bold text-slate-900">
+        To&apos;lovlar tarixi
+      </h2>
+      <p className="text-sm text-slate-500 mt-0.5">
+        {data.length} ta to&apos;lov
+      </p>
+    </div>
+
+    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-slate-50 border-b border-slate-100">
+              {['#', 'Xizmat', 'Summa', 'Chegirma', 'Sana', 'Holat'].map(
+                (h) => (
+                  <th
+                    key={h}
+                    className="text-left px-5 py-3 text-[11px] font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ),
+              )}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-50">
+            {data.map((row) => {
+              const s = STATUS_MAP[row.status];
+              const Icon = s.icon;
+              return (
+                <tr
+                  key={row.id}
+                  className="hover:bg-slate-50/60 transition-colors"
+                >
+                  <td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
+                    {String(row.id).padStart(2, '0')}
+                  </td>
+                  <td className="px-5 py-3.5 text-slate-800 font-medium whitespace-nowrap">
+                    {row.service}
+                  </td>
+                  <td className="px-5 py-3.5 text-slate-800 font-semibold tabular-nums whitespace-nowrap">
+                    {row.amount.toLocaleString()} UZS
+                  </td>
+                  <td className="px-5 py-3.5 tabular-nums whitespace-nowrap">
+                    {row.discount > 0 ? (
+                      <span className="text-emerald-600 font-medium">
+                        -{row.discount.toLocaleString()} UZS
+                      </span>
+                    ) : (
+                      <span className="text-slate-300">—</span>
+                    )}
+                  </td>
+                  <td className="px-5 py-3.5 text-slate-500 whitespace-nowrap">
+                    {row.date}
+                  </td>
+                  <td className="px-5 py-3.5">
+                    <span
+                      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${s.cls}`}
+                    >
+                      <Icon size={12} />
+                      {s.label}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+);