248 lines
19 KiB
PHP
248 lines
19 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '고객사 관리')
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media print { .no-print { display: none !important; } }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div id="customers-root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
|
|
<script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
|
|
@verbatim
|
|
<script type="text/babel">
|
|
const { useState, useRef, useEffect } = React;
|
|
|
|
const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
|
|
const ref = useRef(null);
|
|
useEffect(() => {
|
|
if (ref.current && lucide.icons[name]) {
|
|
ref.current.innerHTML = '';
|
|
const svg = lucide.createElement(lucide.icons[name]);
|
|
svg.setAttribute('class', className);
|
|
ref.current.appendChild(svg);
|
|
}
|
|
}, [className]);
|
|
return <span ref={ref} className="inline-flex items-center" {...props} />;
|
|
};
|
|
|
|
const Users = createIcon('users');
|
|
const Plus = createIcon('plus');
|
|
const Search = createIcon('search');
|
|
const Download = createIcon('download');
|
|
const X = createIcon('x');
|
|
const Edit = createIcon('edit');
|
|
const Trash2 = createIcon('trash-2');
|
|
const Building = createIcon('building');
|
|
const Phone = createIcon('phone');
|
|
const Mail = createIcon('mail');
|
|
const MapPin = createIcon('map-pin');
|
|
|
|
function CustomersManagement() {
|
|
const [customers, setCustomers] = useState([
|
|
{ id: 1, name: '(주)제조산업', bizNo: '123-45-67890', ceo: '김제조', industry: 'IT/소프트웨어', grade: 'VIP', contact: '02-1234-5678', email: 'contact@manufacturing.co.kr', address: '서울시 강남구 테헤란로 123', manager: '박담당', managerPhone: '010-1234-5678', status: 'active', memo: '주요 고객사' },
|
|
{ id: 2, name: '(주)테크솔루션', bizNo: '234-56-78901', ceo: '이테크', industry: 'IT/소프트웨어', grade: 'Gold', contact: '02-2345-6789', email: 'info@techsolution.co.kr', address: '서울시 서초구 반포대로 45', manager: '김매니저', managerPhone: '010-2345-6789', status: 'active', memo: '' },
|
|
{ id: 3, name: '(주)스마트팩토리', bizNo: '345-67-89012', ceo: '박스마트', industry: '제조업', grade: 'Gold', contact: '031-456-7890', email: 'smart@factory.co.kr', address: '경기도 수원시 영통구 삼성로 100', manager: '이담당', managerPhone: '010-3456-7890', status: 'active', memo: '' },
|
|
{ id: 4, name: '(주)디지털제조', bizNo: '456-78-90123', ceo: '최디지털', industry: '제조업', grade: 'Silver', contact: '032-567-8901', email: 'digital@mfg.co.kr', address: '인천시 연수구 송도과학로 50', manager: '최실장', managerPhone: '010-4567-8901', status: 'active', memo: '' },
|
|
{ id: 5, name: '(주)AI산업', bizNo: '567-89-01234', ceo: '정에이아이', industry: 'IT/소프트웨어', grade: 'Silver', contact: '02-678-9012', email: 'hello@ai-industry.co.kr', address: '서울시 마포구 월드컵로 200', manager: '정대리', managerPhone: '010-5678-9012', status: 'inactive', memo: '프로젝트 종료' },
|
|
]);
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterGrade, setFilterGrade] = useState('all');
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [modalMode, setModalMode] = useState('add');
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
|
|
const grades = ['VIP', 'Gold', 'Silver', 'Bronze'];
|
|
const industries = ['IT/소프트웨어', '제조업', '서비스업', '유통업', '금융업', '기타'];
|
|
|
|
const initialFormState = {
|
|
name: '',
|
|
bizNo: '',
|
|
ceo: '',
|
|
industry: 'IT/소프트웨어',
|
|
grade: 'Silver',
|
|
contact: '',
|
|
email: '',
|
|
address: '',
|
|
manager: '',
|
|
managerPhone: '',
|
|
status: 'active',
|
|
memo: ''
|
|
};
|
|
const [formData, setFormData] = useState(initialFormState);
|
|
|
|
const filteredCustomers = customers.filter(item => {
|
|
const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.ceo.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.manager.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesGrade = filterGrade === 'all' || item.grade === filterGrade;
|
|
const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
|
|
return matchesSearch && matchesGrade && matchesStatus;
|
|
});
|
|
|
|
const totalCustomers = customers.length;
|
|
const activeCustomers = customers.filter(c => c.status === 'active').length;
|
|
const vipCustomers = customers.filter(c => c.grade === 'VIP').length;
|
|
|
|
const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
|
|
const handleEdit = (item) => { setModalMode('edit'); setEditingItem(item); setFormData({ ...item }); setShowModal(true); };
|
|
const handleSave = () => {
|
|
if (!formData.name) { alert('회사명을 입력해주세요.'); return; }
|
|
if (modalMode === 'add') {
|
|
setCustomers(prev => [{ id: Date.now(), ...formData }, ...prev]);
|
|
} else {
|
|
setCustomers(prev => prev.map(item => item.id === editingItem.id ? { ...item, ...formData } : item));
|
|
}
|
|
setShowModal(false); setEditingItem(null);
|
|
};
|
|
const handleDelete = (id) => { if (confirm('정말 삭제하시겠습니까?')) { setCustomers(prev => prev.filter(item => item.id !== id)); setShowModal(false); } };
|
|
|
|
const handleDownload = () => {
|
|
const rows = [['고객사 관리'], [], ['회사명', '사업자번호', '대표자', '업종', '등급', '연락처', '이메일', '담당자', '상태'],
|
|
...filteredCustomers.map(item => [item.name, item.bizNo, item.ceo, item.industry, item.grade, item.contact, item.email, item.manager, item.status === 'active' ? '활성' : '비활성'])];
|
|
const csvContent = rows.map(row => row.join(',')).join('\n');
|
|
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = '고객사목록.csv'; link.click();
|
|
};
|
|
|
|
const getGradeColor = (grade) => {
|
|
const colors = { VIP: 'bg-purple-100 text-purple-700', Gold: 'bg-amber-100 text-amber-700', Silver: 'bg-gray-100 text-gray-700', Bronze: 'bg-orange-100 text-orange-700' };
|
|
return colors[grade] || 'bg-gray-100 text-gray-700';
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-50 min-h-screen">
|
|
<header className="bg-white border-b border-gray-200 rounded-t-xl mb-6">
|
|
<div className="px-6 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 bg-blue-100 rounded-xl"><Users className="w-6 h-6 text-blue-600" /></div>
|
|
<div><h1 className="text-xl font-bold text-gray-900">고객사 관리</h1><p className="text-sm text-gray-500">Customer Management</p></div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"><Download className="w-4 h-4" /><span className="text-sm">Excel</span></button>
|
|
<button onClick={handleAdd} className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">고객사 등록</span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">총 고객사</span><Building className="w-5 h-5 text-gray-400" /></div>
|
|
<p className="text-2xl font-bold text-gray-900">{totalCustomers}개</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-blue-200 p-6 bg-blue-50/30">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-blue-700">활성 고객</span></div>
|
|
<p className="text-2xl font-bold text-blue-600">{activeCustomers}개</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-purple-200 p-6">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-purple-700">VIP 고객</span></div>
|
|
<p className="text-2xl font-bold text-purple-600">{vipCustomers}개</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">비활성</span></div>
|
|
<p className="text-2xl font-bold text-gray-900">{totalCustomers - activeCustomers}개</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="md:col-span-2 relative">
|
|
<Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
|
<input type="text" placeholder="회사명, 대표자, 담당자 검색..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
|
|
</div>
|
|
<select value={filterGrade} onChange={(e) => setFilterGrade(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg"><option value="all">전체 등급</option>{grades.map(g => <option key={g} value={g}>{g}</option>)}</select>
|
|
<div className="flex gap-1">
|
|
{['all', 'active', 'inactive'].map(status => (
|
|
<button key={status} onClick={() => setFilterStatus(status)} className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium ${filterStatus === status ? (status === 'active' ? 'bg-blue-600 text-white' : status === 'inactive' ? 'bg-gray-600 text-white' : 'bg-gray-800 text-white') : 'bg-gray-100 text-gray-600'}`}>
|
|
{status === 'all' ? '전체' : status === 'active' ? '활성' : '비활성'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredCustomers.map(item => (
|
|
<div key={item.id} onClick={() => handleEdit(item)} className="bg-white rounded-xl border border-gray-200 p-6 cursor-pointer hover:shadow-lg transition-shadow">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 className="font-bold text-gray-900">{item.name}</h3>
|
|
<p className="text-sm text-gray-500">{item.industry}</p>
|
|
</div>
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${getGradeColor(item.grade)}`}>{item.grade}</span>
|
|
</div>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center gap-2 text-gray-600"><Building className="w-4 h-4" /><span>대표: {item.ceo}</span></div>
|
|
<div className="flex items-center gap-2 text-gray-600"><Phone className="w-4 h-4" /><span>{item.contact}</span></div>
|
|
<div className="flex items-center gap-2 text-gray-600"><Mail className="w-4 h-4" /><span className="truncate">{item.email}</span></div>
|
|
</div>
|
|
<div className="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
|
|
<span className="text-sm text-gray-500">담당: {item.manager}</span>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${item.status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500'}`}>
|
|
{item.status === 'active' ? '활성' : '비활성'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{showModal && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '고객사 등록' : '고객사 수정'}</h3>
|
|
<button onClick={() => setShowModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">회사명 *</label><input type="text" value={formData.name} onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))} placeholder="(주)회사명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">사업자번호</label><input type="text" value={formData.bizNo} onChange={(e) => setFormData(prev => ({ ...prev, bizNo: e.target.value }))} placeholder="123-45-67890" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">대표자</label><input type="text" value={formData.ceo} onChange={(e) => setFormData(prev => ({ ...prev, ceo: e.target.value }))} placeholder="대표자명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">업종</label><select value={formData.industry} onChange={(e) => setFormData(prev => ({ ...prev, industry: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{industries.map(i => <option key={i} value={i}>{i}</option>)}</select></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">등급</label><select value={formData.grade} onChange={(e) => setFormData(prev => ({ ...prev, grade: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{grades.map(g => <option key={g} value={g}>{g}</option>)}</select></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">연락처</label><input type="text" value={formData.contact} onChange={(e) => setFormData(prev => ({ ...prev, contact: e.target.value }))} placeholder="02-1234-5678" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">이메일</label><input type="email" value={formData.email} onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))} placeholder="email@company.co.kr" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">주소</label><input type="text" value={formData.address} onChange={(e) => setFormData(prev => ({ ...prev, address: e.target.value }))} placeholder="주소" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">담당자</label><input type="text" value={formData.manager} onChange={(e) => setFormData(prev => ({ ...prev, manager: e.target.value }))} placeholder="담당자명" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">담당자 연락처</label><input type="text" value={formData.managerPhone} onChange={(e) => setFormData(prev => ({ ...prev, managerPhone: e.target.value }))} placeholder="010-1234-5678" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">상태</label><select value={formData.status} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg"><option value="active">활성</option><option value="inactive">비활성</option></select></div>
|
|
<div><label className="block text-sm font-medium text-gray-700 mb-1">메모</label><input type="text" value={formData.memo} onChange={(e) => setFormData(prev => ({ ...prev, memo: e.target.value }))} placeholder="메모" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 mt-6">
|
|
{modalMode === 'edit' && <button onClick={() => handleDelete(editingItem.id)} className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2"><span>🗑️</span> 삭제</button>}
|
|
<button onClick={() => setShowModal(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">취소</button>
|
|
<button onClick={handleSave} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">{modalMode === 'add' ? '등록' : '저장'}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const rootElement = document.getElementById('customers-root');
|
|
if (rootElement) { ReactDOM.createRoot(rootElement).render(<CustomersManagement />); }
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|