2025-04-29 23:54:59 +05:30

887 lines
44 KiB
JavaScript

import React from "react";
import AccordionContainer from "../common/AccordionContainer";
const InfraCard = ({ project, building }) => {
const handleViewProject = (e) => {
e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
window.location.href = "/projects/" + project.id;
};
return (
<div className="col-md-6 col-lg-6 col-xl-6 order-0 mb-4">
<div className="card">
<div className="card-header pb-4">
<div className="d-flex align-items-start">
<div className="d-flex align-items-center">
<div className="avatar me-4">
<i
className="rounded-circle bx bx-building-house"
style={{ fontSize: "xx-large" }}
></i>
{/* <img
src="../../assets/img/icons/brands/social-label.png"
alt="Avatar"
className="rounded-circle"
></img> */}
</div>
<div className="me-2">
<h5 className="mb-0">
<a
href="javascript:;"
className="stretched-link text-heading"
>
{building.name}
</a>
</h5>
{/* <div className="client-info text-body">
<span className="fw-medium">Client: </span>
<span>{project.contactPerson}</span>
</div> */}
</div>
</div>
<div className="ms-auto">
<div className="dropdown z-2">
<button
type="button"
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
</button>
<ul className="dropdown-menu dropdown-menu-end">
<li>
{/* <a className="dropdown-item" href="javascript:void(0);">
View details
</a> */}
<a
aria-label="click to View details"
className="dropdown-item"
href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
onClick={handleViewProject}
>
<i className="bx bx-detail me-2"></i>
<span className="align-left">View details</span>
</a>
</li>
<li>
<a className="dropdown-item" href="javascript:void(0);">
<i className="bx bx-pencil me-2"></i>
<span className="align-left">Modify</span>
</a>
</li>
<li>
<a className="dropdown-item" href="javascript:void(0);">
<i className="bx bx-task me-2"></i>
<span className="align-left">Activities</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="card-body">
<div className="d-flex align-items-center flex-wrap">
<div className="table-responsive text-nowrap">
<div className="row">
<AccordionContainer
title="Basic Accordion"
items={[
{
id: 1,
title: "Building 1",
active: true,
content: (
<AccordionContainer
title="Basic Accordion"
items={[
{
id: 11,
title: "Floor 1",
active: true,
content: (
<div className="table-responsive text-nowrap">
<table className="table">
<thead>
<tr>
<th>Work Item</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody className="table-border-bottom-0">
<tr>
<td>
<i className="bx bxl-angular bx-sm text-danger me-3"></i>
<span className="fw-medium">
Welding
</span>
</td>
<td>Albert Cook</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-primary me-1">
Active
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-1"></i>{" "}
Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-1"></i>{" "}
Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i className="bx bxl-react bx-sm text-info me-3"></i>{" "}
<span className="fw-medium">
Core Cut
</span>
</td>
<td>Barry Hunter</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-success me-1">
Completed
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-2"></i>{" "}
Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-2"></i>{" "}
Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i className="bx bxl-vuejs bx-sm text-success me-3"></i>
<span className="fw-medium">
VueJs Project
</span>
</td>
<td>Trevor Baker</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-info me-1">
Scheduled
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-2"></i>{" "}
Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-2"></i>{" "}
Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i className="bx bxl-bootstrap bx-sm text-primary me-3"></i>
<span className="fw-medium">
Bootstrap Project
</span>
</td>
<td>Jerry Milton</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-warning me-1">
Pending
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-2"></i>{" "}
Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-2"></i>{" "}
Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
),
},
{
id: 12,
title: "Floor 2",
active: false,
content: `Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake
dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies.
Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.`,
},
{
id: 13,
title: "Floor 3",
active: false,
content: `Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon
gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake
dragée caramels. Ice cream wafer danish cookie caramels muffin.`,
},
]}
/>
),
},
{
id: 2,
title: "Building 2",
active: false,
content: `Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake
dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies.
Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.`,
},
{
id: 3,
title: "Building 3",
active: false,
content: `Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon
gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake
dragée caramels. Ice cream wafer danish cookie caramels muffin.`,
},
]}
/>{" "}
</div>
<table className="table">
<thead>
<tr>
<th>Work Item</th>
<th>Client</th>
<th>Users</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody className="table-border-bottom-0">
<tr>
<td>
<i className="bx bxl-angular bx-sm text-danger me-3"></i>
<span className="fw-medium">Welding</span>
</td>
<td>Albert Cook</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-primary me-1">
Active
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-1"></i> Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-1"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i className="bx bxl-react bx-sm text-info me-3"></i>{" "}
<span className="fw-medium">Core Cut</span>
</td>
<td>Barry Hunter</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-success me-1">
Completed
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-2"></i> Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-2"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i className="bx bxl-vuejs bx-sm text-success me-3"></i>
<span className="fw-medium">VueJs Project</span>
</td>
<td>Trevor Baker</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-info me-1">
Scheduled
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-2"></i> Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-2"></i> Delete
</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<i className="bx bxl-bootstrap bx-sm text-primary me-3"></i>
<span className="fw-medium">Bootstrap Project</span>
</td>
<td>Jerry Milton</td>
<td>
<ul className="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Lilian Fuller"
>
<img
aria-label="table image"
src="../assets/img/avatars/5.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Sophia Wilkerson"
>
<img
aria-label="table image"
src="../assets/img/avatars/6.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
className="avatar avatar-xs pull-up"
title="Christina Parker"
>
<img
aria-label="table image"
src="../assets/img/avatars/7.png"
alt="Avatar"
className="rounded-circle"
/>
</li>
</ul>
</td>
<td>
<span className="badge bg-label-warning me-1">
Pending
</span>
</td>
<td>
<div className="dropdown">
<button
aria-label="Click me"
type="button"
className="btn p-0 dropdown-toggle hide-arrow"
data-bs-toggle="dropdown"
>
<i className="bx bx-dots-vertical-rounded"></i>
</button>
<div className="dropdown-menu">
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-edit-alt me-2"></i> Edit
</a>
<a
aria-label="dropdown action option"
className="dropdown-item"
href="#"
>
<i className="bx bx-trash me-2"></i> Delete
</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
};
export default InfraCard;