Skip to content

Commit c558692

Browse files
one-communityone-community
authored
Merge pull request #5172 from OneCommunityGlobal/manoj_BMDashboard_v2
Manoj - Implement bmdashboard header persistence; add “All Inventory Types” to the project dropdown; add links to categories in “All Inventory Types” page
2 parents 9432058 + b43e7ed commit c558692

8 files changed

Lines changed: 362 additions & 152 deletions

File tree

‎src/components/BMDashboard/ConsumableList/ConsumableListView.jsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { useDispatch, useSelector } from 'react-redux';
33
import { fetchAllConsumables } from '../../../actions/bmdashboard/consumableActions';
44
import ItemListView from '../ItemList/ItemListView';
55
import UpdateConsumableModal from '../UpdateConsumables/UpdateConsumableModal';
6+
import { Link } from 'react-router-dom';
7+
import styles from '../InventoryTypesList/TypesList.module.css';
68

79
function ConsumableListView() {
810
const dispatch = useDispatch();
@@ -50,13 +52,19 @@ function ConsumableListView() {
5052
];
5153

5254
return (
53-
<ItemListView
54-
itemType={itemTypeLabel}
55-
items={transformedConsumables}
56-
errors={errors}
57-
UpdateItemModal={UpdateConsumableModal}
58-
dynamicColumns={dynamicColumns}
59-
/>
55+
<>
56+
<Link to="/bmdashboard/inventorytypes" className={styles.backLink}>
57+
All Inventory Types
58+
</Link>
59+
60+
<ItemListView
61+
itemType={itemTypeLabel}
62+
items={transformedConsumables}
63+
errors={errors}
64+
UpdateItemModal={UpdateConsumableModal}
65+
dynamicColumns={dynamicColumns}
66+
/>
67+
</>
6068
);
6169
}
6270

‎src/components/BMDashboard/Equipment/List/EquipmentList.jsx‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import useTheme from '../../../../hooks/useTheme';
33
import EquipmentsTable from './EquipmentsTable';
44
import EquipmentsInputs from './EquipmentsInputs';
55
import styles from './Equipments.module.css';
6+
import { Link } from 'react-router-dom';
7+
import stylesList from '../../InventoryTypesList/TypesList.module.css';
68

