From aa4143ccf17a811f63e97a86118a40d0c3e88dae Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Fri, 16 Jan 2026 10:14:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=84=AA=E5=8C=96=E4=B8=AD=E5=A4=AE?=
 =?UTF-8?q?=E5=BE=8C=E5=8F=B0=20UI=20(=E7=94=A8=E8=AA=9E=E8=AA=BF=E6=95=B4?=
 =?UTF-8?q?=E3=80=81=E7=A7=BB=E9=99=A4=E9=80=A3=E7=B5=90)=20=E8=88=87?=
 =?UTF-8?q?=E5=AF=A6=E4=BD=9C=20RWD=20=E6=94=AF=E6=8F=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/Layouts/LandlordLayout.tsx       | 61 +++++++++++++------
 resources/js/Pages/Landlord/Dashboard.tsx     | 10 +--
 resources/js/Pages/Landlord/Tenant/Create.tsx | 12 ++--
 resources/js/Pages/Landlord/Tenant/Edit.tsx   | 14 ++---
 resources/js/Pages/Landlord/Tenant/Index.tsx  | 18 +++---
 resources/js/Pages/Landlord/Tenant/Show.tsx   |  8 +--
 6 files changed, 72 insertions(+), 51 deletions(-)

diff --git a/resources/js/Layouts/LandlordLayout.tsx b/resources/js/Layouts/LandlordLayout.tsx
index f5e9958..535eae9 100644
--- a/resources/js/Layouts/LandlordLayout.tsx
+++ b/resources/js/Layouts/LandlordLayout.tsx
@@ -15,6 +15,8 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/Components/ui/dropdown-menu";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
 
 interface LandlordLayoutProps {
     children: React.ReactNode;
@@ -34,31 +36,51 @@ export default function LandlordLayout({ children, title }: LandlordLayoutProps)
             active: url === "/landlord" || url === "/landlord/",
         },
         {
-            label: "租戶管理",
+            label: "客戶管理",
             href: "/landlord/tenants",
             icon: Building2,
             active: url.startsWith("/landlord/tenants"),
         },
     ];
 
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
     return (
-        <div className="flex min-h-screen bg-slate-50">
+        <div className="flex min-h-screen bg-slate-50 relative">
+            {/* Sidebar Overlay for mobile */}
+            {isSidebarOpen && (
+                <div
+                    className="fixed inset-0 bg-black/50 z-40 lg:hidden transition-opacity"
+                    onClick={() => setIsSidebarOpen(false)}
+                />
+            )}
+
             {/* Sidebar */}
-            <aside className="fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col">
-                <div className="h-16 flex items-center px-6 border-b border-slate-800">
+            <aside className={cn(
+                "fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col z-50 transition-transform duration-300 lg:translate-x-0",
+                isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+            )}>
+                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-800">
                     <Link href="/landlord" className="flex items-center gap-2">
                         <div className="w-8 h-8 bg-primary-main rounded-lg flex items-center justify-center">
                             <Building2 className="w-5 h-5 text-white" />
                         </div>
-                        <span className="font-bold text-lg">房東後台</span>
+                        <span className="font-bold text-lg">中央後台</span>
                     </Link>
+                    <button
+                        className="lg:hidden text-slate-400 hover:text-white"
+                        onClick={() => setIsSidebarOpen(false)}
+                    >
+                        <X className="w-6 h-6" />
+                    </button>
                 </div>
 
-                <nav className="flex-1 p-4 space-y-1">
+                <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
                     {menuItems.map((item) => (
                         <Link
                             key={item.href}
                             href={item.href}
+                            onClick={() => setIsSidebarOpen(false)}
                             className={cn(
                                 "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors",
                                 item.active
@@ -71,24 +93,23 @@ export default function LandlordLayout({ children, title }: LandlordLayoutProps)
                         </Link>
                     ))}
                 </nav>
-
-                <div className="p-4 border-t border-slate-800">
-                    <Link
-                        href="/"
-                        className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm"
-                    >
-                        ← 返回 ERP 系統
-                    </Link>
-                </div>
             </aside>
 
             {/* Main Content */}
-            <main className="flex-1 ml-64">
+            <main className="flex-1 lg:ml-64 w-full">
                 {/* Header */}
-                <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6">
-                    <h1 className="text-lg font-semibold text-slate-900">
-                        {title || "房東管理後台"}
-                    </h1>
+                <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 lg:px-6">
+                    <div className="flex items-center gap-4">
+                        <button
+                            className="lg:hidden p-2 text-slate-600 hover:bg-slate-100 rounded-lg"
+                            onClick={() => setIsSidebarOpen(true)}
+                        >
+                            <Menu className="w-6 h-6" />
+                        </button>
+                        <h1 className="text-lg font-semibold text-slate-900 truncate max-w-[200px] sm:max-w-none">
+                            {title || "中央管理後台"}
+                        </h1>
+                    </div>
 
                     <DropdownMenu modal={false}>
                         <DropdownMenuTrigger className="flex items-center gap-2 outline-none group">
diff --git a/resources/js/Pages/Landlord/Dashboard.tsx b/resources/js/Pages/Landlord/Dashboard.tsx
index a4b4d72..998f067 100644
--- a/resources/js/Pages/Landlord/Dashboard.tsx
+++ b/resources/js/Pages/Landlord/Dashboard.tsx
@@ -19,7 +19,7 @@ interface DashboardProps {
 export default function Dashboard({ totalTenants, activeTenants, recentTenants }: DashboardProps) {
     const statsCards = [
         {
-            title: "租戶總數",
+            title: "客戶總數",
             value: totalTenants,
             icon: Building2,
             color: "bg-blue-500",
@@ -62,7 +62,7 @@ export default function Dashboard({ totalTenants, activeTenants, recentTenants }
                 {/* Recent Tenants */}
                 <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                     <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
-                        <h2 className="text-lg font-semibold text-slate-900">最近新增的租戶</h2>
+                        <h2 className="text-lg font-semibold text-slate-900">最近新增的客戶</h2>
                         <Link
                             href="/landlord/tenants"
                             className="text-sm text-primary-main hover:underline"
@@ -73,7 +73,7 @@ export default function Dashboard({ totalTenants, activeTenants, recentTenants }
                     <div className="divide-y divide-slate-100">
                         {recentTenants.length === 0 ? (
                             <div className="px-6 py-8 text-center text-slate-500">
-                                尚無租戶資料
+                                尚無客戶資料
                             </div>
                         ) : (
                             recentTenants.map((tenant) => (
@@ -87,8 +87,8 @@ export default function Dashboard({ totalTenants, activeTenants, recentTenants }
                                     <div className="flex items-center gap-3">
                                         <span
                                             className={`px-2 py-1 rounded-full text-xs font-medium ${tenant.is_active
-                                                    ? "bg-green-100 text-green-700"
-                                                    : "bg-slate-100 text-slate-600"
+                                                ? "bg-green-100 text-green-700"
+                                                : "bg-slate-100 text-slate-600"
                                                 }`}
                                         >
                                             {tenant.is_active ? "啟用" : "停用"}
diff --git a/resources/js/Pages/Landlord/Tenant/Create.tsx b/resources/js/Pages/Landlord/Tenant/Create.tsx
index 1e47b47..75a2778 100644
--- a/resources/js/Pages/Landlord/Tenant/Create.tsx
+++ b/resources/js/Pages/Landlord/Tenant/Create.tsx
@@ -16,17 +16,17 @@ export default function TenantCreate() {
     };
 
     return (
-        <LandlordLayout title="新增租戶">
+        <LandlordLayout title="新增客戶">
             <div className="max-w-2xl">
                 <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-slate-900">新增租戶</h1>
-                    <p className="text-slate-500 mt-1">建立一個新的租戶帳號</p>
+                    <h1 className="text-2xl font-bold text-slate-900">新增客戶</h1>
+                    <p className="text-slate-500 mt-1">建立一個新的客戶帳號</p>
                 </div>
 
                 <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-slate-200 p-6 space-y-6">
                     <div>
                         <label className="block text-sm font-medium text-slate-700 mb-2">
-                            租戶 ID <span className="text-red-500">*</span>
+                            客戶 ID <span className="text-red-500">*</span>
                         </label>
                         <input
                             type="text"
@@ -41,7 +41,7 @@ export default function TenantCreate() {
 
                     <div>
                         <label className="block text-sm font-medium text-slate-700 mb-2">
-                            租戶名稱 <span className="text-red-500">*</span>
+                            客戶名稱 <span className="text-red-500">*</span>
                         </label>
                         <input
                             type="text"
@@ -88,7 +88,7 @@ export default function TenantCreate() {
                             disabled={processing}
                             className="bg-primary-main hover:bg-primary-dark text-white px-6 py-2 rounded-lg disabled:opacity-50 transition-colors"
                         >
-                            {processing ? "處理中..." : "建立租戶"}
+                            {processing ? "處理中..." : "建立客戶"}
                         </button>
                         <Link
                             href="/landlord/tenants"
diff --git a/resources/js/Pages/Landlord/Tenant/Edit.tsx b/resources/js/Pages/Landlord/Tenant/Edit.tsx
index 87d7675..92eb2e0 100644
--- a/resources/js/Pages/Landlord/Tenant/Edit.tsx
+++ b/resources/js/Pages/Landlord/Tenant/Edit.tsx
@@ -26,17 +26,17 @@ export default function TenantEdit({ tenant }: Props) {
     };
 
     return (
-        <LandlordLayout title="編輯租戶">
+        <LandlordLayout title="編輯客戶">
             <div className="max-w-2xl">
                 <div className="mb-6">
-                    <h1 className="text-2xl font-bold text-slate-900">編輯租戶</h1>
-                    <p className="text-slate-500 mt-1">修改租戶 {tenant.id} 的資訊</p>
+                    <h1 className="text-2xl font-bold text-slate-900">編輯客戶</h1>
+                    <p className="text-slate-500 mt-1">修改客戶 {tenant.id} 的資訊</p>
                 </div>
 
                 <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-slate-200 p-6 space-y-6">
                     <div>
                         <label className="block text-sm font-medium text-slate-700 mb-2">
-                            租戶 ID
+                            客戶 ID
                         </label>
                         <input
                             type="text"
@@ -44,12 +44,12 @@ export default function TenantEdit({ tenant }: Props) {
                             disabled
                             className="w-full px-4 py-2 border border-slate-200 rounded-lg bg-slate-50 text-slate-500"
                         />
-                        <p className="mt-1 text-sm text-slate-500">租戶 ID 無法修改</p>
+                        <p className="mt-1 text-sm text-slate-500">客戶 ID 無法修改</p>
                     </div>
 
                     <div>
                         <label className="block text-sm font-medium text-slate-700 mb-2">
-                            租戶名稱 <span className="text-red-500">*</span>
+                            客戶名稱 <span className="text-red-500">*</span>
                         </label>
                         <input
                             type="text"
@@ -81,7 +81,7 @@ export default function TenantEdit({ tenant }: Props) {
                                 onChange={(e) => setData("is_active", e.target.checked)}
                                 className="w-4 h-4 rounded border-slate-300 text-primary-main focus:ring-primary-main"
                             />
-                            <span className="text-sm font-medium text-slate-700">啟用此租戶</span>
+                            <span className="text-sm font-medium text-slate-700">啟用此客戶</span>
                         </label>
                     </div>
 
diff --git a/resources/js/Pages/Landlord/Tenant/Index.tsx b/resources/js/Pages/Landlord/Tenant/Index.tsx
index 9776265..1d6d064 100644
--- a/resources/js/Pages/Landlord/Tenant/Index.tsx
+++ b/resources/js/Pages/Landlord/Tenant/Index.tsx
@@ -37,20 +37,20 @@ export default function TenantIndex({ tenants }: Props) {
     };
 
     return (
-        <LandlordLayout title="租戶管理">
+        <LandlordLayout title="客戶管理">
             <div className="space-y-6">
                 {/* Header */}
                 <div className="flex items-center justify-between">
                     <div>
-                        <h1 className="text-2xl font-bold text-slate-900">租戶管理</h1>
-                        <p className="text-slate-500 mt-1">管理系統中的所有租戶</p>
+                        <h1 className="text-2xl font-bold text-slate-900">客戶管理</h1>
+                        <p className="text-slate-500 mt-1">管理系統中的所有客戶</p>
                     </div>
                     <Link
                         href="/landlord/tenants/create"
                         className="bg-primary-main hover:bg-primary-dark text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
                     >
                         <Plus className="w-4 h-4" />
-                        新增租戶
+                        新增客戶
                     </Link>
                 </div>
 
@@ -83,7 +83,7 @@ export default function TenantIndex({ tenants }: Props) {
                             {tenants.length === 0 ? (
                                 <tr>
                                     <td colSpan={6} className="px-6 py-12 text-center text-slate-500">
-                                        尚無租戶資料，請點擊「新增租戶」建立第一個租戶
+                                        尚無客戶資料，請點擊「新增客戶」建立第一個客戶
                                     </td>
                                 </tr>
                             ) : (
@@ -120,8 +120,8 @@ export default function TenantIndex({ tenants }: Props) {
                                         <td className="px-6 py-4">
                                             <span
                                                 className={`px-2 py-1 rounded-full text-xs font-medium ${tenant.is_active
-                                                        ? "bg-green-100 text-green-700"
-                                                        : "bg-slate-100 text-slate-600"
+                                                    ? "bg-green-100 text-green-700"
+                                                    : "bg-slate-100 text-slate-600"
                                                     }`}
                                             >
                                                 {tenant.is_active ? "啟用" : "停用"}
@@ -167,9 +167,9 @@ export default function TenantIndex({ tenants }: Props) {
             <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
                 <AlertDialogContent>
                     <AlertDialogHeader>
-                        <AlertDialogTitle>確定要刪除這個租戶嗎？</AlertDialogTitle>
+                        <AlertDialogTitle>確定要刪除這個客戶嗎？</AlertDialogTitle>
                         <AlertDialogDescription>
-                            刪除租戶將會同時刪除其資料庫和所有資料，此操作無法復原。
+                            刪除客戶將會同時刪除其資料庫和所有資料，此操作無法復原。
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
diff --git a/resources/js/Pages/Landlord/Tenant/Show.tsx b/resources/js/Pages/Landlord/Tenant/Show.tsx
index aaf9c38..b2b39b1 100644
--- a/resources/js/Pages/Landlord/Tenant/Show.tsx
+++ b/resources/js/Pages/Landlord/Tenant/Show.tsx
@@ -45,7 +45,7 @@ export default function TenantShow({ tenant }: Props) {
     };
 
     return (
-        <LandlordLayout title="租戶詳情">
+        <LandlordLayout title="客戶詳情">
             <div className="max-w-3xl space-y-6">
                 {/* Back Link */}
                 <Link
@@ -60,7 +60,7 @@ export default function TenantShow({ tenant }: Props) {
                 <div className="flex items-start justify-between">
                     <div>
                         <h1 className="text-2xl font-bold text-slate-900">{tenant.name}</h1>
-                        <p className="text-slate-500 mt-1">租戶 ID: {tenant.id}</p>
+                        <p className="text-slate-500 mt-1">客戶 ID: {tenant.id}</p>
                     </div>
                     <Link
                         href={`/landlord/tenants/${tenant.id}/edit`}
@@ -79,8 +79,8 @@ export default function TenantShow({ tenant }: Props) {
                             <dd className="mt-1">
                                 <span
                                     className={`px-2 py-1 rounded-full text-xs font-medium ${tenant.is_active
-                                            ? "bg-green-100 text-green-700"
-                                            : "bg-slate-100 text-slate-600"
+                                        ? "bg-green-100 text-green-700"
+                                        : "bg-slate-100 text-slate-600"
                                         }`}
                                 >
                                     {tenant.is_active ? "啟用" : "停用"}