https://knowli.com/assets/resolve-animation-WBS48Nme.js

1import{j as e}from"./ui-BFC8h9RM.js";import{r as l}from"./vendor-Dfxk8u-M.js";import{f as o,J as p,D as j,as as y}from"./utils-kQXg0tAh.js";function S({isActive:c=!0}){const[a,x]=l.useState(0),[i,m]=l.useState(!1);l.useEffect(()=>{if(!c||i)return;const s=setInterval(()=>{x(t=>(t+1)%3)},6e3);return()=>clearInterval(s)},[c,i]);const d=l.useCallback(s=>{x(s),m(!0)},[]),f=l.useCallback(()=>{m(!1)},[]),u=[{id:1,source:"System A",color:"from-blue-500 to-blue-600",data:{name:"Sara Johnson",dob:"03/15/1985",ssn:"***-**-4532",address:"123 Main St",phone:"(555) 234-5678"}},{id:2,source:"System B",color:"from-purple-500 to-purple-600",data:{name:"Sarah M. Johnson",dob:"03/15/1985",ssn:"***-**-4532",address:"123 Main Street",phone:"555-234-5687"}},{id:3,source:"System C",color:"from-teal-500 to-teal-600",data:{name:"Sara M Johnson",dob:"1985-03-15",ssn:"***-**-4523",address:"123 Main St, Apt 2",phone:"(555) 234-5678"}}],b=[{field:"Name",values:["Sara Johnson","Sarah M. Johnson","Sara M Johnson"],bestIndex:1,reason:"Most complete"}

1,{field:"DOB",values:["03/15/1985","03/15/1985","1985-03-15"],bestIndex:0,reason:"Standard format"},{field:"SSN",values:["***-**-4532","***-**-4532","***-**-4523"],bestIndex:0,reason:"Transposition detected"},{field:"Address",values:["123 Main St","123 Main Street","123 Main St, Apt 2"],bestIndex:2,reason:"Most complete"},{field:"Phone",values:["(555) 234-5678","555-234-5687","(555) 234-5678"],bestIndex:0,reason:"Transposition detected"}],h={name:{value:"Sarah M. Johnson",confidence:96,source:"B"},dob:{value:"03/15/1985",confidence:100,source:"A"},ssn:{value:"***-**-4532",confidence:92,source:"A"},address:{value:"123 Main St, Apt 2",confidence:94,source:"C"},phone:{value:"(555) 234-5678",confidence:92,source:"A"},overall:95},g=s=>s>=95?"text-green-600 bg-green-100":s>=85?"text-blue-600 bg-blue-100":"text-yellow-600 bg-yellow-100";return e.jsxs("div",{className:"relative w-full h-auto md:h-[500px] xl:h-[450px] 2xl:h-[500px] bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl overflow-hidden border border-gray-200 shadow-lg",children:[e.jsxs("div",{className:"flex md:hidden flex-col p-4",children:[e.jsxs("div",{className:"flex items-center justify-center gap-2 mb-4",children:[e.jsxs("div",{className:"flex -space-x-2",children:[e.jsx("div",{className:"w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-md",children:e.jsx("span",{className:"text-white text-xs font-bold",children:"A"})}),e.jsx("div",{className:"w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-md",children:e.jsx("span",{className:"text-white text-xs font-bold",children:"B"})}),e.jsx("div",{className:"w-8 h-8 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center shadow-md",children:e.jsx("span",{className:"text-white text-xs font-bold",children:"C"})})]}),e.jsx(o,{className:"h-5 w-5 text-gray-400 mx-2"}),e.jsxs("div",{className:"flex items-center gap-1.5 px-3 py-1.5 bg-teal-100 rounded-full",children:[e.jsx(p,{className:"h-4 w-4 text-teal-600"}),e.jsx("span",{className:"text-sm font-semibold text-teal-700",children:"Golden Record"})]})]}),e.jsxs("div",{className:"bg-gradient-to-br from-teal-500 via-teal-600 to-emerald-600 rounded-xl shadow-lg p-4",children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-2 h-2 bg-white rounded-full animate-pulse"}),e.jsx("span",{className:"text-white text-xs font-bold uppercase tracking-wider",children:"Unified Record"})]}),e.jsx("div",{className:"px-2 py-0.5 bg-white/20 rounded-full text-white text-xs",children:"95% confidence"})]}),e.jsxs("div",{className:"bg-white rounded-lg p-3 space-y-2",children:[e.jsxs("div",{className:"flex justify-between items-center py-1 border-b border-gray-100",children:[e.jsx("span",{className:"text-xs text-gray-500 uppercase",children:"Name"}),e.jsx("span",{className:"text-sm font-semibold text-gray-900",children:"Sarah M. Johnson"})]}),e.jsxs("div",{className:"flex justify-between items-center py-1 border-b border-gray-100",children:[e.jsx("span",{className:"text-xs text-gray-500 uppercase",children:"DOB"}),e.jsx("span",{className:"text-sm font-semibold text-gray-900",children:"03/15/1985"})]}),e.jsxs("div",{className:"flex justify-between items-center py-1 border-b border-gray-100",children:[e.jsx("span",{className:"text-xs text-gray-500 uppercase",children:"SSN"}),e.jsx("span",{className:"text-sm font-semibold text-gray-900",children:"***-**-4532"})]}),e.jsxs("div",{className:"flex justify-between items-center py-1 border-b border-gray-100",children:[e.jsx("span",{className:"text-xs text-gray-500 uppercase",children:"Address"}),e.jsx("span",{className:"text-sm font-semibold text-gray-900",children:"123 Main St, Apt 2"})]}),e.jsxs("div",{className:"flex justify-between items-center py-1",children:[e.jsx("span",{className:"text-xs text-gray-500 uppercase",children:"Phone"}),e.jsx("span",{className:"text-sm font-semibold text-gray-900",children:"(555) 234-5678"})]})]})]}),e.jsx("p",{className:"text-xs text-gray-500 text-center mt-3",children:"Three inconsistent records merged into one authoritative source"})]}),e.jsxs("div",{className:"hidden md:flex flex-col h-full",children:[e.jsxs("div",{className:"flex-shrink-0 bg-slate-100/90 backdrop-blur-sm border-b border-slate-200 px-4 py-3 flex items-center justify-center gap-2 z-20",children:[e.jsxs("button",{onClick:()=>d(0),className:`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all cursor-pointer hover:scale-105 ${a===0?"bg-blue-600 text-white shadow-lg scale-110":"bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,children:[e.jsx(j,{className:"h-4 w-4"}),"Disparate Records"]}),e.jsx(o,{className:`h-4 w-4 ${a===0?"text-blue-600":"text-gray-400"} transition-colors`}),e.jsxs("button",{onClick:()=>d(1),className:`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all cursor-pointer hover:scale-105 ${a===1?"bg-blue-600 text-white shadow-lg scale-110":"bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,children:[e.jsx(y,{className:"h-4 w-4"}),"Match Analysis"]}),e.jsx(o,{className:`h-4 w-4 ${a===1?"text-blue-600":"text-gray-400"} transition-colors`}),e.jsxs("button",{onClick:()=>d(2),className:`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all cursor-pointer hover:scale-105 ${a===2?"bg-blue-600 text-white shadow-lg scale-110":"bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,children:[e.jsx(p,{className:"h-4 w-4"}),"Golden Record"]}),i&&e.jsxs("button",{onClick:f,className:"ml-4 px-3 py-1 bg-gray-800 text-white text-xs rounded-full flex items-center gap-2 hover:bg-gray-700 transition-colors",children:[e.jsx("span",{children:"Paused"}),e.jsx("span",{className:"text-gray-400",children:"Click to resume"})]})]}),e.jsx("div",{className:"absolute inset-0 opacity-5 pointer-events-none",children:e.jsx("div",{className:"absolute inset-0",style:{backgroundImage:"linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px)",backgroundSize:"50px 50px"}})}),a===0&&e.jsx("div",{className:"flex-1 flex items-center justify-center p-6 overflow-hidden",children:e.jsx("div",{className:"flex gap-4 w-full max-w-4xl",children:u.map((s,t)=>e.jsx("div",{className:`flex-1 bg-gradient-to-br ${s.color} rounded-xl p-4 shadow-lg transition-all duration-700`,style:{animation:`fadeSlideIn 0.6s ease-out ${t*.15}s both`},children:e.jsxs("div",{className:"text-white",children:[e.jsx("div",{className:"text-xs font-bold uppercase tracking-wider opacity-80 mb-3",children:s.source}),e.jsx("div",{className:"space-y-2 text-sm",children:Object.entries(s.data).map(([r,n])=>e.jsxs("div",{className:"bg-white/20 backdrop-blur-sm rounded px-3 py-1.5",children:[e.jsxs("span",{className:"opacity-70 text-xs capitalize",children:[r,":"]}),e.jsx("div",{className:"font-medium text-xs",children:n})]},r))})]})},s.id))})}),a===1&&e.jsx("div",{className:"flex-1 flex items-center justify-center p-6 overflow-hidden",children:e.jsxs("div",{className:"w-full max-w-3xl bg-white rounded-xl shadow-xl p-6",children:[e.jsxs("div",{className:"text-center mb-4",children:[e.jsx("div",{className:"text-lg font-bold text-gray-900",children:"Selecting Best Identifiers"}),e.jsx("div",{className:"text-sm text-gray-500",children:"Comparing values across all sources"})]}),e.jsx("div",{className:"space-y-2",children:b.map((s,t)=>e.jsxs("div",{className:"flex items-center gap-3 p-2.5 bg-gray-50 rounded-lg",style:{animation:`fadeSlideIn 0.4s ease-out ${t*.1}s both`},children:[e.jsx("div",{className:"w-14 text-sm font-semibold text-gray-700",children:s.field}),e.jsx("div",{className:"flex-1 flex gap-1.5",children:s.values.map((r,n)=>e.jsx("div",{className:`flex-1 text-xs rounded px-2 py-1.5 truncate text-center transition-all ${n===s.bestIndex?"bg-green-100 border-2 border-green-500 text-green-800 font-semibold":"bg-white border border-gray-200 text-gray-600"}`,children:r},n))}),e.jsx("div",{className:"flex items-center gap-2 w-28",children:e.jsx("span",{className:"text-xs text-gray-500",children:s.reason})})]},s.field))}),e.jsxs("div",{className:"mt-4 pt-4 border-t border-gray-200 flex justify-between items-center",children:[e.jsx("span",{className:"text-sm text-gray-600",children:"Entity Match Confidence:"}),e.jsx("span",{className:"px-4 py-2 bg-green-100 text-green-700 rounded-full font-bold text-sm",children:"98% — Same Person"})]})]})}),a===2&&e.jsx("div",{className:"flex-1 flex items-center justify-center p-6 overflow-hidden",children:e.jsxs("div",{className:"w-full max-w-2xl bg-gradient-to-br from-teal-500 via-teal-600 to-emerald-600 rounded-2xl shadow-2xl p-5",style:{animation:"scaleIn 0.5s ease-out"},children:[e.jsxs("div",{className:"flex items-center justify-between mb-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-3 h-3 bg-white rounded-full animate-pulse"}),e.jsx("span",{className:"text-white text-sm font-bold uppercase tracking-wider",children:"Golden Record"})]}),e.jsx("div",{className:"px-3 py-1 bg-white/30 backdrop-blur-sm rounded-full text-white text-sm font-medium",children:"Best of 3 Sources"})]}),e.jsx("div",{className:"bg-white rounded-xl p-4 space-y-1",children:Object.entries(h).filter(([s])=>s!=="overall").map(([s,t],r)=>e.jsxs("div",{className:"flex items-center justify-between py-1.5 border-b border-gray-100 last:border-0",style:{animation:`fadeSlideIn 0.4s ease-out ${r*.08}s both`},children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("div",{className:"text-xs text-gray-500 uppercase tracking-wider",children:s}),e.jsx("div",{className:"text-sm font-semibold text-gray-900",children:t.value})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"text-xs text-gray-400",children:["from ",t.s

1ource]}),e.jsxs("div",{className:`px-2 py-0.5 rounded-full text-xs font-bold ${g(t.confidence)}`,children:[t.confidence,"%"]})]})]},s))}),e.jsxs("div",{className:"mt-3 flex items-center justify-center gap-3",children:[e.jsx("span",{className:"text-white/90 text-sm",children:"Overall Confidence:"}),e.jsxs("span",{className:"px-4 py-1.5 bg-white rounded-full text-teal-600 font-bold",children:[h.overall,"%"]})]})]})}),e.jsx("div",{className:"absolute inset-0 pointer-events-none",children:[...Array(15)].map((s,t)=>e.jsx("div",{className:"absolute w-1 h-1 bg-blue-400 rounded-full opacity-20",style:{left:`${Math.random()*100}%`,top:`${Math.random()*100}%`,animation:`float ${3+Math.random()*2}s ease-in-out infinite`,animationDelay:`${Math.random()*2}s`}},t))}),e.jsx("style",{children:`
2          @keyframes float {
3            0%, 100% { transform: translateY(0px) translateX(0px); }
4            50% { transform: translateY(-10px) translateX(5px); }
5          }
6          @keyframes fadeSlideIn {
7            0% { transform: translateY(20px); opacity: 0; }
8            100% { transform: translateY(0); opacity: 1; }
9          }
10          @keyframes scaleIn {
11            0% { transform: scale(0.9); opacity: 0; }
12            100% { transform: scale(1); opacity: 1; }
13          }
14        `})]})]})}export{S as ResolveAnimation};