diff --git a/src/app/(main)/reports/[id]/Report.js b/src/app/(main)/reports/[id]/Report.js index 0bea18ed..4514a60a 100644 --- a/src/app/(main)/reports/[id]/Report.js +++ b/src/app/(main)/reports/[id]/Report.js @@ -8,6 +8,10 @@ export const ReportContext = createContext(null); export function Report({ reportId, defaultParameters, children, ...props }) { const report = useReport(reportId, defaultParameters); + if (!report) { + return null; + } + return (
diff --git a/src/app/(main)/reports/[id]/Report.module.css b/src/app/(main)/reports/[id]/Report.module.css index 6fa54281..18153655 100644 --- a/src/app/(main)/reports/[id]/Report.module.css +++ b/src/app/(main)/reports/[id]/Report.module.css @@ -3,23 +3,3 @@ grid-template-rows: max-content 1fr; grid-template-columns: max-content 1fr; } - -.header { - grid-row: 1 / 2; - grid-column: 1 / 3; - margin-bottom: 40px; -} - -.menu { - width: 300px; - padding-right: 20px; - border-right: 1px solid var(--base300); - grid-row: 2/3; - grid-column: 1 / 2; -} - -.body { - padding-left: 20px; - grid-row: 2/3; - grid-column: 2 / 3; -} diff --git a/src/app/(main)/reports/[id]/ReportBody.js b/src/app/(main)/reports/[id]/ReportBody.js index b34b138d..a116bf8e 100644 --- a/src/app/(main)/reports/[id]/ReportBody.js +++ b/src/app/(main)/reports/[id]/ReportBody.js @@ -1,4 +1,4 @@ -import styles from './Report.module.css'; +import styles from './ReportBody.module.css'; export function ReportBody({ children }) { return
{children}
; diff --git a/src/app/(main)/reports/[id]/ReportBody.module.css b/src/app/(main)/reports/[id]/ReportBody.module.css new file mode 100644 index 00000000..79e3caa0 --- /dev/null +++ b/src/app/(main)/reports/[id]/ReportBody.module.css @@ -0,0 +1,5 @@ +.body { + padding-left: 20px; + grid-row: 2/3; + grid-column: 2 / 3; +} diff --git a/src/app/(main)/reports/[id]/ReportHeader.js b/src/app/(main)/reports/[id]/ReportHeader.js index dd92bc6d..ed3b9736 100644 --- a/src/app/(main)/reports/[id]/ReportHeader.js +++ b/src/app/(main)/reports/[id]/ReportHeader.js @@ -1,11 +1,9 @@ import { useContext } from 'react'; import { useRouter } from 'next/navigation'; -import { Icon, LoadingButton, InlineEditField, useToasts, Loading } from 'react-basics'; -import PageHeader from 'components/layout/PageHeader'; +import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics'; import { useMessages, useApi } from 'components/hooks'; import { ReportContext } from './Report'; import styles from './ReportHeader.module.css'; -import reportStyles from './Report.module.css'; import { REPORT_TYPES } from 'lib/constants'; export function ReportHeader({ icon }) { @@ -48,9 +46,13 @@ export function ReportHeader({ icon }) { updateReport({ description }); }; - const Title = () => { - return ( -
+ if (!report) { + return null; + } + + return ( +
+
{formatMessage( labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)], @@ -66,17 +68,17 @@ export function ReportHeader({ icon }) { onCommit={handleNameChange} />
+
+ +
- ); - }; - - if (!report) { - return ; - } - - return ( -
- }> +
{formatMessage(labels.save)} - -
-
); diff --git a/src/app/(main)/reports/[id]/ReportHeader.module.css b/src/app/(main)/reports/[id]/ReportHeader.module.css index c15e3795..5ff26104 100644 --- a/src/app/(main)/reports/[id]/ReportHeader.module.css +++ b/src/app/(main)/reports/[id]/ReportHeader.module.css @@ -1,20 +1,36 @@ -.description { - color: var(--font-color300); -} - .header { display: grid; + grid-template-columns: 1fr min-content; + align-items: center; + grid-row: 1 / 2; + grid-column: 1 / 3; + margin: 20px 0 40px 0; } .title { display: flex; flex-direction: row; - gap: 10px; + align-items: center; + font-size: 24px; + font-weight: 700; + gap: 20px; + height: 60px; } .type { font-size: 11px; + font-weight: 700; text-transform: uppercase; color: var(--base600); - line-height: 30px; +} + +.description { + color: var(--font-color300); + max-width: 500px; + height: 30px; +} + +.actions { + display: flex; + align-items: center; } diff --git a/src/app/(main)/reports/[id]/ReportMenu.js b/src/app/(main)/reports/[id]/ReportMenu.js index 91c6fc16..72bc197a 100644 --- a/src/app/(main)/reports/[id]/ReportMenu.js +++ b/src/app/(main)/reports/[id]/ReportMenu.js @@ -1,4 +1,4 @@ -import styles from './Report.module.css'; +import styles from './ReportMenu.module.css'; export function ReportMenu({ children }) { return
{children}
; diff --git a/src/app/(main)/reports/[id]/ReportMenu.module.css b/src/app/(main)/reports/[id]/ReportMenu.module.css new file mode 100644 index 00000000..1fc8db29 --- /dev/null +++ b/src/app/(main)/reports/[id]/ReportMenu.module.css @@ -0,0 +1,7 @@ +.menu { + width: 300px; + padding-right: 20px; + border-right: 1px solid var(--base300); + grid-row: 2 / 3; + grid-column: 1 / 2; +}