107 lines
5.0 KiB
TypeScript
107 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>
|
||
);
|
||
}
|