\n \n Tabela prezentuje ranking OPK wg wyniku.\n
\n \n BU - wartość budżetu\n
\n \n Δ % - wartość dodatnia {\" \"}\n - odchylenie pozytywne - oznacza wykonanie większe niż\n budżet\n
\n \n Δ % {` - `}\n \n wartość ujemna{\" \"}\n \n - odchylenie negatywne - oznacza wykonanie mniejsze niż\n budżet\n
\n \n Wynik - wartość\n wykonana\n
\n \n \n Udział % OPK w przychodzie\n {\" \"}\n - udział wybranego OPK w przychodzie grupy, dla której\n wykonano raport. Im większy % tym większy udział OPK.\n
\n \n Udział % OPK w koszcie {\" \"}\n - udział wybranego OPK w kosztach grupy, dla której wykonano\n raport. Im większy % ym większy udział OPK.\n
\n \n }\n data={data[0].ranking_by_profit}\n columns={[\n {\n name: \"OPK\",\n align: \"left\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"OPK\",\n datalen: \"\",\n },\n {\n name: \"BU\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"5px double\" },\n datadef: \"profit_BU\",\n datalen: 0,\n },\n {\n name: \"Δ %\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"profit_delta\",\n datalen: 2,\n },\n {\n name: \"Wynik\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"4px solid\" },\n datadef: \"profit_ACT\",\n datalen: 0,\n },\n {\n name: \"Udział % OPK w przychodzie\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"income_share\",\n datalen: 2,\n },\n {\n name: \"Udział % OPK w koszcie\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"cost_share\",\n datalen: 2,\n },\n ]}\n />\n \n {activeYard ?\n (!loaded ? \n Wczytywanie danych raportu\n : Brak danych \n )\n :\n Wybierz Grupę OPK \n }\n
\n )}\n \n \n );\n}\n","import React from \"react\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Paper from \"@material-ui/core/Paper\";\nimport MTooltip from \"@material-ui/core/Tooltip\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Typography from \"@material-ui/core/Typography\";\n\nconst SummaryTable = (props) => {\n const HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: \"white\",\n color: \"black\",\n maxWidth: 600,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n fontWeight: \"100\",\n //border: '1px solid #FE8E3C',\n boxShadow: \"10px 10px 24px -1px rgba(70,70,70,0.75)\",\n },\n }))(MTooltip);\n\n return (\n \n \n \n \n \n \n {props.tipTitle} \n {props.tipBody}\n \n }\n >\n \n {props.title}\n \n \n {props.columns &&\n props.columns.map((col) => (\n \n {col.header.name}\n \n ))}\n {!props.columns && (\n \n Wynik j.\n \n )}\n {!props.columns && (\n \n Wynik\n \n )}\n \n \n \n {props.data && props.data.map((row) => (\n \n \n {row.jgp_id}\n \n {props.columns &&\n props.columns.map((col) => (\n \n {row[col.data.name].toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n ))}\n {!props.columns && (\n \n {row.profit_per_unit.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n )}\n {!props.columns && (\n \n {row.profit.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n )}\n \n ))}\n \n
\n \n \n );\n};\n\nexport default SummaryTable;\n","import React from \"react\";\nimport MTooltip from '@material-ui/core/Tooltip';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport {\n BarChart,\n Cell,\n Bar,\n XAxis,\n YAxis,\n Tooltip,\n ResponsiveContainer,\n} from \"recharts\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Paper from \"@material-ui/core/Paper\";\n\nconst RankingChart = (props) => {\n\n const HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: 'white',\n color: 'black',\n maxWidth: 600,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n fontWeight: \"100\",\n //border: '1px solid #FE8E3C',\n boxShadow: \"10px 10px 24px -1px rgba(70,70,70,0.75)\"\n },\n }))(MTooltip);\n\n return (\n \n\n \n {props.tipTitle} \n {props.tipBody}\n \n }\n >\n \n {props.title}\n \n \n\n \n {\n {\n return index < 3 || index > all.length - 4 ? item.YARD : \"\";\n })}*/\n tick={false}\n />\n ''} />\n \n {props.data.map((entry, index) => (\n \n \n )\n};\n\nexport default RankingChart;","import React from \"react\";\nimport MTooltip from '@material-ui/core/Tooltip';\nimport { withStyles } from '@material-ui/core/styles';\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TablePagination from '@material-ui/core/TablePagination';\nimport Paper from \"@material-ui/core/Paper\";\nimport Typography from \"@material-ui/core/Typography\";\nimport KeyboardArrowDownIcon from \"@material-ui/icons/KeyboardArrowDown\";\nimport KeyboardArrowRightIcon from \"@material-ui/icons/KeyboardArrowRight\";\nimport {\n BarChart,\n Cell,\n Bar,\n ResponsiveContainer,\n PieChart,\n Pie,\n Tooltip,\n} from \"recharts\";\nimport IconButton from \"@material-ui/core/IconButton\";\n\nconst posorneg = (type, value) => {\n let color = \"black\";\n let posorneg = value < 0 ? false : true;\n if (type === \"cost\") posorneg = !posorneg;\n if (!posorneg) color = \"#FE8E3C\";\n return color;\n};\n\nconst HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: 'white',\n color: 'black',\n maxWidth: 600,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n fontWeight: \"100\",\n //border: '1px solid #FE8E3C',\n boxShadow: \"10px 10px 24px -1px rgba(70,70,70,0.75)\"\n },\n}))(MTooltip);\n\n\nfunction RowKB(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row } = props;\n const [open, setOpen] = React.useState(false);\n\n return (\n \n \n \n {(row.children && row.children.length > 0) && (\n setOpen(!open)}\n >\n {open ? \n \n {row.opk_name}\n \n \n \n {\" \"}\n {row.cost_direct_BU && row.cost_direct_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {row.cost_direct_delta && row.cost_direct_delta.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {row.cost_direct.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n |
\n ))}\n \n );\n }\n\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n I KOSZTY BEZPOŚREDNIE\n \n \n {props.data.costlevels.cost_direct_BU && props.data.costlevels.cost_direct_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {props.data.costlevels.cost_direct_BU && (\n 100 * (props.data.costlevels.cost_direct -\n props.data.costlevels.cost_direct_BU) /\n Math.abs(props.data.costlevels.cost_direct_BU)\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {props.data.costlevels.cost_direct && props.data.costlevels.cost_direct.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n |
\n ))}\n \n );\n}\n\nfunction RowKP(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row } = props;\n const [detailsOpen, setDetailsOpen] = React.useState(false);\n\n const tablerows = [\n { name: \"Nazwa klucza\", value: row.driver },\n {\n name: \"WYK Liczba jednostek klucza\",\n value: row.wqty.toLocaleString(\"pl-PL\", { maximumFractionDigits: 0 }),\n },\n {\n name: \"WYK Stawka kosztów na jednostkę (zł)\",\n value: (row.cost_indirect / row.wqty).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }),\n },\n ];\n\n const data01 = [\n { name: \"OPK\", value: row.wqty },\n { name: \"Pozostałe\", value: row.other },\n ];\n const COLORS = [\"#FE8E3C\", \"#0b6471\"];\n\n return (\n \n \n \n setDetailsOpen(!detailsOpen)}\n >\n {detailsOpen ? (\n \n \n \n {row.opk_name}\n \n \n \n {row.cost_indirect_BU && row.cost_indirect_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {row.cost_indirect_delta && row.cost_indirect_delta.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {row.cost_indirect && row.cost_indirect.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n
\n \n \n \n \n Alokacja kosztów OPK pomocniczego\n \n \n \n \n {tablerows.map((trow, tindex) => (\n \n \n {trow.name}\n \n {trow.value} \n\n \n \n {tindex !== 0 && (\n \n \n \n \n \n )}\n \n \n \n ))}\n \n
\n \n
\n \n Udział w kosztach OPK pomocniczego\n \n \n \n {data01.map((entry, index) => (\n \n \n \n \n \n )}\n \n );\n }\n\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n II KOSZTY OPK POMOCNICZYCH\n \n \n {props.data.costlevels.cost_indirect_BU && props.data.costlevels.cost_indirect_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {props.data.costlevels.cost_indirect_BU && (\n (100 *\n (props.data.costlevels.cost_indirect -\n props.data.costlevels.cost_indirect_BU)) /\n props.data.costlevels.cost_indirect_BU\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {props.data.costlevels.cost_indirect && props.data.costlevels.cost_indirect.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n |
\n ))}\n \n );\n}\n\nfunction RowOPKProc(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row } = props;\n const [detailsOpen, setDetailsOpen] = React.useState(false);\n\n const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n return (\n \n \n \n setDetailsOpen(!detailsOpen)}\n >\n {detailsOpen ? (\n \n \n \n {row.opk_name}\n \n \n \n {row.cost_procedures_BU !== 0 && row.cost_procedures_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {row.cost_procedures_delta !== 0 && row.cost_procedures_delta.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n })}\n \n \n {row.cost_procedures && row.cost_procedures.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n \n \n \n \n Nazwa procedury\n \n Liczba procedur \n Koszt jedn. bezpośredni \n Koszty jedn. bezpośredni + pośredni \n Koszt całkowity \n \n \n \n {row &&\n row.children &&\n row.children.\n slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).\n map((child) => (\n \n \n {child.procedure_name}\n \n \n {child.qty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {child.cost_given_per_unit.toLocaleString(\n \"pl-PL\",\n {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }\n )}\n \n \n {child.cost_calculated_per_unit.toLocaleString(\n \"pl-PL\",\n {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }\n )}\n \n \n {child.cost_calculated.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n ))}\n \n
\n \n \n \n \n )}\n \n );\n }\n\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n III KOSZTY OPK PROCEDURALNYCH\n \n \n {(props.data.costlevels.cost_procedures_BU) ? props.data.costlevels.cost_procedures_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n {(props.data.costlevels.cost_procedures_BU) ? (props.data.costlevels.cost_procedures_BU !== 0) && (\n (100 *\n (props.data.costlevels.cost_procedures -\n props.data.costlevels.cost_procedures_BU)) /\n props.data.costlevels.cost_procedures_BU\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n }) : ''}\n \n \n {props.data.costlevels.cost_procedures && props.data.costlevels.cost_procedures.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n |
\n ))}\n \n );\n}\n\nconst OPKTable = (props) => {\n const [incomeDetailsOpen, setIncomeDetailsOpen] = React.useState(false);\n const [addIncomeOpen, setAddIncomeOpen] = React.useState(false);\n\n return (\n \n\n\n \n {props.tipTitle} \n {props.tipBody}\n \n }\n >\n \n ANALIZA KOSZTÓW I RENTOWNOŚCI OPK\n \n \n\n \n \n \n \n \n \n BU\n \n \n Δ %\n \n \n WYK\n \n \n \n \n \n \n \n WYNIK\n \n \n {props.data.budget.profit_BU && props.data.budget.profit_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {props.data.budgetdata.profit_BU && props.data.budgetdata.profit_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {props.data.yearlydata.profit.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n {props.data.monthlydata.map((entry, index) => (\n \n \n \n \n\n \n \n setIncomeDetailsOpen(!incomeDetailsOpen)}\n >\n {incomeDetailsOpen ? \n PRZYCHODY\n \n \n {props.data.budget.income_BU && props.data.budget.income_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {props.data.budgetdata.income_BU && props.data.budgetdata.income_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {props.data.yearlydata.income.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n {props.data.monthlydata.map((entry, index) => (\n \n \n \n \n\n {incomeDetailsOpen && props.data.incomedetailsdata && Object.entries(props.data.incomedetailsdata).map(entry => {\n const entryIsObject = (typeof entry[1] === 'object') ? true : false;\n return (\n <>\n setAddIncomeOpen(!addIncomeOpen)}\n style={{ cursor: entryIsObject ? 'pointer' : 'default' }}\n >\n \n {entryIsObject ? (addIncomeOpen ? \"-\" : \"+\") : ''}\n \n \n {entry[0]}\n \n \n {entryIsObject ? entry[1]['Total'].toLocaleString(\"pl-PL\", { maximumFractionDigits: 0, }) : entry[1].toLocaleString(\"pl-PL\", { maximumFractionDigits: 0, })}\n \n \n \n {detail['source_opk_id']}\n \n \n {detail['add_income'].toLocaleString(\"pl-PL\", { maximumFractionDigits: 0, })}\n \n )\n }\n )\n\n })}\n\n \n \n KOSZTY\n \n \n {props.data.budget.cost_BU && props.data.budget.cost_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {props.data.budgetdata.cost_BU && props.data.budgetdata.cost_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {props.data.yearlydata.cost.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n {props.data.monthlydata.map((entry, index) => (\n \n \n \n \n\n \n \n IV KOSZTY OPK ZARZĄDU\n \n \n {props.data.costlevels.cost_overhead_BU && props.data.costlevels.cost_overhead_BU.toLocaleString(\n \"pl-PL\",\n {\n maximumFractionDigits: 0,\n }\n )}\n \n \n {props.data.costlevels.cost_overhead_BU && (\n (100 *\n (props.data.costlevels.cost_overhead -\n props.data.costlevels.cost_overhead_BU)) /\n props.data.costlevels.cost_overhead_BU\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {props.data.costlevels.cost_overhead && props.data.costlevels.cost_overhead.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n
\n \n \n );\n};\n\nexport default OPKTable;\n","import React from \"react\";\nimport MTooltip from \"@material-ui/core/Tooltip\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Typography from \"@material-ui/core/Typography\";\nimport KeyboardArrowDownIcon from \"@material-ui/icons/KeyboardArrowDown\";\nimport KeyboardArrowRightIcon from \"@material-ui/icons/KeyboardArrowRight\";\nimport {\n BarChart,\n Cell,\n Bar,\n ResponsiveContainer,\n XAxis,\n Tooltip,\n} from \"recharts\";\n\n\nimport IconButton from \"@material-ui/core/IconButton\";\n\nconst CustomTooltip = () => ({\n render() {\n const { active } = this.props;\n if (active) {\n const { payload, label } = this.props;\n return (\n \n {`${label} : ${payload && payload[0] && payload[0].value.toLocaleString(\n \"pl-PL\",\n { maximumFractionDigits: 0 }\n )}`}
\n \n );\n }\n return null;\n },\n});\n\nconst HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: \"white\",\n color: \"black\",\n maxWidth: 600,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n fontWeight: \"100\",\n //border: '1px solid #FE8E3C',\n boxShadow: \"10px 10px 24px -1px rgba(70,70,70,0.75)\",\n },\n}))(MTooltip);\n\nconst posorneg = (type, value) => {\n let color = \"black\";\n\n let posorneg = value < 0 ? false : true;\n if (type === \"cost\") posorneg = !posorneg;\n if (!posorneg) color = \"#FE8E3C\";\n if (type === 'text') color = 'black';\n return color;\n};\n\nconst CostByStagesTable = (props) => {\n\n const maximumFractionDigits = props.maximumFractionDigits || 0;\n const minimumFractionDigits = props.minimumFractionDigits || 0;\n\n const customMarginRight = props.marginRight || '0px';\n\n const tinyChartWidth = props.tinyChartWidth || 150;\n\n const CostByStagesMain = (props) => {\n\n const { dimUnexpanded } = props;\n\n const [openNodes, setOpenNodes] = React.useState([]);\n\n const handleOpenNodes = (id) => {\n const temp = [...openNodes];\n const idx = temp.indexOf(id);\n if (idx === -1) {\n if (dimUnexpanded === 'true') temp.length = 0;\n temp.push(id);\n } else {\n temp.splice(idx);\n }\n setOpenNodes(temp);\n };\n\n function RowKB(props) {\n const { dimUnexpanded } = props;\n\n function Row(props) {\n const { row } = props;\n\n return (\n \n {row && \n \n {row.children && row.children.length > 0 && (\n handleOpenNodes(props.rowkey)}\n >\n {openNodes.includes(props.rowkey) ? \n {\n props.columns.map(\n column =>\n \n {(column.type === 'graph') ?\n \n \n 0 ? \"#0B6471\" : \"orange\"}\n />\n \n
\n :\n column.type === 'tinychart' ?\n {return {month: i+1, cost:100*i}})}\n >\n \n {row[column.value].map((entry, index) => (\n \n {(row[column.value] && row[column.value] != 0) ? row[column.value].toLocaleString(\"pl-PL\", { maximumFractionDigits: maximumFractionDigits, }) : '-'}\n \n }\n \n )\n }\n \n }\n {openNodes.includes(props.rowkey) &&\n row.children\n .map((child, uid) => (\n |
\n ))}\n \n );\n }\n\n return (\n \n \n \n {props.data.children && props.data.children.length > 0 && (\n handleOpenNodes(props.rowkey)}\n >\n {openNodes.includes(props.rowkey) ? \n\n {\n props.columns.map(\n column =>\n \n {\n column.type === 'graph' ?\n \n \n 0 ? \"#0B6471\" : \"orange\"}\n />\n \n
\n :\n column.type === 'tinychart' ?\n {return {month: i+1, cost:100*i}})}\n >\n \n {props.data[column.value].map((entry, index) => (\n \n\n {(props.data[column.value] && props.data[column.value] != 0) ?\n props.data[column.value].toLocaleString(\"pl-PL\", { maximumFractionDigits: maximumFractionDigits }) : '-'}\n\n
\n {return {month: i+1, cost:100*i}})}\n >\n \n {props.data[column.chartValue] && props.data[column.chartValue].map((entry, index) => (\n
\n
\n )\n }\n \n\n {openNodes.includes(props.rowkey) &&\n props.data.children\n .map((row, uid) => |
)}\n \n );\n }\n\n return (\n \n\n \n {props.title || 'ETAPY ALOKACJI'}\n \n\n \n \n \n \n \n {column.name}\n \n )}\n\n \n \n \n {props.data.map((account, uid) => (\n \n
\n \n \n );\n };\n\n return option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n {\n videoData.map(\n (v, i) => {\n return
handleVideoSelect(v)}>\n
\n
\n
\n
\n
\n }\n )\n }\n
\n
\n \n \n \n WYNIKI OPK (GRUPA 504, 505, 506)\n \n \n (BU, WYK) w zł.\n \n
\n
\n {yardListLoaded ? (\n \n \n \n \n \n \n {\n setSelectedVideo(videoData[0]);\n setVideoPlayDialogOpen(true);\n }\n }>\n
\n \n \n {\n if (activeYard !== null) getAccessTokenSilently().then((token) => {\n document.body.style.cursor = 'wait';\n fetch(`${apiurl}/wardsdatatoxls/${activeYard.opk_id}/${startDate.year}/${JSON.stringify(selectedMonths)}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Raport_OPK.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n document.body.style.cursor = 'auto';\n });\n });\n }\n }\n />\n \n\n \n ) : (\n List not yet loaded
\n )}\n
\n\n {reportDataLoaded && activeYard && reportData.yearlydata && reportData.yearlydata.profit ? (\n \n \n \n {true &&\n \n \n \n \n Wartość
, value: 'value', align: 'right', type: 'text', underline: '5px double' },\n { name: , value: 'monthly', align: 'right', type: 'tinychart', underline: '5px double' },\n ]\n }\n />\n \n ) : (\n !activeYard && (\n \n Wybierz komórkę\n \n )\n )}\n {!reportDataLoaded && activeYard && (\n \n \n\n \n\n handleVideoListClose()} />\n\n \n\n setVideoPlayDialogOpen(false)}\n aria-labelledby=\"dialog-title\"\n aria-describedby=\"dialog-description\"\n\n >\n \n \n {\n const div = document.getElementById('videoControl');\n if (div.requestFullscreen)\n div.requestFullscreen();\n else if (div.webkitRequestFullscreen)\n div.webkitRequestFullscreen();\n else if (div.msRequestFullScreen)\n div.msRequestFullScreen();\n }\n }\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Pełen ekran\n \n setVideoPlayDialogOpen(false)}\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Zamknij\n \n
\n \n \n\n \n \n \n );\n}\n","import React from \"react\";\nimport { useAuth0 } from \"@auth0/auth0-react\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport Typography from \"@material-ui/core/Typography\";\nimport PollIcon from \"@material-ui/icons/Poll\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport ImportContactsIcon from '@material-ui/icons/ImportContacts';\n\nimport TinyChart from \"./TinyChart\"\nimport RankingChart from \"./RankingChart\"\nimport OPKTable from \"./OPKTable\"\nimport ProfitTable from \"./ProfitTable\"\nimport { apiurl } from '../app/prefs.js';\nimport MonthSelect from \"./MonthSelection\";\nimport ToolTip from \"@material-ui/core/Tooltip\";\nimport { ReactComponent as XlsxIcon } from './xlsx.svg';\nimport { Popover, Paper, Dialog, DialogContent } from \"@material-ui/core\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport CostByStagesTable from \"./CostByStagesTable\";\n\nconst VideoIcon = (props) => (\n option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => (\n option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n {\n videoData.map(\n (v, i) => {\n return
handleVideoSelect(v)}>\n
\n
\n
\n
\n
\n }\n )\n }\n
\n
\n \n \n \n WYNIKI OPK (GRUPA 500, 501, 502)\n \n \n (BU, WYK) w zł.\n \n
\n
\n {yardListLoaded ? (\n \n
\n
\n
\n
\n \n \n \n
\n {\n setSelectedVideo(videoData[0]);\n setVideoPlayDialogOpen(true);\n }\n }>\n
\n \n
\n {\n if (activeYard !== null) getAccessTokenSilently().then((token) => {\n document.body.style.cursor = 'wait';\n fetch(`${apiurl}/wardsdatatoxls/${activeYard.opk_id}/${startDate.year}/${JSON.stringify(selectedMonths)}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Raport_OPK.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n document.body.style.cursor = 'auto';\n });\n });\n }\n }\n />\n \n\n
List not yet loaded
\n )}\n
\n\n {activeYard && reportData.yearlydata && reportData.yearlydata.profit ?\n \n\n \n Wartość
, value: 'value', align: 'right', type: 'text', underline: '5px double' },\n { name: , value: 'monthly', align: 'right', type: 'tinychart', underline: '5px double' },\n ]\n }\n />\n\n \n : !activeYard && Wybierz komórkę }\n {!reportDataLoaded && activeYard && \n \n\n \n\n handleVideoListClose()} />\n\n \n\n setVideoPlayDialogOpen(false)}\n aria-labelledby=\"dialog-title\"\n aria-describedby=\"dialog-description\"\n\n >\n \n \n {\n const div = document.getElementById('videoControl');\n if (div.requestFullscreen)\n div.requestFullscreen();\n else if (div.webkitRequestFullscreen)\n div.webkitRequestFullscreen();\n else if (div.msRequestFullScreen)\n div.msRequestFullScreen();\n }\n }\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Pełen ekran\n \n setVideoPlayDialogOpen(false)}\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Zamknij\n \n
\n \n \n\n \n \n \n );\n}","import React from \"react\";\nimport MTooltip from \"@material-ui/core/Tooltip\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Typography from \"@material-ui/core/Typography\";\nimport KeyboardArrowDownIcon from \"@material-ui/icons/KeyboardArrowDown\";\nimport KeyboardArrowRightIcon from \"@material-ui/icons/KeyboardArrowRight\";\nimport {\n BarChart,\n Cell,\n Bar,\n ResponsiveContainer,\n XAxis,\n Tooltip,\n} from \"recharts\";\nimport IconButton from \"@material-ui/core/IconButton\";\n\nconst CustomTooltip = () => ({\n render() {\n const { active } = this.props;\n if (active) {\n const { payload, label } = this.props;\n return (\n \n {`${label} : ${payload[0].value.toLocaleString(\n \"pl-PL\",\n { maximumFractionDigits: 0 }\n )}`}
\n \n );\n }\n return null;\n },\n});\n\nconst posorneg = (type, value) => {\n let color = \"black\";\n\n let posorneg = value < 0 ? false : true;\n if (type === \"cost\") posorneg = !posorneg;\n if (!posorneg) color = \"#FE8E3C\";\n return color;\n};\n\nconst HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: \"white\",\n color: \"black\",\n maxWidth: 600,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n fontWeight: \"100\",\n //border: '1px solid #FE8E3C',\n boxShadow: \"10px 10px 24px -1px rgba(70,70,70,0.75)\",\n },\n}))(MTooltip);\n\nfunction RowKB(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row } = props;\n const [open, setOpen] = React.useState(false);\n\n return (\n \n {((row.cost_direct && row.cost_direct !== 0) || (row.cost_direct_BU && row.cost_direct_BU !== 0)) && \n \n {row.children && row.children.length > 0 && (\n setOpen(!open)}\n >\n {open ? \n \n {row.opk_id}\n \n \n \n \n {row.account_name}\n \n \n \n {\" \"}\n {row.cost_direct_BU &&\n row.cost_direct_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {row.cost_direct_delta &&\n (100 * row.cost_direct_delta).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {row.cost_direct.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n })}\n \n \n \n {row.monthly && (\n \n \n \n {row.monthly.map((entry, index) => (\n \n )}\n \n \n \n }\n {open &&\n row.children\n .sort((a, b) => {\n return b.cost_direct - a.cost_direct;\n })\n .map((child) => (\n |
\n ))}\n \n );\n }\n\n return (\n \n \n \n {props.data.children && props.data.children.length > 0 && (\n setOpen(!open)}\n >\n {open ? \n \n {props.data.opk_id}\n \n \n {props.data.account_name}\n \n \n {props.data.cost_direct_BU &&\n props.data.cost_direct_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {props.data.cost_direct_BU &&\n (\n 100 * (props.data.cost_direct - props.data.cost_direct_BU) /\n Math.abs(props.data.cost_direct_BU)\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2\n })}\n \n \n {props.data.cost_direct.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n })}\n \n \n \n {props.data.monthly && (\n \n \n \n {props.data.monthly.map((entry, index) => (\n \n )}\n \n \n \n\n {open &&\n props.data.children\n .sort((a, b) => {\n return b.cost_direct - a.cost_direct;\n })\n .map((row) => |
)}\n \n );\n}\n\nconst CostDetailsTable = (props) => {\n return (\n \n \n {props.title || 'KOSZTY'}\n \n\n \n \n \n \n \n Indeks\n \n\n \n Nazwa\n \n\n \n BU\n \n \n Δ %\n \n \n WYK\n \n \n \n \n \n {props.data.map((account) => (\n \n
\n \n \n );\n};\n\nexport default CostDetailsTable;\n","import React from \"react\";\nimport { useAuth0 } from \"@auth0/auth0-react\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport Typography from \"@material-ui/core/Typography\";\nimport PollIcon from \"@material-ui/icons/Poll\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport CostDetailsTable from \"./CostDetailsTable\";\nimport ImportContactsIcon from '@material-ui/icons/ImportContacts';\nimport MonthSelect from \"./MonthSelection\";\nimport MUITooltip from \"@material-ui/core/Tooltip\";\nimport { apiurl } from '../app/prefs.js';\n\n\nexport default function Report004() {\n const [totalData, setTotalData] = React.useState([]);\n const [totalDataLoaded, setTotalDataLoaded] = React.useState(false);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const [dateList, setDateList] = React.useState([]);\n const [startDate, setStartDate] = React.useState(null);\n const { getAccessTokenSilently, user } = useAuth0();\n const [selectedMonths, setSelectedMonths] = React.useState([]);\n\n function DateBox(props) {\n return (\n option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n
\n \n \n \n Koszty bezpośrednie OPK w czasie\n \n
\n
\n {filtersLoaded ? (\n \n \n \n \n \n \n ) : (\n Wczytywanie danych
\n )}\n
\n\n {totalData ? (\n \n \n \n\n \n \n Wczytywanie danych\n \n )\n )}\n {!totalDataLoaded && (\n option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n Miesiąc \n }\n displayEmpty\n IconComponent={CloseIcon}\n value={selectedMonth}\n onChange={handleMonthChange}\n input={Wszystkie ;\n }\n return selected.sort((a, b) => a - b).join(\", \");\n }}\n inputProps={{ \"aria-label\": \"Without label\" }}\n onClose={handleMonthClose}\n onOpen={() => setMonthListOpen(true)}\n >\n {monthNames.map((name) => (\n \n {name}\n \n ))}\n \n Wybierz\n \n \n
\n );\n }\n\n const loadData = (year, months) => {\n setTotalDataLoaded(false);\n const apiUrl = `${apiurl}/totalbyaccount/${year}/${JSON.stringify(months)}`;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(apiUrl, requestOptions)\n .then((res) => res.json())\n .then((fetchedData) => {\n setTotalData(fetchedData);\n setTotalDataLoaded(true);\n });\n });\n }\n\n const loadFilters = () => {\n setFiltersLoaded(false);\n const apiUrl = `${apiurl}/yearslist`;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(apiUrl, requestOptions)\n .then((res) => res.json())\n .then((fetchedData) => {\n setDateList(fetchedData.datelist);\n if (fetchedData.datelist && fetchedData.datelist.length !== 0) {\n setStartDate(fetchedData.datelist[fetchedData.datelist.length - 1]);\n loadData(fetchedData.datelist[fetchedData.datelist.length - 1].year, selectedMonths);\n setFiltersLoaded(true);\n }\n });\n });\n }\n\n React.useEffect(() => {\n let mounted = true;\n //console.log(\"Main mounted\");\n if (mounted) loadFilters();\n\n return function cleanup() {\n //console.log(\"Main unmounted\");\n mounted = false;\n };\n }, []);\n\n return (\n \n
\n \n \n \n Koszty rodzajowe w czasie\n \n
\n
\n {filtersLoaded ? (\n \n \n \n \n \n \n ) : (\n Wczytywanie danych
\n )}\n
\n\n {totalData[4] ? (\n \n \n \n \n \n \n \n Wczytywanie danych\n \n )\n )}\n {!totalDataLoaded && (\n \n \n \n {row.children && row.children.length > 0 && (\n setOpen(!open)}\n >\n {open ? \n \n {row.opk_name}\n \n \n \n {\" \"}\n {row.cost_direct_BU && row.cost_direct_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {row.cost_direct_delta && row.cost_direct_delta.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {row.cost_direct && row.cost_direct.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n |
\n ))}\n \n );\n }\n\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n I KOSZTY BEZPOŚREDNIE\n \n \n {props.data.costlevels.cost_direct_BU ? props.data.costlevels.cost_direct_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n {props.data.costlevels.cost_direct_BU ? (\n (100 *\n (props.data.costlevels.cost_direct -\n props.data.costlevels.cost_direct_BU)) /\n Math.abs(props.data.costlevels.cost_direct_BU)\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n }) : ''}\n \n \n {props.data.costlevels.cost_direct ? props.data.costlevels.cost_direct.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n |
\n ))}\n \n );\n}\n\nfunction RowKP(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row } = props;\n const [detailsOpen, setDetailsOpen] = React.useState(false);\n\n const tablerows = [\n { name: \"Nazwa klucza\", value: row.driver },\n {\n name: \"WYK Liczba jednostek klucza\",\n value: row.wqty.toLocaleString(\"pl-PL\", { maximumFractionDigits: 0 }),\n },\n {\n name: \"WYK Stawka kosztów na jednostkę (zł)\",\n value: (row.cost_indirect / row.wqty).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }),\n },\n ];\n\n const data01 = [\n { name: \"OPK\", value: row.wqty },\n { name: \"Pozostałe\", value: row.other },\n ];\n const COLORS = [\"#FE8E3C\", \"#0b6471\"];\n\n return (\n \n \n \n setDetailsOpen(!detailsOpen)}\n >\n {detailsOpen ? (\n \n \n \n {row.opk_name}\n \n \n \n {row.cost_indirect_BU && row.cost_indirect_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {row.cost_indirect_delta && row.cost_indirect_delta.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {row.cost_indirect.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n
\n \n \n \n \n Alokacja kosztów OPK pomocniczego\n \n \n \n \n {tablerows.map((trow, tindex) => (\n \n \n {trow.name}\n \n {trow.value} \n\n \n \n {tindex !== 0 && (\n \n \n \n \n \n )}\n \n \n \n ))}\n \n
\n \n
\n \n Udział w kosztach OPK pomocniczego\n \n \n \n {data01.map((entry, index) => (\n \n \n \n \n \n )}\n \n );\n }\n\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n II KOSZTY OPK POMOCNICZYCH\n \n \n {props.data.costlevels.cost_indirect_BU ? props.data.costlevels.cost_indirect_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n {props.data.costlevels.cost_indirect_BU ? (\n (100 *\n (props.data.costlevels.cost_indirect -\n props.data.costlevels.cost_indirect_BU)) /\n props.data.costlevels.cost_indirect_BU\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n }) : ''}\n \n \n {props.data.costlevels.cost_indirect ? props.data.costlevels.cost_indirect.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n |
\n ))}\n \n );\n}\n\nfunction RowOPKProc(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row } = props;\n const [detailsOpen, setDetailsOpen] = React.useState(false);\n\n const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n return (\n \n \n \n setDetailsOpen(!detailsOpen)}\n >\n {detailsOpen ? (\n \n \n \n {row.opk_name}\n \n \n \n {row.cost_procedures_BU ? row.cost_procedures_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n {row.cost_procedures_delta ? row.cost_procedures_delta.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }) : ''}\n \n \n {row.cost_procedures ? row.cost_procedures.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n \n \n \n \n \n \n \n \n Nazwa procedury\n \n Liczba procedur \n Koszt jedn. bezpośredni \n Koszty jedn. bezpośredni + pośredni \n Koszt całkowity \n \n \n \n {row &&\n row.children &&\n row.children\n .slice(\n page * rowsPerPage,\n page * rowsPerPage + rowsPerPage\n )\n .map((child) => (\n \n \n {child.procedure_name}\n \n \n {child.qty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {child.cost_given_per_unit.toLocaleString(\n \"pl-PL\",\n {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }\n )}\n \n \n {child.cost_calculated_per_unit.toLocaleString(\n \"pl-PL\",\n {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n }\n )}\n \n \n {child.cost_calculated.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n ))}\n \n
\n \n \n \n \n )}\n \n );\n }\n\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n III KOSZTY OPK PROCEDURALNYCH\n \n \n {props.data.costlevels.cost_procedures_BU ? props.data.costlevels.cost_procedures_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n {(props.data.costlevels.cost_procedures_BU &&\n props.data.costlevels.cost_procedures_BU > 0) ?\n (\n (100 *\n (props.data.costlevels.cost_procedures -\n props.data.costlevels.cost_procedures_BU)) /\n props.data.costlevels.cost_procedures_BU\n ).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n }) : ''}\n \n \n {props.data.costlevels.cost_procedures ? props.data.costlevels.cost_procedures.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n |
\n ))}\n \n );\n}\n\nconst OPKTable = (props) => {\n return (\n \n \n {props.tipTitle} \n {props.tipBody}\n \n }\n >\n \n ANALIZA KOSZTÓW OPK\n \n \n\n \n \n \n \n \n \n BU\n \n \n Δ %\n \n \n WYK\n \n \n \n \n \n \n \n KOSZTY\n \n \n {props.data.budget.cost_BU ? props.data.budget.cost_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n {props.data.budgetdata.cost_BU ? props.data.budgetdata.cost_BU.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n }) : ''}\n \n \n {(props.data.yearlydata && props.data.yearlydata.cost) ? props.data.yearlydata.cost.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n }) : ''}\n \n \n \n \n \n \n {props.data.monthlydata.map((entry, index) => (\n \n \n \n \n\n \n
\n \n \n );\n};\n\nexport default OPKTable;\n","import React from \"react\";\nimport { useAuth0 } from \"@auth0/auth0-react\";\nimport Paper from \"@material-ui/core/Paper\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport Typography from \"@material-ui/core/Typography\";\nimport PollIcon from \"@material-ui/icons/Poll\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport PrintIcon from \"@material-ui/icons/Print\";\nimport ShareIcon from \"@material-ui/icons/Share\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport MUITooltip from \"@material-ui/core/Tooltip\";\n\nimport {\n BarChart,\n Bar,\n Cell,\n XAxis,\n Tooltip,\n ResponsiveContainer,\n} from \"recharts\";\nimport TinyChart from \"./TinyChart\";\n\nimport OPKTable2 from \"./OPKTable2\";\nimport ProfitTable from \"./ProfitTable\";\nimport ImportContactsIcon from '@material-ui/icons/ImportContacts';\nimport { apiurl } from '../app/prefs.js';\nimport MonthSelect from \"./MonthSelection\";\n\nfunction DriverTargets(props) {\n const { row } = props;\n const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n\n React.useEffect(\n () => {\n setPage(0)\n }, [row]\n );\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const CustomTooltip = (props) => {\n const { active } = props;\n if (active) {\n const { payload, label } = props;\n return (\n \n {`${label} : ${payload[0].value.toLocaleString(\n \"pl-PL\",\n { maximumFractionDigits: 0 }\n )}`}
\n \n );\n } else return null;\n };\n\n return (\n \n \n ANALIZA ROZLICZENIA KOSZTÓW OPK POMOCNICZEGO\n \n\n \n \n \n \n \n OPK Docelowe\n \n \n WYK Liczba jednostek klucza\n \n\n \n WYK Koszt rozliczony\n \n\n \n \n \n {row &&\n row\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((child) => (\n \n \n {child.opk_name}\n \n \n {child.wqty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n {child.monthly.map((entry, index) => (\n \n \n \n \n {child.cost_indirect.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n })}\n \n \n \n \n \n \n {child.monthly.map((entry, index) => (\n \n \n \n \n ))}\n \n
\n \n \n );\n}\n\nfunction DriverSummary(props) {\n const { row } = props;\n\n const CustomTooltip = (props) => {\n const { active } = props;\n if (active) {\n const { payload, label } = props;\n return (\n \n {`${label} : ${payload[0].value.toLocaleString(\n \"pl-PL\",\n { maximumFractionDigits: 0 }\n )}`}
\n \n );\n } else return null;\n };\n\n return (\n \n \n KLUCZ PODZIAŁOWY OPK POMOCNICZEGO\n \n\n \n \n \n \n \n Klucz\n \n \n WYK Liczba jednostek klucza\n \n\n \n WYK Stawka kosztów na jednostkę\n \n \n WYK Koszt rozliczony\n \n \n \n \n {row &&\n row\n .map((child) => (\n \n \n {child.driver}\n \n \n {child.wqty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n \n \n \n \n {child.monthly.map((entry, index) => (\n \n \n \n \n {child.rate.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n })}\n \n \n \n \n \n \n {child.monthly.map((entry, index) => (\n \n \n \n \n {(child.cost).toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n })}\n \n \n \n \n \n \n {child.monthly.map((entry, index) => (\n \n \n \n \n ))}\n \n
\n \n \n );\n}\n\nexport default function Report006() {\n const [yardList, setYardList] = React.useState([]);\n const [yardListLoaded, setYardListLoaded] = React.useState(false);\n const [activeYard, setActiveYard] = React.useState(null);\n const [reportDataLoaded, setReportDataLoaded] = React.useState(false);\n const [reportData, setReportData] = React.useState(null);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const [dateList, setDateList] = React.useState([]);\n const [startDate, setStartDate] = React.useState(null);\n const { getAccessTokenSilently, user } = useAuth0();\n const [selectedMonths, setSelectedMonths] = React.useState([]);\n\n\n const loadData = (opk, year, months) => {\n setActiveYard(opk);\n setReportDataLoaded(false);\n\n const currentMonths = months ? months : selectedMonths;\n\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(`${apiurl}/supportunitdetails/${opk.opk_id}/${year}/${JSON.stringify(currentMonths)}`, requestOptions)\n .then((response) => response.json())\n .then((data) => {\n setReportData(data);\n //console.log(`${apiurl}/supportunitdetails/${opk.opk_id}/${year}/${currentMonths}`);\n //console.log(\"Report data loaded\");\n setReportDataLoaded(true);\n });\n });\n }\n\n function ComboBox(props) {\n return (\n option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n
\n \n \n \n Analiza OPK Pomocniczego\n \n \n (BU, WYK) w zł.\n \n
\n
\n {yardListLoaded ? (\n \n \n \n \n \n \n ) : (\n List not yet loaded
\n )}\n
\n\n {activeYard && reportData && reportData.yearlydata.cost ? (\n \n \n \n \n \n \n Wybierz komórkę\n \n )\n )}\n {!reportDataLoaded && activeYard && (\n \n \n WYKONANE PROCDEDURY\n \n\n \n \n \n \n \n Nazwa procedury\n \n \n Liczba procedur\n \n\n \n Koszt jedn. bezpośredni\n \n\n \n Koszty jedn. bezpośredni + pośredni\n \n\n \n Koszt całkowity\n \n \n \n \n {row &&\n row\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((child) => (\n \n \n {child.PROCEDURE_NAME}\n \n \n {child.qty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {child.cost_given_per_unit.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {child.cost_calculated_per_unit.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {child.cost_calculated.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n ))}\n \n
\n \n \n );\n}\n\nfunction ProceduresPerCustomer(props) {\n const { rows } = props;\n const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\n React.useEffect(\n () => {\n setPage(0)\n }, [rows]\n );\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const Row = (props) => {\n const [open, setOpen] = React.useState(false);\n const { data } = props;\n return (\n \n \n \n setOpen(!open)}\n >\n {open ? \n \n {data.custom_02_name}\n \n \n {data.qty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n \n \n {data.cost_calculated.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2,\n })}\n \n \n {open && (\n \n \n \n \n )}\n \n );\n };\n\n return (\n \n \n ALOKACJA KOSZTÓW OPK PROCEDURALNEGO\n \n\n \n \n \n \n \n \n Nazwa OPK zlecającego\n \n \n Liczba procedur\n \n\n \n Koszt całkowity\n \n \n \n \n {rows &&\n rows\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((child) => |
)}\n \n
\n \n \n );\n}\n\nexport default function Report007() {\n const [yardList, setYardList] = React.useState([]);\n const [yardListLoaded, setYardListLoaded] = React.useState(false);\n const [activeYard, setActiveYard] = React.useState(null);\n const [reportDataLoaded, setReportDataLoaded] = React.useState(false);\n const [reportData, setReportData] = React.useState(null);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const [dateList, setDateList] = React.useState([]);\n const [startDate, setStartDate] = React.useState(null);\n const { getAccessTokenSilently, user } = useAuth0();\n const [selectedMonths, setSelectedMonths] = React.useState([]);\n\n const loadData = async (opk, year, months) => {\n setActiveYard(opk);\n setReportDataLoaded(false);\n const currentMonths = months ? months : selectedMonths;\n\n const token = await getAccessTokenSilently();\n\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n\n let response = await fetch(`${apiurl}/proceduralunitdetails/${opk.opk_id}/${year}/${JSON.stringify(currentMonths)}`, requestOptions);\n const data = await response.json();\n\n response = await fetch(`${apiurl}/getinfrastructurecost/${year}/${JSON.stringify(currentMonths)}/json/${opk.opk_id}`, requestOptions);\n const infrastructureCost = await response.json();\n\n Object.assign(data, { infrastructureCost: infrastructureCost });\n\n setReportData(data);\n setReportDataLoaded(true);\n\n }\n\n function ComboBox(props) {\n return (\n option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n
\n \n \n \n Analiza OPK Proceduralnego\n \n \n (BU, WYK) w zł.\n \n
\n
\n {yardListLoaded ? (\n \n \n \n \n \n \n ) : (\n List not yet loaded
\n )}\n
\n\n {activeYard && reportData && reportData.yearlydata.cost ? (\n \n \n \n \n \n Wskaźnik, value: 'name', align: 'left', type: 'text', underline: '2px solid' },\n { name: Wartość
, value: 'value', align: 'right', type: 'text', underline: '2px solid' },\n { name:
, value: 'monthly', align: 'right', type: 'tinychart', underline: '2px solid' },\n ]\n }\n />\n\n \n ) : (\n !activeYard && (\n \n Wybierz komórkę\n \n )\n )}\n {!reportDataLoaded && activeYard && (\n option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px' }}\n renderInput={(params) => option && option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => option.object_id}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.object_id === value;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => \n
\n \n \n \n WYNIKI JGP / PACJENTÓW\n \n\n
\n
\n {yardListLoaded ? (\n \n \n \n \n
\n \n ) : (\n List not yet loaded
\n )}\n
\n\n {activeYard && reportData ? (\n \n \n \n \n NAJBARDZIEJ RENTOWNI PACJENCI}\n columns={[\n {\n header: {\n name: \"Przychód\",\n },\n data: {\n name: \"income\",\n },\n },\n {\n header: {\n name: \"Koszt\",\n },\n data: {\n name: \"cost\",\n },\n },\n {\n header: {\n name: \"Wynik\",\n },\n data: {\n name: \"profit\",\n },\n },\n ]}\n data={reportData.top_patients}\n />\n \n
\n )}\n {patientData && (\n \n KOSZTY PROCEDUR: {Math.round(patientData.cost_levels.procedure_cost)} zł }\n data={patientData.procedures}\n dataType=\"cost\"\n columns={[\n {\n name: \"Komórka org.\",\n align: \"left\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"ORG_UNIT\",\n datalen: \"\",\n },\n {\n name: \"Kod procedury\",\n align: \"left\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"procedure_id\",\n datalen: \"\",\n },\n {\n name: \"Nazwa procedury\",\n align: \"left\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"procedure_name\",\n datalen: \"\",\n },\n {\n name: \"Liczba procedur\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"2px solid\" },\n datadef: \"qty\",\n datalen: 0,\n },\n {\n name: \"Koszt\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"4px solid\" },\n datadef: \"cost\",\n datalen: 0,\n },\n ]}\n />}\n {patientData.hospital_days && KOSZTY OSOBODNI: {Math.round(patientData.cost_levels.hospital_days_cost)} zł }\n data={patientData.hospital_days}\n dataType=\"cost\"\n columns={[\n {\n name: \"Komórka org.\",\n align: \"left\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"ORG_UNIT\",\n datalen: \"\",\n },\n {\n name: \"Liczba osobodni\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"2px solid\" },\n datadef: \"qty\",\n datalen: 0,\n },\n {\n name: \"Koszt\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"4px solid\" },\n datadef: \"cost\",\n datalen: 0,\n },\n ]}\n />}\n KOSZTY LEKÓW I MATERIAŁÓW: {Math.round(patientData.cost_levels.overhead_cost)} zł }\n data={patientData.overhead}\n dataType=\"cost\"\n columns={[\n {\n name: \"Komórka org.\",\n align: \"left\",\n style: { color: \"#0b6471\", borderBottom: \"1px solid\" },\n datadef: \"ORG_UNIT\",\n datalen: \"\",\n },\n {\n name: \"Koszt\",\n align: \"right\",\n style: { color: \"#0b6471\", borderBottom: \"4px solid\" },\n datadef: \"cost\",\n datalen: 0,\n },\n ]}\n />\n \n )}\n \n ) : (\n !activeYard && (\n \n Wybierz komórkę\n \n )\n )}\n {!reportDataLoaded && activeYard && (\n option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n Miesiąc \n }\n displayEmpty\n IconComponent={CloseIcon}\n value={selectedMonth}\n onChange={handleMonthChange}\n input={Wszystkie ;\n }\n return selected.sort((a, b) => a - b).join(\", \");\n }}\n inputProps={{ \"aria-label\": \"Without label\" }}\n onClose={handleMonthClose}\n onOpen={() => setMonthListOpen(true)}\n >\n {monthNames.map((name) => (\n \n {name}\n \n ))}\n \n Wybierz\n \n \n
\n );\n }\n\n const loadFilters = () => {\n setFiltersLoaded(false);\n const apiUrl = `${apiurl}/yearslist`;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(apiUrl, requestOptions)\n .then((res) => res.json())\n .then((fetchedData) => {\n setDateList(fetchedData.datelist);\n if (fetchedData.datelist && fetchedData.datelist.length !== 0) {\n setStartDate(fetchedData.datelist[fetchedData.datelist.length - 1]);\n loadData(fetchedData.datelist[fetchedData.datelist.length - 1].year, selectedMonths);\n setFiltersLoaded(true);\n }\n });\n });\n }\n\n const downloadFile = (downloadURL) => {\n\n getAccessTokenSilently().then((token) => {\n document.body.style.cursor = 'wait';\n const apiUrl = downloadURL\n fetch(apiUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Etapy alokacji kosztów.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n document.body.style.cursor = 'auto';\n });\n });\n\n };\n\n\n return (\n \n
\n \n \n \n Etapy alokacji kosztów - podsumowanie\n \n
\n
\n {totalDataLoaded ? (\n \n\n \n \n \n \n \n downloadFile(`${apiurl}/costbystages/xls/${startDate.year}/${JSON.stringify(selectedMonths)}`)\n }\n />\n \n\n \n ) : (\n Wczytywanie danych
\n )}\n
\n\n {totalData ? (\n \n \n \n\n \n {totalData.cost_by_stages &&\n Etap I
k. bezp.
, value: 'stage01', align: 'right', type: 'text', underline: '1px solid' },\n { name: , value: 'stage02', align: 'right', type: 'text', underline: '1px solid' },\n { name: , value: 'stage03', align: 'right', type: 'text', underline: '1px solid' },\n { name: Koszty całkowite (Etap IV)
+ zarząd
Przychód
, value: 'income', align: 'right', type: 'text', underline: '2px solid' },\n { name: Wynik
, value: 'profit', align: 'right', type: 'profit', underline: '4px solid' },\n ]\n }\n />}\n \n \n \n \n ) : (\n !totalData && (\n \n Wczytywanie danych\n \n )\n )}\n {!totalDataLoaded && (\n option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => (\n \n {\n videoData.map(\n (v, i) => {\n return
handleVideoSelect(v)}>\n
\n
\n
\n
\n
\n }\n )\n }\n
\n
\n \n \n \n WYNIKI OPK (GRUPA 540, 545)\n \n \n (BU, WYK) w zł.\n \n
\n
\n {yardListLoaded ? (\n \n
\n
\n
\n
\n \n \n \n
\n {\n setSelectedVideo(videoData[0]);\n setVideoPlayDialogOpen(true);\n }\n }>\n
\n \n
\n {\n if (activeYard !== null) getAccessTokenSilently().then((token) => {\n document.body.style.cursor = 'wait';\n fetch(`${apiurl}/wardsdatatoxls/${activeYard.opk_id}/${startDate.year}/${JSON.stringify(selectedMonths)}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Raport_OPK.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n document.body.style.cursor = 'auto';\n });\n });\n }\n }\n />\n \n
List not yet loaded
\n )}\n
\n\n {activeYard && reportData.yearlydata && reportData.yearlydata.profit ?\n \n\n \n Wartość
, value: 'value', align: 'right', type: 'text', underline: '5px double' },\n { name: , value: 'monthly', align: 'right', type: 'tinychart', underline: '5px double' },\n ]\n }\n />\n\n \n : !activeYard && Wybierz komórkę }\n {!reportDataLoaded && activeYard && \n \n\n \n\n handleVideoListClose()} />\n\n \n\n setVideoPlayDialogOpen(false)}\n aria-labelledby=\"dialog-title\"\n aria-describedby=\"dialog-description\"\n\n >\n \n \n {\n const div = document.getElementById('videoControl');\n if (div.requestFullscreen)\n div.requestFullscreen();\n else if (div.webkitRequestFullscreen)\n div.webkitRequestFullscreen();\n else if (div.msRequestFullScreen)\n div.msRequestFullScreen();\n }\n }\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Pełen ekran\n \n setVideoPlayDialogOpen(false)}\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Zamknij\n \n
\n \n \n\n \n \n \n );\n}","import React from \"react\";\nimport { useAuth0 } from \"@auth0/auth0-react\";\nimport Typography from \"@material-ui/core/Typography\";\nimport PollIcon from \"@material-ui/icons/Poll\";\nimport IconButton from \"@material-ui/core/IconButton\";\n//import PrintIcon from \"@material-ui/icons/Print\";\n//import ShareIcon from \"@material-ui/icons/Share\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport { DatePicker } from \"@material-ui/pickers\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\n\nimport ImportContactsIcon from '@material-ui/icons/ImportContacts';\nimport ResTable from '../procedures/restable';\nimport CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownload';\nimport ToolTip from \"@material-ui/core/Tooltip\";\nimport { apiurl } from '../app/prefs.js';\n\nexport default function Report011() {\n const [totalData, setTotalData] = React.useState([]);\n const [totalDataLoaded, setTotalDataLoaded] = React.useState(false);\n const [wardsList, setWardsList] = React.useState([]);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const { getAccessTokenSilently, user } = useAuth0();\n\n const [callbackData, setCallbackData] = React.useState('all');\n\n const downloadXLSFunction =\n () => {\n getAccessTokenSilently().then((token) => {\n fetch(`${apiurl}/procedurestoexcel/${callbackData}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Procedury.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n });\n });\n};\n\nconst loadData = () => {\n setTotalDataLoaded(false);\n const apiUrl = `${apiurl}/proceduresummary`;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(apiUrl, requestOptions)\n .then((res) => res.json())\n .then((fetchedData) => {\n let wards = [];\n fetchedData.procedures_summary.map(\n item => {\n if (wards.length === 0 || !wards.some(ward => ward.id === item.opk_id)) {\n wards.push({ id: item.opk_id, label: item.opk_name })\n }\n }\n )\n setWardsList(wards);\n setTotalData(fetchedData);\n setTotalDataLoaded(true);\n\n });\n });\n}\n\nReact.useEffect(() => {\n let mounted = true;\n //console.log(\"Main mounted\");\n loadFilters();\n return function cleanup() {\n //console.log(\"Main unmounted\");\n mounted = false;\n };\n}, []);\n\n\nconst loadFilters = () => {\n setFiltersLoaded(false);\n loadData();\n setFiltersLoaded(true);\n}\n\nconst procedureheaders = [\n {\n name: \"OPK Proceduralny\",\n type: \"text\",\n edit: \"false\",\n format: \"\",\n },\n {\n name: \"Procedura\",\n type: \"text\",\n edit: \"false\",\n format: \"\",\n },\n {\n name: \"Data zapisu\",\n type: \"text\",\n edit: \"false\",\n format: \"\",\n },\n {\n name: \"Czas trwania\",\n type: \"number\",\n edit: \"false\",\n format: \"\",\n },\n {\n name: \"Koszt bezpośredni\",\n type: \"number\",\n edit: \"false\",\n format: \"currency\",\n },\n {\n name: \"Koszt materiałów\",\n type: \"number\",\n edit: \"false\",\n format: \"currency\",\n },\n {\n name: \"Koszt personelu\",\n type: \"number\",\n edit: \"false\",\n format: \"currency\",\n },\n {\n name: \"Koszt bezpośredni (klucz)\",\n type: \"number\",\n edit: \"false\",\n format: \"currency\",\n },\n];\n\nconst optionsData = [\n { label: \"wszystkie\", value: \"all\" },\n { label: \"opisane\", value: \"ready\" },\n { label: \"nieopisane\", value: \"empty\" }\n];\n\nreturn (\n \n
\n \n \n \n Koszty bezpośrednie procedur\n \n
\n \n\n {false && \n \n \n
}\n\n \n ) : (\n Wczytywanie danych
\n )}\n\n {totalData && totalData.procedures_summary ? (\n \n \n \n {\n getAccessTokenSilently().then((token) => {\n fetch(`${apiurl}/procedurestoexcel/${callbackData}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Procedury.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n });\n });\n }\n }\n >\n \n
\n \n ) : (\n !totalData && (\n \n Wczytywanie danych\n \n )\n )}\n {!totalDataLoaded && (\n N Jednoetapowe wer. 3 },\n ]\n\n const [toggleFilter, setToggleFilter] = React.useState(\"single\");\n const changeToggleFilter = (event, newOption) => {\n if (newOption && newOption !== toggleFilter) {\n setToggleFilter(newOption);\n loadData(startDate.getFullYear(), startDate.getMonth() + 1, newOption);\n }\n };\n const ToggleFilterButton = () => {\n return (\n optionsData ? \n {optionsData.map((option) => (\n \n {option.label}\n \n ))}\n \n :\n null\n )\n }\n\n const loadData = (year, month, option) => {\n setTotalDataLoaded(false);\n const apiUrl = `${apiurl}/allocations/${year}/${month}/${option}`;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(apiUrl, requestOptions)\n .then((res) => res.json())\n .then((fetchedData) => {\n if (year) {\n //console.log(fetchedData)\n setTotalData(fetchedData);\n setTotalDataLoaded(true);\n }\n });\n });\n }\n\n React.useEffect(() => {\n let mounted = true;\n //console.log(\"Main mounted\");\n loadFilters();\n return function cleanup() {\n //console.log(\"Main unmounted\");\n mounted = false;\n };\n }, []);\n\n const loadFilters = () => {\n setFiltersLoaded(false);\n const apiUrl = `${apiurl}/periodslist`;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(apiUrl, requestOptions)\n .then((res) => res.json())\n .then((fetchedData) => {\n let listOfDates = fetchedData.CONTENT_SUMMARY.filter(item => item.version === 1).map(item => { return new Date(`${item.year}-${item.month}-01`) })\n setDateList(listOfDates);\n if (listOfDates && listOfDates.length !== 0) {\n setStartDate(listOfDates[listOfDates.length - 1]);\n loadData(listOfDates[listOfDates.length - 1].getFullYear(), listOfDates[listOfDates.length - 1].getMonth() + 1, toggleFilter);\n setFiltersLoaded(true);\n }\n });\n });\n }\n\n return (\n \n
\n \n \n \n Eksport wyników rozliczeń\n \n
\n
\n {totalDataLoaded ? (\n \n \n {\n setStartDate(date);\n }}\n //onAccept={date => loadData(date.getFullYear(), date.getMonth() + 1, toggleFilter)}\n KeyboardButtonProps={{\n 'aria-label': 'change date',\n }}\n />\n \n \n \n {\n getAccessTokenSilently().then((token) => {\n document.body.style.cursor = 'wait';\n fetch(`${apiurl}/allocationstoxls/${startDate.getFullYear()}/${startDate.getMonth() + 1}/${toggleFilter}`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `Rozliczenia.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n document.body.style.cursor = 'auto';\n });\n });\n }\n }\n >\n \n
}\n \n ) : (\n Wczytywanie danych
\n )}\n
\n\n {totalData ? (\n \n \n \n \n {totalData.allocations &&\n \n Wczytywanie danych\n \n )\n )}\n {!totalDataLoaded && (\n option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => (\n \n
\n \n \n \n WYNIKI POZOSTAŁYCH OPK\n \n \n (BU, WYK) w zł.\n \n
\n
\n {yardListLoaded ? (\n \n
\n
\n
\n
\n \n \n \n
List not yet loaded
\n )}\n
\n\n {activeYard && reportData.yearlydata && reportData.yearlydata.profit ?\n \n\n \n Wartość
, value: 'value', align: 'right', type: 'text', underline: '5px double' },\n { name: , value: 'monthly', align: 'right', type: 'tinychart', underline: '5px double' },\n ]\n }\n />\n\n \n : !activeYard && Wybierz komórkę }\n {!reportDataLoaded && activeYard && option && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value.year.toLocaleString();\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option && option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"380px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option && option.hr_group_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.hr_group_name === value.hr_group_name;\n }}\n style={{ width: \"280px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option && option.contract_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.contract_name === value.contract_name;\n }}\n style={{ width: \"250px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => item.id === selectedAccounts)[0]}\n size=\"small\"\n disableClearable\n autoHighlight\n getOptionLabel={(option) => option && option.name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.id === value.id;\n }}\n style={{ width: \"200px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n
\n \n \n \n Ranking kosztów wynagrodzeń wg grup pracowniczych\n \n
\n
\n {filtersLoaded ? (\n \n \n \n \n \n \n ) : (\n Wczytywanie danych
\n )}\n
\n\n {totalDataComplete ? (\n \n \n \n\n \n \n Wczytywanie danych\n \n )\n )}\n {!totalDataLoaded && (\n \n {`${label} : ${payload[0].value.toLocaleString(\n \"pl-PL\",\n { maximumFractionDigits: 0 }\n )}`}
\n \n );\n }\n return null;\n },\n});\n\nconst posorneg = (type, value) => {\n let color = \"black\";\n\n let posorneg = value < 0 ? false : true;\n if (type === \"cost\") posorneg = !posorneg;\n if (!posorneg) color = \"#FE8E3C\";\n return color;\n};\n\nconst HtmlTooltip = withStyles((theme) => ({\n tooltip: {\n backgroundColor: \"white\",\n color: \"black\",\n maxWidth: 600,\n fontSize: \"14px\",\n lineHeight: \"20px\",\n fontWeight: \"100\",\n //border: '1px solid #FE8E3C',\n boxShadow: \"10px 10px 24px -1px rgba(70,70,70,0.75)\",\n },\n}))(MTooltip);\n\nfunction RowKB(props) {\n const [open, setOpen] = React.useState(false);\n\n function Row(props) {\n const { row, meta } = props;\n const [open, setOpen] = React.useState(false);\n\n return (\n \n {(row) && \n \n {row.children && row.children.length > 0 && (\n setOpen(!open)}\n >\n {open ? \n {row[meta.columnsdef[colid].name]}\n \n }\n )\n }\n\n \n }\n {open &&\n row.children\n .map((child) => (\n |
\n ))}\n \n );\n }\n\n return (\n \n \n \n {props.data.children && props.data.children.length > 0 && (\n setOpen(!open)}\n >\n {open ? \n {\n Array(4 - props.data.colspan).fill().map(\n (col, colid) => {\n return \n {props.data[props.meta.columnsdef[colid].name]}\n \n }\n )\n }\n\n \n {\n open && props.data.children &&\n props.data.children\n .map((row) => |
)\n }\n \n );\n}\n\nconst BasicTable = (props) => {\n return (\n \n \n {props.data.meta.title || ''}\n \n\n \n \n\n \n {props.data.data.map((account, id) => (\n \n
\n \n \n );\n};\n\nexport default BasicTable;\n","import React from \"react\";\nimport \"./styles.css\";\nimport { Checkbox, Input, Tooltip, Button } from \"@material-ui/core\";\nimport { FixedSizeList } from \"react-window\";\n\nconst FilterWindow = (props) => {\n const { closeFn, downloadFn, list, lookupPlaceholder } = props;\n const [fileLoading, setFileLoading] = React.useState(false);\n const [filterMask, setFilterMask] = React.useState(\"\");\n const filterItemList = list.sort((a, b) => a.id > b.id ? 1 : -1);\n const [filteredItems, setFilteredItems] = React.useState(new Set([]));\n const filteredList = filterItemList.filter((i) =>\n i.id.includes(filterMask)\n );\n const [selectionStatus, setSelectionStatus] = React.useState(\"unchecked\");\n\n const updateSelectionStatus = () => {\n const filteredCount = filteredList.length;\n const selectedCount = filteredList.filter((i) => filteredItems.has(i.id))\n .length;\n if (selectedCount === 0) {\n setSelectionStatus(\"unchecked\");\n } else {\n if (selectedCount === filteredCount) {\n setSelectionStatus(\"checked\");\n } else setSelectionStatus(\"indeterminate\");\n }\n };\n\n React.useEffect(\n () => {\n updateSelectionStatus()\n }\n );\n\n const updateFilteredItems = (checked, item) => {\n const selected = new Set(filteredItems);\n if (checked) {\n selected.add(item);\n } else {\n selected.delete(item);\n }\n console.timeLog(\"check\");\n setFilteredItems(selected);\n };\n\n const addRemoveSelection = (checked) => {\n const list = new Set(filteredItems);\n if (checked) {\n //add\n filterItemList\n .filter((i) => i.id.includes(filterMask))\n .forEach((item) => list.add(item.id));\n setSelectionStatus(\"checked\");\n } else {\n //remove\n filterItemList\n .filter((i) => i.id.includes(filterMask))\n .forEach((item) => list.delete(item.id));\n setSelectionStatus(\"unchecked\");\n }\n setFilteredItems(list);\n };\n\n function renderRow(props) {\n const { index, style } = props;\n\n return (\n \n \n \n updateFilteredItems(checked, filteredList[index].id)\n }\n />\n <> {filteredList[index].id} \n \n \n );\n }\n\n return (\n \n
\n
\n
setFilterMask(event.target.value)}\n />\n\n \n \n Dostępne:
\n \n \n addRemoveSelection(checked)}\n />\n \n Wybierz wszystkie\n \n
filteredList[index].id}\n overscanCount={5}\n >\n {renderRow}\n \n \n \n \n Wybrane:
\n \n \n {filterItemList\n .filter((i) => filteredItems.has(i.id))\n .map((item, id) => {\n return {item.name} ;\n })}\n \n \n \n \n \n setFilteredItems(new Set([]))}>\n Kasuj wybór\n \n \n closeFn(false)}>Anuluj \n {\n setFileLoading(true);\n downloadFn(filterItemList\n .filter((i) => filteredItems.has(i.id))\n .map((item, id) => {\n return item.id;\n }))\n }\n }>Pobierz \n \n \n \n \n );\n};\n\nexport default FilterWindow;","import React from \"react\";\nimport { useAuth0 } from \"@auth0/auth0-react\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport Typography from \"@material-ui/core/Typography\";\nimport PollIcon from \"@material-ui/icons/Poll\";\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport BasicTable from \"./BasicTable\";\nimport { Dialog, DialogContent } from '@material-ui/core';\nimport { apiurl } from '../app/prefs.js';\nimport MonthSelect from \"./MonthSelection\";\nimport FilterWindow from \"./FilterWindow\";\n\nexport default function Report024() {\n const [totalData, setTotalData] = React.useState([]);\n const [totalDataLoaded, setTotalDataLoaded] = React.useState(false);\n const [totalDataComplete, setTotalDataComplete] = React.useState(false);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const [dateList, setDateList] = React.useState([]);\n const [startDate, setStartDate] = React.useState(null);\n const { getAccessTokenSilently, user } = useAuth0();\n const [selectedMonths, setSelectedMonths] = React.useState([]);\n const [opkList, setOpkList] = React.useState([]);\n const [exportDialogOpen, setExportDialogOpen] = React.useState(false);\n\n const [selectedOPK, setSelectedOPK] = React.useState(undefined);\n\n const downloadFile = (downloadURL) => {\n\n getAccessTokenSilently().then((token) => {\n document.body.style.cursor = 'wait';\n const apiUrl = downloadURL\n fetch(apiUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n Authorization: \"Bearer \" + token,\n },\n })\n .then((response) => response.blob())\n .then((blob) => {\n // Create blob link to download\n const url = window.URL.createObjectURL(\n new Blob([blob]),\n );\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute(\n 'download',\n `AOTM_FK_OPK.xlsx`,\n );\n // Append to html link element page\n document.body.appendChild(link);\n // Start download\n link.click();\n // Clean up and remove the link\n link.parentNode.removeChild(link);\n document.body.style.cursor = 'auto';\n setExportDialogOpen(false);\n });\n });\n\n };\n\n const downloadMulti = (list) => {\n //alert(list);\n downloadFile(`${apiurl}/aotmit/fk_opk/${JSON.stringify(list)}/${startDate.year}/${JSON.stringify(selectedMonths)}/multixlsx`);\n };\n\n function DateBox(props) {\n return (\n option && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value.year.toLocaleString();\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option && (option.opk_id + ' - ' + option.opk_name)}\n defaultValue={null}\n placeholder='Wybierz OPK'\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"380px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n
\n \n \n \n Zestawienie AOTMiT FK.OPK\n \n
\n
\n {filtersLoaded ? (\n \n \n\n downloadFile(`${apiurl}/aotmit/fk_opk/${selectedOPK.opk_id}/${startDate.year}/${JSON.stringify(selectedMonths)}/xlsx`)\n }\n >\n\n Pobierz wybrany OPK\n \n\n setExportDialogOpen(true)\n }\n >\n N \n Pobierz wiele OPK\n \n\n
\n\n \n ) : (\n Wczytywanie danych
\n )}\n
\n\n {selectedOPK && totalDataComplete ? (\n \n \n \n\n \n \n Wybierz OPK\n \n )\n )}\n {(!totalDataLoaded && selectedOPK) && (\n setExportDialogOpen(false)}\n aria-labelledby=\"dialog-title\"\n aria-describedby=\"dialog-description\"\n //style={{ zIndex: 10000, height: \"100%\" }}\n style={{ height: \"70%\" }}\n >\n \n {`Wybierz OPK do wyeksportowania`}\n \n \n { return { id: i.opk_id, name: i.opk_name } })} />\n \n \n \n );\n}\n","import React from \"react\";\nimport { useAuth0 } from \"@auth0/auth0-react\";\nimport TextField from \"@material-ui/core/TextField\";\nimport Autocomplete from \"@material-ui/lab/Autocomplete\";\nimport Typography from \"@material-ui/core/Typography\";\nimport PollIcon from \"@material-ui/icons/Poll\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableContainer from \"@material-ui/core/TableContainer\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TablePagination from \"@material-ui/core/TablePagination\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\n\nimport ImportContactsIcon from '@material-ui/icons/ImportContacts';\nimport { LineChart, Line, Tooltip, XAxis } from \"recharts\";\nimport { ReactComponent as XlsxIcon } from './xlsx.svg';\nimport MUITooltip from \"@material-ui/core/Tooltip\";\nimport LibraryIcon from '@material-ui/icons/LocalLibraryOutlined';\nimport Button from \"@material-ui/core/Button\";\nimport { apiurl } from '../app/prefs.js';\n\nimport { Popover, Paper, Dialog, DialogContent } from \"@material-ui/core\";\nimport CloseIcon from \"@material-ui/icons/Close\";\n\nimport MonthSelect from \"./MonthSelection\";\n\nconst VideoIcon = (props) => (\n \n
{`${label}:`}
\n
{`${format(payload[0].value)}`}
\n
0 ? \"#7a7a7a\" : \"#FE8E3C\"}\n viewBox=\"0 0 6 2\"\n >\n \n \n \n ANALIZA KOSZTÓW PROCEDUR\n \n\n \n \n \n \n \n Kod\n \n \n Nazwa\n \n \n Ilość wykonań\n \n\n \n Koszt bezpośredni\n \n\n \n Koszt pośredni\n \n\n \n Koszty bezpośredni + pośredni\n \n\n \n \n \n {row &&\n row\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((child) => (\n \n \n {child.id}\n \n \n {child.name}\n \n \n \n m.qty)} />\n {child.qty.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n
\n \n \n \n m.cg)} />\n {child.cg.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n 0 ? 'black' : '#FE8E3C' }}>\n m.ci)} />\n {child.ci.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n \n m.cc)} />\n {child.cc.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n ))}\n \n
\n \n \n );\n}\n\nexport default function Report026() {\n const [yardList, setYardList] = React.useState([]);\n const [yardListLoaded, setYardListLoaded] = React.useState(false);\n const [activeYard, setActiveYard] = React.useState(null);\n const [reportDataLoaded, setReportDataLoaded] = React.useState(false);\n const [reportData, setReportData] = React.useState(null);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const [dateList, setDateList] = React.useState([]);\n const [startDate, setStartDate] = React.useState(null);\n const [selectedMonths, setSelectedMonths] = React.useState([]);\n const { getAccessTokenSilently, user } = useAuth0();\n const sortByOptions = [\n { id: 'id', name: 'Kod', direction: 'Malejąco' },\n { id: 'name', name: 'Nazwa', direction: 'Malejąco' },\n { id: 'qty', name: 'Ilość wykonań', direction: 'Malejąco' },\n { id: 'cg', name: 'Koszt bezpośredni', direction: 'Malejąco' },\n { id: 'ci', name: 'Koszt pośredni', direction: 'Malejąco' },\n { id: 'cc', name: 'Koszt bezpośredni + pośredni', direction: 'Malejąco' },\n { id: 'id', name: 'Kod', direction: 'Rosnąco' },\n { id: 'name', name: 'Nazwa', direction: 'Rosnąco' },\n { id: 'qty', name: 'Ilość wykonań', direction: 'Rosnąco' },\n { id: 'cg', name: 'Koszt bezpośredni', direction: 'Rosnąco' },\n { id: 'ci', name: 'Koszt pośredni', direction: 'Rosnąco' },\n { id: 'cc', name: 'Koszt bezpośredni + pośredni', direction: 'Rosnąco' },\n ];\n const [sortBy, setSortBy] = React.useState(sortByOptions[2]);\n const [reportInfoOpen, setReportInfoOpen] = React.useState(false);\n\n const loadData = (opk, year, months) => {\n setActiveYard(opk);\n setReportDataLoaded(false);\n if (months === undefined) months = selectedMonths;\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(`${apiurl}/costofprocedures/${opk.opk_id}/${year}/${JSON.stringify(months)}`, requestOptions)\n .then((response) => response.json())\n .then((data) => {\n setReportData(data);\n setReportDataLoaded(true);\n });\n });\n }\n\n function loadDataBasic(year, months) {\n if (activeYard) loadData(activeYard, year, months)\n };\n\n\n function SortByBox(props) {\n return (\n option.name}\n groupBy={option => option.direction}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.id === value.id && option.direction === value.direction;\n }}\n style={{ width: \"220px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option.opk_name}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.opk_name === value.opk_name;\n }}\n style={{ width: \"550px\", marginBottom: \"10px\" }}\n renderInput={(params) => option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n {\n videoData.map(\n (v, i) => {\n return
handleVideoSelect(v)}>\n
\n
\n
\n
\n
\n }\n )\n }\n
\n
\n \n \n \n Zestawienie kosztów procedur\n \n\n
\n
\n {yardListLoaded ? (\n \n \n
\n \n setReportInfoOpen(true)}\n style={{ marginTop: '15px', marginRight: '10px', cursor: 'pointer', width: '22px', height: '22px', fill: '#0b6471' }}\n />\n \n \n {\n setSelectedVideo(videoData[0]);\n setVideoPlayDialogOpen(true);\n }\n }>\n
\n \n \n downloadFile(`${apiurl}/costofprocedures/xlsx/${startDate.year}/${JSON.stringify(selectedMonths)}`)\n }\n />\n \n\n \n ) : (\n List not yet loaded
\n )}\n
\n\n {activeYard && reportData ? (\n \n\n (a[sortBy.id] > b[sortBy.id]) ? (sortBy.direction[0] === 'R' ? 1 : -1) : (sortBy.direction[0] === 'R' ? -1 : 1))} />\n\n\n \n ) : (\n !activeYard && (\n \n Wybierz OPK Proceduralny\n \n )\n )}\n {!reportDataLoaded && activeYard && (\n setReportInfoOpen(false)}\n anchorOrigin={{\n vertical: \"bottom\",\n horizontal: \"center\"\n }}\n >\n \n \n setReportInfoOpen(false)} />\n \n \n
\n Raport zawiera koszty całkowite procedur medycznych (suma kosztów bezpośrednich i pośrednich)\n wykonanych w OPK Proceduralnych (zabiegowych, diagnostycznych) w podziale na miesiące.\n
\n
\n Koszt bezpośredni (inaczej koszt normatywny, koszt standardowy) to suma kosztów\n zasobów materiałowych oraz kosztów zasobów osobowych podanych przez Administratora.\n
\n
\n Koszt pośredni (narzut kosztów infrastruktury) doliczony jest przez CO+ zgodnie z wymogami\n rozporządzenia MZ (w zależności od wybranej przez Administratora opcji: zgodnie z jednostką kalkulacyjną albo czasem trwania procedury).\n
\n
\n Średnie wartości kosztów uwzględniają liczbę wykonanych procedur.\n
\n
\n setReportInfoOpen(false)}>\n Zakończ\n \n \n \n \n \n \n\n \n\n handleVideoListClose()} />\n\n \n\n setVideoPlayDialogOpen(false)}\n aria-labelledby=\"dialog-title\"\n aria-describedby=\"dialog-description\"\n\n >\n \n \n {\n const div = document.getElementById('videoControl');\n if (div.requestFullscreen)\n div.requestFullscreen();\n else if (div.webkitRequestFullscreen)\n div.webkitRequestFullscreen();\n else if (div.msRequestFullScreen)\n div.msRequestFullScreen();\n }\n }\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Pełen ekran\n \n setVideoPlayDialogOpen(false)}\n style={{ backgroundColor: 'white', color: '#0b6471', fontWeight: 'bold', textDecorationLine: 'underline' }}\n >\n Zamknij\n \n
\n \n \n\n \n \n \n );\n}\n","import React from \"react\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport Select from \"@material-ui/core/Select\";\nimport Button from \"@material-ui/core/Button\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\nimport TextField from \"@material-ui/core/TextField\";\nimport \"./AccountFilter.css\";\nimport { BiFontColor } from \"react-icons/bi\";\n\nconst AccountFilter = (props) => {\n const { titleCaption, menuData, startSelection, updateFunction } = props;\n\n const hideSelectAllOption = props.hideSelectAllOption || false;\n const underLine = props.underLine || false;\n const fontSize = props.fontSize || '16px';\n const fontStyle = props.fontStyle || 'normal';\n const fontColor = props.fontColor || 'black';\n const marginTop = props.marginTop || '0px';\n\n const [selectedAccounts, setSelectedAccounts] = React.useState(\n startSelection\n );\n const [filterOpen, setFilterOpen] = React.useState(false);\n const [displayFilter, setDisplayFilter] = React.useState('');\n const [filterQuery, setFilterQuery] = React.useState(\"\");\n const [selectAllState, setSelectAllState] = React.useState('All'); // All / None / Selected as available options. Also One in new version\n\n React.useEffect(\n () => {\n updateSelectAllStatus(startSelection);\n }, [filterOpen]\n )\n\n React.useEffect(() => {\n const timeOutId = setTimeout(() => setFilterQuery(displayFilter), 500);\n return () => clearTimeout(timeOutId);\n }, [displayFilter]);\n\n React.useEffect(() => {\n const timeOutId = setTimeout(() => setDisplayFilter(\"\"), 500);\n return () => clearTimeout(timeOutId);\n }, [filterOpen]);\n\n const getInfoCaption = () => {\n if (selectedAccounts.length === 0) {\n return \"Żadne\";\n }\n let accountCount = 0;\n for (let c = 0; c < menuData.length; c++) {\n if (menuData[c].children && menuData[c].children.length !== 0) {\n accountCount = accountCount + menuData[c].children.length;\n } else {\n accountCount = accountCount + 1;\n }\n }\n if (selectedAccounts.length === 1) {\n let accountData = undefined;\n for (let c = 0; c < menuData.length; c++) {\n if (menuData[c].children && menuData[c].children.length !== 0) {\n if (menuData[c].children.find(child => child.id == selectedAccounts[0])) accountData = menuData[c].children.find(child => child.id == selectedAccounts[0])\n } else {\n if (menuData[c].id == selectedAccounts[0]) accountData = menuData[c]\n }\n };\n if (accountData) return accountData.name;\n };\n if (accountCount === selectedAccounts.length) {\n return \"Wszystkie\";\n } else {\n return \"Wybrane\";\n }\n };\n\n const getColorInfo = (id) => {\n if (id.children && id.children.length !== 0) {\n const childrenCount = id.children.length;\n let selectedChildrenCount = 0;\n for (let i = 0; i < childrenCount; i++) {\n if (selectedAccounts.includes(id.children[i].id))\n selectedChildrenCount++;\n }\n if (selectedChildrenCount === 0) return \"none\";\n if (selectedChildrenCount === childrenCount) {\n return \"#0B6471\";\n } else {\n return \"lightgray\";\n }\n } else {\n if (selectedAccounts.includes(id.id)) return \"#0B6471\";\n else return \"none\";\n }\n };\n\n const updateAccount = (id) => {\n const accountId = id.id;\n let temp = [];\n if (id.children && id.children.length !== 0) {\n const childrenCount = id.children.length;\n let selectedChildrenCount = 0;\n for (let i = 0; i < childrenCount; i++) {\n if (selectedAccounts.includes(id.children[i].id))\n selectedChildrenCount++;\n }\n if (selectedChildrenCount === childrenCount) {\n temp = Array.from(selectedAccounts);\n\n for (let i = 0; i < childrenCount; i++) {\n temp = temp.filter((a) => a !== id.children[i].id);\n }\n setSelectedAccounts(temp);\n } else {\n temp = Array.from(selectedAccounts);\n for (let i = 0; i < childrenCount; i++) {\n if (!temp.includes(id.children[i].id)) temp.push(id.children[i].id);\n }\n setSelectedAccounts(temp);\n }\n } else {\n if (selectedAccounts.includes(accountId)) {\n temp = Array.from(selectedAccounts);\n temp = temp.filter((a) => a !== accountId);\n setSelectedAccounts(temp);\n } else {\n temp = Array.from(selectedAccounts);\n temp.push(accountId);\n setSelectedAccounts(temp);\n }\n };\n updateSelectAllStatus(temp);\n };\n\n const MyCon = (props) => (\n \n \n {\" \"}\n \n \n );\n\n const selectAllItems = () => {\n let all = [];\n if (displayFilter === \"\") {\n menuData.forEach((item) => {\n item.children && item.children.length !== 0\n ? item.children.forEach((child) => all.push(child.id))\n : all.push(item.id);\n });\n } else {\n menuData.forEach((item) => {\n item.children && item.children.length !== 0\n ? item.children.forEach(\n (child) =>\n child.name\n .toLowerCase()\n .includes(displayFilter.toLowerCase()) &&\n all.push(child.id)\n )\n : item.name\n .toLowerCase()\n .includes(displayFilter.toLowerCase()) &&\n all.push(item.id);\n });\n }\n setSelectedAccounts(all);\n setSelectAllState('All');\n return (all);\n };\n\n const getAllItems = () => {\n let all = [];\n if (displayFilter === \"\") {\n menuData.forEach((item) => {\n item.children && item.children.length !== 0\n ? item.children.forEach((child) => all.push(child.id))\n : all.push(item.id);\n });\n } else {\n menuData.forEach((item) => {\n item.children && item.children.length !== 0\n ? item.children.forEach(\n (child) =>\n child.name\n .toLowerCase()\n .includes(displayFilter.toLowerCase()) &&\n all.push(child.id)\n )\n : item.name\n .toLowerCase()\n .includes(displayFilter.toLowerCase()) &&\n all.push(item.id);\n });\n }\n return (all);\n };\n\n const unSelectAllItems = () => {\n let all = [];\n setSelectedAccounts(all);\n setSelectAllState('None');\n };\n\n const ToolbarItem = (props) => {\n return (\n \n
{\n if (selectAllState === 'All') {\n unSelectAllItems()\n } else {\n selectAllItems()\n };\n }}\n >\n \n updateAccount(data)}\n style={{\n padding: \"2px 0px 2px 10px\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n cursor: \"pointer\"\n }}\n >\n \n
\n {data.children &&\n data.children.map((el) =>\n filteredOut(el) ?\n (\n {\n updateAccount(el);\n event.stopPropagation();\n }}\n >\n \n
\n \n ) : (
))}\n )\n :\n (
)\n ;\n };\n\n const updateSelectAllStatus = (parameter1) => {\n const selectedAccounts = parameter1 || selectedAccounts;\n if (selectedAccounts.length === 0) {\n setSelectAllState('None')\n } else {\n let childrenCount = 0;\n const searchPattern = filterQuery.toLowerCase();\n for (let item = 0; item < menuData.length; item++) {\n if (menuData[item].children && menuData[item].children.length !== 0) {\n menuData[item].children.forEach(child => { if (child.name.toLowerCase().includes(searchPattern)) childrenCount = childrenCount + 1 })\n } else {\n if (menuData[item].name.toLowerCase().includes(searchPattern)) childrenCount = childrenCount + 1;\n }\n };\n if (childrenCount === selectedAccounts.length) {\n setSelectAllState('All')\n } else {\n setSelectAllState('Selected')\n }\n }\n };\n\n const MenuItems = () => {\n return (\n \n {menuData.map((el, x) => (\n
\n );\n };\n\n return (\n \n
{\n\n }}\n >\n {titleCaption}\n \n getInfoCaption()}\n onClick={() => {\n setFilterOpen(true);\n }}\n open={filterOpen}\n >\n \n
setDisplayFilter(event.target.value)}\n style={{ marginBottom: '10px', width: '100%' }}\n inputProps={{ style: { fontSize: '14px', padding: '7px 5px 7px 5px' } }}\n id=\"custom-filter-input\"\n variant=\"outlined\"\n size=\"small\"\n placeholder=\"Wyszukaj\"\n InputProps={{\n endAdornment: (\n \n setDisplayFilter(\"\")}\n edge=\"end\"\n >\n X\n \n \n {\n setSelectedAccounts(startSelection);\n setFilterOpen(false);\n event.stopPropagation();\n }}\n >\n Anuluj\n \n {\n let selected = selectedAccounts;\n if (displayFilter !== '') {\n const checked = getAllItems();\n selected = checked.filter(cos => selected.includes(cos));\n setSelectedAccounts(selected);\n if (selected.length === 0) {\n setSelectedAccounts(startSelection);\n selected = startSelection\n };\n };\n updateFunction(selected);\n setFilterOpen(false);\n event.stopPropagation();\n }}\n >\n Zatwierdź\n \n \n \n \n expand\n \n \n
{`${label}:`}
\n
{`${format(payload[0].value)}`}
\n
0 ? \"#7a7a7a\" : \"#FE8E3C\"}\n viewBox=\"0 0 6 2\"\n >\n \n \n \n ANALIZA KOSZTU OSOBODNIA\n \n\n \n \n \n \n \n\n \n \n Kod\n \n \n Nazwa\n \n \n Ilość osobodni\n \n\n \n Koszt\n \n\n \n Koszt osobodnia\n \n\n\n \n \n \n {row &&\n row\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((child) => (\n \n \n switchExpandedState(child.id)}\n style={{\n paddingRight: '0px',\n paddingLeft: '0px',\n paddingTop: '9px',\n paddingBottom: '6px',\n borderBottom: expandedRows.includes(child.id) && child.children && child.children.length !== 0 && 'none'\n }}>\n \n {child.id}\n \n \n {child.OPK_name}\n \n \n \n m.hospital_days)} />\n {child.hospital_days.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 0,\n })}\n
\n \n \n \n m.cost)} />\n {child.cost.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n 0 ? 'black' : '#FE8E3C' }}>\n m.costPerDay)} />\n {child.costPerDay.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n {\n expandedRows.includes(child.id) && child.children && Array.isArray(child.children)\n &&\n child.children.map(l1child =>\n \n \n \n \n switchExpandedState(child.id + '-' + l1child.id)}\n style={{\n paddingRight: '0px',\n paddingLeft: '10px',\n paddingTop: '9px',\n paddingBottom: '6px',\n borderBottom: expandedRows.includes(child.id + '-' + l1child.id) && l1child.children && l1child.children.length !== 0 && 'none'\n }}>\n \n {l1child.id}\n \n \n\n \n \n \n m.cost)} />\n {l1child.cost.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n 0 ? 'black' : '#FE8E3C' }}>\n m.costPerDay)} />\n {l1child.costPerDay.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n {\n expandedRows.includes(child.id + '-' + l1child.id) && l1child.children && Array.isArray(l1child.children)\n &&\n l1child.children.map(l2child =>\n \n \n \n \n \n \n {l2child.id}\n \n \n\n \n \n \n m.cost)} />\n {l2child.cost.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n 0 ? 'black' : '#FE8E3C' }}>\n m.costPerDay)} />\n {l2child.costPerDay.toLocaleString(\"pl-PL\", {\n maximumFractionDigits: 2, minimumFractionDigits: 2,\n })}\n
\n \n \n )\n }\n \n\n )\n }\n \n ))}\n \n
\n \n \n );\n}\n\nexport default function Report028() {\n const [reportDataLoaded, setReportDataLoaded] = React.useState(false);\n const [reportData, setReportData] = React.useState(null);\n const [filtersLoaded, setFiltersLoaded] = React.useState(false);\n const [dateList, setDateList] = React.useState([]);\n const [startDate, setStartDate] = React.useState(null);\n const { getAccessTokenSilently, user } = useAuth0();\n const sortByOptions = [\n { id: 'id', name: 'Kod', direction: 'Malejąco' },\n { id: 'OPK_name', name: 'Nazwa', direction: 'Malejąco' },\n { id: 'hospital_days', name: 'Ilość osobodni', direction: 'Malejąco' },\n { id: 'cost', name: 'Koszt', direction: 'Malejąco' },\n { id: 'costPerDay', name: 'Koszt osobodnia', direction: 'Malejąco' },\n { id: 'id', name: 'Kod', direction: 'Rosnąco' },\n { id: 'OPK_name', name: 'Nazwa', direction: 'Rosnąco' },\n { id: 'hospital_days', name: 'Ilość osobodni', direction: 'Rosnąco' },\n { id: 'cost', name: 'Koszt', direction: 'Rosnąco' },\n { id: 'costPerDay', name: 'Koszt osobodnia', direction: 'Rosnąco' },\n ];\n const [sortBy, setSortBy] = React.useState(sortByOptions[4]);\n const [reportInfoOpen, setReportInfoOpen] = React.useState(false);\n\n const menuItems = [\n {\n \"id\": \"401-02-01\",\n \"name\": \"401-02-01 - Leki (za wyjątkiem programów lekowych oraz leków do chemioterapii)\"\n },\n {\n \"id\": \"401-02-02\",\n \"name\": \"401-02-02 - Leki do programów lekowych, leki do chemioterapii\"\n },\n {\n \"id\": \"401-02-03\",\n \"name\": \"401-02-03 - Inne leki\",\n \"children\": [\n {\n \"id\": \"401-02-03-01\",\n \"name\": \"401-02-03-01 - Leki recepturowe\"\n },\n {\n \"id\": \"401-02-03-02\",\n \"name\": \"401-02-03-02 - Krew i produkty krwiopochodne\"\n },\n {\n \"id\": \"401-02-03-03\",\n \"name\": \"401-02-03-03 - Radiofarmaceutyki\"\n },\n {\n \"id\": \"401-02-03-04\",\n \"name\": \"401-02-03-04 - Kontrasty \"\n },\n {\n \"id\": \"401-02-03-05\",\n \"name\": \"401-02-03-05 - Preparaty do żywienia pozajelitowego, dojelitowego\"\n },\n {\n \"id\": \"401-02-03-06\",\n \"name\": \"401-02-03-06 - Preparaty przeciwkrwotoczne miejscowe i uszczelniające\"\n },\n {\n \"id\": \"401-02-03-07\",\n \"name\": \"401-02-03-07 - Pozostałe leki \"\n }\n ]\n },\n {\n \"id\": \"401-02-04\",\n \"name\": \"401-02-04 - Materiały medyczne \",\n \"children\": [\n {\n \"id\": \"401-02-04-01\",\n \"name\": \"401-02-04-01 - Narzędzia chirurgiczne i inne\"\n },\n {\n \"id\": \"401-02-04-02\",\n \"name\": \"401-02-04-02 - Jednorazowe staplery i zszywki\"\n },\n {\n \"id\": \"401-02-04-03\",\n \"name\": \"401-02-04-03 - Igły, strzykawki, wenflony\"\n },\n {\n \"id\": \"401-02-04-04\",\n \"name\": \"401-02-04-04 - Materiały szewne, w szczególności nici chirurgiczne \"\n },\n {\n \"id\": \"401-02-04-05\",\n \"name\": \"401-02-04-05 - Obłożenia i podkłady jednorazowe, w szczególności zestawy\"\n },\n {\n \"id\": \"401-02-04-06\",\n \"name\": \"401-02-04-06 - Bielizna i pościel jednorazowa\"\n },\n {\n \"id\": \"401-02-04-07\",\n \"name\": \"401-02-04-07 - Odzież ochronna jednorazowa\"\n },\n {\n \"id\": \"401-02-04-08\",\n \"name\": \"401-02-04-08 - Rękawice jednorazowe\"\n },\n {\n \"id\": \"401-02-04-09\",\n \"name\": \"401-02-04-09 - Środki opatrunkowe \"\n },\n {\n \"id\": \"401-02-04-10\",\n \"name\": \"401-02-04-10 - Niewszczepialny jednorazowy sprzęt i niewszczepialne wyroby medyczne\"\n },\n {\n \"id\": \"401-02-04-11\",\n \"name\": \"401-02-04-11 - Wszczepialne wyroby medyczne \"\n },\n {\n \"id\": \"401-02-04-12\",\n \"name\": \"401-02-04-12 - Gazy medyczne (tlen, azot i inne) \"\n },\n {\n \"id\": \"401-02-04-13\",\n \"name\": \"401-02-04-13 - Środki dezynfekcyjne\"\n },\n {\n \"id\": \"401-02-04-14\",\n \"name\": \"401-02-04-14 - Odczynniki i testy do badań diagnostycznych\"\n },\n {\n \"id\": \"401-02-04-15\",\n \"name\": \"401-02-04-15 - Pozostałe materiały medyczne do badań diagnostycznych\"\n },\n {\n \"id\": \"401-02-04-16\",\n \"name\": \"401-02-04-16 - Pozostały jednorazowy sprzęt i materiały medyczne \"\n },\n {\n \"id\": \"401-02-04-17\",\n \"name\": \"401-02-04-17 - Pozostały sprzęt i materiały medyczne wielokrotnego użytku\"\n }\n ]\n }\n ];\n\n const [activeAccounts, setActiveAccounts] = React.useState([]);\n\n const applyAccountsFilter = async (accounts) => {\n setReportDataLoaded(false);\n\n const token = await getAccessTokenSilently();\n let apiUrl = `${apiurl}/costperhdaccounts`;\n let requestOptions = {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n body: JSON.stringify(\n {\n \"command\": \"update\",\n \"data\": JSON.stringify(accounts)\n })\n };\n let res = await fetch(apiUrl, requestOptions);\n loadData(startDate.year);\n setActiveAccounts(accounts);\n //setReportDataLoaded(true);\n };\n\n const loadData = (year) => {\n setReportDataLoaded(false);\n getAccessTokenSilently().then((token) => {\n const requestOptions = {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + token,\n },\n };\n fetch(`${apiurl}/costperday/${year}/json`, requestOptions)\n .then((response) => response.json())\n .then((data) => {\n setReportData(data);\n setReportDataLoaded(true);\n });\n });\n }\n\n function SortByBox(props) {\n return (\n option.name}\n groupBy={option => option.direction}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.id === value.id && option.direction === value.direction;\n }}\n style={{ width: \"220px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => option.year && option.year.toLocaleString()}\n defaultValue={null}\n getOptionSelected={(option, value) => {\n if (!value) return false;\n return option.year.toLocaleString() === value;\n }}\n style={{ width: \"80px\", marginBottom: \"10px\", marginLeft: '10px', marginRight: '10px' }}\n renderInput={(params) => \n
\n \n \n \n Ranking kosztu osobodnia\n \n\n
\n
\n {filtersLoaded ? (\n \n \n setReportInfoOpen(true)}\n style={{ marginTop: '15px', marginRight: '5px', cursor: 'pointer', width: '22px', height: '22px', fill: '#0b6471' }}\n />\n \n \n downloadFile(`${apiurl}/costperday/${startDate.year}/xlsx`)\n }\n />\n \n\n \n ) : (\n List not yet loaded
\n )}\n
\n\n {reportData ? (\n \n\n (a[sortBy.id] > b[sortBy.id]) ? (sortBy.direction[0] === 'R' ? 1 : -1) : (sortBy.direction[0] === 'R' ? -1 : 1))} />\n\n\n \n ) : (\n (\n \n Brak danych\n \n )\n )}\n {!reportDataLoaded && (\n setReportInfoOpen(false)}\n anchorOrigin={{\n vertical: \"bottom\",\n horizontal: \"center\"\n }}\n >\n \n \n setReportInfoOpen(false)} />\n \n 
\n 
\n