feat: add Settlements, SMS, User detail, and Users management pages

- Implement SettlementsPage for managing settlement requests with approval and rejection functionalities. - Create SmsPage for handling SMS templates, including creation, approval, rejection, and logging. - Add UserDetailPage to display detailed information about users. - Develop UsersPage for listing users with search, view, edit, and delete options. - Introduce new types for User, SmsTemplate, SmsLog, and Settlement to support the new features.
2026-06-09 22:53:26 +03:30
parent e522c741b8
commit f619449167
30 changed files with 3870 additions and 0 deletions
@@ -0,0 +1,122 @@
+import React from 'react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+
+export interface Column<T> {
+  key: string;
+  header: string;
+  render?: (row: T) => React.ReactNode;
+  sortable?: boolean;
+}
+
+interface Props<T> {
+  columns: Column<T>[];
+  data: T[];
+  loading?: boolean;
+  searchValue?: string;
+  onSearchChange?: (v: string) => void;
+  searchPlaceholder?: string;
+  actions?: (row: T) => React.ReactNode;
+  emptyMessage?: string;
+  emptyAction?: React.ReactNode;
+}
+
+function SkeletonRow({ cols }: { cols: number }) {
+  return (
+    <tr>
+      {Array.from({ length: cols }).map((_, i) => (
+        <td key={i} className="px-4 py-3">
+          <div className="h-4 bg-gray-200 rounded animate-pulse w-full" />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export default function DataTable<T extends object>({
+  columns,
+  data,
+  loading,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'جستجو...',
+  actions,
+  emptyMessage = 'هیچ موردی یافت نشد',
+  emptyAction,
+}: Props<T>) {
+  const allColumns = actions
+    ? [...columns, { key: '__actions', header: 'اقدامات' }]
+    : columns;
+
+  return (
+    <div>
+      {onSearchChange !== undefined && (
+        <div className="mb-4">
+          <div className="relative max-w-xs">
+            <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              value={searchValue}
+              onChange={(e) => onSearchChange(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="w-full h-10 pr-9 pl-3 border border-gray-300 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="overflow-x-auto rounded-xl border border-gray-200">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              {allColumns.map((col) => (
+                <th
+                  key={col.key}
+                  className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap"
+                >
+                  {col.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {loading ? (
+              Array.from({ length: 5 }).map((_, i) => (
+                <SkeletonRow key={i} cols={allColumns.length} />
+              ))
+            ) : data.length === 0 ? (
+              <tr>
+                <td colSpan={allColumns.length} className="text-center py-16">
+                  <div className="flex flex-col items-center gap-3 text-gray-400">
+                    <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                    </svg>
+                    <p className="text-sm">{emptyMessage}</p>
+                    {emptyAction}
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              data.map((row, rowIdx) => (
+                <tr key={rowIdx} className="hover:bg-gray-50 transition-colors">
+                  {columns.map((col) => (
+                    <td key={col.key} className="px-4 py-3 text-gray-700 whitespace-nowrap">
+                      {col.render
+                        ? col.render(row)
+                        : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
+                    </td>
+                  ))}
+                  {actions && (
+                    <td className="px-4 py-3 whitespace-nowrap">
+                      <div className="flex items-center gap-2">{actions(row)}</div>
+                    </td>
+                  )}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}