feat: enhance payment status handling and summary in MyPaymentsPage

- Added support for 'partial' payment status in MyPaymentsPage and related components.
- Updated API responses to include 'paid_rials' and 'summary' for invoices.
- Introduced InvoicePaymentStatus service to derive payment status based on actual payments.
- Enhanced tests to cover new payment scenarios including partial payments and payment methods.
- Updated documentation to reflect changes in payment status and API responses.

assets/admin/components/ui/DataTable.tsx

@@ -23,6 +23,8 @@ interface Props<T> {
   sortKey?: string | null;
   sortDir?: 'asc' | 'desc';
   onSort?: (key: string) => void;
+  /** محتوای ردیف بازشونده‌ی زیر هر ردیف؛ `null`/`undefined` یعنی بسته است. */
+  renderExpanded?: (row: T) => React.ReactNode;
 }
 
 function SkeletonRow({ cols }: { cols: number }) {
@@ -51,6 +53,7 @@ export default function DataTable<T extends object>({
   sortKey,
   sortDir,
   onSort,
+  renderExpanded,
 }: Props<T>) {
   const allColumns = actions
     ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-[120px]' }]
@@ -129,24 +132,36 @@ export default function DataTable<T extends object>({
                 </td>
               </tr>
             ) : (
-              data.map((row, rowIdx) => (
-                <tr key={rowIdx}>
-                  {columns.map((col) => (
-                    <td key={col.key} className={col.className ?? ''}>
-                      {col.render
-                        ? col.render(row)
-                        : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
-                    </td>
-                  ))}
-                  {actions && (
-                    <td>
-                      <div className="row-actions">
-                        {actions(row)}
-                      </div>
-                    </td>
-                  )}
-                </tr>
-              ))
+              data.map((row, rowIdx) => {
+                const expanded = renderExpanded?.(row);
+                return (
+                  <React.Fragment key={rowIdx}>
+                    <tr>
+                      {columns.map((col) => (
+                        <td key={col.key} className={col.className ?? ''}>
+                          {col.render
+                            ? col.render(row)
+                            : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
+                        </td>
+                      ))}
+                      {actions && (
+                        <td>
+                          <div className="row-actions">
+                            {actions(row)}
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                    {expanded && (
+                      <tr>
+                        <td colSpan={allColumns.length} style={{ height: 'auto', padding: '12px 16px', background: 'var(--surface-2)' }}>
+                          {expanded}
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })
             )}
           </tbody>
         </table>