https://zemangat.com/_next/static/chunks/6287-cc2966abcdd2eb95.js?dpl=dpl_qPtf8FvYcXyZtfW8xvXeQ5rem95v

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6287],{76287:(e,a,t)=>{t.d(a,{A:()=>w});var s=t(95155),i=t(12115),r=t(66766),l=t(35169),n=t(15448),o=t(48136),d=t(4516),c=t(71007),m=t(28883),A=t(19420),h=t(69074),x=t(47924),p=t(54653),g=t(15968),u=t(66932);let b=[{id:"1",name:"Zara Tsania",position:"Marketing Manager",department:"Marketing",status:"Active",email:"[email protected]",phone:"+62 812-3456-7890",avatar:"ZT",photo:{src:"/_next/static/media/01_zara.fe6f6d5d.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAADQAQCdASoFAAgAAkA4JZQCdAD0h/tsAAD+eSwzTCJTM0iqDrOqqTIiRVotyUmwycd78iD2hp0tPiAK+xc+N0CUAAA=",blurWidth:5,blurHeight:8},joinDate:"2022-03-15",manager:"Alex Davis",location:"Jakarta Office",employeeId:"EMP001"},{id:"2",name:"Najeeb Ahmad",position:"Software Engineer",department:"IT",status:"Active",email:"[email protected]",phone:"+62 812-3456-7891",avatar:"NA",photo:{src:"/_next/static/media/02_najeeb.e90d3b5f.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4ID4AAACwAQCdASoFAAgAAkA4JZQCdAD0MYo0AP5LOfG+6x5mh1u4KYKWGbkX/VZn0fHIIzjcoa/s1D5leSuIwrUAAA==",blurWidth:5,blurHeight:8},joinDate:"2023-01-10",manager:"Sarah Johnson",location:"Jakarta Office",employeeId:"EMP002"},{id:"3",name:"Rose Melati",position:"HR Specialist",department:"Human Resources",status:"Active",email:"[email protected]",phone:"+62 812-3456-7892",avatar:"RM",photo:{src:"/_next/static/media/03_rose.de7ed494.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4ID4AAADQAQCdASoFAAgAAkA4JYwCdAD0pMYDqAD+C0+gyk2GVsfmGsIF9+vB1v+gYXifrW2XtcJ0R60xnX3k0lAAAA==",blurWidth:5,blurHeight:8},joinDate:"2021-08-20",manager:"Durrah Puspita",location:"Jakarta Office",employeeId:"EMP003"},{id:"4",name:"Panda Wijaya",position:"Operations Manager",department:"Operations",status:"Active",email:"[email protected]",phone:"+62 812-3456-7893",avatar:"PW",photo:{src:"/_next/static/media/04_panda.216b0fe6.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkYAAABXRUJQVlA4IDoAAADwAQCdASoFAAgAAkA4JZQCdAD0u1o95gAA/uvByahpsJVOK5frXVrpNzJ1ECwCVZXwm4mbaECtnHAA",blurWidth:5,blurHeight:8},joinDate:"2020-11-05",manager:"Mike Wilson",location:"Jakarta Office",employeeId:"EMP004"},{id:"5",name:"Amanda Sari",position:"Financial Analyst",department:"Finance",status:"Active",email:"[email protected]",phone:"+62 812-3456-7894",avatar:"AS",photo:{src:"/_next/static/media/05_amanda.15ae5cb2.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAACwAQCdASoFAAgAAkA4JYgCdADze7mIAP7voggxi4V9p4rOWs4TjH0cDmCW04o0yHzHrEpilrIdey0zguxSEzBEAAA=",blurWidth:5,blurHeight:8},joinDate:"2019-06-12",manager:"Lisa Brown",location:"Jakarta Office",employeeId:"EMP005"},{id:"6",name:"Iris Putri",position:"Customer Success Manager",department:"Customer Service",status:"Active",email:"[email protected]",phone:"+62 812-3456-7895",avatar:"IP",photo:{src:"/_next/static/media/06_iris.30ea8741.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAACwAQCdASoFAAgAAkA4JZwAAp1UhHgAAP6UTKtdOjU3haP4/yHXyWOdBhtUpdPn8K+iAAAA",blurWidth:5,blurHeight:8},joinDate:"2021-02-28",manager:"John Smith",location:"Jakarta Office",employeeId:"EMP006"},{id:"7",name:"Agus Santoso",position:"Sales Representative",department:"Sales",status:"Active",email:"[email protected]",phone:"+62 812-3456-7896",avatar:"AS",photo:{src:"/_next/static/media/07_agus.9f38e02d.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACwAQCdASoFAAgAAkA4JZwAApyT8rfAANzW1+nW76MzMd17obyn/qffrwkBIUAA",blurWidth:5,blurHeight:8},joinDate:"2022-09-15",manager:"Dhani Adi",location:"Jakarta Office",employeeId:"EMP007"},{id:"8",name:"Kevin Pratama",position:"UI/UX Designer",department:"Design",status:"Active",email:"[email protected]",phone:"+62 812-3456-7897",avatar:"KP",photo:{src:"/_next/static/media/08_kevin.79a7b1f5.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkwAAABXRUJQVlA4IEAAAADwAQCdASoFAAgAAkA4JYwCw7D0pi9Z9+AA/u8p2dGxfve3J9f+Bc2EYyBmeVgxTz4vzMDmsn0mGJRhALtNYAAA",blurWidth:5,blurHeight:8},joinDate:"2023-04-20",manager:"Sarah Johnson",location:"Jakarta Office",employeeId:"EMP008"},{id:"9",name:"Ahmad Fauzi",position:"Data Analyst",department:"IT",status:"Active",email:"[email protected]",phone:"+62 812-3456-7898",avatar:"AF",photo:{src:"/_next/static/media/09_ahmad.ff97e9f4.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkIAAABXRUJQVlA4IDYAAADQAQCdASoFAAgAAkA4JZQC7AD0lcG0AAD8/Xr9sARFdHPx6PJWM1lxQWZ5TAz7UJY7w6bAAAA=",blurWidth:5,blurHeight:8},joinDate:"2022-11-10",manager:"Sarah Johnson",location:"Jakarta Office",employeeId:"EMP009"},{id:"10",name:"Riana Dewi",position:"Content Writer",department:"Marketing",status:"Active",email:"riana@

1company.com",phone:"+62 812-3456-7899",avatar:"RD",photo:{src:"/_next/static/media/10_riana.2219fe97.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkYAAABXRUJQVlA4IDoAAACwAQCdASoFAAgAAkA4JZQCdAD0eqnsAPa+SBCHWyX6Mgnp4+nQ4BIGlMsXEsBaRZHzpMRd0Bmm1WQA",blurWidth:5,blurHeight:8},joinDate:"2023-02-15",manager:"Zara Tsania",location:"Jakarta Office",employeeId:"EMP010"},{id:"11",name:"Riska Maharani",position:"Quality Assurance",department:"IT",status:"On Leave",email:"[email protected]",phone:"+62 812-3456-7900",avatar:"RM",photo:{src:"/_next/static/media/11_riska.bb3c9331.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRkgAAABXRUJQVlA4IDwAAACwAQCdASoFAAgAAkA4JQBWAB5vdXgAAP4f4qnSw3HuYV/vgkolyg5ACCM/pyO4qN4swGLuFxBq0hcAAAA=",blurWidth:5,blurHeight:8},joinDate:"2021-12-01",manager:"Sarah Johnson",location:"Jakarta Office",employeeId:"EMP011"},{id:"12",name:"Vivi Anggraini",position:"Administrative Assistant",department:"Administration",status:"Active",email:"[email protected]",phone:"+62 812-3456-7901",avatar:"VA",photo:{src:"/_next/static/media/12_vivi.dd97877b.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAACwAQCdASoFAAgAAkA4JQBOgB6PVT2AAP6hERegyTMCQaGSjtn0inbZJ/3ggUxTChVkfx6jWhdZAyh36B6m2Jv+X1MudRCGs9/IAAAA",blurWidth:5,blurHeight:8},joinDate:"2020-07-20",manager:"Durrah Puspita",location:"Jakarta Office",employeeId:"EMP012"},{id:"13",name:"David Kurniawan",position:"Project Manager",department:"Operations",status:"Active",email:"[email protected]",phone:"+62 812-3456-7902",avatar:"DK",photo:{src:"/_next/static/media/13_david.ddc5654a.webp",height:768,width:512,blurDataURL:"data:image/webp;base64,UklGRjwAAABXRUJQVlA4IDAAAACwAQCdASoFAAgAAkA4JZwC7AD0eqnsAOJtjWHL48qKP4/cnQ7/oK66qkzhluyLgAA=",blurWidth:5,blurHeight:8},joinDate:"2021-05-10",manager:"Panda Wijaya",location:"Jakarta Office",employeeId:"EMP013"}];function w(){let[e,a]=(0,i.useState)(null),[t,w]=(0,i.useState)(""),[f,y]=(0,i.useState)("list"),v=b.filter(e=>e.name.toLowerCase().includes(t.toLowerCase())||e.position.toLowerCase().includes(t.toLowerCase())||e.department.toLowerCase().includes(t.toLowerCase())),j=e=>{switch(e){case"Active":return"bg-green-100 text-green-800";case"Inactive":default:return"bg-gray-100 text-gray-800";case"On Leave":return"bg-yellow-100 text-yellow-800"}};return e?(0,s.jsxs)("div",{className:"w-full h-full bg-white rounded-xl shadow-lg border border-gray-200 flex flex-col overflow-hidden",children:[(0,s.jsx)("div",{className:"p-4 border-b border-gray-200 bg-red-500",children:(0,s.jsxs)("div",{className:"flex items-center justify-between",children:[(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)("button",{onClick:()=>a(null),className:"p-1 cursor-pointer hover:bg-opacity-20 rounded-full transition-colors",children:(0,s.jsx)(l.A,{className:"w-5 h-5 text-white"})}),(0,s.jsx)("div",{className:"flex items-center space-x-2",children:(0,s.jsx)("h2",{className:"text-lg font-semibold text-white",children:"Employee Directory"})})]}),(0,s.jsx)("div",{className:"text-white text-sm",children:new Date().toLocaleDateString("id-ID",{weekday:"long",year:"numeric",month:"long",day:"numeric"})})]})}),(0,s.jsxs)("div",{className:"flex-1 overflow-y-auto p-6",children:[(0,s.jsxs)("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6",children:[(0,s.jsx)("div",{className:"bg-gray-50 p-6 rounded-lg",children:(0,s.jsxs)("div",{className:"text-center",children:[(0,s.jsx)("div",{className:"w-20 h-20 rounded-full overflow-hidden mx-auto mb-4 shadow-lg",children:(0,s.jsx)(r.default,{src:e.photo,alt:"".concat(e.name," photo"),width:80,height:80,className:"w-full h-full object-cover"})}),(0,s.jsx)("h3",{className:"text-xl font-bold text-gray-900 mb-2",children:e.name}),(0,s.jsx)("p",{className:"text-sm text-gray-600 mb-3",children:e.position}),(0,s.jsx)("span",{className:"inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ".concat(j(e.status)),children:e.status})]})}),(0,s.jsxs)("div",{className:"bg-gray-50 p-6 rounded-lg",children:[(0,s.jsx)("h4",{className:"text-lg font-semibold text-gray-900 mb-4",children:"Basic Information"}),(0,s.jsxs)("div",{className:"space-y-3",children:[(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(n.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Employee ID"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:e.employeeId})]})]}),(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(o.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Department"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:e.department})]})]}),(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(d.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Location"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:e.location})]})]}),(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(c.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Manager"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:e.manager})]})]})]})]})]}),(0,s.jsxs)("div",{className:"bg-gray-50 p-6 rounded-lg",children:[(0,s.jsx)("h4",{className:"text-lg font-semibold text-gray-900 mb-4",children:"Contact Information"}),(0,s.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(m.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Email"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:e.email})]})]}),(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(A.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Phone"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:e.phone})]})]}),(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)(h.A,{className:"w-4 h-4 text-gray-500"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-sm text-gray-600",children:"Join Date"}),(0,s.jsx)("p",{className:"text-sm font-medium text-gray-900",children:new Date(e.joinDate).toLocaleDateString("id-ID",{year:"numeric",month:"long",day:"numeric"})})]})]})]})]})]})]}):(0,s.jsxs)("div",{className:"w-full h-full bg-white rounded-xl shadow-lg border border-gray-200 flex flex-col overflow-hidden",children:[(0,s.jsx)("div",{className:"p-4 border-b border-gray-200 bg-red-500",children:(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsxs)("div",{className:"relative flex-1",children:[(0,s.jsx)("div",{className:"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none",children:(0,s.jsx)(x.A,{className:"h-4 w-4 text-gray-500"})}),(0,s.jsx)("input",{type:"text",placeholder:"Search employees...",value:t,onChange:e=>w(e.target.value),className:"w-full pl-10 pr-4 py-3 bg-white text-gray-900 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-300 text-sm"})]}),(0,s.jsxs)("div",{className:"flex items-center bg-white rounded-lg p-1",children:[(0,s.jsxs)("div",{className:"relative group",children:[(0,s.jsx)("button",{onClick:()=>y("grid"),className:"p-2 rounded-md transition-colors ".concat("grid"===f?"bg-red-500 text-white":"text-gray-500 hover:text-gray-700 cursor-pointer"),children:(0,s.jsx)(p.A,{className:"w-4 h-4"})}),(0,s.jsxs)("div",{className:"absolute left-1/2 top-full transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10",children:["Grid View",(0,s.jsx)("div",{className:"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-gray-800"})]})]}),(0,s.jsxs)("div",{className:"relative group",children:[(0,s.jsx)("button",{onClick:()=>y("list"),className:"p-2 rounded-md transition-colors ".concat("list"===f?"bg-red-500 text-white":"text-gray-500 hover:text-gray-700 cursor-pointer"),children:(0,s.jsx)(g.A,{className:"w-4 h-4"})}),(0,s.jsxs)("div",{className:"absolute left-1/2 top-full transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10",children:["List View",(0,s.jsx)("div",{className:"absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-gray-800"})]})]})]}),(0,s.jsxs)("div",{className:"relative group",children:[(0,s.jsx)("button",{className:"p-3 bg-white text-gray-500 hover:text-gray-700 rounded-lg transition-colors cursor-pointer",children:(0,s.jsx)(u.A,{className:"w-4 h-4"})}),(0,s.jsxs)("div",{className:"absolute top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10",children:["Filter",(0,s.jsx)("div",{className:"absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-gray-800"})]})]})]})}),(0,s.jsx)("div",{className:"flex-1 overflow-y-auto",children:(0,s.jsx)("div",{className:"p-4",children:"grid"===f?(0,s.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:v.map(e=>(0,s.jsx)("div",{onClick:()=>a(e),className:"bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all duration-200 cursor-pointer hover:border-red-300",children:(0,s.jsxs)("div",{className:"text-center",children:[(0,s.jsx)("div",{className:"w-16 h-16 rounded-full overflow-hidden mx-auto mb-3 shadow-sm",children:(0,s.jsx)(r.default,{src:e.photo,alt:"".concat(e.name," photo"),width:64,height:64,className:"w-full h-full object-cover"})}),(0,s.jsx)("h3",{className:"text-sm font-semibold text-gray-900 mb-2",children:e.name}),(0,s.jsx)("p",{className:"text-xs text-gray-600 mb-1",children:e.department}),(0,s.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:e.position}),(0,s.jsx)("span",{className:"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ".concat(j(e.status)),children:e.status})]})},e.id))}):(0,s.jsx)("div",{className:"space-y-2",children:v.map(e=>(0,s.jsx)("div",{onClick:()=>a(e),className:"bg-white border border-gray-200 rounded-lg p-3 hover:shadow-md transition-all duration-200 cursor-pointer hover:border-red-300",children:(0,s.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,s.jsx)("div",{className:"w-12 h-12 rounded-full overflow-hidden shadow-sm",children:(0,s.jsx)(r.default,{src:e.photo,alt:"".concat(e.name," photo"),width:48,height:48,className:"w-full h-full object-cover"})}),(0,s.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,s.jsxs)("div",{className:"flex items-center justify-between mb-1",children:[(0,s.jsx)("h3",{className:"text-sm font-semibold text-gray-900 truncate",children:e.name}),(0,s.jsx)("span",{className:"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ".concat(j(e.status)),children:e.status})]}),(0,s.jsxs)("div",{className:"text-left",children:[(0,s.jsx)("p",{className:"text-xs text-gray-600 truncate mb-1",children:e.department}),(0,s.jsx)("p",{className:"text-xs text-gray-500 truncate",children:e.position})]})]})]})},e.id))})})})]})}}}]);