\n {title ?
\n )}\n {children}\n \n )\n}\n","import React from \"react\"\n\nexport default function Loading() {\n return {title}
: titleOverwrite}\nLoading
\n}\n","import React, { useState, useEffect } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport ViewHeading from \"../../components/ViewHeading\"\nimport Card from \"../../components/Card\"\nimport Loading from \"../../components/Loading\"\n\n/**\n * This view provides a list of all commands for the preparation page\n */\nexport default function CommandListView() {\n const [searchTerm, setSearchTerm] = useState(\"\")\n const [data, setData] = useState()\n const [filtered, setFiltered] = useState()\n\n useEffect(() => {\n fetch(\"/api/commands\")\n .then(r => r.json())\n .then(r => {\n setData(r)\n setFiltered(r)\n return r\n })\n .catch(e => console.log(e))\n }, [])\n\n const handleChange = event => {\n let term = event.target.value\n setSearchTerm(term)\n setFiltered(\n data.filter(command => {\n let sTerm = term.toLowerCase()\n return (\n command.name.toLowerCase().includes(sTerm) ||\n command.description.toLowerCase().includes(sTerm)\n )\n })\n )\n }\n\n return (\n\n
\n )\n}\n","import React, { useEffect, useRef, useState } from \"react\"\n\n/**\n * Uses the /search enpoint to search for commands, parameters or attacks.\n * @param props\n * @param props.searchFor Can be one of (\"command\", \"parameter\", \"attack\"). If not set, a global search is performed\n * @param props.overlay A function with signature `function (results): React.Component`. It receives the results\n * from the database and is used to provide customized layout of the result representation\n */\nexport default function APISearchbar({ searchFor, overlay }) {\n // search term that the user searches for\n const [term, setTerm] = useState(\"\")\n // timeout that triggers the fetch /api/search call, when the user stops typing\n const [searchTimer, setSearchTimer] = useState(null)\n // if there are results available (may be empty)\n const [showingResults, setShowingResults] = useState(false)\n // search results from API\n const [results, setResults] = useState()\n // used to check for clicks outside the div\n const ref = useRef()\n\n useEffect(() => {\n // create the onclick listener on mount to the whole document\n document.addEventListener(\"click\", handleOutsideClick)\n // remove event listener on unmount\n return () => {\n document.removeEventListener(\"click\", handleOutsideClick)\n }\n }, [])\n\n const handleOutsideClick = event => {\n // this callback for the global click listener checks if\n // the click target was outside the div referenced by `ref`\n event.preventDefault()\n if (ref.current && !ref.current.contains(event.target)) {\n setShowingResults(false)\n }\n }\n\n const handleChange = event => {\n let value = event.target.value\n\n clearTimeout(searchTimer) // stops the previous fetch search timeout if there is one\n setSearchTimer(null) // deletes the fetch search timeout\n\n setTerm(value)\n\n // reset reults, if search term is empty\n if (value === \"\") {\n setShowingResults(false)\n setResults()\n return\n }\n\n // create a new fetch search timeout with callback\n let timeout = setTimeout(() => {\n // compose query string\n let p = new URLSearchParams()\n if (searchFor) {\n p.set(\"for\", searchFor)\n }\n p.set(\"term\", value)\n // request and set results\n fetch(`/api/search?${p.toString()}`)\n .then(r => r.json())\n .then(r => setResults(r))\n .then(() => setShowingResults(true))\n .catch(e => console.log(e))\n }, 500)\n setSearchTimer(timeout)\n }\n\n const handleDeleteTerm = event => {\n event.preventDefault()\n // delete the search term and results\n setTerm(\"\")\n setShowingResults(false)\n setResults()\n // reset fetch search timeout\n clearTimeout(searchTimer)\n setSearchTimer(null)\n }\n\n const doOverlay = () => {\n // tries to execute the overlay function\n try {\n return overlay(results)\n } catch (e) {\n console.error('Error while executing the \"overlay\" function: ', e)\n return \n {/* Search bar (using client side filtering) */}\n
\n \n {\n setSearchTerm(\"\")\n handleChange(event)\n }}\n className=\"absolute top-2 right-4 z-30 text-xl text-gray-400 focus:outline-none\"\n >\n ×\n \n )}\n
\n \n {filtered ? ( // render out the filtered commands\n filtered.map(e => (\n
\n \n \n \n \n \n
\n ))\n ) : (\n {e.description}
\nERROR
\n }\n }\n\n return (\n\n
\n )\n}\n","import React from \"react\"\n\n/**\n * A universal styled button. Can be used as a submit button and has two different\n * kinds of styling.\n * @param props\n * @param {Function} props.onClick An onClick handler to be passed in\n * @param {string} props.title Title of the button (visible)\n * @param {boolean} props.important If the button should be filled (true) or only surrounded (false)\n * @param {string} props.fullWidth Whether the button should expand to it's full parent width\n * @param {string} props.noWrap If the text wrapping should be prohibited if the buttons width is too small\n * @param {boolean} props.submit If this is a submit button (used inside a form)\n */\nexport default function Button({\n onClick,\n title,\n important,\n fullWidth,\n noWrap,\n submit,\n}) {\n return (\n \n {\n // show the results panel after it has been hidden\n if (results && !showingResults) {\n setShowingResults(true)\n }\n }}\n placeholder={`Search for ${searchFor || \"everything\"}`}\n className=\"relative w-full px-4 py-2 border rounded-lg shadow-lg z-20\"\n />\n {/* Delete term button */}\n {term && term !== \"\" && (\n \n ×\n \n )}\n
\n {/* Results panel */}\n {showingResults && overlay && (\n \n
\n )}\n \n
\n \n {results ? doOverlay() :
\n No results
}\n\n {children}\n
\n )\n}\n","import React from \"react\"\nimport { useDrop } from \"react-dnd\"\n\n/**\n * Droppable creates a div, which allows items wrapped with Draggable to be\n * dragged to. You must specify the allowed item types.\n * @param props\n * @param props.acceptItemTypes The item types that are accepted. Couterpart to Draggables itemType prop.\n * @param props.dropFunc Signature: `function (item): any`. This function is called with the dragged item,\n * when it is released in this area.\n * @param props.className The divs classNames.\n * @param props.canDropClassName The classNames that will be applied, if a Draggable object that is accepted by\n * this Droppable is currently dragged anywhere on the site.\n * @param props.isOverClassName The classNames that will be applied, if a Draggable object that is accepted by\n * this Droppable is currently dragged over this div.\n */\nexport default function Droppable({\n acceptItemTypes,\n dropFunc,\n className,\n canDropClassName,\n isOverClassName,\n children,\n}) {\n const [{ canDrop, isOver }, dropRef] = useDrop(() => ({\n accept: acceptItemTypes,\n collect: monitor => ({\n canDrop: monitor.canDrop(),\n isOver: monitor.isOver(),\n }),\n drop: dropFunc,\n }))\n\n return (\n {namedObj.name}
\n ×
\n \n \n ) : undefined\n }\n className=\"mb-4\"\n smallPadding\n >\n\n
\n \n )\n }\n\n return (\n \n {namedObj.description || \"No description provided\"}\n
\n \n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/werkschau_leonschmidt.01578068.png\";","export default __webpack_public_path__ + \"static/media/werkschau_nicolajaeger.49606700.png\";","export default __webpack_public_path__ + \"static/media/werkschau_nadineweber.6f858837.png\";","import React from \"react\"\nimport Button from \"../../components/Button\"\nimport Card from \"../../components/Card\"\nimport logoFull from \"../../img/logo_full.svg\"\nimport imgLeon from \"../../img/werkschau_leonschmidt.png\"\nimport imgNicola from \"../../img/werkschau_nicolajaeger.png\"\nimport imgNadine from \"../../img/werkschau_nadineweber.png\"\n\nexport const version = \"v0.2.1\"\n\nexport default function AboutView() {\n return (\n \n
\n \n {viewingResults && results ? (\n
\n {/* Main button and dumps for have and want parameters */}\n \n {results && results.error ? (\n
\n ) : (\n \n Error: {results.error}\n
\n ) : (\n\n
\n )}\n {/*\n \n Possible command path(s)\n {!want || want === \"\"\n ? \" for your entrypoints\"\n : \" to reach your target\"}\n
\n\n
\n {JSON.stringify(results, null, 4)}\n */}\n \n (\n <>\n {results.map(c => (\n
\n )}\n \n Choose your entrypoint and target parameters\n
\n\n \n {cardStyle(c)}\n \n
\n ))}\n \n )}\n />\n \n {/* Main button */}\n
\n \n {viewingResults ? (\n {\n setViewingResults(false)\n }}\n />\n ) : (\n {\n submit(event)\n setViewingResults(true)\n }}\n />\n )}\n
\n \n {/* Dump for have parameters */}\n {\n setHave(old => {\n let temp = [...old]\n if (\n !temp.map(e => e._id).includes(item._id)\n ) {\n temp.push(item)\n }\n return temp\n })\n }}\n className=\"flex-1 p-4 m-2 border-2 rounded-lg border-transparent\"\n canDropClassName=\"border-paqteal-500\"\n >\n {\n setWant(item)\n }}\n className=\"flex-1 p-4 m-2 border-2 rounded-lg border-transparent\"\n canDropClassName=\"border-paqteal-500\"\n >\n
\n \n Entrypoints\n
\n\n {have && have.length > 0 ? (\n have.map(h => (\n \n No entrypoints added yet! Drag the\n search results here!\n \n )}\n
\n \n {/* Dump for want parameter */}\n \n {cardStyle(h, {\n withRemoveButton: true,\n removeButtonOnClickCallback:\n idToRemove => {\n setHave(old => {\n let temp = [...old]\n let i =\n temp.findIndex(\n i =>\n i._id ===\n idToRemove\n )\n temp.splice(i, 1)\n return temp\n })\n },\n })}\n
\n ))\n ) : (\n Target
\n\n {want ? (\n cardStyle(want, {\n withRemoveButton: true,\n removeButtonOnClickCallback: () => {\n setWant() // sets want to undefined (default state)\n },\n })\n ) : (\n \n No target parameter defined yet! Drag a\n search result here!\n \n )}\n
\n \n \n {/* Logo */}\n
\n\n {/* Important infos (subtitle) */}\n
\n )\n}\n","import React, { useState } from \"react\"\nimport NotImplemented from \"../../components/NotImplemented\"\nimport ViewHeading from \"../../components/ViewHeading\"\n\n/**\n * This view is used to create new commands by template.\n * WORK IN PROGRESS!\n */\nexport default function CommandNewView() {\n const [formValues, setFormValues] = useState({\n name: \"\",\n description: \"\",\n template: \"\",\n template_values: \"{}\",\n })\n\n const [response, setResponse] = useState(null)\n\n const handleSubmit = async event => {\n event.preventDefault()\n\n let v = { ...formValues }\n v[\"template_values\"] = JSON.parse(v.template_values) // transform json string to JS object\n\n alert(`Commiting command:\\n${JSON.stringify(v, null, 4)}`)\n let r = await fetch(\"/api/command\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(v),\n }).catch(e => console.log(e))\n\n setResponse(await r.text())\n }\n\n const handleChange = event => {\n let v = { ...formValues } // shallow copy formValues\n v[event.target.name] = event.target.value // change the field\n setFormValues(v) // set it to state\n }\n\n return (\n \n 
\n
\n\n {/* Cards with information */}\n \n
\n\n \n \n \n \n \n \n \n \n
\n \n \n \n
\n \n
\n \n PAQMAN is a command line companion tool to\n improve your pentesting experience. It provides\n you with copy-pastable commands depending on the\n information you collect or already have to\n transform them into a successful attack.\n
\n\n PAQMAN is kept as simple as possible to allow\n you to fully focus on your work.\n
\n\n
\n \n If you want to search for predefined Attacks,\n use the{\" \"}\n Attack List.\n To list all Commands, use the{\" \"}\n Command List.\n You can search for both name and description in\n every view of PAQMAN.\n
\n\n For already gathered or targeted parameters, use{\" \"}\n \n Attack by Parameter\n {\" \"}\n and{\" \"}\n \n Command by Parameter\n {\" \"}\n to search for actions matching your current\n situation.\n
\n\n If you want to add a new Attack or Command, use\n the Add{\" \"}\n button, respectively.\n
\n| \n Command{\" \"}\n | \n\n Well, just a command. This can be a\n binary, shell script or any other\n executable with flags, values, etc.\n | \n
| \n Attack{\" \"}\n | \n\n An Attack bundles Commands statically to\n form a predefined sequence of actions.\n The Commands are preconfigured and ready\n to be executed.\n | \n
| \n Parameter{\" \"}\n | \n\n This is PAQMANs centerpiece. Parameters\n define abstract subgoals while executing\n a chain of Commands (e.g. an Attack).\n They provide context to usually\n stateless Commands.\n | \n
\n
\n \n PAQMAN was developed as a project work by Nadine\n Weber, Nicola Jäger and Leon Schmidt as part of\n a project work at the University of Applied\n Sciences Offenburg.\n
\n\n \n
\n
\n
\n Images created by Ines Martinez Bischoff\n
\n\n\n {/* Important infos (subtitle) */}\n
\n
\n\n \n Version {version}
\n\n \n \n \n \n \n \n
\n \n \n \n
\n )\n}\n","import React from \"react\"\nimport { useRouteMatch, Switch, Route, Redirect } from \"react-router-dom\"\nimport AttackListView from \"../views/preparation/AttackListView\"\nimport AttackByParameterView from \"../views/preparation/AttackByParameterView\"\nimport AttackNewView from \"../views/preparation/AttackNewView\"\nimport CommandListView from \"../views/preparation/CommandListView\"\nimport CommandByParameterView from \"../views/preparation/CommandByParameterView\"\nimport AboutView from \"../views/preparation/AboutView\"\nimport CommandNewView from \"../views/preparation/CommandNewView\"\n\n/**\n * This page is used to prepare for an attack. Here you choose\n * which attack you want to perform before beeing redirected to\n * the \"perform attack\" page.\n * Also, things like the about page and the views for adding commands,\n * attacks and parameters reside here.\n */\nexport default function PreperationPage() {\n const { path } = useRouteMatch()\n\n return (\n \n
\n )}\n \n {response}
\nor
\n\n
\n Add a command by importing a manpage
\n\n
\n )\n}\n","export default class Template {\n constructor(template) {\n this.raw = template\n }\n\n /**\n * @returns Plaintext parts of the template as Array\n * @deprecated\n */\n get plaintexts() {\n let regex = /%\\{.*?\\}/g // pattern to find template values ( %{ } )\n let templateCopy = this.raw\n // split the template copy at the patters to retreive everything\n // that is not template value\n return templateCopy.split(regex)\n }\n\n /**\n * @returns Template value names found in the template as Array\n * @deprecated\n */\n get templateValueNames() {\n let regex = /%\\{.*?\\}/g // pattern to find template values ( %{ } )\n let templateCopy = this.raw\n // search for all templates with regex pattern and replace brackets\n return [...templateCopy.matchAll(regex)].map(e =>\n e[0].replace(\"%{\", \"\").replace(\"}\", \"\")\n )\n }\n\n /**\n * This returns an array which contains tupels of this form:\n *\n * `[ (\"plain\" || \"template_value\") , content ]`\n *\n * The first value describes, if the element is pure plaintext\n * or if it is a template value. The second element contains the\n * actual string (plaintext or template value name, respectively)\n *\n * This can be used to render out React components to display commands.\n *\n * @returns String\n */\n markedArray() {\n let regex = /(%\\{.*?\\})/g // pattern to find template values ( %{ } )\n let templateCopy = this.raw\n\n // the following regex pattern does not replace the matches\n return templateCopy.split(regex).map(e => {\n // check if e is a template value\n if (regex.test(e)) {\n return [\"template_value\", e.replace(\"%{\", \"\").replace(\"}\", \"\")]\n } else {\n return [\"plain\", e]\n }\n })\n }\n}\n","export const commandTemplateValueTypes = {\n nonvalueFlag: \"nonvalue-flag\",\n valueFlag: \"value-flag\",\n value: \"value\",\n selection: \"selection\",\n}\n","import React from \"react\"\n\n/**\n * Wraps the children into a auto-scaling lightgray box with proper code fonts\n * @param props\n * @param props.children The child components inside the Code Wrapper (does not need to be set explicitly)\n */\nexport default function CodeWrapper({ children }) {\n return (\n \n \n \n \n \n
\n \n {children}\n
\n )\n}\n","import React, { useState } from \"react\"\n\n/**\n * This provides an area to display a div on hover. The content text of this div is\n * specified by the \"tip\" prop\n * @param props\n * @param props.tip The hint message to show in the div on hover (it null or undefined, the tooltip will be disabled)\n * @param props.children DO NOT SPECIFY EXPLICITLY! The nested children elements inside the component tags\n */\nexport default function Tooltip({ tip, children }) {\n const [hovering, setHovering] = useState(false)\n\n return (\n \n setHovering(true)}\n onMouseOut={() => setHovering(false)}\n className=\"relative\"\n >\n {children}\n \n
\n \n \n )\n}\n","import React from \"react\"\nimport { commandTemplateValueTypes as valTypes } from \"../utils/enums\"\nimport Tooltip from \"./Tooltip\"\n\n/**\n * This displays a box containing either plaintext (if plaintext prop is provided) or a fillable\n * template value (if templateName and templateValue props are provided) used in the CommandTemplateForm component\n * @param {Object} props\n * @param {string} props.plaintext The hardcoded parts of the commands\n * @param {string} props.templateName The name of the template value\n * @param {Object} props.templateValue The value of the template\n * @param {*} props.formData The state for the form data in CommandTemplateForm\n * @param {Function} props.setFormData The state setter function for the form data in CommandTemplateForm\n */\nexport default function CommandTemplateValueBox({\n plaintext,\n templateName,\n templateValue,\n formData,\n setFormData,\n}) {\n /**\n * Used to compute the HTML input types by template value\n * @param v Object containing the template value definition\n * @returns Array that can be mapped to create the input elements\n */\n const inputTypesOf = v => {\n switch (v.type) {\n case valTypes.nonvalueFlag:\n return [\"checkbox\"]\n case valTypes.valueFlag:\n // \"checkbox\" for \"activating\" the flag\n // and \"text\" to define the content\n return [\"checkbox\", \"text\"]\n case valTypes.value:\n return [\"text\"]\n default:\n console.error(\n `ERROR: found unsupported type ${v.type} in command template value`\n )\n }\n }\n\n const handleChange = event => {\n const { name, type, checked, value } = event.target\n const d = { ...formData } // shallow copy formData\n\n // different command template value types have different\n // formats on how they are stored in formData\n switch (templateValue.type) {\n case valTypes.nonvalueFlag:\n d[name].triggered = checked\n break\n case valTypes.valueFlag:\n type === \"checkbox\"\n ? (d[name].triggered = checked)\n : (d[name].value = value)\n break\n case valTypes.value:\n d[name].value = value\n break\n default:\n console.error(\n `ERROR: found unsupported type ${templateValue.type} in command template value`\n )\n }\n\n setFormData(d)\n }\n\n if (plaintext) {\n return (\n {tip}
\n\n \n
\n )\n }\n\n if (templateName && templateValue) {\n return (\n {plaintext}
\n \n \n \n
\n )\n }\n\n // occurs, when there is no plaintext between two template values\n return \n}\n","import React, { useEffect, useState } from \"react\"\nimport { CopyToClipboard } from \"react-copy-to-clipboard\"\n// utils\nimport Template from \"../utils/Template\"\nimport { commandTemplateValueTypes as valTypes } from \"../utils/enums\"\n// JSX components\nimport Button from \"./Button\"\nimport CodeWrapper from \"./CodeWrapper\"\nimport CommandTemplateValueBox from \"./CommandTemplateValueBox\"\nimport Loading from \"./Loading\"\n\n/**\n * Displays the gray box containing the fillable template values of a command\n * @param {Object} props\n * @param {string} props.template The template string\n * @param {Object} props.templateValues The object from the command document containing the template value definitions\n * @param {boolean} props.withPreview Whether the full plaintext command should be displayed\n */\nexport default function CommandTemplateForm({\n template,\n templateValues,\n withPreview,\n}) {\n const [formData, setFormData] = useState()\n\n /* \n populate formData with defaults, if any in this format:\n {\n triggered: \"for checkboxes,\n value: \"for text inputs\"\n }\n */\n useEffect(() => {\n let fd = {}\n Object.entries(templateValues).forEach(([n, v]) => {\n switch (v.type) {\n case valTypes.nonvalueFlag:\n fd[n] = {\n triggered: v.default_state || false,\n }\n break\n case valTypes.valueFlag:\n fd[n] = {\n triggered: v.default_state || false,\n value: v.default || \"\",\n }\n break\n case valTypes.value:\n fd[n] = {\n value: v.default || \"\",\n }\n break\n default:\n console.log(\n `ERROR: found unsupported type ${v.type} in command template value`\n )\n }\n })\n setFormData(fd)\n }, [templateValues])\n\n const t = new Template(template)\n const marked = t.markedArray() // see javadoc for details on what this does\n\n const templateArray = () => {\n // reassamble the template to contain both plaintext and template values\n return marked.map(([type, e], index) =>\n type === \"template_value\" ? (\n \n \n
\n \n {inputTypesOf(templateValue).map((inputType, index) => (\n 15\n ? formData[templateName].value.length\n : 15\n }\n />\n ))}\n
\n \n {/* render out the reassambled template */}\n
\n )\n}\n","import React, { useEffect, useState } from \"react\"\nimport CommandTemplateForm from \"../components/CommandTemplateForm\"\nimport ViewHeading from \"../components/ViewHeading\"\nimport Loading from \"../components/Loading\"\nimport Card from \"../components/Card\"\nimport Button from \"../components/Button\"\n\n/**\n * This page is used to display more information about a\n * command. It shows it's paramters and how they are retreived.\n */\nexport default function CommandViewerPage({ match }) {\n // get the commandID from route URL\n const {\n params: { commandID },\n } = match\n\n const [data, setData] = useState()\n\n useEffect(() => {\n fetch(`/api/command/${commandID}`)\n .then(r => r.json())\n .then(r => setData(r))\n .catch(e => console.error(e))\n }, [commandID])\n\n if (!data) return \n \n \n
\n {/* things below the template (preview, copy button) */}\n \n {templateArray()}\n
\n \n {withPreview && (\n <>\n
\n \n \n \n
\n > {fullCommandString()}
\n\n {\n setCopied(true)\n setTimeout(() => setCopied(false), 3000)\n }}\n >\n
\n \n )}\n \n {/* Don't delete this div! It is required, as CopyToClipboard only accepts one child */}\n
\n \n \n Copied 👍\n
\n )}\n{data.error}
\n\n return (\n\n
\n )\n}\n","import React from \"react\"\nimport NotImplemented from \"../components/NotImplemented\"\n\n/**\n * This page is used to inspect an attack. The commands to perform\n * this attack are displayed and the \"perform atttack\" page can be\n * accessed from here. Also, clicking on commands opens the command\n * viewer to inspect them further.\n */\nexport default function AttackViewerPage({ match }) {\n return \n
\n \n
\n \n \n \n
\n \n {data.instructions ||\n \"No instructions available\"}\n
\n {data.online_manpage && (\n\n \n \n \n
\n )}\n \n \n \n
\n \n
\n \n Requires root? \n {data.requires_root ? (\n \n {/* paqgreen color needs adjustment */}\n ✓\n \n ) : (\n \n ✕\n \n )}\n
\n\n
\n )\n}\n","import React from \"react\"\nimport { Link, useLocation } from \"react-router-dom\"\n\n/**\n * A LinkButton uses the react-router Link component to redirect a user to a\n * ressource, routed via browser router.\n *\n * IMPORTANT: Always append a trailing slash at the end of the path in the \"to\"\n * prop, as the backend served the static frontend files in strict slash mode.\n *\n * @param props\n * @param props.title The text displayed in the button\n * @param props.to The internal URL to redirect to, when the button is clicked\n */\nexport default function LinkButton({ title, to }) {\n const selectedStyle = \" border-yellow-400\"\n const { pathname } = useLocation() // gets the current path\n\n let selected\n if (pathname === to) selected = true\n\n return (\n \n Page not found
\n:(
\n\n
\n )\n}\n","import React from \"react\"\nimport LinkButton from \"../components/LinkButton\"\nimport LinkButtonGroup from \"../components/LinkButtonGroup\"\n\n/**\n * This is the sidebar displayed on the preperation page\n * @param props\n * @param props.collapsed If the sidebar is collapsed (not visible)\n */\nexport default function Sidebar({ collapsed }) {\n return (\n {title}
\n {children}\n\n {/* upper buttons */}\n
\n \n )\n}\n","import React from \"react\"\n\n/**\n * This component is used to wrap the views and pages to fit the\n * header and sidebar.\n * @param props\n * @param props.sidebarCollapsed If PAQMANs sidebar is collapsed or not\n */\nexport default function ViewContainer({ sidebarCollapsed, children }) {\n return (\n \n \n \n \n
\n\n \n
\n {/* lower buttons */}\n \n
\n
\n