fix: homepage.

This commit is contained in:
elforjani3
2021-02-23 17:41:05 +02:00
parent dab43faff2
commit c1f7e498b4
9 changed files with 203 additions and 101 deletions

View File

@@ -1,56 +1,130 @@
export const shortcutBox = [
import React from 'react';
import { FormattedMessage as T } from 'react-intl';
export const accountsReceivable = [
{
title: 'Request time Off',
iconColor: '#F3FEFA',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Benefits',
iconColor: '#F5F3FE',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Schedule a one-on-one',
iconColor: '#F2F9FF',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Payroll',
iconColor: '#FFFCED',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Submit an expense',
iconColor: '#FDF1F1',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
},
{
title: 'Training',
iconColor: '#EFF1FE',
description:
'Cupidatat nulla minim sit duis duis laboris. Sint exercitation.',
sectionTitle: <T id={'accounts_receivable_a_r'} />,
shortcuts: [
{
title: 'Sales invoices',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/invoices',
},
{
title: 'Sales estimates',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/estimates',
},
{
title: 'Sales receipts',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/receipts',
},
{
title: 'Customers',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/customers',
},
{
title: 'Customers payment',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/',
},
],
},
];
export const announcementLists = [
export const accountsPayable = [
{
title: 'Office closed on July 2nd',
description:
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
},
{
title: 'New Password policy ',
description:
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
},
{
title: 'Office closed on July 2nd',
description:
'Incididunt Lorem ad sunt proident nulla exercitation consectetur reprehenderit labore qui.',
sectionTitle: <T id={'accounts_payable_a_p'} />,
shortcuts: [
{
title: 'Purchase invoices',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/bills',
},
{
title: 'Vendors',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/vendors',
},
{
title: 'Vendors payments',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/payment-mades',
},
],
},
];
export const financialAccounting = [
{
sectionTitle: <T id={'financial_accounting'} />,
shortcuts: [
{
title: 'Chart of accounts',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/accounts',
},
{
title: 'Manual journal',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/manual-journals',
},
{
title: 'Expenses',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/expenses',
},
{
title: 'Financial statements',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/',
},
],
},
];
export const productsServices = [
{
sectionTitle: <T id={'products_services_inventory'} />,
shortcuts: [
{
title: 'Products & Services',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/items',
},
{
title: 'Products & Services Categories',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/categories',
},
{
title: 'Inventory Adjustments',
description:
'Labore aute elit proident sit culpa. Commodo nulla veniam ullamco ullamco ut nulla pariatur eu. Esse tempor irure incididunt veniam sint excepteur quis.',
link: '/inventory-adjustments',
},
],
},
];

View File

@@ -0,0 +1,7 @@
import React from 'react';
import ShortcutBoxesSection from './ShortcutBoxesSection';
import { accountsPayable } from 'common/homepageOptions';
export default function AccountsPayableSection() {
return <ShortcutBoxesSection section={accountsPayable} />;
}

View File

@@ -0,0 +1,7 @@
import React from 'react';
import ShortcutBoxesSection from './ShortcutBoxesSection';
import { accountsReceivable } from 'common/homepageOptions';
export default function AccountsReceivableSection() {
return <ShortcutBoxesSection section={accountsReceivable} />;
}

View File

@@ -0,0 +1,7 @@
import React from 'react';
import ShortcutBoxesSection from './ShortcutBoxesSection';
import { financialAccounting } from 'common/homepageOptions';
export default function FinancialAccountingSection() {
return <ShortcutBoxesSection section={financialAccounting} />;
}

View File

@@ -1,14 +1,17 @@
import React from 'react';
import ShortcutBoxes from './ShortcutBoxes';
import AnnouncementList from './AnnouncementList';
import AccountsReceivableSection from './AccountsReceivableSection';
import AccountsPayableSection from './AccountsPayableSection';
import FinancialAccountingSection from './FinancialAccountingSection';
import ProductsServicesSection from './ProductsServicesSection';
import 'style/pages/HomePage/HomePage.scss';
function HomepageContent() {
return (
<div className={'homepage__container'}>
<ShortcutBoxes />
<AnnouncementList />
<div>
<AccountsReceivableSection />
<AccountsPayableSection />
<FinancialAccountingSection />
<ProductsServicesSection />
</div>
);
}

View File

@@ -0,0 +1,7 @@
import React from 'react';
import ShortcutBoxesSection from './ShortcutBoxesSection';
import { productsServices } from 'common/homepageOptions';
export default function ProductsServicesSection() {
return <ShortcutBoxesSection section={productsServices} />;
}

View File

@@ -1,45 +0,0 @@
import React from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import { shortcutBox } from 'common/homepageOptions';
import { Icon } from 'components';
function ShortcutBox({ title, iconColor, description }) {
return (
<div className={'shortcut-box'}>
<div className={'shortcut-box__header'}>
<span
className={'header--icon'}
style={{ backgroundColor: `${iconColor}` }}
>
<Icon icon={'clock'} iconSize={24} />
</span>
<span>
<a href={'#'}>
<Icon icon={'arrow-top-right'} iconSize={24} />
</a>
</span>
</div>
<div className={'shortcut-box__title'}>{title}</div>
<div className={'shortcut-box__description'}>{description}</div>
</div>
);
}
function ShortcutBoxes() {
return (
<section className={'shortcut-boxes'}>
{shortcutBox.map(({ title, description, iconColor }) => {
return (
<ShortcutBox
title={title}
description={description}
iconColor={iconColor}
/>
);
})}
</section>
);
}
export default ShortcutBoxes;

View File

@@ -0,0 +1,39 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { For } from 'components';
import 'style/pages/FinancialStatements/FinancialSheets.scss';
function ShortcutBox({ title, link, description }) {
return (
<div className={'financial-reports__item'}>
<Link className="title" to={link}>
{title}
</Link>
<p className="desc">{description}</p>
</div>
);
}
function ShortcutBoxes({ sectionTitle, shortcuts }) {
return (
<div className="financial-reports__section">
<div className="section-title">{sectionTitle}</div>
<div className="financial-reports__list">
<For render={ShortcutBox} of={shortcuts} />
{/* {shortcuts.map(({ title, link, description }) => (
<ShortcutBox title={title} description={description} link={link} />
))} */}
</div>
</div>
);
}
export default function ShortcutBoxesSection({ section }) {
return (
<div className="financial-reports">
<For render={ShortcutBoxes} of={section} />
</div>
);
}

View File

@@ -978,5 +978,8 @@ export default {
payable_aging_summary: 'Payable Aging Summary',
payment_receive_paper: 'Payment Receive Paper',
specific_vendors: 'Specific Vendors',
accounts_receivable_a_r: 'Accounts Receivable A/R',
accounts_payable_a_p: 'Accounts Payable A/P',
financial_accounting: ' Financial Accounting',
products_services_inventory: 'Products,Services & Inventory',
};