From fd7a4a2829e14abd76ef9d05b7c3b46eaaa2b6d5 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Sun, 14 Apr 2024 18:43:30 +0200
Subject: [PATCH 1/4] redirect to network when clicking the logo

---
 src/components/layouts/header.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/layouts/header.tsx b/src/components/layouts/header.tsx
index dac8bd3a..f13bd797 100644
--- a/src/components/layouts/header.tsx
+++ b/src/components/layouts/header.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import { globalSiteTitle } from "~/utils/global";
 import { useSidebarStore } from "~/utils/store";
 import ZtnetLogo from "docs/images/logo/ztnet_100x100.png";
+import Link from "next/link";
 
 const Themes = [
 	"light",
@@ -27,7 +28,7 @@ const Header = () => {
 		<header className="header bg-base-200 px-4 py-1 shadow-md shadow-base">
 			<div className="header-content flex flex-row items-center">
 				<div className="hidden md:inline-flex">
-					<a href="#" className="inline-flex flex-row items-center gap-2">
+					<Link href="/network" className="inline-flex flex-row items-center gap-2">
 						<Image
 							style={{ width: 25, height: 25 }}
 							alt="ztnet logo"
@@ -37,7 +38,7 @@ const Header = () => {
 						<span className="ml-1 text-2xl font-bold uppercase leading-10 text-accent">
 							{globalSiteTitle}
 						</span>
-					</a>
+					</Link>
 				</div>
 				<div className="md:pl-12 flex items-center pt-1">
 					<label className={`${open ? "swap-active" : ""} swap swap-rotate`}>

From dcc5678d25fd424642d53f45aa8769801624c0b9 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Sun, 14 Apr 2024 18:54:39 +0200
Subject: [PATCH 2/4] increased width for network views

---
 src/components/layouts/layout.tsx |  2 +-
 src/pages/central/[id].tsx        | 26 +++++++++++------------
 src/pages/network/[id].tsx        | 34 +++++++++++++++----------------
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/layouts/layout.tsx b/src/components/layouts/layout.tsx
index 1907dca0..bd7b0373 100644
--- a/src/components/layouts/layout.tsx
+++ b/src/components/layouts/layout.tsx
@@ -103,7 +103,7 @@ export const LayoutOrganizationAuthenticated = ({ children }: Props): JSX.Elemen
 						openChats.includes(orgId) ? "mr-72" : ""
 					}`}
 				>
-					<div className="px-5 lg:px-24 space-y-5 pt-10">
+					<div className="px-5 lg:px-10 space-y-5 pt-10">
 						<OrgNavBar />
 						{children}
 						{/* Logs Footer */}
diff --git a/src/pages/central/[id].tsx b/src/pages/central/[id].tsx
index 9f30aac2..cc0f07b4 100644
--- a/src/pages/central/[id].tsx
+++ b/src/pages/central/[id].tsx
@@ -91,7 +91,7 @@ const CentralNetworkById = ({ orgIds }) => {
 	return (
 		<div>
 			<HeadSection title={pageTitle} />
-			<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-5/6 sm:p-10 md:text-base xl:space-y-0">
+			<div className="mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:p-10 md:text-base xl:space-y-0">
 				<div className="grid grid-cols-1 xl:grid-cols-[1fr,auto,1fr] gap-10">
 					<div className="flex flex-col space-y-3 sm:space-y-0">
 						<div className="flex flex-col justify-between sm:flex-row">
@@ -127,7 +127,7 @@ const CentralNetworkById = ({ orgIds }) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto flex px-4 text-sm sm:px-10 md:text-base">
 				<div className="flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
 					<div>
 						<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
@@ -161,10 +161,10 @@ const CentralNetworkById = ({ orgIds }) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				{t("networkSettings")}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkIpAssignment central />
@@ -177,7 +177,7 @@ const CentralNetworkById = ({ orgIds }) => {
 					<NettworkRoutes central />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					{" "}
@@ -191,10 +191,10 @@ const CentralNetworkById = ({ orgIds }) => {
 					<NetworkMulticast central />
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				{t("networkMembers")}
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto w-full px-4 py-4 text-sm sm:px-10 md:text-base">
 				{members?.length ? (
 					<div className="membersTable-wrapper">
 						<NetworkMembersTable nwid={network.id} central={true} />
@@ -266,14 +266,14 @@ const CentralNetworkById = ({ orgIds }) => {
 					</div>
 				)}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
 					<InviteMemberByMail />
 					<AddMemberById central />
 				</div>
 			</div>
-			{/* <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			{/* <div className="mx-auto w-full px-4 py-4 text-sm sm:px-10 md:text-base">
         <div className="mb-4 md:mb-0">
           {networkById?.zombieMembers?.length > 0 ? (
             <>
@@ -298,17 +298,17 @@ const CentralNetworkById = ({ orgIds }) => {
           ) : null}
         </div>
       </div> */}
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				<NetworkHelpText />
 			</div>
 
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				<CentralFlowRules />
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				Network Actions
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
+			<div className="mx-auto px-4 py-4 text-sm sm:px-10 md:flex-row md:text-base">
 				<div className="flex items-end md:justify-end">
 					<button
 						onClick={() =>
diff --git a/src/pages/network/[id].tsx b/src/pages/network/[id].tsx
index 5a549dee..32969390 100644
--- a/src/pages/network/[id].tsx
+++ b/src/pages/network/[id].tsx
@@ -80,10 +80,10 @@ const NetworkById = ({ orgIds }: IProps) => {
 						<li>{t("errorSteps.step1")}</li>
 						<li>{t("errorSteps.step2")}</li>
 					</ul>
-					<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+					<div className="divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
 						Network Actions
 					</div>
-					<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
+					<div className="mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
 						<div className="flex items-end md:justify-end">
 							<button
 								onClick={() =>
@@ -123,7 +123,7 @@ const NetworkById = ({ orgIds }: IProps) => {
 	return (
 		<div className="animate-fadeIn">
 			<HeadSection title={pageTitle} />
-			<div className="w-5/5 mx-auto flex py-10 px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto py-10 px-4 text-sm sm:px-10 md:text-base">
 				<div className="grid grid-cols-1 xl:grid-cols-[1fr,auto,1fr] gap-10">
 					<div className="flex flex-col space-y-3 sm:space-y-0">
 						<div className="flex flex-col justify-between sm:flex-row">
@@ -159,7 +159,7 @@ const NetworkById = ({ orgIds }: IProps) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto flex px-4 text-sm sm:px-10 md:text-base">
 				<div className="hidden lg:flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
 					<div>
 						<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
@@ -193,10 +193,10 @@ const NetworkById = ({ orgIds }: IProps) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				{t("networkSettings")}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkIpAssignment />
@@ -209,7 +209,7 @@ const NetworkById = ({ orgIds }: IProps) => {
 					<NettworkRoutes />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkDns />
@@ -222,10 +222,10 @@ const NetworkById = ({ orgIds }: IProps) => {
 					<NetworkMulticast />
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				{t("networkMembers")}
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto w-full px-4 py-4 text-sm sm:px-10 md:text-base">
 				{members.length ? (
 					<div className="membersTable-wrapper">
 						<NetworkMembersTable nwid={network.nwid} central={false} />
@@ -297,14 +297,14 @@ const NetworkById = ({ orgIds }: IProps) => {
 					</div>
 				)}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
 					<InviteMemberByMail />
 					<AddMemberById />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto w-full px-4 py-4 text-sm sm:px-10 md:text-base">
 				<div className="mb-4 md:mb-0">
 					{networkById?.zombieMembers?.length > 0 ? (
 						<>
@@ -330,25 +330,25 @@ const NetworkById = ({ orgIds }: IProps) => {
 					) : null}
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				<NetworkHelpText />
 			</div>
 
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				<NetworkFlowRules />
 			</div>
-			{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			{/* <div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				DEBUG
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base space-y-8">
+			<div className="mx-auto px-4 py-4 text-sm sm:px-10 md:text-base space-y-8">
 				<DebugMirror data={networkById?.network} title="Controler Networks" />
 				<DebugMirror data={networkById?.members} title="Controler Members" />
 			</div> */}
 
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
+			<div className="divider mx-auto flex px-4 py-4 text-sm sm:px-10 md:text-base">
 				{t("networkActions")}
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
+			<div className="mx-auto px-4 py-4 text-sm sm:px-10 md:flex-row md:text-base">
 				<div className="flex items-end md:justify-end">
 					<button
 						onClick={() =>

From 94b672f195d21e1e028bcbf512c855186fc2c9d0 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Sun, 14 Apr 2024 19:16:02 +0200
Subject: [PATCH 3/4] added stash button in table row

---
 .../table/memberHeaderColumns.tsx             | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/networkByIdPage/table/memberHeaderColumns.tsx b/src/components/networkByIdPage/table/memberHeaderColumns.tsx
index 7f7fba43..b069de20 100644
--- a/src/components/networkByIdPage/table/memberHeaderColumns.tsx
+++ b/src/components/networkByIdPage/table/memberHeaderColumns.tsx
@@ -10,6 +10,7 @@ import {
 	useTrpcApiErrorHandler,
 	useTrpcApiSuccessHandler,
 } from "~/hooks/useTrpcApiHandler";
+import cn from "classnames";
 
 enum ConnectionStatus {
 	Offline = 0,
@@ -130,7 +131,12 @@ export const MemberHeaderColumns = ({ nwid, central = false, organizationId }: I
 			},
 			{ enabled: !!nwid },
 		);
-
+	const { mutate: stashUser } = api.networkMember.stash.useMutation({
+		onSuccess: () => refetchNetworkById(),
+	});
+	const { mutate: deleteMember } = api.networkMember.delete.useMutation({
+		onSuccess: () => refetchNetworkById(),
+	});
 	const { mutate: updateMember } = api.networkMember.Update.useMutation({
 		onError: handleApiError,
 		onSuccess: handleApiSuccess({ actions: [refetchNetworkById] }),
@@ -420,6 +426,38 @@ export const MemberHeaderColumns = ({ nwid, central = false, organizationId }: I
 							>
 								{b("options")}
 							</button>
+							{central ? (
+								<button
+									onClick={() =>
+										deleteMember({
+											central,
+											id: original.id,
+											nwid: original.nwid,
+										})
+									}
+									className="btn btn-error btn-outline btn-xs rounded-sm"
+								>
+									{b("delete")}
+								</button>
+							) : (
+								<button
+									onClick={() =>
+										stashUser(
+											{
+												nwid,
+												id: original.id,
+											},
+											{ onSuccess: () => void refetchNetworkById() },
+										)
+									}
+									className={cn("btn btn-outline btn-xs rounded-sm", {
+										"btn-warning": !central,
+										"btn-error": central,
+									})}
+								>
+									{b("stash")}
+								</button>
+							)}
 						</div>
 					);
 				},

From 601ea8e90b51abf240d482d148a056fe7b6847ec Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Sun, 14 Apr 2024 21:07:59 +0200
Subject: [PATCH 4/4] settings

---
 .../table/memberHeaderColumns.tsx             | 102 +++++++++++-------
 1 file changed, 63 insertions(+), 39 deletions(-)

diff --git a/src/components/networkByIdPage/table/memberHeaderColumns.tsx b/src/components/networkByIdPage/table/memberHeaderColumns.tsx
index b069de20..d47027fe 100644
--- a/src/components/networkByIdPage/table/memberHeaderColumns.tsx
+++ b/src/components/networkByIdPage/table/memberHeaderColumns.tsx
@@ -166,46 +166,70 @@ export const MemberHeaderColumns = ({ nwid, central = false, organizationId }: I
 				header: () => <span>{c("header.authorized")}</span>,
 				id: "authorized",
 				cell: ({ getValue, row: { original } }) => {
+					// const options = [
+					// 	original?.activeBridge ? (
+					// 		<span className="text-sm text-primary tracking-tighter">
+					// 			<Br />
+					// 		</span>
+					// 	) : null,
+					// 	original?.noAutoAssignIps ? <Aa /> : null,
+					// ]
+					// 	.filter(Boolean)
+					// 	.reduce(
+					// 		(acc, elem, index) => (
+					// 			<>
+					// 				{acc}
+					// 				{index > 0 ? "" : ""}
+					// 				{elem}
+					// 			</>
+					// 		),
+					// 		null,
+					// 	);
 					return (
-						<label className="label cursor-pointer justify-center">
-							<input
-								type="checkbox"
-								checked={getValue()}
-								onChange={(event) => {
-									const authorized = event.target.checked;
-									if (me?.options?.deAuthorizeWarning && !authorized) {
-										callModal({
-											title: "Warning",
-											description: "Are you sure you want to deauthorize this member?",
-											yesAction: () => {
-												updateMember(
-													{
-														nwid,
-														memberId: original.id,
-														central,
-														organizationId,
-														updateParams: { authorized },
-													},
-													{ onSuccess: () => void refetchNetworkById() },
-												);
-											},
-										});
-									} else {
-										updateMember(
-											{
-												nwid,
-												memberId: original.id,
-												central,
-												organizationId,
-												updateParams: { authorized: event.target.checked },
-											},
-											{ onSuccess: () => void refetchNetworkById() },
-										);
-									}
-								}}
-								className="checkbox-success checkbox checkbox-xs sm:checkbox-sm"
-							/>
-						</label>
+						<span className="flex items-center gap-2">
+							<label className="label cursor-pointer justify-center">
+								{/* add a letter B if bridge has been enabled */}
+
+								<input
+									type="checkbox"
+									checked={getValue()}
+									onChange={(event) => {
+										const authorized = event.target.checked;
+										if (me?.options?.deAuthorizeWarning && !authorized) {
+											callModal({
+												title: "Warning",
+												description: "Are you sure you want to deauthorize this member?",
+												yesAction: () => {
+													updateMember(
+														{
+															nwid,
+															memberId: original.id,
+															central,
+															organizationId,
+															updateParams: { authorized },
+														},
+														{ onSuccess: () => void refetchNetworkById() },
+													);
+												},
+											});
+										} else {
+											updateMember(
+												{
+													nwid,
+													memberId: original.id,
+													central,
+													organizationId,
+													updateParams: { authorized: event.target.checked },
+												},
+												{ onSuccess: () => void refetchNetworkById() },
+											);
+										}
+									}}
+									className="checkbox-success checkbox checkbox-xs sm:checkbox-sm"
+								/>
+							</label>
+							{/* {options} */}
+						</span>
 					);
 				},
 			}),