PageSourceSearch

https://go853c.manus.space/assets/LeaseManagement-BobvBnwq.js

js go853c.manus.space collected 2026-10-03 05:02:59 UTC 19,337 bytes, 6 lines download raw bytes

1import{q as ne,v as ce,t as m,r as h,g as l,j as e,at as le,aQ as I,aR as P,ag as i,ae as re,F as ie,V as oe,a9 as de}from"./index-DxpMJHht.js";import{I as g}from"./input-BM87a4su.js";import{L as J}from"./label-N5PEA7-o.js";import{T as me}from"./textarea-s21c5pGe.js";import{S as ge,a as xe,b as pe,c as ue,d as he}from"./select-DmrdHioO.js";import{D as K,a as Q,b as U,c as V,d as B}from"./useComposition-XW7wi1uU.js";import{T as Me,a as Le,b as je}from"./tabs-Zc2A4MFN.js";import{D as Ne}from"./dollar-sign-ByTX__yH.js";import{C as be}from"./calendar-4hOYHRNL.js";import{P as fe}from"./pencil-DATbeRuH.js";import{T as ve}from"./trash-2-BXORPUbj.js";import"./index-DpvxDjfc.js";import"./index-B3jfGoxH.js";import"./index-Dd2B6ZeX.js";import"./usePersistFn-D0m5YWYz.js";import"./index-BrCzSc1v.js";/**
2 * @license lucide-react v0.453.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const ye=ne("UserRound",[["circle",{cx:"12",cy:"8",r:"5",key:"1hypcn"}],["path",{d:"M20 21a8 8 0 0 0-16 0",key:"rfgkzh"}]]),F={propertyId:"",tenantName:"",tenantPhone:"",monthlyRent:"",depositMonths:"2",depositAmount:"",leaseStartAt:"",leaseEndAt:"",commissionRate:"",commissionAmount:"",notes:""},X={active:{label:"生效中",className:"bg-emerald-100 text-emerald-700"},expiring:{label:"30 天內到期",className:"bg-amber-100 text-amber-700"},expired:{label:"已到期",className:"bg-rose-100 text-rose-700"},terminated:{label:"已提前終止",className:"bg-slate-100 text-slate-600"}};function Y(s){return s?new Date(s).toISOString().slice(0,10):""}function _(s){return new Date(`${s}T00:00:00+08:00`).getTime()}function S(s){return s==null||s===""?"—":`HK$${Number(s).toLocaleString("zh-HK",{maximumFractionDigits:2})}`}function G(s){return s?new Date(s).toLocaleDateString("zh-HK",{year:"numeric",month:"2-digit",day:"2-digit"}):"—"}function Se(s){return s?Math.ceil((s-Date.now())/864e5):null}function E(s){return[s.propertyName||s.title,s.block&&`${s.block}座`,s.floor&&`${s.floor}樓`,s.unit&&`${s.unit}室`].filter(Boolean).join(" ")}function Ke(){const{user:s}=ce(),M=m.useUtils(),[j,W]=h.useState("all"),[Z,T]=h.useState(1),[t,N]=h.useState(F),[d,C]=h.useState(null),[D,A]=h.useState(!1),[w,b]=h.useState(null),L=m.leaseContracts.stats.useQuery(void 0,{enabled:!!s}),R=m.leaseContracts.list.useQuery({status:j,page:Z,pageSize:20},{enabled:!!s}),ee=m.leaseContracts.manageableProperties.useQuery(void 0,{enabled:!!s&&D}),f=async()=>{await Promise.all([M.leaseContracts.list.invalidate(),M.leaseContracts.stats.invalidate(),M.leaseContracts.manageableProperties.invalidate()])},$=m.leaseContracts.create.useMutation({onSuccess:async()=>{await f(),y(),l.success("租約已建立")},onError:a=>l.error(a.message)}),k=m.leaseContracts.update.useMutation({onSuccess:async()=>{await f(),y(),l.success("租約已更新")},onError:a=>l.error(a.message)}),z=m.leaseContracts.terminate.useMutation({onSuccess:async()=>{await f(),l.success("租約已標記為提前終止")},onError:a=>l.error(a.message)}),O=m.leaseContracts.delete.useMutation({onSuccess:async()=>{await f(),b(null),l.success("租約記錄已刪除")},onError:a=>l.error(a.message)}),H=R.data?.items??[],v=ee.data??[],q=$.isPending||k.isPending;h.useMemo(()=>v.find(a=>String(a.id)===t.propertyId),[v,t.propertyId]);function y(){A(!1),C(null),N(F)}function n(a,c){N(r=>{const x={...r,[a]:c};if(a==="monthlyRent"||a==="depositMonths"){const p=Number(x.monthlyRent),u=Number(x.depositMonths);Number.isFinite(p)&&p>0&&Number.isFinite(u)&&u>=0&&(x.depositAmount=String(p*u))}if(a==="monthlyRent"||a==="commissionRate"){const p=Number(x.monthlyRent),u=Number(x.commissionRate);Number.isFinite(p)&&p>0&&Number.isFinite(u)&&u>=0&&(x.commissionAmount=String(Number((p*u/100).toFixed(2))))}return x})}function ae(){C(null),N(F),A(!0)}function se(a){C(a),N({propertyId:String(a.propertyId),tenantName:a.tenantName??"",tenantPhone:a.tenantPhone??"",monthlyRent:String(a.monthlyRent??""),depositMonths:String(a.depositMonths??2),depositAmount:a.depositAmount??"",leaseStartAt:Y(a.leaseStartAt),leaseEndAt:Y(a.leaseEndAt),commissionRate:a.commissionRate??"",commissionAmount:a.commissionAmount??"",notes:a.notes??""}),A(!0)}function te(){if(!t.tenantName.trim()||!t.monthlyRent||!t.leaseStartAt||!t.leaseEndAt||!d&&!t.propertyId){l.error("請填妥盤源、租客姓名、月租及租約起迄日");return}const a=_(t.leaseStartAt),c=_(t.leaseEndAt);if(!Number.isFinite(a)||!Number.isFinite(c)||c<=a){l.error("結束日期必須晚於開始日期");return}const r={tenantName:t.tenantName.trim(),tenantPhone:t.tenantPhone.trim()||void 0,monthlyRent:t.monthlyRent.trim(),depositMonths:Number(t.depositMonths||
60),depositAmount:t.depositAmount.trim()||void 0,leaseStartAt:a,leaseEndAt:c,commissionRate:t.commissionRate.trim()||void 0,commissionAmount:t.commissionAmount.trim()||void 0,notes:t.notes.trim()||void 0};d?k.mutate({id:d.id,...r}):$.mutate({propertyId:Number(t.propertyId),...r})}return e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:137",className:"mx-auto w-full max-w-5xl space-y-5 pb-10",children:[e.jsx("section",{"data-loc":"client/src/pages/LeaseManagement.tsx:138",className:"rounded-2xl border border-amber-100 bg-amber-50/60 p-4",children:e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:139",className:"flex gap-3",children:[e.jsx(le,{"data-loc":"client/src/pages/LeaseManagement.tsx:139",className:"mt-0.5 h-5 w-5 shrink-0 text-amber-600"}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:140",children:[e.jsx("h1",{"data-loc":"client/src/pages/LeaseManagement.tsx:140",className:"font-semibold text-amber-950",children:"租約管理"}),e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:140",className:"mt-1 text-sm leading-6 text-amber-800",children:"只供本人管理已關聯的出租/連租約盤源,不對外公開。請勿在備註輸入租客身份證或護照資料。"})]})]})}),e.jsx("section",{"data-loc":"client/src/pages/LeaseManagement.tsx:144",className:"grid grid-cols-2 gap-3 md:grid-cols-5",children:[["全部租約",L.data?.total??0,"text-slate-800"],["生效中",L.data?.active??0,"text-emerald-600"],["30 天內到期",L.data?.expiring??0,"text-amber-600"],["已到期",L.data?.expired??0,"text-rose-600"],["有效月租",S(L.data?.totalMonthlyRent),"text-orange-600"]].map(([a,c,r])=>e.jsx(I,{"data-loc":"client/src/pages/LeaseManagement.tsx:149",className:"border-slate-100 shadow-sm",children:e.jsxs(P,{"data-loc":"client/src/pages/LeaseManagement.tsx:149",className:"p-4",children:[e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:149",className:"text-xs text-muted-foreground",children:a}),e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:149",className:`mt-1 text-lg font-bold ${r}`,children:c})]})},String(a)))}),e.jsxs("section",{"data-loc":"client/src/pages/LeaseManagement.tsx:152",className:"flex flex-col justify-between gap-3 sm:flex-row sm:items-center",children:[e.jsx(Me,{"data-loc":"client/src/pages/LeaseManagement.tsx:153",value:j,onValueChange:a=>{W(a),T(1)},children:e.jsx(Le,{"data-loc":"client/src/pages/LeaseManagement.tsx:153",className:"h-auto flex-wrap justify-start gap-1 bg-transparent p-0",children:["all","active","expiring","expired","terminated"].map(a=>e.jsx(je,{"data-loc":"client/src/pages/LeaseManagement.tsx:154",value:a,className:"rounded-full border px-3 py-1.5 text-xs data-[state=active]:border-orange-500 data-[state=active]:bg-orange-500 data-[state=active]:text-white",children:a==="all"?"全部":X[a].label},a))})}),e.jsxs(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:156",onClick:ae,className:"gap-1.5 bg-orange-500 hover:bg-orange-600",children:[e.jsx(re,{"data-loc":"client/src/pages/LeaseManagement.tsx:156",className:"h-4 w-4"}),"新增租約"]})]}),R.isLoading?e.jsx("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"space-y-3",children:[1,2,3].map(a=>e.jsx("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"h-32 animate-pulse rounded-2xl bg-slate-100"},a))}):H.length===0?e.jsx(I,{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"border-dashed",children:e.jsxs(P,{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"flex flex-col items-center py-16 text-center",children:[e.jsx(ie,{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"h-11 w-11 text-slate-300"}),e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"mt-3 font-medium",children:"暫無租約記錄"}),e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"mt-1 text-sm text-muted-foreground",children:"由「新增租約」選擇本人可管理的出租盤源開始。"})]})}):e.jsx("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:159",className:"space-y-3",children:H.map(a=>{const c=X[a.status],r=Se(a.leaseEndAt);return e.jsx(I,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"border-slate-100 shadow-sm",children:e.jsx(P,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"p-4 sm:p-5",children:e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex flex-col justify-between gap-4 md:flex-row",children:[e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"min-w-0 flex-1",children:[e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex flex-wrap items-center gap-2",children:[e.jsx("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:`rounded-full px-2.5 py-1 text-xs font-semibold ${c.className}`,children:c.label}),a.status==="expiring"&&r!==null&&e.jsxs("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"text-xs font-semibold text-amber-600",children:["還有 ",r," 天到期"]})]}),e.jsx("h2",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"mt-3 truncate font-semibold",children:E(a)||a.propertyTitle||`盤源 #${a.propertyId}`}),a.propertyStreet&&e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"mt-1 truncate text-sm text-muted-foreground",children:a.propertyStreet}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"mt-4 grid gap-x-5 gap-y-2 text-sm text-slate-600 sm:grid-cols-2 lg:grid-cols-4",children:[e.jsxs("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex items-center gap-1.5",children:[e.jsx(ye,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),a.tenantName]}),e.jsxs("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex items-center gap-1.5",children:[e.jsx(oe,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),a.tenantPhone||"未填電話"]}),e.jsxs("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex items-center gap-1.5 font-semibold text-orange-600",children:[e.jsx(Ne,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),S(a.monthlyRent),"/月"]}),e.jsxs("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex items-center gap-1.5",children:[e.jsx(be,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),G(a.leaseStartAt)," 至 ",G(a.leaseEndAt)]})]}),a.depositAmount&&e.jsxs("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"mt-3 text-sm text-muted-foreground",children:["按金 ",S(a.depositAmount),"(",a.depositMonths??0," 個月)",a.commissionAmount?` 佣金 ${S(a.commissionAmount)}`:""]}),a.notes&&e.jsxs("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"mt-2 line-clamp-2 text-sm text-muted-foreground",children:["備註:",a.notes]})]}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"flex shrink-0 flex-row gap-2 md:flex-col",children:[e.jsxs(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",variant:"outline",size:"sm",onClick:()=>se(a),className:"gap-1",children:[e.jsx(fe,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),"編輯"]}),["active","expiring"].includes(a.status)&&e.jsxs(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",variant:"outline",size:"sm",onClick:()=>z.mutate({id:a.id}),disabled:z.isPending,className:"gap-1 text-amber-700",children:[e.jsx(de,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),"終止"]}),e.jsxs(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",variant:"outline",size:"sm",onClick:()=>b(a.id),className:"gap-1 text-rose-600",children:[e.jsx(ve,{"data-loc":"client/src/pages/LeaseManagement.tsx:160",className:"h-3.5 w-3.5"}),"刪除"]})]})]})})},a.id)})}),R.data?.hasMore&&e.jsx("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:162",className:"flex justify-center",children:e.jsx(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:162",variant:"outline",onClick:()=>T(a=>
6a+1),children:"載入更多"})}),e.jsx(K,{"data-loc":"client/src/pages/LeaseManagement.tsx:164",open:D,onOpenChange:a=>{a||y()},children:e.jsxs(Q,{"data-loc":"client/src/pages/LeaseManagement.tsx:164",className:"max-h-[92vh] max-w-xl overflow-y-auto",children:[e.jsx(U,{"data-loc":"client/src/pages/LeaseManagement.tsx:164",children:e.jsx(V,{"data-loc":"client/src/pages/LeaseManagement.tsx:164",children:d?"編輯租約":"新增租約"})}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:164",className:"space-y-4 py-2",children:[!d&&e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:165",className:"space-y-1.5",children:[e.jsxs(J,{"data-loc":"client/src/pages/LeaseManagement.tsx:165",children:["關聯出租盤源 ",e.jsx("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:165",className:"text-rose-500",children:"*"})]}),e.jsxs(ge,{"data-loc":"client/src/pages/LeaseManagement.tsx:165",value:t.propertyId,onValueChange:a=>n("propertyId",a),children:[e.jsx(xe,{"data-loc":"client/src/pages/LeaseManagement.tsx:165",children:e.jsx(pe,{"data-loc":"client/src/pages/LeaseManagement.tsx:165",placeholder:"選擇本人可管理的出租/連租約盤源"})}),e.jsx(ue,{"data-loc":"client/src/pages/LeaseManagement.tsx:165",children:v.map(a=>e.jsx(he,{"data-loc":"client/src/pages/LeaseManagement.tsx:165",value:String(a.id),children:E(a)||`盤源 #${a.id}`},a.id))})]}),v.length===0&&e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:165",className:"text-xs text-amber-700",children:"目前沒有可關聯的出租/連租約盤源。"})]}),d&&e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:166",className:"rounded-lg bg-slate-50 p-3 text-sm text-slate-600",children:["關聯盤源:",E(d)||`盤源 #${d.propertyId}`]}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:167",className:"grid gap-3 sm:grid-cols-2",children:[e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:167",label:"租客姓名",required:!0,children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:167",value:t.tenantName,onChange:a=>n("tenantName",a.target.value)})}),e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:167",label:"聯絡電話",children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:167",value:t.tenantPhone,onChange:a=>n("tenantPhone",a.target.value),inputMode:"tel"})})]}),e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:168",className:"rounded-lg bg-blue-50 px-3 py-2 text-xs leading-5 text-blue-700",children:"不收集身份證/護照號碼;如有法律文件,請依公司既有合規流程另行保管。"}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:169",className:"grid gap-3 sm:grid-cols-2",children:[e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",label:"月租(HK$)",required:!0,children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",value:t.monthlyRent,onChange:a=>n("monthlyRent",a.target.value),inputMode:"decimal"})}),e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",label:"按金(月數)",children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",value:t.depositMonths,onChange:a=>n("depositMonths",a.target.value),inputMode:"numeric"})}),e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",label:"按金(HK$)",children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",value:t.depositAmount,onChange:a=>n("depositAmount",a.target.value),inputMode:"decimal"})}),e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",label:"佣金比率(%)",children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:169",value:t.commissionRate,onChange:a=>n("commissionRate",a.target.value),inputMode:"decimal"})})]}),e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:170",className:"grid gap-3 sm:grid-cols-2",children:[e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:170",label:"開始日期",required:!0,children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:170",type:"date",value:t.leaseStartAt,onChange:a=>n("leaseStartAt",a.target.value)})}),e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:170",label:"結束日期",required:!0,children:e.jsx(g,{"data-loc":"client/src/pages/LeaseManagement.tsx:170",type:"date",value:t.leaseEndAt,onChange:a=>n("leaseEndAt",a.target.value)})})]}),e.jsx(o,{"data-loc":"client/src/pages/LeaseManagement.tsx:171",label:"內
6部備註",children:e.jsx(me,{"data-loc":"client/src/pages/LeaseManagement.tsx:171",value:t.notes,onChange:a=>n("notes",a.target.value),placeholder:"例如:業主要求提前三個月跟進續租。"})})]}),e.jsxs(B,{"data-loc":"client/src/pages/LeaseManagement.tsx:172",children:[e.jsx(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:172",variant:"outline",onClick:y,children:"取消"}),e.jsx(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:172",onClick:te,disabled:q,className:"bg-orange-500 hover:bg-orange-600",children:q?"保存中…":"保存租約"})]})]})}),e.jsx(K,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",open:w!==null,onOpenChange:a=>{a||b(null)},children:e.jsxs(Q,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",className:"max-w-sm",children:[e.jsx(U,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",children:e.jsx(V,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",children:"刪除租約記錄?"})}),e.jsx("p",{"data-loc":"client/src/pages/LeaseManagement.tsx:173",className:"text-sm text-muted-foreground",children:"只應刪除錯誤建立的記錄;此操作不可復原。"}),e.jsxs(B,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",children:[e.jsx(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",variant:"outline",onClick:()=>b(null),children:"取消"}),e.jsx(i,{"data-loc":"client/src/pages/LeaseManagement.tsx:173",variant:"destructive",disabled:O.isPending,onClick:()=>w&&O.mutate({id:w}),children:"確認刪除"})]})]})})]})}function o({label:s,required:M,children:j}){return e.jsxs("div",{"data-loc":"client/src/pages/LeaseManagement.tsx:178",className:"space-y-1.5",children:[e.jsxs(J,{"data-loc":"client/src/pages/LeaseManagement.tsx:178",children:[s,M&&e.jsx("span",{"data-loc":"client/src/pages/LeaseManagement.tsx:178",className:"ml-1 text-rose-500",children:"*"})]}),j]})}export{Ke as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.