Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 2x 2x 3x | import { type ProfileWithStats } from '../../api/client'
import { useProfileDeletion } from '../../hooks/useProfileDeletion'
import UserProfileCard from './UserProfileCard'
import UserDeletionModal from './UserDeletionModal'
interface SettingsUsersProps {
profiles: ProfileWithStats[]
currentProfileId?: number
onProfilesChange: (profiles: ProfileWithStats[]) => void
}
export default function SettingsUsers({
profiles,
currentProfileId,
onProfilesChange,
}: SettingsUsersProps) {
const {
showDeleteModal,
deletePreview,
deleting,
handleDeleteClick,
handleConfirmDelete,
handleCancelDelete,
} = useProfileDeletion(profiles, onProfilesChange)
return (
<>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h2 className="text-lg font-medium text-foreground">User Management</h2>
<p className="text-sm text-muted-foreground">
Manage user profiles and their data
</p>
</div>
<span className="text-sm text-muted-foreground">
{profiles.length} profile{profiles.length !== 1 ? 's' : ''}
</span>
</div>
<div className="space-y-3">
{profiles.map((profile) => (
<UserProfileCard
key={profile.id}
profile={profile}
isCurrent={profile.id === currentProfileId}
onDeleteClick={handleDeleteClick}
onProfileUpdate={(id, changes) => {
onProfilesChange(profiles.map((p) => (p.id === id ? { ...p, ...changes } : p)))
}}
/>
))}
</div>
</div>
{showDeleteModal && deletePreview && (
<UserDeletionModal
preview={deletePreview}
deleting={deleting}
onConfirm={handleConfirmDelete}
onCancel={handleCancelDelete}
/>
)}
</>
)
}
|