Skip to content

Commit d98e58d

Browse files
one-communityone-community
authored
Merge pull request #4768 from OneCommunityGlobal/shravya/bugfix/resourcemangement-3399
Shravya Bugfix resourcemanagement 3399
2 parents dbb0202 + 465b56f commit d98e58d

5 files changed

Lines changed: 780 additions & 346 deletions

File tree

‎src/components/CommunityPortal/Activities/activityId/ResourcesUsage.jsx‎

Lines changed: 82 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,82 @@
1-
import { useState, useEffect } from 'react';
2-
import { useSelector } from 'react-redux';
3-
import styles from './ResourcesUsage.module.css';
4-
5-
function ResourcesUsage() {
6-
const darkMode = useSelector(state => state.theme.darkMode);
7-
const data = [
8-
{
9-
sNo: 1,
10-
name: 'Harsh Kadyan',
11-
materials: '????',
12-
facilities: 'Software Engineer Team',
13-
status: { text: 'Debited', color: 'green' },
14-
dueDate: '23 April 2025',
15-
},
16-
{
17-
sNo: 2,
18-
name: 'John Doe',
19-
materials: '????',
20-
facilities: 'HR Facilities',
21-
status: { text: 'Partially Debited', color: 'yellow' },
22-
dueDate: '12 May 2025',
23-
},
24-
{
25-
sNo: 3,
26-
name: 'Jane Smith',
27-
materials: '????',
28-
facilities: 'IT Equipment',
29-
status: { text: 'Not Debited', color: 'red' },
30-
dueDate: '15 March 2025',
31-
},
32-
{
33-
sNo: 4,
34-
name: 'Alex Brown',
35-
materials: '????',
36-
facilities: 'Admin Facilities',
37-
status: { text: 'Debited', color: 'green' },
38-
dueDate: '20 April 2025',
39-
},
40-
];
41-
42-
return (
43-
<div className={styles.resourcesUsage}>
44-
<h2 className={styles.resourceTitle}>Resource Usage Monitoring</h2>
45-
46-
{/* header for column */}
47-
<div className={`${styles.resourceRow} ${darkMode ? styles.headerDark : styles.header}`}>
48-
<div className={styles.column}>S.No</div>
49-
<div className={styles.column}>Name</div>
50-
<div className={styles.column}>Materials</div>
51-
<div className={styles.column}>Facilities</div>
52-
<div className={styles.column}>Status</div>
53-
<div className={styles.column}>Due Date</div>
54-
<div className={styles.column}>Actions</div>
55-
</div>
56-
57-
{/* data for each row */}
58-
{data.map(row => (
59-
<div key={row.sNo} className={styles.resourceRow}>
60-
<div className={styles.column}>{row.sNo}</div>
61-
<div className={styles.column}>{row.name}</div>
62-
<div className={styles.column}>{row.materials}</div>
63-
<div className={styles.column}>{row.facilities}</div>
64-
<div className={`${styles.column} ${styles[`status${row.status.color}`]}`}>
65-
{row.status.text}
66-
</div>
67-
<div className={styles.column}>{row.dueDate}</div>
68-
<div className={`${styles.column} ${styles.actionColumn}`}>
69-
<button
70-
type="button"
71-
className={`${darkMode ? styles.viewDetailsButtonDark : styles.viewDetails}`}
72-
>
73-
View Details
74-
</button>
75-
</div>
76-
</div>
77-
))}
78-
79-
<div className={styles.tickBox}>
80-
<label className={styles.tickLabel}>
81-
<input type="checkbox" id="tickAll" /> Tick off All Selected Items
82-
</label>
83-
</div>
84-
</div>
85-
);
86-
}
87-
88-
export default ResourcesUsage;
1+
import { useState, useEffect } from 'react';
2+
import { useSelector } from 'react-redux';
3+
import styles from './ResourcesUsage.module.css';
4+
5+
function ResourcesUsage() {
6+
const darkMode = useSelector(state => state.theme.darkMode);
7+
const data = [
8+
{
9+
sNo: 1,
10+
name: 'Harsh Kadyan',
11+
materials: '????',
12+
facilities: 'Software Engineer Team',
13+
status: { text: 'Debited', color: 'green' },
14+
dueDate: '23 April 2025',
15+
},
16+
{
17+
sNo: 2,
18+
name: 'John Doe',
19+
materials: '????',
20+
facilities: 'HR Facilities',
21+
status: { text: 'Partially Debited', color: 'yellow' },
22+
dueDate: '12 May 2025',
23+
},
24+
{
25+
sNo: 3,
26+
name: 'Jane Smith',
27+
materials: '????',
28+
facilities: 'IT Equipment',
29+
status: { text: 'Not Debited', color: 'red' },
30+
dueDate: '15 March 2025',
31+
},
32+
{
33+
sNo: 4,
34+
name: 'Alex Brown',
35+
materials: '????',
36+
facilities: 'Admin Facilities',
37+
status: { text: 'Debited', color: 'green' },
38+
dueDate: '20 April 2025',
39+
},
40+
];
41+
42+
return (
43+
<div className={`${darkMode ? styles.darkMode : ''}`}>
44+
<div className={`${styles.resourcesUsage}`}>
45+
<h2 className={`${styles.resourceTitle}`}>Resource Usage Monitoring</h2>
46+
<div className={`${styles.resourceRow}`}>
47+
<div className={`${styles.column}`}>S.No</div>
48+
<div className={`${styles.column}`}>Name</div>
49+
<div className={`${styles.column}`}>Materials</div>
50+
<div className={`${styles.column}`}>Facilities</div>
51+
<div className={`${styles.column}`}>Status</div>
52+
<div className={`${styles.column}`}>Due Date</div>
53+
<div className={`${styles.column}`}>Actions</div>
54+
</div>
55+
{data.map(row => (
56+
<div key={row.sNo} className={`${styles.resourceRow}`}>
57+
<div className={`${styles.column}`}>{row.sNo}</div>
58+
<div className={`${styles.column}`}>{row.name}</div>
59+
<div className={`${styles.column}`}>{row.materials}</div>
60+
<div className={`${styles.column}`}>{row.facilities}</div>
61+
<div className={`${styles.column} ${styles[`status${row.status.color}`]}`}>
62+
{row.status.text}
63+
</div>
64+
<div className={`${styles.column}`}>{row.dueDate}</div>
65+
<div className={`${styles.column} ${styles.actionColumn}`}>
66+
<button type="button" className={`${styles.viewDetailsButton}`}>
67+
View Details
68+
</button>
69+
</div>
70+
</div>
71+
))}
72+
<div className={`${styles.tickBox}`}>
73+
<label className={`${styles.tickLabel}`}>
74+
<input type="checkbox" id="tickAll" /> Tick off All Selected Items
75+
</label>
76+
</div>
77+
</div>
78+
</div>
79+
);
80+
}
81+
82+
export default ResourcesUsage;

