ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor SIM cancel page layout and improve readability

Browse Source 
- Updated the formatting of the SIM cancel page for better readability, including consistent use of quotes and improved line breaks in text.
- Enhanced the layout of buttons and links for a more user-friendly interface.
- Added a "Back" link to improve navigation options for users.
This commit is contained in:
T. Narantuya 2025-09-06 10:11:39 +09:00
parent 2998a6afca
commit ae56477714
1 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/portal/src/app/subscriptions/[id]/sim/cancel/page.tsx
View File

@ -1,4 +1,4 @@
\"use client\";
"use client";
import Link from "next/link";
import { useParams } from "next/navigation";
@ -31,18 +31,52 @@ export default function SimCancelPage() {
<DashboardLayout>
<div className="max-w-3xl mx-auto p-6">
<div className="mb-4">
<Link href={`/subscriptions/${subscriptionId}#sim-management`} className="text-blue-600 hover:text-blue-700">← Back to SIM Management</Link>
<Link
href={`/subscriptions/${subscriptionId}#sim-management`}
className="text-blue-600 hover:text-blue-700"
>
← Back to SIM Management
</Link>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6">
<h1 className="text-xl font-semibold text-gray-900 mb-2">Cancel SIM</h1>
<p className="text-sm text-gray-600 mb-6">Cancel SIM: Permanently cancel your SIM service. This action cannot be undone and will terminate your service immediately.</p>
<p className="text-sm text-gray-600 mb-6">
Cancel SIM: Permanently cancel your SIM service. This action cannot be
undone and will terminate your service immediately.
</p>
{message && <div className="mb-4 text-green-700 bg-green-50 border border-green-200 rounded p-3">{message}</div>}
{error && <div className="mb-4 text-red-700 bg-red-50 border border-red-200 rounded p-3">{error}</div>}
{message && (
<div className="mb-4 text-green-700 bg-green-50 border border-green-200 rounded p-3">
{message}
</div>
)}
{error && (
<div className="mb-4 text-red-700 bg-red-50 border border-red-200 rounded p-3">
{error}
</div>
)}
<div className="bg-red-50 border border-red-200 rounded p-4 mb-4 text-sm text-red-800">
This is a destructive action. Your service will be terminated immediately.
</div>
<div className="flex gap-3">
<button onClick={submit} disabled={loading} className="px-4 py-2 rounded-md bg-red-600 text-white text-sm disabled:opacity-50">{loading ? Processing… : Cancel
<button
onClick={submit}
disabled={loading}
className="px-4 py-2 rounded-md bg-red-600 text-white text-sm disabled:opacity-50"
>
{loading ? "Processing…" : "Cancel SIM"}
</button>
<Link
href={`/subscriptions/${subscriptionId}#sim-management`}
className="px-4 py-2 rounded-md border border-gray-300 text-sm text-gray-700 bg-white hover:bg-gray-50"
>
Back
</Link>
</div>
</div>
</div>
</DashboardLayout>
);
}