hamed
f619449167
- 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.
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
title: string;
|
|
message: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
danger?: boolean;
|
|
loading?: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export default function ConfirmDialog({
|
|
open,
|
|
title,
|
|
message,
|
|
confirmLabel = 'تأیید',
|
|
cancelLabel = 'لغو',
|
|
danger = false,
|
|
loading = false,
|
|
onConfirm,
|
|
onCancel,
|
|
}: Props) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div className="absolute inset-0 bg-black/40" onClick={onCancel} />
|
|
<div
|
|
className="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6"
|
|
style={{ animation: 'scale-in 200ms ease' }}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${danger ? 'bg-red-100' : 'bg-yellow-100'}`}>
|
|
<ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600' : 'text-yellow-600'}`} />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 text-base">{title}</h3>
|
|
<p className="text-sm text-gray-500 mt-1">{message}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 mt-6 justify-end">
|
|
<button
|
|
onClick={onCancel}
|
|
disabled={loading}
|
|
className="px-4 py-2 rounded-[10px] border border-gray-300 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 transition-colors"
|
|
>
|
|
{cancelLabel}
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={loading}
|
|
className={`px-4 py-2 rounded-[10px] text-sm text-white font-medium disabled:opacity-50 transition-colors ${
|
|
danger
|
|
? 'bg-red-600 hover:bg-red-700'
|
|
: 'bg-primary-600 hover:bg-primary-700'
|
|
}`}
|
|
>
|
|
{loading ? 'در حال انجام...' : confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|