‎src/components/CommunityPortal/Activities/activityId/ResourcesUsage.module.css‎

Lines changed: 69 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,79 @@
1-
/* src/components/CommunityPortal/Activities/activityId/Resources.module.css */
1+
.resourcesUsage {
2+
padding: 20px;
3+
border-radius: 8px;
4+
font-family: Arial, sans-serif;
5+
width: 100%;
6+
}
27

8+
.resourceRow {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
margin-bottom: 10px;
13+
border: 2px solid black;
14+
}
315

4-
/* Column Styling for resources*/
516
.column {
617
flex: 1;
718
padding: 15px;
819
text-align: center;
920
font-weight: bold;
1021
}
1122

23+
.resourceRow .column:last-child {
24+
border-right: none;
25+
}
1226

27+
.resourceTitle {
28+
text-align: left;
29+
font-size: 1.2rem;
30+
margin-bottom: 5px;
31+
font-weight: 700;
32+
color: grey;
33+
}
34+
35+
.header {
36+
background-color: #f5f5f5;
37+
font-weight: bold;
38+
}
1339

14-
/* colors for text based on status */
1540
.statusgreen {
16-
color: green !important;
41+
color: green;
1742
}
1843

1944
.statusyellow {
20-
color: orange !important;
45+
color: orange;
2146
}
2247

2348
.statusred {
24-
color: red !important;
49+
color: red;
2550
}
2651

27-
.viewDetails {
52+
.viewDetailsButton {
2853
display: block;
2954
width: 100%;
55+
background-color: #e6f9e6;
3056
color: #146c43;
3157
font-weight: bold;
3258
border-radius: 5px;
3359
padding: 10px;
3460
cursor: pointer;
3561
border: none;
3662
text-decoration: none;
37-
transition: background 0.2s ease-in-out;
3863
text-align: center;
64+
transition: background 0.3s ease-in-out;
3965
}
4066

41-
.viewDetails:hover {
67+
.viewDetailsButton:hover {
4268
background-color: #d1f0d1;
4369
}
4470

45-
/* Actions Column */
4671
.actionColumn {
4772
display: flex;
4873
justify-content: center;
4974
align-items: center;
5075
}
5176

52-
/* Tick Box */
5377
.tickBox {
5478
display: flex;
5579
justify-content: center;
@@ -62,39 +86,50 @@
6286
align-items: center;
6387
justify-content: center;
6488
font-weight: bold;
89+
background-color: white;
6590
border: 2px solid black;
6691
padding: 10px 15px;
6792
border-radius: 8px;
6893
cursor: pointer;
6994
}
7095

71-
.resourceTitle {
72-
text-align: left;
73-
font-size: 1.2rem;
74-
margin-bottom: 5px;
75-
font-weight: 700;
76-
color: grey;
96+
.darkMode .resourcesUsage {
97+
background-color: #34495e;
98+
color: #ecf0f1;
7799
}
78100

79-
.headerDark {
80-
background-color: #2c3e50;
81-
font-weight: bold;
101+
.darkMode .resourceRow {
102+
border: 2px solid #7f8c8d;
82103
}
83104

84-
.viewDetailsButtonDark {
85-
display: block;
86-
width: 100%;
87-
color: #146c43;
88-
font-weight: bold;
89-
border-radius: 5px;
90-
padding: 10px;
91-
cursor: pointer;
92-
border: none;
93-
text-decoration: none;
94-
transition: background 0.2s ease-in-out;
95-
text-align: center;
105+
.darkMode .column {
106+
color: #ecf0f1;
107+
}
108+
109+
.darkMode .tickLabel {
110+
color: #ecf0f1;
111+
border: 2px solid #7f8c8d;
112+
background-color: #34495e;
113+
}
114+
115+
.darkMode .viewDetailsButton {
116+
background-color: #27ae60;
117+
color: #ecf0f1;
118+
}
119+
120+
.darkMode .viewDetailsButton:hover {
121+
background-color: #1e8449;
122+
color: #ecf0f1;
123+
}
124+
125+
.darkMode .statusgreen {
126+
color: #27ae60 !important;
127+
}
128+
129+
.darkMode .statusyellow {
130+
color: #f39c12 !important;
96131
}
97132

98-
.viewDetailsButtonDark:hover {
99-
background-color: #2c3e50;
133+
.darkMode .statusred {
134+
color: #e74c3c !important;
100135
}

0 commit comments

Comments
 (0)