Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge fix

Browse Source
This commit is contained in:
Vishnu
2025-03-27 09:06:26 +05:30
parent cc4d9d069b
commit 38ab556d17
11 changed files with 459 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@@ -30,6 +30,7 @@ const Outline: React.FC = () => {
defaultOpen={true} defaultOpen={true}
showKebabMenu={false} showKebabMenu={false}
showFocusIcon={true} showFocusIcon={true}
remove
/> />
<DropDownList <DropDownList
value="Scene" value="Scene"

15
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -12,16 +12,15 @@ import {
import useToggleStore from "../../../store/useUIToggleStore"; import useToggleStore from "../../../store/useUIToggleStore";
import MachineMechanics from "./mechanics/MachineMechanics"; import MachineMechanics from "./mechanics/MachineMechanics";
import Visualization from "./visualization/Visualization"; import Visualization from "./visualization/Visualization";
import GlobalProperties from "./properties/GlobalProperties";
import AsstePropertiies from "./properties/AssetProperties";
import Analysis from "./analysis/Analysis"; import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations"; import Simulations from "./simulation/Simulations";
import { useSelectedActionSphere } from "../../../store/store"; import { useSelectedActionSphere } from "../../../store/store";
import GlobalProperties from "./properties/GlobalProperties";
import AsstePropertiies from "./properties/AssetProperties";
import ZoneProperties from "./properties/ZoneProperties"; import ZoneProperties from "./properties/ZoneProperties";
const SideBarRight: React.FC = () => { const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const [activeList] = useState("properties");
const { toggleUI } = useToggleStore(); const { toggleUI } = useToggleStore();
const { selectedActionSphere } = useSelectedActionSphere(); const { selectedActionSphere } = useSelectedActionSphere();
const { subModule, setSubModule } = useSubModuleStore(); const { subModule, setSubModule } = useSubModuleStore();
@@ -54,7 +53,7 @@ const SideBarRight: React.FC = () => {
}`} }`}
onClick={() => setSubModule("mechanics")} onClick={() => setSubModule("mechanics")}
> >
<MechanicsIcon isActive={activeList === "mechanics"} /> <MechanicsIcon isActive={subModule === "mechanics"} />
</div> </div>
<div <div
className={`sidebar-action-list ${ className={`sidebar-action-list ${
@@ -62,7 +61,7 @@ const SideBarRight: React.FC = () => {
}`} }`}
onClick={() => setSubModule("simulations")} onClick={() => setSubModule("simulations")}
> >
<SimulationIcon isActive={activeList === "simulations"} /> <SimulationIcon isActive={subModule === "simulations"} />
</div> </div>
<div <div
className={`sidebar-action-list ${ className={`sidebar-action-list ${
@@ -70,7 +69,7 @@ const SideBarRight: React.FC = () => {
}`} }`}
onClick={() => setSubModule("analysis")} onClick={() => setSubModule("analysis")}
> >
<AnalysisIcon isActive={activeList === "analysis"} /> <AnalysisIcon isActive={subModule === "analysis"} />
</div> </div>
</> </>
)} )}
@@ -78,7 +77,7 @@ const SideBarRight: React.FC = () => {
)} )}
{/* process builder */} {/* process builder */}
{toggleUI && {toggleUI &&
activeList === "properties" && subModule === "properties" &&
activeModule !== "visualization" && ( activeModule !== "visualization" && (
<div className="sidebar-right-container"> <div className="sidebar-right-container">
<div className="sidebar-right-content-container"> <div className="sidebar-right-content-container">
@@ -114,7 +113,7 @@ const SideBarRight: React.FC = () => {
</div> </div>
</div> </div>
)} )}
{activeList === "simulations" && ( {subModule === "simulations" && (
<div className="sidebar-right-container"> <div className="sidebar-right-container">
<div className="sidebar-right-content-container"> <div className="sidebar-right-content-container">
<Simulations /> <Simulations />

27
app/src/components/ui/componets/AddButtons.tsx
View File

@@ -4,6 +4,7 @@ import {
EyeIcon, EyeIcon,
LockIcon, LockIcon,
} from "../../icons/RealTimeVisulationIcons"; } from "../../icons/RealTimeVisulationIcons";
import { AddIcon } from "../../icons/ExportCommonIcons";
// Define the type for `Side` // Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@@ -109,7 +110,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
}; };
// Update the selectedZone state // Update the selectedZone state
console.log('updatedZone: ', updatedZone); console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone); setSelectedZone(updatedZone);
} else { } else {
// If the panel is not active, activate it // If the panel is not active, activate it
@@ -122,7 +123,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
}; };
// Update the selectedZone state // Update the selectedZone state
console.log('updatedZone: ', updatedZone); console.log("updatedZone: ", updatedZone);
setSelectedZone(updatedZone); setSelectedZone(updatedZone);
} }
}; };
@@ -132,7 +133,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{(["top", "right", "bottom", "left"] as Side[]).map((side) => ( {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}> <div key={side} className={`side-button-container ${side}`}>
<button <button
className={`side-button ${side}`} className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`}
onClick={() => handlePlusButtonClick(side)} onClick={() => handlePlusButtonClick(side)}
title={ title={
selectedZone.activeSides.includes(side) selectedZone.activeSides.includes(side)
@@ -140,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
: `Activate ${side} panel` : `Activate ${side} panel`
} }
> >
+ <div className="add-icon">
<AddIcon />
</div>
</button> </button>
{/* Extra Buttons */} {/* Extra Buttons */}
@@ -148,7 +153,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs"> <div className="extra-Bs">
{/* Hide Panel */} {/* Hide Panel */}
<div <div
className={`icon ${hiddenPanels.includes(side) ? "active" : "" className={`icon ${
hiddenPanels.includes(side) ? "active" : ""
}`} }`}
title={ title={
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel" hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
@@ -171,7 +177,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Lock/Unlock Panel */} {/* Lock/Unlock Panel */}
<div <div
className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : "" className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`} }`}
title={ title={
selectedZone.lockedPanels.includes(side) selectedZone.lockedPanels.includes(side)
@@ -180,7 +187,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
} }
onClick={() => toggleLockPanel(side)} onClick={() => toggleLockPanel(side)}
> >
<LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} /> <LockIcon
fill={
selectedZone.lockedPanels.includes(side)
? "#ffffff"
: "#1D1E21"
}
/>
</div> </div>
</div> </div>
)} )}

54
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@@ -44,34 +44,34 @@ const RealTimeVisulization: React.FC = () => {
const [zonesData, setZonesData] = useState<FormattedZoneData>({}); const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
// useEffect(() => { useEffect(() => {
// async function GetZoneData() { async function GetZoneData() {
// try { try {
// const response: { data: Zone[] } | undefined = await getZonesApi( const response: { data: Zone[] } | undefined = await getZonesApi(
// "hexrfactory" "hexrfactory"
// ); );
// if (!response || !response.data) { if (!response || !response.data) {
// return; return;
// } }
// const formattedData = response?.data?.reduce<FormattedZoneData>( const formattedData = response?.data?.reduce<FormattedZoneData>(
// (acc, zone) => { (acc, zone) => {
// acc[zone.zoneName] = { acc[zone.zoneName] = {
// activeSides: [], activeSides: [],
// panelOrder: [], panelOrder: [],
// lockedPanels: [], lockedPanels: [],
// zoneCentrePoint: [], zoneCentrePoint: [],
// widgets: [], widgets: [],
// }; };
// return acc; return acc;
// }, },
// {} {}
// ); );
// setZonesData(formattedData); setZonesData(formattedData);
// } catch (error) { } } catch (error) { }
// } }
// GetZoneData(); GetZoneData();
// }, []); }, []);
useEffect(() => { useEffect(() => {

2
app/src/components/ui/inputs/Search.tsx
View File

@@ -36,7 +36,7 @@ const Search: React.FC<SearchProps> = ({
}; };
return ( return (
<div className="asset-search-wrapper"> <div className="search-wrapper">
<div <div
className={`search-container ${ className={`search-container ${
isFocused || inputValue ? "active" : "" isFocused || inputValue ? "active" : ""

23
app/src/components/ui/list/DropDownList.tsx
View File

@@ -13,6 +13,7 @@ interface DropDownListProps {
kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
defaultOpen?: boolean; // Determines if the dropdown list should be open by default defaultOpen?: boolean; // Determines if the dropdown list should be open by default
listType?: string; // Type of list to display listType?: string; // Type of list to display
remove?: boolean;
} }
const DropDownList: React.FC<DropDownListProps> = ({ const DropDownList: React.FC<DropDownListProps> = ({
@@ -28,25 +29,29 @@ const DropDownList: React.FC<DropDownListProps> = ({
], ],
defaultOpen = false, defaultOpen = false,
listType = "default", listType = "default",
remove,
}) => { }) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen); const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
const handleToggle = () => { const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state setIsOpen((prev) => !prev); // Toggle the state
}; };
const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]); const [zoneDataList, setZoneDataList] = useState<
{ id: string; name: string }[]
>([]);
useEffect(() => { useEffect(() => {
async function GetZoneData() { async function GetZoneData() {
const response = await getZonesApi("hexrfactory") const response = await getZonesApi("hexrfactory");
console.log('response: ', response.data); console.log("response: ", response.data);
setZoneDataList([{ id: "1", name: "zone1" }, setZoneDataList([
{ id: "2", name: "Zone 2" },]) { id: "1", name: "zone1" },
{ id: "2", name: "Zone 2" },
]);
} }
GetZoneData() GetZoneData();
}, []);
}, [])
return ( return (
<div className="dropdown-list-container"> <div className="dropdown-list-container">
@@ -81,7 +86,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
</div> </div>
{isOpen && ( {isOpen && (
<div className="lists-container"> <div className="lists-container">
{listType === "default" && <List items={items} />} {listType === "default" && <List items={items} remove={remove} />}
{listType === "outline" && ( {listType === "outline" && (
<> <>
<DropDownList <DropDownList

7
app/src/components/ui/list/List.tsx
View File

@@ -5,10 +5,11 @@ import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
interface ListProps { interface ListProps {
items?: { id: string; name: string }[]; // Optional array of items to render items?: { id: string; name: string }[]; // Optional array of items to render
placeholder?: string; // Optional placeholder text placeholder?: string; // Optional placeholder text
remove?: boolean;
} }
const List: React.FC<ListProps> = ({ items = [] }) => { const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log('items: ', items); console.log("items: ", items);
return ( return (
<> <>
{items.length > 0 ? ( {items.length > 0 ? (
@@ -26,9 +27,11 @@ const List: React.FC<ListProps> = ({ items = [] }) => {
<div className="visibe option"> <div className="visibe option">
<EyeIcon isClosed /> <EyeIcon isClosed />
</div> </div>
{remove && (
<div className="remove option"> <div className="remove option">
<RmoveIcon /> <RmoveIcon />
</div> </div>
)}
</div> </div>
</div> </div>
</li> </li>

2
app/src/modules/market/FilterSearch.tsx
View File

@@ -13,7 +13,9 @@ const FilterSearch: React.FC = () => {
}; };
return ( return (
<div className="filter-search-container"> <div className="filter-search-container">
<div className="asset-search-wrapper">
<Search onChange={() => {}} /> <Search onChange={() => {}} />
</div>
<RegularDropDown <RegularDropDown
header={activeOption} header={activeOption}
options={["Alphabet ascending", "Alphabet descending"]} options={["Alphabet ascending", "Alphabet descending"]}

29
app/src/styles/components/marketPlace/marketPlace.scss
View File

@@ -19,7 +19,6 @@
box-shadow: #{$box-shadow-medium}; box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large}; border-radius: #{$border-radius-extra-large};
position: relative; position: relative;
} }
.marketPlace { .marketPlace {
@@ -45,29 +44,30 @@
max-width: 684px; max-width: 684px;
padding: 0; padding: 0;
border-radius: $border-radius-large; border-radius: $border-radius-large;
.search-wrapper {
padding: 0 12px;
.search-container { .search-container {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
border: none !important; border: none !important;
box-shadow: $box-shadow-medium;
border-radius: $border-radius-large; border-radius: $border-radius-large;
overflow: hidden; overflow: hidden;
padding: 4px 12px; padding: 6px 12px;
outline: 1px solid var(--border-color);
input { input {
border: none !important; border: none !important;
outline: none; outline: none;
}
} }
} }
} }
.regularDropdown-container { .regularDropdown-container {
max-width: 159px; max-width: 159px;
max-height: 30px;
height: 100%; height: 100%;
.dropdown-header { .dropdown-header {
align-items: center; align-items: center;
} }
@@ -88,7 +88,6 @@
.stars { .stars {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
} }
@@ -115,8 +114,8 @@
width: calc(25% - 23px); width: calc(25% - 23px);
border-radius: 18px; border-radius: 18px;
padding: 12px; padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000D; box-shadow: 0px 2px 10.5px 0px #0000000d;
border: 1px solid var(--background-accent-transparent, #E0DFFF80); border: 1px solid var(--background-accent-transparent, #e0dfff80);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -175,7 +174,6 @@
} }
.vendor-icon { .vendor-icon {
font-weight: #{$bold-weight}; font-weight: #{$bold-weight};
font-size: $regular; font-size: $regular;
} }
@@ -237,7 +235,6 @@
width: 50%; width: 50%;
padding: 50px 20px; padding: 50px 20px;
overflow-y: auto; overflow-y: auto;
} }
// Organization Section (Top part with image and details) // Organization Section (Top part with image and details)
@@ -301,7 +298,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
outline: 1px solid #909090CC; outline: 1px solid #909090cc;
border-radius: 6px; border-radius: 6px;
.asset-rating { .asset-rating {
@@ -322,13 +319,10 @@
width: 2px; width: 2px;
height: 12px; height: 12px;
background-color: #ccc; background-color: #ccc;
} }
} }
.asset-view { .asset-view {
font-weight: #{$bold-weight}; font-weight: #{$bold-weight};
font-size: $regular; font-size: $regular;
} }
@@ -348,8 +342,6 @@
} }
.button { .button {
color: white; color: white;
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
@@ -365,9 +357,6 @@
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--background-color); color: var(--background-color);
} }
} }
.closeButton { .closeButton {

38
app/src/styles/components/tools.scss
View File

@@ -161,25 +161,49 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
background-color: var(--accent-color); background-color: var(--highlight-accent-color);
cursor: pointer; cursor: pointer;
@include flex-center; @include flex-center;
position: fixed; position: fixed;
bottom: 60px; bottom: 60px;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
transition: background-color 0.3s, transform 0.3s; color: var(--accent-color);
color: var(--background-color);
// transform: none;
z-index: 100; z-index: 100;
isolation: isolate;
font-weight: 700;
&:hover { &:hover {
font-weight: 500;
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;
}
}
&::after{
content: "";
position: absolute;
height: 100%;
width: 100%;
background: var(--background-color-secondary);
border-radius: #{$border-radius-circle};
z-index: -1;
} }
} }
@keyframes pulse {
0%{
opacity: 0;
scale: .5;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
scale: 2;
}
}
@keyframes expandWidth { @keyframes expandWidth {
from { from {

37
app/src/styles/pages/realTimeViz.scss
View File

@@ -1,4 +1,5 @@
@use "../abstracts/variables.scss" as *; @use "../abstracts/variables.scss" as *;
@use "../abstracts/mixins" as *;
// Main Container // Main Container
.realTime-viz { .realTime-viz {
@@ -148,7 +149,6 @@
background: white; background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
border-radius: 6px;
overflow: visible !important; overflow: visible !important;
.panel-content { .panel-content {
@@ -160,6 +160,7 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
background-color: var(--background-color); background-color: var(--background-color);
border-radius: #{$border-radius-small};
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@@ -194,8 +195,6 @@
left: 0; left: 0;
right: 0; right: 0;
.panel-content { .panel-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -237,8 +236,8 @@
} }
.playingFlase { .playingFlase {
.zoon-wrapper{ .zoon-wrapper.bottom {
bottom: 300px !important; bottom: 300px;
} }
} }
// Side Buttons // Side Buttons
@@ -246,9 +245,11 @@
position: absolute; position: absolute;
display: flex; display: flex;
background-color: var(--background-color); background-color: var(--background-color);
padding: 5px; padding: 2px;
border-radius: 8px; border-radius: 2px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
box-shadow: #{$box-shadow-medium};
// outline: 1px solid var(--border-color);
.extra-Bs { .extra-Bs {
display: flex; display: flex;
@@ -278,13 +279,29 @@
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
width: 18px; width: 18px;
height: 18px; height: 18px;
display: flex; @include flex-center;
justify-content: center;
// align-items: center;
background-color: var(--accent-color); background-color: var(--accent-color);
border: none; border: none;
color: var(--background-color); color: var(--background-color);
border-radius: 4px; border-radius: 4px;
.add-icon {
@include flex-center;
transition: rotate 0.2s;
}
path {
stroke: var(--primary-color);
stroke-width: 2;
}
}
.active {
background: #ffe3e0;
.add-icon {
rotate: 45deg;
path {
stroke: #f65648;
stroke-width: 2;
}
}
} }
&.top { &.top {