pieced/pieced-portal
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): move approve/reject/delete dialogs onto shared Modal

Browse Source
This commit is contained in:
admin
2026-05-29 23:37:32 +02:00
parent 3110b40cf9
commit 74d276b656
1 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/admin/admin-panel.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react";
import { useTranslations, useFormatter } from "next-intl";
import type { PiecedTenant, TenantRequest } from "@/types";
import { StatusBadge } from "@/components/ui/status-badge";
import { Modal } from "@/components/ui/modal";
import { formatDateTime, formatRelative } from "@/lib/format";
import Link from "next/link";
@@ -794,13 +795,20 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
)}
{/* ───── APPROVE MODAL ───── */}
{approveModal &&
(() => {
const req = requests.find((r) => r.id === approveModal);
const isReapprove = req?.status === "rejected";
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
<Modal
open={!!approveModal}
onClose={() => {
setApproveModal(null);
setActionError("");
}}
ariaLabel={t("approveTitle")}
>
{approveModal &&
(() => {
const req = requests.find((r) => r.id === approveModal);
const isReapprove = req?.status === "rejected";
return (
<>
<h3 className="font-display text-lg font-semibold text-text-primary mb-2">
{t("approveTitle")}
</h3>
@@ -838,15 +846,23 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
{actionLoading === approveModal ? "…" : t("confirmApprove")}
</button>
</div>
</div>
</div>
);
})()}
</>
);
})()}
</Modal>
{/* ───── REJECT MODAL ───── */}
{rejectModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
<Modal
open={!!rejectModal}
onClose={() => {
setRejectModal(null);
setRejectNotes("");
setActionError("");
}}
ariaLabel={t("rejectTitle")}
>
{rejectModal && (
<>
<h3 className="font-display text-lg font-semibold text-text-primary mb-4">
{t("rejectTitle")}
</h3>
@@ -870,6 +886,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
onClick={() => {
setRejectModal(null);
setRejectNotes("");
setActionError("");
}}
className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
>
@@ -883,14 +900,21 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
{actionLoading === rejectModal ? "…" : t("confirmReject")}
</button>
</div>
</div>
</div>
)}
</>
)}
</Modal>
{/* ───── DELETE MODAL ───── */}
{deleteModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
<Modal
open={!!deleteModal}
onClose={() => {
setDeleteModal(null);
setActionError("");
}}
ariaLabel={t("deleteTitle")}
>
{deleteModal && (
<>
<h3 className="font-display text-lg font-semibold text-text-primary mb-2">
{t("deleteTitle")}
</h3>
@@ -907,7 +931,10 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
)}
<div className="flex gap-2 justify-end">
<button
onClick={() => setDeleteModal(null)}
onClick={() => {
setDeleteModal(null);
setActionError("");
}}
className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
>
{t("cancelAction")}
@@ -920,9 +947,9 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
{actionLoading === deleteModal ? "…" : t("confirmDelete")}
</button>
</div>
</div>
</div>
)}
</>
)}
</Modal>
</>
);
}