From ae564777142b7ba88304c53b6c5120f4c655ea47 Mon Sep 17 00:00:00 2001
From: "T. Narantuya" <tumurbarsnarantuya@gmail.com>
Date: Sat, 6 Sep 2025 10:11:39 +0900
Subject: [PATCH] Refactor SIM cancel page layout and improve readability

- 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.
---
 .../subscriptions/[id]/sim/cancel/page.tsx    | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/apps/portal/src/app/subscriptions/[id]/sim/cancel/page.tsx b/apps/portal/src/app/subscriptions/[id]/sim/cancel/page.tsx
index abc455fd..d1dffb4a 100644
--- a/apps/portal/src/app/subscriptions/[id]/sim/cancel/page.tsx
+++ b/apps/portal/src/app/subscriptions/[id]/sim/cancel/page.tsx
@@ -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>
+  );
+}