blob: c20aaa5b2d280ccb2ba792ccc0103c097da36c7e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import Menu from '@/lib/auth/components/Menu';
import { useState } from 'react';
import * as XLSX from 'xlsx';
const ProductsRecomendation = ({ id }) => {
const [excelData, setExcelData] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
if (excelData) {
// Lakukan operasi pencarian atau operasi lainnya di sini
console.log('ini data excel',excelData); // Contoh: Menampilkan data excel ke konsol
} else {
console.log('No excel data available');
}
};
const handleFileChange = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1, range: 1 });
setExcelData(jsonData);
};
reader.readAsArrayBuffer(file);
};
return (
<div className='container mx-auto flex py-10'>
<div className='w-3/12 pr-4'>
<Menu />
</div>
<div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
<div className='flex mb-6 items-center justify-between'>
<h1 className='text-title-sm font-semibold'>
Generate Recomendation
</h1>
</div>
<div className='group'>
<h1 className='text-sm font-semibold'>Contoh Excel</h1>
<table className='table-data'>
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tekiro Long Nose Pliers Tang Lancip</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
<div className='container mx-auto mt-8'>
<form onSubmit={handleSubmit}>
<div className='mb-4'>
<label htmlFor='excelFile' className='text-sm font-semibold'>
Upload Excel File (.xlsx)
</label>
<input
type='file'
id='excelFile'
accept='.xlsx'
onChange={handleFileChange}
className='mt-1 p-2 block w-full border border-gray-300 rounded-md focus:outline-none focus:border-blue-500'
/>
</div>
<button
type='submit'
className='bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600'
>
Generate
</button>
</form>
</div>
</div>
</div>
);
};
export default ProductsRecomendation;
|