79
function EquipmentList() {
810
const [equipment, setEquipment] = useState({ label: 'All Equipments', value: '0' });
@@ -12,25 +14,30 @@ function EquipmentList() {
1214
useTheme();
1315

1416
return (
15-
<div className={`${styles.PageViewContainer}`}>
16-
<div className={`${styles.Page}`}>
17-
<div className={`${styles.Box}`}>
18-
<div className={`${styles.BuildingTitle}`}>EQUIPMENTS</div>
19-
<EquipmentsInputs
20-
equipment={equipment}
21-
setEquipment={setEquipment}
22-
project={project}
23-
setProject={setProject}
24-
/>
25-
<EquipmentsTable
26-
equipment={equipment}
27-
setEquipment={setEquipment}
28-
project={project}
29-
setProject={setProject}
30-
/>
17+
<>
18+
<Link to="/bmdashboard/inventorytypes" className={stylesList.backLink}>
19+
All Inventory Types
20+
</Link>
21+
<div className={`${styles.PageViewContainer}`}>
22+
<div className={`${styles.Page}`}>
23+
<div className={`${styles.Box}`}>
24+
<div className={`${styles.BuildingTitle}`}>EQUIPMENTS</div>
25+
<EquipmentsInputs
26+
equipment={equipment}
27+
setEquipment={setEquipment}
28+
project={project}
29+
setProject={setProject}
30+
/>
31+
<EquipmentsTable
32+
equipment={equipment}
33+
setEquipment={setEquipment}
34+
project={project}
35+
setProject={setProject}
36+
/>
37+
</div>
3138
</div>
3239
</div>
33-
</div>
40+
</>
3441
);
3542
}
3643

‎src/components/BMDashboard/InventoryTypesList/InventoryTypesList.jsx‎

Lines changed: 39 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
11
import { useState, useEffect } from 'react';
22
import { connect } from 'react-redux';
3-
import { useHistory } from 'react-router-dom';
4-
3+
import { Link } from 'react-router-dom';
54
import { fetchInvTypeByType } from '~/actions/bmdashboard/invTypeActions';
65
import { fetchInvUnits } from '~/actions/bmdashboard/invUnitActions';
7-
import { Accordion, Card, Button } from 'react-bootstrap';
8-
import DatePicker from 'react-datepicker';
9-
import 'react-datepicker/dist/react-datepicker.css';
10-
6+
import { Accordion, Card } from 'react-bootstrap';
117
import BMError from '../shared/BMError';
12-
import TypesTable from './TypesTable';
138
import UnitsTable from './invUnitsTable';
149
import AccordionToggle from './AccordionToggle';
1510
import styles from './TypesList.module.css';
1611

12+
const categories = [
13+
{ label: 'Materials', route: '/bmdashboard/materials' },
14+
{ label: 'Consumables', route: '/bmdashboard/consumables' },
15+
{ label: 'Equipments', route: '/bmdashboard/equipment' },
16+
{ label: 'Reusables', route: '/bmdashboard/reusables' },
17+
{ label: 'Tools', route: '/bmdashboard/tools' },
18+
];
19+
1720
export function InventoryTypesList(props) {
1821
const { invUnits, errors, dispatch } = props;
19-
const history = useHistory();
20-
21-
const categories = ['Materials', 'Consumables', 'Equipments', 'Reusables', 'Tools'];
22-
2322
const [isError, setIsError] = useState(false);
24-
const [currentTime, setCurrentTime] = useState(new Date());
25-
26-
const handleBack = () => {
27-
history.goBack();
28-
};
2923

3024
useEffect(() => {
3125
dispatch(fetchInvTypeByType('Materials'));
@@ -50,52 +44,38 @@ export function InventoryTypesList(props) {
5044
}
5145

5246
return (
53-
<div className={`${styles.typesListContainer}`}>
54-
<h1>All Inventory Types</h1>
55-
56-
<div className={`${styles.timestampContainer}`}>
57-
<span>Time:</span>
58-
<DatePicker
59-
selected={currentTime}
60-
onChange={date => setCurrentTime(date)}
61-
dateFormat="MM-dd-yyyy hh:mm:ss"
62-
id="timestamp"
63-
showTimeInput
64-
/>
47+
<div className={styles.typesListContainer}>
48+
{/* Page Header */}
49+
<div className={styles.pageHeader}>
50+
<h1 className={styles.pageTitle}>All Inventory Types</h1>
51+
<p className={styles.pageSubtitle}>Select a category to view and manage inventory</p>
6552
</div>
6653

67-
<Accordion>
68-
{categories?.map((category, index) => {
69-
return (
70-
<Card key={category}>
71-
<AccordionToggle as={Card.Header} eventKey={index + 1}>
72-
{category}
73-
</AccordionToggle>
74-
<Accordion.Collapse eventKey={index + 1}>
75-
<Card.Body className={`${styles.accordionCollapse}`}>
76-
<TypesTable category={category} />
77-
</Card.Body>
78-
</Accordion.Collapse>
79-
</Card>
80-
);
81-
})}
82-
83-
<Card>
84-
<AccordionToggle as={Card.Header} eventKey={categories.length + 1}>
85-
Unit of Measurement
86-
</AccordionToggle>
87-
<Accordion.Collapse eventKey={categories.length + 1}>
88-
<Card.Body className={`${styles.accordionCollapse}`}>
89-
<UnitsTable invUnits={invUnits} />
90-
</Card.Body>
91-
</Accordion.Collapse>
92-
</Card>
93-
</Accordion>
54+
{/* Category Cards Grid */}
55+
<div className={styles.categoryGrid}>
56+
{categories.map(({ label, route }) => (
57+
<Link key={label} to={route} className={styles.categoryCard}>
58+
<span className={styles.categoryCardLabel}>{label}</span>
59+
<div className={styles.categoryCardArrow}>›</div>
60+
</Link>
61+
))}
62+
</div>
9463

95-
<div className={`${styles.buttonContainer}`}>
96-
<Button variant="primary" className={`${styles.backButton}`} onClick={handleBack}>
97-
Back to previous list page
98-
</Button>
64+
{/* Unit of Measurement */}
65+
<div className={styles.unitSection}>
66+
<h2 className={styles.unitSectionTitle}>Unit of Measurement</h2>
67+
<Accordion>
68+
<Card className={styles.unitCard}>
69+
<AccordionToggle as={Card.Header} eventKey={1} className={styles.cardHeader}>
70+
View all units
71+
</AccordionToggle>
72+
<Accordion.Collapse eventKey={1}>
73+
<Card.Body className={styles.accordionCollapse}>
74+
<UnitsTable invUnits={invUnits} />
75+
</Card.Body>
76+
</Accordion.Collapse>
77+
</Card>
78+
</Accordion>
9979
</div>
10080
</div>
10181
);

0 commit comments

Comments
 (0)