105 lines
5.0 KiB
TypeScript
105 lines
5.0 KiB
TypeScript
|
import LandlordLayout from "@/Layouts/LandlordLayout";
|
|||
|
|
import { useForm, Link } from "@inertiajs/react";
|
|||
|
|
import { FormEvent } from "react";
|
|||
|
|
|
|||
|
|
export default function TenantCreate() {
|
|||
|
|
const { data, setData, post, processing, errors } = useForm({
|
|||
|
|
id: "",
|
|||
|
|
name: "",
|
|||
|
|
email: "",
|
|||
|
|
domain: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handleSubmit = (e: FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
post(route("landlord.tenants.store"));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<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>
|
|||
|
|
</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>
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={data.id}
|
|||
|
|
onChange={(e) => setData("id", e.target.value.toLowerCase())}
|
|||
|
|
placeholder="例如：koori, alcohol"
|
|||
|
|
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
|||
|
|
/>
|
|||
|
|
<p className="mt-1 text-sm text-slate-500">只能使用英文、數字、底線</p>
|
|||
|
|
{errors.id && <p className="mt-1 text-sm text-red-500">{errors.id}</p>}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|||
|
|
租戶名稱 <span className="text-red-500">*</span>
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={data.name}
|
|||
|
|
onChange={(e) => setData("name", e.target.value)}
|
|||
|
|
placeholder="例如：小小冰室"
|
|||
|
|
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
|||
|
|
/>
|
|||
|
|
{errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|||
|
|
聯絡信箱
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="email"
|
|||
|
|
value={data.email}
|
|||
|
|
onChange={(e) => setData("email", e.target.value)}
|
|||
|
|
placeholder="admin@example.com"
|
|||
|
|
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
|||
|
|
/>
|
|||
|
|
{errors.email && <p className="mt-1 text-sm text-red-500">{errors.email}</p>}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|||
|
|
綁定域名
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={data.domain}
|
|||
|
|
onChange={(e) => setData("domain", e.target.value)}
|
|||
|
|
placeholder="例如：koori.erp.koori.tw"
|
|||
|
|
className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-main focus:border-primary-main"
|
|||
|
|
/>
|
|||
|
|
<p className="mt-1 text-sm text-slate-500">可之後再設定</p>
|
|||
|
|
{errors.domain && <p className="mt-1 text-sm text-red-500">{errors.domain}</p>}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-4 pt-4 border-t">
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={processing}
|
|||
|
|
className="bg-primary-main hover:bg-primary-dark text-white px-6 py-2 rounded-lg disabled:opacity-50 transition-colors"
|
|||
|
|
>
|
|||
|
|
{processing ? "處理中..." : "建立租戶"}
|
|||
|
|
</button>
|
|||
|
|
<Link
|
|||
|
|
href="/landlord/tenants"
|
|||
|
|
className="text-slate-600 hover:text-slate-900"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</LandlordLayout>
|
|||
|
|
);
|
|||
|
|
}
|