\r\n {filteredOptions.map((option) => {\r\n // Splitting the option into productName and productType\r\n const [productName, productType] = option.split(/\\s+\\(|\\)/);\r\n return (\r\n handleAutocompleteClick(option)}\r\n className='filter-option'\r\n >\r\n
\r\n );\r\n })}\r\n \r\n )}\r\n \r\n );\r\n case 'changelogDateAndTime':\r\n case 'transactionDateAndTime':\r\n return \r\n {productName}\r\n \r\n ({productType})\r\n \r\n
\r\n \r\n \r\n
\r\n break;\r\n default:\r\n return filteredOptions.map((option) => (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n setStartDate((p) => ({...p, date: e.target.value}))}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n setEndDate((p) => ({...p, date: e.target.value}))}\r\n />\r\n
\r\n {errorMessage}
\r\n\r\n \r\n
\r\n \r\n {option}\r\n
\r\n \r\n ));\r\n }\r\n };\r\n\r\n return (\r\n \r\n {renderOptions()}\r\n
\r\n );\r\n}\r\n","import React, {useState, useEffect, useMemo} from \"react\";\r\nimport '../../styles/dashboard-page/tables.css'\r\nimport '../../styles/dashboard-page/pills.css'\r\nimport FilterDropdown from \"./filter-dropdown\";\r\nimport { empty_result } from \"../../assets/svg\";\r\nimport SearchBar from \"../navigation/search-bar\";\r\n\r\nexport default function TableTemplate(props){\r\n const {tableData, archived, fromModal, returnData, setRows, actionSubmitted, isSmallTable} = props\r\n const [selectedRows, setSelectedRows] = useState([]);\r\n const [isMultipleSelectionEnabled, setMultipleSelectionEnabled] = useState(false);\r\n const [filters, setFilters] = useState({});\r\n const [sortConfig, setSortConfig] = useState(null);\r\n const [filterDropdownOpen, setFilterDropdownOpen] = useState({});\r\n const [isSortedOrFiltered, setIsSortedOrFiltered] = useState(false); // State to track if the list is sorted or filtered\r\n const [headerNames, setHeaderNames] = useState(tableData.tableHeaders.map(header => header.headerName));\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [rowsPerPage, setRowsPerPage] = useState(tableData.noOfItemsInTable);\r\n const pillTypes = tableData?.hasPills?.[1]?.pillTypes || [];\r\n const getCellStyleForType = (type) => {\r\n const cases = pillTypes.map(pillType => (\r\n `\r\n case '${pillType}':\r\n return '${pillType}';\r\n `\r\n ));\r\n return eval(`\r\n (function() {\r\n switch (type) {\r\n // Dynamically generate cases based on pillTypes\r\n ${cases.join('\\n')}\r\n default:\r\n return ''; // Use a default style if needed\r\n }\r\n })()\r\n `);\r\n };\r\n\r\n const filteredAndSortedData = useMemo(() => {\r\n let filteredAndSortedTableData = [...tableData.tableData];\r\n \r\n // Apply filtering\r\n Object.keys(filters).forEach((headerId) => {\r\n const value = filters[headerId];\r\n if (value) {\r\n if (headerId === \"type\") {\r\n filteredAndSortedTableData = filteredAndSortedTableData.filter((row) =>\r\n row[headerId].includes(value)\r\n );\r\n } else if (headerId === \"changelogDateAndTime\" || headerId === \"transactionDateAndTime\") {\r\n const [startDateString, endDateString] = value.split(' - ');\r\n \r\n // Convert date strings to Date objects\r\n const startDate = new Date(startDateString.trim());\r\n const endDate = new Date(endDateString.trim());\r\n \r\n // Adjust endDate to include the whole day\r\n endDate.setDate(endDate.getDate() + 1);\r\n \r\n filteredAndSortedTableData = filteredAndSortedTableData.filter((row) => {\r\n const rowDate = new Date(row[headerId]);\r\n return rowDate >= startDate && rowDate < endDate;\r\n });\r\n } else {\r\n filteredAndSortedTableData = filteredAndSortedTableData.filter((row) =>\r\n row[headerId].toLowerCase().includes(value.toLowerCase())\r\n );\r\n }\r\n }\r\n });\r\n \r\n filteredAndSortedTableData = filteredAndSortedTableData.filter(row => row.isArchived !== archived);\r\n \r\n // Apply sorting if sortConfig is defined\r\n if (sortConfig) {\r\n filteredAndSortedTableData.sort((a, b) => {\r\n let aValue = a[sortConfig.key];\r\n let bValue = b[sortConfig.key];\r\n \r\n // Check for specific headers\r\n if (sortConfig.key === 'balance' || sortConfig.key === 'price') {\r\n aValue = parseFloat(aValue);\r\n bValue = parseFloat(bValue);\r\n \r\n return sortConfig.direction === \"ascending\" ? aValue - bValue : bValue - aValue;\r\n }\r\n \r\n // Check for integers\r\n const isInteger = (value) => !isNaN(value) && !value.toString().includes('.');\r\n if (isInteger(aValue) && isInteger(bValue)) {\r\n aValue = parseInt(aValue, 10);\r\n bValue = parseInt(bValue, 10);\r\n \r\n return sortConfig.direction === \"ascending\" ? aValue - bValue : bValue - aValue;\r\n }\r\n \r\n // Check for dates\r\n const isDate = (value) => !isNaN(Date.parse(value));\r\n if (isDate(aValue) && isDate(bValue)) {\r\n aValue = new Date(aValue);\r\n bValue = new Date(bValue);\r\n \r\n return sortConfig.direction === \"ascending\" ? aValue - bValue : bValue - aValue;\r\n }\r\n \r\n // Default string sorting\r\n aValue = String(aValue).toLowerCase();\r\n bValue = String(bValue).toLowerCase();\r\n \r\n if (aValue < bValue) {\r\n return sortConfig.direction === \"ascending\" ? -1 : 1;\r\n }\r\n if (aValue > bValue) {\r\n return sortConfig.direction === \"ascending\" ? 1 : -1;\r\n }\r\n \r\n if (sortConfig.key === 'id' && aValue === bValue) {\r\n let aSecondary = a['bjmpBranch'].toLowerCase();\r\n let bSecondary = b['bjmpBranch'].toLowerCase();\r\n return sortConfig.direction === \"ascending\" ? (aSecondary < bSecondary ? -1 : 1) : (aSecondary > bSecondary ? -1 : 1);\r\n }\r\n \r\n return 0;\r\n });\r\n }\r\n \r\n return filteredAndSortedTableData;\r\n }, [tableData.tableData, filters, sortConfig, archived]);\r\n \r\n \r\n const totalPages = Math.ceil(filteredAndSortedData.length / rowsPerPage);\r\n const indexOfLastRow = currentPage * rowsPerPage;\r\n const indexOfFirstRow = indexOfLastRow - rowsPerPage;\r\n const currentRows = filteredAndSortedData.slice(indexOfFirstRow, indexOfLastRow);\r\n\r\n const handlePageChange = (pageNumber) => {\r\n if (pageNumber < 1 || pageNumber > totalPages) {\r\n return; // Do nothing if the page number is out of bounds\r\n }\r\n setCurrentPage(pageNumber);\r\n };\r\n const renderPaginationButtons = () => {\r\n const pageNumbers = [];\r\n for (let i = 1; i <= totalPages; i++) {\r\n pageNumbers.push(i);\r\n }\r\n\r\n const indexOfLastRow = currentPage * rowsPerPage;\r\n const indexOfFirstRow = indexOfLastRow - rowsPerPage + 1;\r\n const lastItemIndex = Math.min(indexOfLastRow, filteredAndSortedData.length);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\n const handleFilterChange = (headerId, value) => {\r\n const updatedFilters = { ...filters, [headerId]: value };\r\n setFilters(updatedFilters);\r\n setIsSortedOrFiltered(true);\r\n setFilterDropdownOpen(false);\r\n \r\n // Update the header names with new filter values\r\n const updatedHeaderNames = tableData.tableHeaders.map((header) => {\r\n if (header.headerId === headerId) {\r\n return value ? `${header.headerName} (${value})` : header.headerName; // Update filter text\r\n }\r\n // If another filter is already applied, keep the previous filter text\r\n if (filters[header.headerId]) {\r\n const oldValue = filters[header.headerId];\r\n return `${header.headerName} (${oldValue})`;\r\n }\r\n return header.headerName;\r\n });\r\n setHeaderNames(updatedHeaderNames);\r\n };\r\n \r\n const resetHeaderNames = () => {\r\n const originalHeaderNames = tableData.tableHeaders.map(header => header.headerName);\r\n setHeaderNames(originalHeaderNames);\r\n };\r\n \r\n // Function to apply filtering to table data\r\n const generateFilterDropdowns = () => {\r\n const dataToRender = currentRows;\r\n const dataLength = dataToRender.length;\r\n \r\n return tableData.tableHeaders.map((header, index) => {\r\n if (header.headerId === 'dateArchived' && archived) {\r\n return null;\r\n }\r\n return(\r\n - \r\n
- \r\n \r\n \r\n {pageNumbers.map((number) => (\r\n
- \r\n \r\n \r\n ))}\r\n
- \r\n \r\n \r\n
\r\n {pageNumbers.length !== 0 ? `${indexOfFirstRow}-${lastItemIndex} out of ${filteredAndSortedData.length}` : 'No items available'}\r\n
\r\n \r\n {headerNames[index]}\r\n {header.hasFilter && (\r\n handleFilterClick(header.headerId)}\r\n style={{cursor: 'pointer'}}\r\n >\r\n )}\r\n {filterDropdownOpen[header.headerId] && ( // Check if the dropdown should be open\r\n handleFilterChange(header.headerId, value)}\r\n />\r\n )}\r\n {header.hasLowHigh &&(\r\n
\r\n handleSort(header.headerId)} >\r\n handleFilterChange(header.headerId, value)}\r\n >\r\n\r\n
\r\n )}\r\n {\r\n if (returnData !== null) {\r\n if (transactionReceiptLink !== null || transactionType !== null){\r\n action.actionFunctionality.function(returnData, dbpkData, transactionReceiptLink, transactionType, bjmpBranch)\r\n } else {\r\n action.actionFunctionality.function(returnData, dbpkData, bjmpBranch);\r\n }\r\n } \r\n else {\r\n action.actionFunctionality.function();\r\n }\r\n }}>\r\n \r\n {action.actionName}\r\n
\r\n ));\r\n };\r\n \r\n const handleRowClick = (pk, unselectable=false, dbpk, bjmpBranch) => {\r\n if (isMultipleSelectionEnabled && pk && !unselectable) { \r\n setSelectedRows((prevSelectedRows) => {\r\n const isSelected = prevSelectedRows.some((row) => row.pk === pk);\r\n if (isSelected) {\r\n return prevSelectedRows.filter((row) => row.pk !== pk);\r\n } else {\r\n return [...prevSelectedRows, { pk, dbpk, bjmpBranch }];\r\n }\r\n });\r\n setRows((prevSelectedRows) => {\r\n const isSelected = prevSelectedRows.some((row) => row.pk === pk);\r\n if (isSelected) {\r\n return prevSelectedRows.filter((row) => row.pk !== pk);\r\n } else {\r\n return [...prevSelectedRows, { pk, dbpk, bjmpBranch }];\r\n }\r\n });\r\n }\r\n };\r\n \r\n const renderTableRows = () => {\r\n const dataToRender = currentRows;\r\n const dataLength = dataToRender.length;\r\n\r\n const rowsToRender = rowsPerPage;\r\n if (dataLength === 0) {\r\n return (\r\n\r\n \r\n 
\r\n
\r\n \r\n There is no data present at the moment.\r\n
\r\n {rowData[header.headerId].map((type, i) => (\r\n
\r\n : (header.headerId === \"balance\" || header.headerId === \"price\" || header.headerId === 'transactionAmount' || header.headerId === 'spendingTotal') && hasData && rowData[header.headerId]\r\n ? `₱${rowData[header.headerId]}`\r\n : header.headerId === \"status\" && rowData[header.headerId] ? \r\n \r\n
\r\n ))}\r\n
\r\n : header.headerId === \"userType\" && rowData[header.headerId] ? \r\n \r\n {rowData['remStock']}pcs left\r\n
\r\n \r\n
\r\n : header.headerId === \"isApproved\" && rowData[header.headerId] ? \r\n \r\n
\r\n \r\n
\r\n : rowData[header.headerId]}\r\n \r\n {rowData['isApproved'] !== 'False' ? () : ()}\r\n
\r\n \r\n
\r\n \r\n )\r\n}","export const BRANCHES = [\r\n {\r\n label: 'Main Regional Office',\r\n facilities: ['BJMPRO-III Main Office']\r\n },\r\n {\r\n label: 'Provincial Jail of Bataan',\r\n facilities: [\r\n 'Bataan District Jail Male Dormitory',\r\n 'Bataan District Jail Female Dormitory',\r\n 'Balanga City Jail',\r\n 'Mariveles Municipal Jail',\r\n 'Dinalupihan Municipal Jail',\r\n ]\r\n },\r\n {\r\n label: 'Provincial Jail of Bulacan',\r\n facilities: [\r\n 'Balagtas District Jail',\r\n 'Baliwag City Jail',\r\n 'Malolos City Jail',\r\n 'Marilao Municipal Jail',\r\n 'Meycauayan City Jail',\r\n 'Plaridel Municipal Jail Male Dorm',\r\n 'Plaridel Municipal Jail Female Dorm',\r\n 'Pulilan Municipal Jail',\r\n 'San Jose Del Monte City Jail Male Dorm',\r\n 'San Jose Del Monte City Jail Female Dorm',\r\n 'Sta. Maria Municipal Jail',\r\n 'Bocaue Municipal Jail',\r\n 'Guiguinto Municipal Jail',\r\n ]\r\n },\r\n {\r\n label: 'Provincial Jail of Nueva Ecija',\r\n facilities: [\r\n 'Cabanatuan City District Jail Male Dormitory',\r\n 'Cabanatuan City District Jail Female Dormitory',\r\n 'Gapan City Jail',\r\n 'Guimba District Jail',\r\n 'San Jose City District Jail',\r\n 'Talavera Municipal Jail',\r\n ]\r\n },\r\n {\r\n label: 'Provincial Jail of Pampanga',\r\n facilities: [\r\n 'Angeles District Jail Male Dormitory',\r\n 'Angeles District Jail Female Dormitory',\r\n 'Arayat District Jail',\r\n 'Guagua District Jail Male Dorm',\r\n 'Guagua District Jail Female Dormitory',\r\n 'San Fernando District Jail Male Dormitory',\r\n 'San Fernando District Jail Female Dormitory',\r\n ]\r\n },\r\n {\r\n label: 'Provincial Jail of Tarlac',\r\n facilities: [\r\n 'Paniqui Municipal Jail',\r\n 'Tarlac City Jail Male Dorm',\r\n 'Tarlac City Jail Female Dorm',\r\n 'Camiling Municipal Jail',\r\n ]\r\n },\r\n {\r\n label: 'Provincial Jail of Zambales',\r\n facilities: [\r\n 'Olongapo District Jail Male Dormitory',\r\n 'Olongapo District Jail Female Dormitory',\r\n ]\r\n },\r\n {\r\n label: 'Provincial Jail of Aurora',\r\n facilities: [\r\n 'Baler Municipal Jail',\r\n ]\r\n },\r\n\r\n ];","const MONTHS = [\r\n 'January', 'February', 'March', 'April', 'May', 'June', \r\n 'July', 'August', 'September', 'October', 'November', 'December'\r\n ];\r\n const CURRENTYEAR = new Date().getFullYear();\r\n const CURRENTMONTH = new Date().getMonth();\r\n\r\n const YEARS = [];\r\n for (let i = CURRENTYEAR; i >= 1970; i--) {\r\n YEARS.push(i);\r\n }\r\n\r\n export {\r\n MONTHS,\r\n YEARS,\r\n CURRENTYEAR,\r\n CURRENTMONTH,\r\n }","const ADD_TITLE = \"Added\"\r\nconst EDIT_TITLE = \"Edited\";\r\nconst ARCHIVE_TITLE = \"Archived\";\r\nconst RETRIEVE_TITLE = \"Retrieved\";\r\nconst DELETE_TITLE = \"Deleted\";\r\n\r\nconst ADD_DESCRIPTION = \"has been added!\";\r\nconst EDIT_DESCRIPTION = \"has been edited!\";\r\nconst ARCHIVE_DESCRIPTION = \"has been archived!\";\r\nconst RETRIEVE_DESCRIPTION = \"has been retrieved!\";\r\nconst DELETE_DESCRIPTION = \"has been deleted!\";\r\n\r\nexport{\r\n ADD_TITLE,\r\n ADD_DESCRIPTION,\r\n EDIT_TITLE,\r\n EDIT_DESCRIPTION,\r\n ARCHIVE_TITLE,\r\n ARCHIVE_DESCRIPTION,\r\n RETRIEVE_TITLE,\r\n RETRIEVE_DESCRIPTION,\r\n DELETE_TITLE,\r\n DELETE_DESCRIPTION,\r\n}","import { BRANCHES } from \"./branches\";\r\nimport { CURRENTMONTH, CURRENTYEAR, MONTHS, YEARS } from \"./date\";\r\nimport { POSITIONS } from \"./positions\";\r\nimport { ADD_DESCRIPTION, ADD_TITLE, \r\n ARCHIVE_DESCRIPTION, ARCHIVE_TITLE, \r\n DELETE_DESCRIPTION, DELETE_TITLE, \r\n EDIT_DESCRIPTION, EDIT_TITLE, \r\n RETRIEVE_DESCRIPTION, RETRIEVE_TITLE } from \"./successful-action-text\";\r\n\r\n//const DOMAIN = 'http://localhost:80/bjmppos/api/' ;\r\nconst DOMAIN = 'https://bjmpro3pos.com/api/' ;\r\nconst SECUGEN = 'https://localhost:8443/';\r\nconst TABLE_BIG_CONTENT = 20;\r\nconst TABLE_MEDIUM_CONTENT = 10;\r\nconst TABLE_SMALL_CONTENT = 5;\r\nexport {\r\n DOMAIN,\r\n SECUGEN,\r\n BRANCHES,\r\n POSITIONS,\r\n TABLE_BIG_CONTENT,\r\n TABLE_MEDIUM_CONTENT,\r\n TABLE_SMALL_CONTENT,\r\n ADD_TITLE, ADD_DESCRIPTION,\r\n EDIT_TITLE, EDIT_DESCRIPTION,\r\n ARCHIVE_TITLE, ARCHIVE_DESCRIPTION,\r\n RETRIEVE_TITLE, RETRIEVE_DESCRIPTION,\r\n DELETE_TITLE, DELETE_DESCRIPTION, \r\n MONTHS, YEARS, CURRENTMONTH, CURRENTYEAR\r\n}\r\n","export const POSITIONS = [\r\n {\r\n label: 'Officers',\r\n positions: [\r\n 'Jail Chief Superintendent (JCSupt.)',\r\n 'Jail Senior Superintendent (JSSupt.)',\r\n 'Jail Superintendent (JSupt.)',\r\n 'Jail Chief Inspector (JCInsp.)',\r\n 'Jail Senior Inspector (JSInsp.)',\r\n 'Jail Inspector (JInsp.)',\r\n ]\r\n },\r\n {\r\n label: 'Non-Commissioned Personnel and Agents',\r\n positions: [\r\n 'Senior Jail Officer IV (SJO4)',\r\n 'Senior Jail Officer III (SJO3)',\r\n 'Senior Jail Officer II (SJO2)',\r\n 'Senior Jail Officer I (SJO1)',\r\n 'Jail Officer III (JO3)',\r\n 'Jail Officer II (JO2)',\r\n 'Jail Officer I (JO1)',\r\n ]\r\n },\r\n {\r\n label: 'Non-Uniformed Personnel',\r\n positions: [\r\n 'Non-Uniformed Personnel (NUP)',\r\n ]\r\n }\r\n]","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\n/**\n * Use invariant() to assert state which your program assumes to be true.\n *\n * Provide sprintf-style format (only %s is supported) and arguments\n * to provide information about what broke and what you were\n * expecting.\n *\n * The invariant message will be stripped in production, but the invariant\n * will remain to ensure logic does not differ in production.\n */\n\nvar invariant = function(condition, format, a, b, c, d, e, f) {\n if (process.env.NODE_ENV !== 'production') {\n if (format === undefined) {\n throw new Error('invariant requires an error message argument');\n }\n }\n\n if (!condition) {\n var error;\n if (format === undefined) {\n error = new Error(\n 'Minified exception occurred; use the non-minified dev environment ' +\n 'for the full error message and additional helpful warnings.'\n );\n } else {\n var args = [a, b, c, d, e, f];\n var argIndex = 0;\n error = new Error(\n format.replace(/%s/g, function() { return args[argIndex++]; })\n );\n error.name = 'Invariant Violation';\n }\n\n error.framesToPop = 1; // we don't care about invariant's own frame\n throw error;\n }\n};\n\nmodule.exports = invariant;\n","/**\n * @license React\n * react-dom.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n Modernizr 3.0.0pre (Custom Build) | MIT\n*/\n'use strict';var aa=require(\"react\"),ca=require(\"scheduler\");function p(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;c\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {tableData.tableName}
\r\n\r\n {tableData.hasPills[0] ? (\r\n
\r\n \r\n
\r\n ) : null}\r\n\r\n {generateButtons(tableData.buttonsInTable, archived)}\r\n {\r\n tableData.searchAvailable &&\r\n (\r\n \r\n
\r\n \r\n {pillTypes.map(pillType => (\r\n
\r\n \r\n {pillType}\r\n
\r\n ))}\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n \r\n \r\n \r\n {\r\n isMultipleSelectionEnabled && (\r\n
\r\n \r\n
\r\n | \r\n Select\r\n | \r\n )\r\n } \r\n {generateFilterDropdowns()}\r\n {!isMultipleSelectionEnabled && tableData.tableActions && tableData.tableActions.length > 0 && (\r\n\r\n Actions\r\n | \r\n )}\r\n \r\n \r\n \r\n {renderTableRows()}\r\n \r\n\r\n
|---|
\r\n {renderPaginationButtons()}\r\n
\r\n