197 lines
8.9 KiB
TypeScript
197 lines
8.9 KiB
TypeScript
|
import LandlordLayout from "@/Layouts/LandlordLayout";
|
|||
|
|
import { Link, useForm } from "@inertiajs/react";
|
|||
|
|
import { Button } from "@/Components/ui/button";
|
|||
|
|
import { Input } from "@/Components/ui/input";
|
|||
|
|
import { Label } from "@/Components/ui/label";
|
|||
|
|
import { Card } from "@/Components/ui/card";
|
|||
|
|
import { ArrowLeft, LayoutDashboard } from "lucide-react";
|
|||
|
|
import { FormEventHandler, useState } from "react";
|
|||
|
|
import { toast } from "sonner";
|
|||
|
|
import { generateLightestColor } from "@/utils/colorUtils";
|
|||
|
|
|
|||
|
|
interface Tenant {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
branding?: {
|
|||
|
|
logo_path?: string;
|
|||
|
|
primary_color?: string;
|
|||
|
|
text_color?: string;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface BrandingProps {
|
|||
|
|
tenant: Tenant;
|
|||
|
|
logo_url?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Branding({ tenant, logo_url }: BrandingProps) {
|
|||
|
|
const { data, setData, post, processing, errors } = useForm({
|
|||
|
|
logo: null as File | null,
|
|||
|
|
primary_color: tenant.branding?.primary_color || '#01ab83',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [logoPreview, setLogoPreview] = useState<string | null>(logo_url || null);
|
|||
|
|
|
|||
|
|
const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const file = e.target.files?.[0];
|
|||
|
|
if (file) {
|
|||
|
|
setData('logo', file);
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onloadend = () => {
|
|||
|
|
setLogoPreview(reader.result as string);
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const submit: FormEventHandler = (e) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
post(route('landlord.tenants.branding.update', tenant.id), {
|
|||
|
|
onSuccess: () => {
|
|||
|
|
toast.success('樣式設定已更新');
|
|||
|
|
},
|
|||
|
|
onError: () => {
|
|||
|
|
toast.error('更新失敗，請檢查輸入');
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<LandlordLayout title="客戶樣式管理">
|
|||
|
|
<div className="space-y-6 p-6">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<Link href={route('landlord.tenants.show', tenant.id)}>
|
|||
|
|
<Button variant="outline" size="sm">
|
|||
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|||
|
|
返回
|
|||
|
|
</Button>
|
|||
|
|
</Link>
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-2xl font-bold text-slate-900">
|
|||
|
|
客戶樣式管理
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-sm text-slate-500 mt-1">
|
|||
|
|
{tenant.name}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Branding Form */}
|
|||
|
|
<Card className="p-6">
|
|||
|
|
<form onSubmit={submit} className="space-y-6">
|
|||
|
|
{/* Logo Upload */}
|
|||
|
|
<div>
|
|||
|
|
<Label htmlFor="logo" className="text-base font-semibold">
|
|||
|
|
客戶 Logo
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-slate-500 mb-3">
|
|||
|
|
上傳客戶專屬 Logo，建議尺寸 200×200 px，最大 2MB
|
|||
|
|
</p>
|
|||
|
|
<Input
|
|||
|
|
id="logo"
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={handleLogoChange}
|
|||
|
|
className="cursor-pointer"
|
|||
|
|
/>
|
|||
|
|
{errors.logo && (
|
|||
|
|
<p className="text-sm text-red-600 mt-1">{errors.logo}</p>
|
|||
|
|
)}
|
|||
|
|
{logoPreview && (
|
|||
|
|
<div className="mt-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
|
|||
|
|
<p className="text-sm text-slate-600 mb-2">預覽：</p>
|
|||
|
|
<img
|
|||
|
|
src={logoPreview}
|
|||
|
|
alt="Logo Preview"
|
|||
|
|
className="h-20 w-20 object-contain rounded-lg border border-slate-300"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Primary Color */}
|
|||
|
|
<div>
|
|||
|
|
<Label htmlFor="primary_color" className="text-base font-semibold">
|
|||
|
|
主色系
|
|||
|
|
</Label>
|
|||
|
|
<p className="text-sm text-slate-500 mb-3">
|
|||
|
|
設定客戶後台的主要品牌色（按鈕、連結等）
|
|||
|
|
</p>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Input
|
|||
|
|
id="primary_color"
|
|||
|
|
type="color"
|
|||
|
|
value={data.primary_color}
|
|||
|
|
onChange={(e) => setData('primary_color', e.target.value)}
|
|||
|
|
className="w-16 h-10 cursor-pointer"
|
|||
|
|
/>
|
|||
|
|
<Input
|
|||
|
|
type="text"
|
|||
|
|
value={data.primary_color}
|
|||
|
|
onChange={(e) => setData('primary_color', e.target.value)}
|
|||
|
|
pattern="^#[0-9A-Fa-f]{6}$"
|
|||
|
|
className="w-32"
|
|||
|
|
placeholder="#01ab83"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{errors.primary_color && (
|
|||
|
|
<p className="text-sm text-red-600 mt-1">{errors.primary_color}</p>
|
|||
|
|
)}
|
|||
|
|
{/* Preview */}
|
|||
|
|
<div className="mt-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
|
|||
|
|
<p className="text-sm text-slate-600 mb-3">預覽效果：</p>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
{/* 按鈕預覽 */}
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-2">按鈕</p>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
style={{ backgroundColor: data.primary_color }}
|
|||
|
|
className="text-white"
|
|||
|
|
>
|
|||
|
|
預覽按鈕
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
{/* 側邊欄選中狀態預覽 */}
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-slate-500 mb-2">側邊欄選中狀態</p>
|
|||
|
|
<div
|
|||
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: generateLightestColor(data.primary_color),
|
|||
|
|
color: data.primary_color
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<LayoutDashboard className="w-5 h-5" />
|
|||
|
|
<span className="font-medium">儀表板</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Submit Button */}
|
|||
|
|
<div className="flex justify-end gap-3 pt-4 border-t">
|
|||
|
|
<Link href={route('landlord.tenants.show', tenant.id)}>
|
|||
|
|
<Button type="button" variant="outline">
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
</Link>
|
|||
|
|
<Button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={processing}
|
|||
|
|
className="bg-primary-main hover:bg-primary-dark"
|
|||
|
|
>
|
|||
|
|
{processing ? '儲存中...' : '儲存樣式設定'}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</LandlordLayout>
|
|||
|
|
);
|
|||
|
|
}
|