https://www.pragmatiq.nl/assets/CaseEditor-AUyCDYm1.js

1import{c as O,u as U,b as R,j as e}from"./vendor-query-BrV1Dv9F.js";import{h as K,i as V,r as _}from"./vendor-react-biZ429JJ.js";import{m as D,a1 as M,q as g,a4 as G,a5 as l,a6 as n,a7 as o,a8 as i,a9 as a,I as u,ai as b,X as Q,e as W,g as c,aj as I,aa as Z,s as q}from"./index-sMkfOq5Q.js";import{I as J,u as X}from"./imageUpload-BU7reL68.js";import{T as N}from"./textarea-D6limuGP.js";import{R as B}from"./rich-text-editor-eyCgjFT3.js";import{S as E}from"./switch-B4DZlwRY.js";import{A as H}from"./arrow-left-Dyoe0GGb.js";import{U as Y}from"./upload-BFkmpMLG.js";import"./vendor-supabase-CT574olg.js";import"./vendor-motion-DrlM8sLE.js";import"./quote-a3qpAhIF.js";import"./index-CQWvYT8I.js";const $=W({title:c().min(1,"Titel is verplicht"),slug:c().min(1,"Slug is verplicht").regex(/^[a-z0-9-]+$/,"Alleen kleine letters, cijfers en streepjes"),client:c().min(1,"Klantnaam is verplicht"),sector:c().min(1,"Sector is verplicht"),tags:c().optional(),logo_url:c().optional(),excerpt:c().optional(),challenge:c().optional(),solution:c().optional(),result_intro:c().optional(),result_items_raw:c().optional(),quote:c().optional(),quote_person:c().optional(),quote_role:c().optional(),technology:c().optional(),duration:c().optional(),seo_title:c().optional(),seo_description:c().optional(),is_published:I().default(!1),is_featured:I().default(!1)}),ee=["image/jpeg","image/png","image/webp"],se=5*1024*1024;function je(){const{id:f}=K(),k=V(),{toast:h}=D(),F=O(),x=f==="new",p=_.useRef(null),[C,S]=_.useState(!1),[v,w]=_.useState(null),t=M({resolver:Z($),defaultValues:{title:"",slug:"",client:"",sector:"",tags:"",logo_url:"",excerpt:"",challenge:"",solution:"",result_intro:"",result_items_raw:"",quote:"",quote_person:"",quote_role:"",technology:"",duration:"",seo_title:"",seo_description:"",is_published:!1,is_featured:!1}}),{data:r,isLoading:T}=U({queryKey:["admin-case-study",f],queryFn:async()=>{if(x)return null;const{data:s,error:d}=await q.from("case_studies").select("id, title, slug, client, sector, tags, logo_url, excerpt, challenge, solution, result_intro, result_items, quote, quote_person, quote_role, technology, duration, seo_title, seo_description, is_published, is_featured").eq("id",f).single();if(d)throw d;return s},enabled:!x});_.useEffect(()=>{r&&(t.reset({title:r.title,slug:r.slug,client:r.client,sector:r.sector,tags:(r.tags??[]).join(", "),logo_url:r.logo_url??"",excerpt:r.excerpt??"",challenge:r.challenge??"",solution:r.solution??"",result_intro:r.result_intro??"",result_items_raw:(r.result_items??[]).join(`
2`),quote:r.quote??"",quote_person:r.quote_person??"",quote_role:r.quote_role??"",technology:r.technology??"",duration:r.duration??"",seo_title:r.seo_title??"",seo_description:r.seo_description??"",is_published:r.is_published,is_featured:r.is_featured}),r.logo_url&&w(r.logo_url))},[r,t]);const z=async s=>{if(!ee.includes(s.type)){h({title:"Ongeldig bestandstype",description:"Alleen JPG, PNG en WEBP zijn toegestaan",variant:"destructive"});return}if(s.size>se){h({title:"Bestand te groot",description:"Maximale bestandsgrootte is 5MB",variant:"destructive"});return}S(!0);try{const d=await X("case-images",s,{maxWidthOrHeight:800});t.setValue("logo_url",d),w(d),h({title:"Logo geüpload"})}catch(d){const j=d instanceof Error?d.message:"Onbekende fout";h({title:"Upload mislukt",description:j,variant:"destructive"})}finally{S(!1)}},A=()=>{t.setValue("logo_url",""),w(null),p.current&&(p.current.value="")},y=R({mutationFn:async s=>{const d=s.tags?s.tags.split(",").map(m=>m.trim()).filter(Boolean):[],j=s.result_items_raw?s.result_items_raw.split(`
3`).map(m=>m.trim()).filter(Boolean):[],P={title:s.title,slug:s.slug,client:s.client,sector:s.sector,tags:d,logo_url:s.logo_url||null,excerpt:s.excerpt||null,challenge:s.challenge||null,solution:s.solution||null,result_intro:s.result_intro||null,result_items:j,quote:s.quote||null,quote_person:s.quote_person||null,quote_role:s.quote_role||null,technology:s.technology||null,duration:s.duration||null,seo_title:s.seo_title||null,seo_description:s.seo_description||null,is_published:s.is_published,is_featured:s.is_featured,published_at:s.is_published?new Date().toISOString():null};if(x){const{error:m}=await q.from("case_studies").insert([P]);if(m)throw m}else{const{error:m}=await q.from("case_studies").update(P).eq("id",f);if(m)throw m}},onSuccess:()=>{F.invalidateQueries({queryKey:["admin-case-studies"]}),h({title:x?"Businesscase aangemaakt":"Businesscase opgeslagen"}),k("/admin/cases")},onError:s=>{h({title:"Fout bij opslaan",description:s.message,variant:"destructive"})}}),L=()=>{const d=t.getValues("title").toLowerCase().replace(/[^a-z0-9\s-]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-").trim();t.setValue("slug",d)};return!x&&T?e.jsx("div",{className:"flex items-center justify-center py-12",children:e.jsx("div",{className:"animate-spin rounded-full h-8 w-8 border-b-2 border-primary"})}):e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(g,{variant:"ghost",size:"icon",onClick:()=>k("/admin/cases"),children:e.jsx(H,{className:"h-4 w-4"})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold",children:x?"Nieuwe Businesscase":"Businesscase Bewerken"}),e.jsx("p",{className:"text-muted-foreground",children:x?"Voeg een nieuwe klantcase toe":r==null?void 0:r.title})]})]}),e.jsx(G,{...t,children:e.jsxs("form",{onSubmit:t.handleSubmit(s=>y.mutate(s)),className:"space-y-8",children:[e.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[e.jsx(l,{control:t.control,name:"title",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Paginatitel *"}),e.jsx(i,{children:e.jsx(N,{...s,rows:3,placeholder:"Van handmatige salarisadministratie naar...",className:"resize-none"})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"slug",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Slug *"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(i,{children:e.jsx(u,{...s,placeholder:"nedflex-payroll-automatisering"})}),e.jsx(g,{type:"button",variant:"outline",onClick:L,children:"Genereer"})]}),e.jsx(b,{children:"URL: /succesverhalen/[slug]"}),e.jsx(a,{})]})})]}),e.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[e.jsx(l,{control:t.control,name:"client",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Klantnaam *"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Nedflex"})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"sector",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Sector *"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Bijv. Retail, Zorg, Industrie"})}),e.jsx(a,{})]})})]}),e.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[e.jsx(l,{control:t.control,name:"tags",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Tags"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Power Platform, AI, Low-Code"})}),e.jsx(b,{children:'Komma-gescheiden, bijv. "Power Platform, AI"'}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"logo_url",render:()=>e.jsxs(n,{children:[e.jsx(o,{children:"Klantlogo"}),e.jsx(i,{children:e.jsxs("div",{className:"space-y-3",children:[e.jsx("input",{ref:p,type:"file",accept:".jpg,.jpeg,.png,.webp",className:"hidden",onChange:s=>{var j;const d=(j=s.target.files)==null?void 0:j[0];d&&z(d)}}),v?e.jsxs("div",{className:"relative rounded-md border overflow-hidden bg-muted flex items-center justify-center h-28",children:[e.jsx("img",{src:v,alt:"Logo preview",className:"h-20 w-auto object-contain"}),e.jsx(g,{type:"button",variant:"destructive",size:"icon",className:"absolute top-2 right-2 h-7 w-7",onClick:A,children:e.jsx(Q,{className:"h-3 w-3"})})]}):e.jsx("div",{className:"flex flex-col items-center justify-center h-28 border-2 border-dashed rounded-md cursor-pointer hover:border-primary transition-colors",onClick:()=>{var s;return(s=p.current)==null?void 0:s.click()},children:C?e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"animate-spin rounded-full h-6 w-6 border-b-2 border-primary"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"Uploaden..."})]}):e.jsxs(e.Fragment,{children:[e.jsx(J,{className:"h-8 w-8 text-muted-foreground mb-1"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"Klik om logo te uploaden"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"JPG, PNG of WEBP (max 5MB)"})]})}),!v&&!C&&e.jsxs(g,{type:"button",variant:"outline",className:"w-full",onClick:()=>{var s;return(s=p.current)==null?void 0:s.click()},children:[e.jsx(Y,{className:"mr-2 h-4 w-4"}),"Logo uploaden"]})]})}),e.jsx(a,{})]})})]}),e.jsx(l,{control:t.control,name:"excerpt",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Korte introductie"}),e.jsx(i,{children:e.jsx(N,{...s,rows:3,placeholder:"Korte omschrijving voor op de overzichtskaartjes..."})}),e.jsx(b,{children:"Zichtbaar op de /succesverhalen overzichtspagina"}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"challenge",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"De Uitdaging"}),e.jsx(i,{children:e.jsx(B,{value:s.value||"",onChange:s.onChange,placeholder:"Beschrijf het probleem van de klant..."})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"solution",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"De Oplossing"}),e.jsx(i,{children:e.jsx(B,{value:s.value||"",onChange:s.onChange,placeholder:"Beschrijf hoe Pragmatiq dit heeft opgelost..."})}),e.jsx(a,{})]})}),e.jsxs("div",{className:"border-t pt-6",children:[e.jsx("h3",{className:"text-lg font-medium mb-4",children:"Resultaten"}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(l,{control:t.control,name:"result_intro",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Intro-zin resultaten"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"De impact was direct merkbaar na de livegang:"})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"result_items_raw",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Resultaat-items"}),e.jsx(i,{children:e.jsx(N,{...s,rows:5,placeholder:`Verwerkingstijd daalde met 70%
4Nul kritieke fouten na livegang
5Volledige adoptie binnen 2 weken`})}),e.jsx(b,{children:"Één resultaat per regel — wordt als bullet-points getoond"}),e.jsx(a,{})]})})]})]}),e.jsxs("div",{className:"border-t pt-6",children:[e.jsx("h3",{className:"text-lg font-medium mb-4",children:"Quote / Testimonial"}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(l,{control:t.control,name:"quote",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Quote tekst"}),e.jsx(i,{children:e.jsx(N,{...s,rows:3,placeholder:"Pragmatiq heeft ons geholpen te transformeren..."})}),e.jsx(a,{})]})}),e.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[e.jsx(l,{control:t.control,name:"quote_person",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Naam / Functie"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Directeur Operations"})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"quote_role",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Bedrijf"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Nedflex"})}),e.jsx(a,{})]})})]})]})]}),e.jsxs("div",{className:"border-t pt-6",children:[e.jsx("h3",{className:"text-lg font-medium mb-4",children:"Projectdetails"}),e.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[e.jsx(l,{control:t.control,name:"technology",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Gebruikte technologie"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"OutSystems, AFAS, REST API"})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"duration",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"Doorlooptijd"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"14 weken"})}),e.jsx(a,{})]})})]})]}),e.jsxs("div",{className:"border-t pt-6",children:[e.jsx("h3",{className:"text-lg font-medium mb-4",children:"SEO Instellingen"}),e.jsxs("div",{className:"grid gap-6 md:grid-cols-2",children:[e.jsx(l,{control:t.control,name:"seo_title",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"SEO Titel"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Titel voor zoekmachines"})}),e.jsx(a,{})]})}),e.jsx(l,{control:t.control,name:"seo_description",render:({field:s})=>e.jsxs(n,{children:[e.jsx(o,{children:"SEO Beschrijving"}),e.jsx(i,{children:e.jsx(u,{...s,placeholder:"Meta beschrijving (max 160 tekens)"})}),e.jsx(a,{})]})})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t pt-6 flex-wrap gap-4",children:[e.jsxs("div",{className:"flex items-center gap-6",children:[e.jsx(l,{control:t.control,name:"is_featured",render:({field:s})=>e.jsxs(n,{className:"flex items-center gap-3",children:[e.jsx(i,{children:e.jsx(E,{checked:s.value,onCheckedChange:s.onChange})}),e.jsx(o,{className:"!mt-0",children:"Uitgelicht (featured)"})]})}),e.jsx(l,{control:t.control,name:"is_published",render:({field:s})=>e.jsxs(n,{className:"flex items-center gap-3",children:[e.jsx(i,{children:e.jsx(E,{checked:s.value,onCheckedChange:s.onChange})}),e.jsx(o,{className:"!mt-0",children:"Publiceren"})]})})]}),e.jsx(g,{type:"submit",disabled:y.isPending,children:y.isPending?"Opslaan...":x?"Case aanmaken":"Wijzigingen opslaan"})]})]})})]})}export{je as default};