Skip to content

Commit 933fcee

Browse files
one-communityone-community
authored
Merge pull request #4582 from OneCommunityGlobal/chirag-fix-page-not-loading-resource-usage-page
Chirag - Fixed Page not Loading error for Activity Resource Usage.
2 parents 1738c8d + 55dca58 commit 933fcee

7 files changed

Lines changed: 245 additions & 190 deletions

File tree

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

Lines changed: 0 additions & 81 deletions
This file was deleted.

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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;

src/components/CommunityPortal/Activities/activityId/Resources.css renamed to src/components/CommunityPortal/Activities/activityId/ResourcesUsage.module.css

Lines changed: 114 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,114 @@
1-
.resources-usage {
2-
background: white;
3-
padding: 20px;
4-
border-radius: 8px;
5-
font-family: Arial, sans-serif;
6-
width: 100%;
7-
}
8-
9-
/* border for all the row data */
10-
.resource-row {
11-
display: flex;
12-
justify-content: space-between;
13-
align-items: center;
14-
margin-bottom: 10px;
15-
border: 2px solid black;
16-
}
17-
18-
/* Column Styling for resources*/
19-
.column {
20-
flex: 1;
21-
padding: 15px;
22-
text-align: center;
23-
font-weight: bold;
24-
}
25-
26-
/* Header Styling */
27-
.header {
28-
background-color: #f5f5f5;
29-
font-weight: bold;
30-
}
31-
32-
.resource-row .column:last-child {
33-
border-right: none;
34-
}
35-
36-
/* colors for text based on status */
37-
.status-green {
38-
color: green;
39-
}
40-
41-
.status-yellow {
42-
color: orange;
43-
}
44-
45-
.status-red {
46-
color: red;
47-
}
48-
49-
.view-details {
50-
display: block;
51-
width: 100%;
52-
background-color: #e6f9e6;
53-
color: #146c43;
54-
font-weight: bold;
55-
border-radius: 5px;
56-
padding: 10px;
57-
cursor: pointer;
58-
border: none;
59-
text-decoration: none;
60-
transition: background 0.3s ease-in-out;
61-
text-align: center;
62-
}
63-
64-
.view-details:hover {
65-
background-color: #d1f0d1;
66-
}
67-
68-
/* Actions Column */
69-
.action-column {
70-
display: flex;
71-
justify-content: center;
72-
align-items: center;
73-
}
74-
75-
/* Tick Box */
76-
.tick-box {
77-
display: flex;
78-
justify-content: center;
79-
align-items: center;
80-
margin-top: 20px;
81-
}
82-
83-
.tick-label {
84-
display: flex;
85-
align-items: center;
86-
justify-content: center;
87-
font-weight: bold;
88-
background-color: white;
89-
border: 2px solid black;
90-
padding: 10px 15px;
91-
border-radius: 8px;
92-
cursor: pointer;
93-
}
1+
.resourcesUsage {
2+
padding: 20px;
3+
border-radius: 8px;
4+
font-family: Arial, sans-serif;
5+
width: 100%;
6+
}
7+
8+
/* border for all the row data */
9+
.resourceRow {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
margin-bottom: 10px;
14+
border: 2px solid black;
15+
}
16+
17+
/* Column Styling for resources*/
18+
.column {
19+
flex: 1;
20+
padding: 15px;
21+
text-align: center;
22+
font-weight: bold;
23+
}
24+
25+
/* Header Styling */
26+
.header {
27+
background-color: #f5f5f5;
28+
font-weight: bold;
29+
}
30+
31+
.headerDark{
32+
background-color: #2c3e50;
33+
font-weight: bold;
34+
}
35+
36+
.resourceRow .column:last-child {
37+
border-right: none;
38+
}
39+
40+
/* colors for text based on status */
41+
.statusgreen {
42+
color: green !important;
43+
}
44+
45+
.statusyellow {
46+
color: orange !important;
47+
}
48+
49+
.statusred {
50+
color: red !important;
51+
}
52+
53+
.viewDetailsButtonDark{
54+
display: block;
55+
width: 100%;
56+
color: #146c43;
57+
font-weight: bold;
58+
border-radius: 5px;
59+
padding: 10px;
60+
cursor: pointer;
61+
border: none;
62+
text-decoration: none;
63+
transition: background 0.2s ease-in-out;
64+
text-align: center;
65+
}
66+
67+
.viewDetailsButtonDark:hover {
68+
background-color: #2c3e50;
69+
70+
}
71+
72+
.viewDetails {
73+
display: block;
74+
width: 100%;
75+
color: #146c43;
76+
font-weight: bold;
77+
border-radius: 5px;
78+
padding: 10px;
79+
cursor: pointer;
80+
border: none;
81+
text-decoration: none;
82+
transition: background 0.2s ease-in-out;
83+
text-align: center;
84+
}
85+
86+
.viewDetails:hover {
87+
background-color: #d1f0d1;
88+
}
89+
90+
/* Actions Column */
91+
.actionColumn {
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
}
96+
97+
/* Tick Box */
98+
.tickBox {
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
margin-top: 20px;
103+
}
104+
105+
.tickLabel {
106+
display: flex;
107+
align-items: center;
108+
justify-content: center;
109+
font-weight: bold;
110+
border: 2px solid black;
111+
padding: 10px 15px;
112+
border-radius: 8px;
113+
cursor: pointer;
114+
}

0 commit comments

Comments
 (0)