feat: 優化中央後台 UI (用語調整、移除連結) 與實作 RWD 支援
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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 ? "啟用" : "停用"}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 ? "啟用" : "停用"}
|
||||
|
||||
Reference in New Issue
Block a user