diff --git a/src/components/Global/CardList.jsx b/src/components/Global/CardList.jsx new file mode 100644 index 0000000..624bca8 --- /dev/null +++ b/src/components/Global/CardList.jsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd'; +import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'; + +const { Text } = Typography; + +const CardList = ({ + data, + column, + header, + showPreviewModal, + showEditModal, + showDeleteDialog, + cardColor, +}) => { + const getCardStyle = () => { + const color = cardColor ?? '#F3EDEA'; // Orange color + return { + border: `2px solid ${color}`, + borderRadius: '8px', + textAlign: 'center', // Center text + }; + }; + + const getTitleStyle = (color) => { + const backgroundColor = color ?? '#FCF2ED'; + return { + backgroundColor, + color: '#fff', + padding: '2px 8px', + borderRadius: '4px', + display: 'inline-block', // ganti inline-block → block + width: 'fit-content', // biar lebarnya tetap menyesuaikan teks + }; + }; + + return ( + + {data.map((item) => ( + + + + {item[header]} + + + } + style={getCardStyle()} + actions={[ + + - - - ))} - - + }, + { value: 'table', icon: }, + ]} + value={viewMode} + onChange={setViewMode} + /> + {(isMobile && mobile) || viewMode === 'card' ? ( + ) : ( - {/* TABLE */} ({ ...item, key: index }))} pagination={false} loading={gridLoading} - scroll={{ - y: 520, - }} + scroll={{ y: 520 }} /> - - {/* PAGINATION */} - - - -
- Menampilkan {pagingResponse.totalPage} Data dari{' '} - {pagingResponse.perPage} Halaman -
- - - - - - )} + {/* PAGINATION */} + + +
+ Menampilkan {pagingResponse.totalPage} Data dari {pagingResponse.perPage}{' '} + Halaman +
+ + + + + ); }); diff --git a/src/pages/master/brandDevice/component/ListBrandDevice.jsx b/src/pages/master/brandDevice/component/ListBrandDevice.jsx index eb9c3aa..1cf3a3e 100644 --- a/src/pages/master/brandDevice/component/ListBrandDevice.jsx +++ b/src/pages/master/brandDevice/component/ListBrandDevice.jsx @@ -137,7 +137,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [ ]; const ListBrandDevice = memo(function ListBrandDevice(props) { - const [showFilter, setShowFilter] = useState(false); const [trigerFilter, setTrigerFilter] = useState(false); const [brandDeviceData, setBrandDeviceData] = useState(initialBrandDeviceData); @@ -208,11 +207,6 @@ const ListBrandDevice = memo(function ListBrandDevice(props) { } }, [props.actionMode, brandDeviceData]); - const toggleFilter = () => { - setFormDataFilter(defaultFilter); - setShowFilter((prev) => !prev); - }; - const doFilter = () => { setTrigerFilter((prev) => !prev); }; @@ -370,6 +364,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) { [ { @@ -113,10 +98,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [ ]; const ListDevice = memo(function ListDevice(props) { - const [showFilter, setShowFilter] = useState(false); const [trigerFilter, setTrigerFilter] = useState(false); - const [viewMode, setViewMode] = useState('card'); - const [deviceData, setDeviceData] = useState([]); const defaultFilter = { criteria: '' }; const [formDataFilter, setFormDataFilter] = useState(defaultFilter); @@ -124,15 +106,6 @@ const ListDevice = memo(function ListDevice(props) { const navigate = useNavigate(); - const fetchData = async () => { - try { - const response = await getAllDevice(formDataFilter); - setDeviceData(response.data.data); - } catch (error) { - console.error("Failed to fetch device data:", error); - } - }; - useEffect(() => { const token = localStorage.getItem('token'); if (token) { @@ -145,15 +118,6 @@ const ListDevice = memo(function ListDevice(props) { } }, [props.actionMode]); - useEffect(() => { - fetchData(); - }, [trigerFilter]); - - const toggleFilter = () => { - setFormDataFilter(defaultFilter); - setShowFilter((prev) => !prev); - }; - const doFilter = () => { setTrigerFilter((prev) => !prev); }; @@ -213,85 +177,6 @@ const ListDevice = memo(function ListDevice(props) { } }; - const generatePdf = () => { - props.setActionMode('generatepdf'); - }; - - const exportExcel = async () => { - const data = getFilterData(); - - const workbook = new ExcelJS.Workbook(); - const sheet = workbook.addWorksheet('Data APD'); - let rowCursor = 1; - if (logoPiEnergi) { - const response = await fetch(logoPiEnergi); - const blob = await response.blob(); - const buffer = await blob.arrayBuffer(); - - const imageId = workbook.addImage({ - buffer, - extension: 'png', - }); - - sheet.addImage(imageId, { - tl: { col: 0.2, row: 0.8 }, - ext: { width: 163, height: 80 }, - }); - - sheet.getRow(5).height = 15; - rowCursor = 3; - } - - const titleCell = sheet.getCell(`C${rowCursor}`); - titleCell.value = 'Data APD'; - titleCell.font = { size: 20, bold: true, color: { argb: 'FF00AEEF' } }; - titleCell.alignment = { vertical: 'middle', horizontal: 'center' }; - sheet.mergeCells(`C${rowCursor}:F${rowCursor}`); - - const headers = [ - 'ID APD', - 'Nama APD', - 'Deskripsi', - 'Jenis Permit Default', - 'Aktif', - 'Dibuat', - 'Diubah', - ]; - sheet.addRow(headers); - const headerRow = sheet.getRow(6); - headerRow.font = { bold: true, size: 12 }; - headerRow.eachCell((cell) => { - cell.alignment = { - horizontal: 'center', - vertical: 'middle', - }; - }); - - data.forEach((item) => { - sheet.addRow([ - item.id_apd, - item.nama_apd, - item.deskripsi_apd ?? '', - item.jenis_permit_default ?? '', - item.is_active ? 'Ya' : 'Tidak', - new Date(item.created_at).toLocaleString(), - new Date(item.updated_at).toLocaleString(), - ]); - }); - - sheet.columns.forEach((col) => { - let maxLength = 10; - col.eachCell({ includeEmpty: true }, (cell) => { - const len = cell.value?.toString().length || 0; - if (len > maxLength) maxLength = len; - }); - col.width = maxLength + 2; - }); - - const buffer = await workbook.xlsx.writeBuffer(); - saveAs(new Blob([buffer]), 'Data_APD.xlsx'); - }; - return ( @@ -331,14 +216,6 @@ const ListDevice = memo(function ListDevice(props) { - }, - { value: 'table', icon: }, - ]} - value={viewMode} - onChange={setViewMode} - /> - {viewMode === 'card' ? ( - - ) : ( - - )} + diff --git a/src/pages/master/tag/component/ListTag.jsx b/src/pages/master/tag/component/ListTag.jsx index 7f9fdb3..270561e 100644 --- a/src/pages/master/tag/component/ListTag.jsx +++ b/src/pages/master/tag/component/ListTag.jsx @@ -274,6 +274,12 @@ const ListTag = memo(function ListTag(props) {