https://pdaus.org/assets/CardDesignStudio-RnczR4Yg.js

1import{c as X,b as Z,r as i,j as e,d as D,B as k,am as L,as as J,at as U,au as M,av as K}from"./index-CDfdkqy7.js";import{C as V}from"./circle-check-DsCtDhMg.js";import{C as ee}from"./credit-card-XpwOMpZ5.js";import{I as ae}from"./image-plus-B_ABZWoP.js";import{R as te}from"./rotate-ccw-q4t7nCTy.js";import{S as se}from"./save-BCMEX4eZ.js";import{o as le}from"./eventImageProcessor-DEdRM3SO.js";import{a as ne,g as S,C as $,l as re,s as ce}from"./cardTemplates-CN8wgmmw.js";/**
2 * @license lucide-react v0.469.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 B=X("Cloud",[["path",{d:"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z",key:"p7xjir"}]]),l=({label:d,children:u,hint:b=""})=>e.jsxs("label",{className:"block",children:[e.jsx("span",{className:"mb-1.5 block text-sm font-semibold text-slate-700",children:d}),u,b&&e.jsx("span",{className:"mt-1 block text-xs text-slate-500",children:b})]}),o="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100",w="min-h-24 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100",oe=d=>String(d||"").split(`
7`).map(u=>u.trim()).slice(0,5),fe=()=>{const{toast:d}=Z(),[u,b]=i.useState(ne),[m,I]=i.useState("member"),[t,g]=i.useState(()=>S("member")),[A,O]=i.useState({front:"",back:""}),[G,W]=i.useState(!0),[C,F]=i.useState(!1),[R,E]=i.useState(""),[j,f]=i.useState(!1);i.useEffect(()=>{let a=!0;return(async()=>{try{if(await L.authStateReady(),!L.currentUser)throw new Error("Sign in with the Super Administrator account.");const r=await re();if(!a)return;b(r),g(r.member)}catch(r){d({title:"Templates Not Loaded",description:r.message,variant:"destructive"})}finally{a&&W(!1)}})(),()=>{a=!1}},[d]),i.useEffect(()=>{let a=!0;const s=[];return(async()=>{const c={front:"",back:""};for(const x of["front","back"]){const p=t?.[`${x}_background_path`];if(p)try{const z=await J(U(M,p)),N=URL.createObjectURL(z);s.push(N),c[x]=N}catch{c[x]=""}}a&&O(c)})(),()=>{a=!1,s.forEach(c=>URL.revokeObjectURL(c))}},[t?.front_background_path,t?.back_background_path]);const _=i.useMemo(()=>$.find(a=>a.id===m)||$[0],[m]),h=t.default_language==="bilingual",H=`${_.prefix.split(" ")[0].replaceAll("/","")}260912001`,Y=a=>{const s=a.target.value;I(s),g(u[s]||S(s)),f(!1)},n=(a,s)=>{g(r=>({...r,[a]:s})),f(!0)},v=(a,s,r)=>{const c=oe(r);g(x=>{const p=x[a]||[],z=Math.max(c.length,p.length),N=Array.from({length:z},(ie,y)=>({en:s==="en"?c[y]||"":p[y]?.en||"",zh:s==="zh"?c[y]||"":p[y]?.zh||""}));return{...x,[a]:N}}),f(!0)},q=async(a,s)=>{const r=a.target.files?.[0];if(a.target.value="",!!r){E(s);try{const c=await le(r,{aspectRatio:1.585772508336421,maxWidth:1400,maxHeight:884,maxBytes:1536e3,focusX:.5,focusY:.5}),x=`card-template-assets/${m}/${s}-${Date.now()}.${c.extension}`;await K(U(M,x),c.blob,{contentType:c.contentType,cacheControl:"private,max-age=3600",customMetadata:{cardType:m,side:s}}),n(`${s}_background_path`,x),d({title:`${s==="front"?"Front":"Back"} Background Uploaded`,description:"Save the template to publish this background."})}catch(c){d({title:"Background Not Uploaded",description:c.message,variant:"destructive"})}finally{E("")}}},T=async()=>{F(!0);try{const a=await ce(m,t);b(s=>({...s,[m]:a})),g(a),f(!1),d({title:"Saved to PDA Cloud",description:`${a.display_label} template revision ${a.revision} is now used by card printers.`})}catch(a){d({title:"Template Not Saved",description:a.message,variant:"destructive"})}finally{F(!1)}},Q=()=>{g(S(m)),f(!0)},P=a=>({backgroundColor:t[`${a}_background_color`],backgroundImage:A[a]?`linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),url(${A[a]})`:void 0,backgroundPosition:"center",backgroundSize:"cover"});return G?e.jsxs("div",{className:"flex min-h-[520px] items-center justify-center text-slate-500",children:[e.jsx(D,{className:"mr-2 h-5 w-5 animate-spin"})," Loading cloud card templates..."]}):e.jsxs("div",{className:"space-y-6",children:[e.jsx("header",{className:"rounded-2xl bg-gradient-to-r from-[#001F3F] to-[#123E70] p-6 text-white shadow-lg",children:e.jsxs("div",{className:"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between",children:[e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("div",{className:"rounded-xl bg-white/10 p-3",children:e.jsx(ee,{className:"h-7 w-7"})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-black",children:"Card Design & Production"}),e.jsx("p",{className:"mt-1 max-w-2xl text-sm text-blue-100",children:"Design once in Super Admin, save it to the PDA cloud, and every approved card printer will use the current template automatically."})]})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("span",{className:`inline-flex items-center rounded-full px-3 py-2 text-xs font-bold ${j?"bg-amber-400 text-amber-950":"bg-emerald-400 text-emerald-950"}`,children:j?"Unsaved changes":e.jsxs(e.Fragment,{children:[e.jsx(V,{className:"mr-1.5 h-4 w-4"})," Cloud saved · Revision ",t.revision||0]})}),e.jsxs(k,{onClick:T,disabled:C||!j,className:"bg-[#C41E3A] text-white hover:bg-[#A81730]",children:[C?e.jsx(D,{className:"mr-2 h-4 w-4 animate-spin"}):e.jsx(B,{className:"mr-2 h-4 w-4"})," Save to Cloud"]})]})]})}),e.jsxs("section",{className:"grid gap-6 xl:grid-cols-[minmax(0,1fr)_520px]",children:[e.jsxs("div",{className:"space-y-5",children:[e.jsx("div",{className:"rounded-2xl border bg-white p-5 shadow-sm",children:e.jsxs("div",{className:"grid gap-4 md:grid-cols-2",children:[e.jsx(l,{label:"Card type / 卡片类型",hint:`Number prefix is locked to ${_.prefix}; changing the design never changes account permissions.`,children:e.jsx("select",{value:m,onChange:Y,className:o,children:$.map(a=>e.jsxs("option",{value:a.id,children:[a.label," · ",a.prefix]},a.id))})}),e.jsx(l,{label:"Printed card label",children:e.jsx("input",{className:o,value:t.display_label,maxLength:40,onChange:a=>n("display_label",a.target.value.toUpperCase())})}),e.jsx(l,{label:"Organization name",children:e.jsx("input",{className:o,value:t.organization_name,maxLength:80,onChange:a=>n("organization_name",a.target.value)})}),e.jsx(l,{label:"Website",children:e.jsx("input",{className:o,value:t.website,maxLength:80,onChange:a=>n("website",a.target.value)})}),e.jsx(l,{label:"Default back language",children:e.jsxs("select",{className:o,value:t.default_language,onChange:a=>n("default_language",a.target.value),children:[e.jsx("option",{value:"english",children:"English only"}),e.jsx("option",{value:"bilingual",children:"English + 中文"})]})}),e.jsxs(l,{label:"Front text size / 正面字体",children:[e.jsx("input",{type:"range",min:"0.85",max:"1.35",step:"0.05",className:"mt-3 w-full",value:t.front_font_scale,onChange:a=>n("front_font_scale",Number(a.target.value))}),e.jsxs("span",{className:"text-xs text-slate-500",children:[Math.round(t.front_font_scale*100),"%"]})]}),e.jsxs(l,{label:"Back text size / 背面字体",children:[e.jsx("input",{type:"range",min:"0.8",max:"1.35",step:"0.05",className:"mt-3 w-full",value:t.back_font_scale,onChange:a=>n("back_font_scale",Number(a.target.value))}),e.jsxs("span",{className:"text-xs text-slate-500",children:[Math.round(t.back_font_scale*100),"%"]})]})]})}),e.jsxs("div",{className:"rounded-2xl border bg-white p-5 shadow-sm",children:[e.jsx("h2",{className:"mb-4 text-lg font-black text-[#001F3F]",children:"Colors, PDA watermark and background images"}),e.jsx("div",{className:"grid gap-4 md:grid-cols-3",children:[["accent_color","Identity color"],["front_background_color","Front background"],["back_background_color","Back background"]].map(([a,s])=>e.jsx(l,{label:s,children:e.jsxs("div",{className:"flex gap-2",children:[e.jsx("input",{type:"color",className:"h-10 w-14 roun

7ded border",value:t[a],onChange:r=>n(a,r.target.value.toUpperCase())}),e.jsx("input",{className:o,value:t[a],maxLength:7,onChange:r=>n(a,r.target.value.toUpperCase())})]})},a))}),e.jsx("div",{className:"mt-4 grid gap-4 md:grid-cols-2",children:["front","back"].map(a=>e.jsxs("div",{className:"rounded-xl border border-dashed p-4",children:[e.jsxs("p",{className:"font-bold capitalize text-slate-700",children:[a," background image"]}),e.jsx("p",{className:"mt-1 truncate text-xs text-slate-500",children:t[`${a}_background_path`]||"No custom image; PDA design is used."}),e.jsxs("div",{className:"mt-3 flex gap-2",children:[e.jsxs("label",{className:"inline-flex h-9 cursor-pointer items-center rounded-md bg-slate-100 px-3 text-sm font-semibold hover:bg-slate-200",children:[e.jsx(ae,{className:"mr-2 h-4 w-4"}),R===a?"Uploading...":"Upload image",e.jsx("input",{type:"file",accept:"image/jpeg,image/png,image/webp",className:"sr-only",disabled:!!R,onChange:s=>q(s,a)})]}),t[`${a}_background_path`]&&e.jsx(k,{type:"button",size:"sm",variant:"outline",onClick:()=>n(`${a}_background_path`,""),children:"Use PDA background"})]})]},a))}),e.jsxs("div",{className:"mt-4 grid gap-4 md:grid-cols-2",children:[e.jsxs("label",{className:"flex items-center gap-2 text-sm font-semibold",children:[e.jsx("input",{type:"checkbox",checked:t.watermark_enabled,onChange:a=>n("watermark_enabled",a.target.checked)})," Show PDA watermark"]}),e.jsx(l,{label:"Watermark strength",children:e.jsx("input",{type:"range",min:"0",max:"0.16",step:"0.005",className:"w-full",value:t.watermark_opacity,onChange:a=>n("watermark_opacity",Number(a.target.value))})})]})]}),e.jsxs("div",{className:"rounded-2xl border bg-white p-5 shadow-sm",children:[e.jsx("h2",{className:"mb-4 text-lg font-black text-[#001F3F]",children:"Card-back content"}),e.jsxs("div",{className:"grid gap-4 md:grid-cols-2",children:[e.jsx(l,{label:"Main heading — English",children:e.jsx("input",{className:o,value:t.back_heading_en,onChange:a=>n("back_heading_en",a.target.value)})}),e.jsx(l,{label:"Main heading — 中文",children:e.jsx("input",{className:o,value:t.back_heading_zh,onChange:a=>n("back_heading_zh",a.target.value)})}),e.jsx(l,{label:"Rights — English",hint:"One item per line; maximum five.",children:e.jsx("textarea",{className:w,value:t.rights.map(a=>a.en).join(`
8`),onChange:a=>v("rights","en",a.target.value)})}),e.jsx(l,{label:"Rights — 中文",hint:"每行一项，与英文逐行对应。",children:e.jsx("textarea",{className:w,value:t.rights.map(a=>a.zh).join(`
9`),onChange:a=>v("rights","zh",a.target.value)})}),e.jsx(l,{label:"Response heading — English",children:e.jsx("input",{className:o,value:t.statement_heading_en,onChange:a=>n("statement_heading_en",a.target.value)})}),e.jsx(l,{label:"Response heading — 中文",children:e.jsx("input",{className:o,value:t.statement_heading_zh,onChange:a=>n("statement_heading_zh",a.target.value)})}),e.jsx(l,{label:"Responses — English",hint:"One item per line; maximum five.",children:e.jsx("textarea",{className:w,value:t.statements.map(a=>a.en).join(`
10`),onChange:a=>v("statements","en",a.target.value)})}),e.jsx(l,{label:"Responses — 中文",children:e.jsx("textarea",{className:w,value:t.statements.map(a=>a.zh).join(`
11`),onChange:a=>v("statements","zh",a.target.value)})}),e.jsx(l,{label:"Reminder — English",children:e.jsx("input",{className:o,value:t.calm_body_en,onChange:a=>n("calm_body_en",a.target.value)})}),e.jsx(l,{label:"Reminder — 中文",children:e.jsx("input",{className:o,value:t.calm_body_zh,onChange:a=>n("calm_body_zh",a.target.value)})}),e.jsx(l,{label:"Emergency title",children:e.jsx("input",{className:o,value:t.emergency_title_en,onChange:a=>n("emergency_title_en",a.target.value)})}),e.jsx(l,{label:"Emergency phone",children:e.jsx("input",{className:o,value:t.emergency_phone,onChange:a=>n("emergency_phone",a.target.value)})}),e.jsx(l,{label:"Legal footer",children:e.jsx("input",{className:o,value:t.footer_note,onChange:a=>n("footer_note",a.target.value)})})]}),e.jsxs("div",{className:"mt-5 flex flex-wrap justify-between gap-3 border-t pt-4",children:[e.jsxs(k,{variant:"outline",onClick:Q,children:[e.jsx(te,{className:"mr-2 h-4 w-4"})," Restore PDA default"]}),e.jsxs(k,{onClick:T,disabled:C||!j,children:[e.jsx(se,{className:"mr-2 h-4 w-4"})," Save ",_.label," to Cloud"]})]})]})]}),e.jsxs("aside",{className:"space-y-5 xl:sticky xl:top-6 xl:self-start",children:[e.jsxs("div",{className:"rounded-2xl border bg-white p-5 shadow-sm",children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between",children:[e.jsx("h2",{className:"text-lg font-black text-[#001F3F]",children:"Live CR80 Preview"}),e.jsx("span",{className:"text-xs font-bold text-slate-500",children:"85.60 × 53.98 mm"})]}),e.jsxs("div",{className:"space-y-5 overflow-hidden rounded-xl bg-slate-200 p-3",children:[e.jsxs("div",{className:"relative aspect-[1.586/1] overflow-hidden rounded-xl border bg-white shadow-lg",style:P("front"),children:[t.watermark_enabled&&e.jsx("img",{src:"/pda logo.PNG",alt:"",className:"absolute left-1/2 top-1/2 w-4/5 -translate-x-1/2 -translate-y-1/2 -rotate-12",style:{opacity:t.watermark_opacity}}),e.jsx("div",{className:"absolute inset-x-0 top-0 h-2",style:{backgroundColor:t.accent_color}}),e.jsxs("div",{className:"absolute inset-5 top-7 grid grid-cols-[29%_1fr] gap-4",children:[e.jsxs("div",{className:"flex min-h-0 flex-col",children:[e.jsxs("div",{className:"flex min-h-0 flex-1 items-center justify-center rounded border bg-white/80 text-center text-[11px] font-bold text-slate-400",children:["OFFICE",e.jsx("br",{}),"PORTRAIT"]}),e.jsx("p",{className:"mt-1.5 text-center text-[10px] font-bold leading-tight text-[#001F3F]",children:"Non-

11profit"}),e.jsx("p",{className:"mt-1 text-center font-black leading-none text-[#001F3F]",style:{fontSize:`${8.5*t.front_font_scale}px`},children:t.website})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-start justify-between gap-2",children:[e.jsx("img",{src:"/pda-logo-1.PNG",alt:"PDA",className:"h-11 w-28 object-contain object-left"}),e.jsx("span",{className:"max-w-[62%] rounded px-2.5 py-1.5 text-right font-black leading-tight text-white",style:{backgroundColor:t.accent_color,fontSize:`${(m==="community_partner"?10:13)*t.front_font_scale}px`},children:t.display_label})]}),e.jsxs("div",{className:"mt-3 border-l-4 pl-3",style:{borderColor:t.accent_color},children:[e.jsx("p",{className:"font-bold text-slate-500",style:{fontSize:`${11*t.front_font_scale}px`},children:"LAST NAME / FIRST NAME"}),e.jsx("p",{className:"font-black",style:{fontSize:`${18*t.front_font_scale}px`},children:"PDA · SAMPLE"}),e.jsx("p",{className:"mt-1 font-black",style:{color:t.accent_color,fontSize:`${14*t.front_font_scale}px`},children:_.label}),e.jsx("p",{className:"mt-1 font-mono font-black",style:{fontSize:`${13*t.front_font_scale}px`},children:H})]}),e.jsx("div",{className:"mt-2 h-9 bg-[repeating-linear-gradient(90deg,#111_0_2px,#fff_2px_4px)]"})]})]}),e.jsx("div",{className:"absolute inset-x-5 bottom-3 flex justify-end font-bold text-[#001F3F]",style:{fontSize:`${10*t.front_font_scale}px`},children:e.jsx("span",{children:t.organization_name})})]}),e.jsxs("div",{className:"relative aspect-[1.586/1] overflow-hidden rounded-xl border bg-white shadow-lg",style:P("back"),children:[t.watermark_enabled&&e.jsx("img",{src:"/pda logo.PNG",alt:"",className:"absolute left-1/2 top-1/2 w-4/5 -translate-x-1/2 -translate-y-1/2 -rotate-12",style:{opacity:t.watermark_opacity}}),e.jsx("div",{className:"absolute inset-x-0 top-0 h-2",style:{backgroundColor:t.accent_color}}),e.jsxs("div",{className:"absolute inset-5 top-4 bottom-14 grid grid-cols-[1fr_72px] gap-2.5",style:{fontSize:`${10.5*t.back_font_scale}px`},children:[e.jsxs("div",{className:"relative z-10 min-w-0 font-semibold leading-[1.13]",children:[e.jsxs("p",{className:"font-black text-[#001F3F]",style:{fontSize:`${13.5*t.back_font_scale}px`},children:[t.back_heading_en,h&&` / ${t.back_heading_zh}`]}),t.rights.slice(0,3).map(a=>e.jsxs("p",{children:[e.jsx("span",{style:{color:t.accent_color},children:"•"})," ",a.en,h&&` · ${a.zh}`]},a.en)),e.jsxs("p",{className:"mt-1 font-black",style:{color:t.accent_color},children:[t.statement_heading_en,h&&` / ${t.statement_heading_zh}`]}),t.statements.slice(0,3).map(a=>e.jsxs("p",{children:[e.jsx("span",{style:{color:t.accent_color},children:"•"})," ",a.en,h&&` · ${a.zh}`]},a.en)),e.jsxs("div",{className:"mt-1 rounded bg-slate-900/[0.06] px-1.5 py-1 leading-tight",style:{fontSize:`${9*t.back_font_scale}px`},children:[e.jsxs("strong",{className:"text-[#001F3F]",children:[t.calm_heading_en,h&&` / ${t.calm_heading_zh}`]}),e.jsx("p",{children:t.calm_body_en}),h&&e.jsx("p",{children:t.calm_body_zh})]})]}),e.jsx("div",{className:"relative z-10 flex items-center justify-center rounded border bg-white/80 p-1",children:e.jsx("img",{src:"/qrcode.jpeg",alt:"PDA QR code",className:"h-16 w-16"})})]}),e.jsxs("div",{className:"absolute inset-x-5 bottom-3 z-10 flex items-end justify-between border-t pt-2",children:[e.jsxs("div",{children:[e.jsxs("p",{className:"font-black text-[#001F3F]",style:{fontSize:`${11*t.back_font_scale}px`},children:[t.emergency_title_en,h&&` / ${t.emergency_title_zh}`]}),e.jsx("p",{className:"font-black",style:{color:t.accent_color,fontSize:`${14*t.back_font_scale}px`},children:t.emergency_phone})]}),e.jsx("p",{className:"max-w-32 text-right text-slate-500",style:{fontSize:`${8*t.back_font_scale}px`},children:t.footer_note})]})]})]})]}),e.jsxs("div",{className:"rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-950",children:[e.jsx(B,{className:"mb-2 h-5 w-5"}),e.jsx("strong",{children:"Cloud-linked production:"})," the saved template revision, generated card number, portrait path, and print status are stored together. Reopening the account does not create a new number."]})]})]})]})};export{fe as default};