sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Metamigo -> Bridge

Browse source
This commit is contained in:
Darren Clarke 2024-04-21 09:44:30 +02:00
parent 242f3cf6b8
commit a445762a37
145 changed files with 396 additions and 16668 deletions
Download patch file Download diff file Expand all files Collapse all files

31
apps/bridge-frontend/app/_components/DeleteDialog.tsx Normal file
View file

@ -0,0 +1,31 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";
interface DeleteDialogProps {
title: string;
entity: string;
children: any;
}
export const DeleteDialog: FC<DeleteDialogProps> = ({ title, entity, children }) => {
const router = useRouter();
const { h3 } = typography;
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Grid container direction="column">
<Grid item>
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>
{children}
</Grid>
</Grid>
</Box>
);
};

30
apps/bridge-frontend/app/_components/Detail.tsx Normal file
View file

@ -0,0 +1,30 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";
interface DetailProps {
title: string;
entity: string;
children: any;
}
export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
const router = useRouter();
const { h3 } = typography;
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Grid container direction="column">
<Grid item>
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>
{children}
</Grid>
</Grid>
</Box>
);
};

30
apps/bridge-frontend/app/_components/Edit.tsx Normal file
View file

@ -0,0 +1,30 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";
interface EditProps {
title: string;
entity: string;
children: any;
}
export const Edit: FC<EditProps> = ({ title, entity, children }) => {
const router = useRouter();
const { h3 } = typography;
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Grid container direction="column">
<Grid item>
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>
{children}
</Grid>
</Grid>
</Box>
);
};

38
apps/bridge-frontend/app/_components/InternalLayout.tsx Normal file
View file

@ -0,0 +1,38 @@
"use client";
import { FC, PropsWithChildren, useState } from "react";
import { Grid } from "@mui/material";
import { Sidebar } from "./Sidebar";
import { CssBaseline } from "@mui/material";
import { css, Global } from "@emotion/react";
import { fonts } from "@/app/_styles/theme";
type LayoutProps = PropsWithChildren<{
docs?: any;
}>;
export const InternalLayout: FC<PropsWithChildren> = ({ children }) => {
const [open, setOpen] = useState(true);
const { roboto } = fonts;
const globalCSS = css`
* {
font-family: ${roboto.style.fontFamily};
}
`;
return (
<>
<Global styles={globalCSS} />
<CssBaseline />
<Grid container direction="row">
<Sidebar open={open} setOpen={setOpen} />
<Grid
item
sx={{ ml: open ? "270px" : "100px", width: "100%", height: "100vh" }}
>
{children as any}
</Grid>
</Grid>
</>
);
};

86
apps/bridge-frontend/app/_components/List.tsx Normal file
View file

@ -0,0 +1,86 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";
interface ListProps {
title: string;
entity: string;
rows: any;
columns: GridColDef<any>[];
}
export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
const router = useRouter();
const { h3 } = typography;
const onRowClick = (id: string) => {
router.push(`/${entity}/${id}`);
};
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Grid container direction="column">
<Grid item>
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>
<Box
sx={{
backgroundColor: "#ddd",
border: 0,
width: "100%",
height: "100vh",
".MuiDataGrid-row": {
cursor: "pointer",
"&:hover": {
backgroundColor: "#1982fc33 !important",
fontWeight: "bold",
},
},
".MuiDataGrid-row:nth-of-type(1n)": {
backgroundColor: "#f3f3f3",
},
".MuiDataGrid-row:nth-of-type(2n)": {
backgroundColor: "#fff",
},
".MuiDataGrid-columnHeaderTitle": {
color: "#333",
fontWeight: "bold",
fontSize: 11,
margin: "0 auto",
},
".MuiDataGrid-columnHeader": {
backgroundColor: "#ccc",
border: 0,
borderBottom: "3px solid #ddd",
},
}}
>
<DataGridPro
rows={rows}
columns={columns}
density="compact"
pagination
initialState={{
pagination: { paginationModel: { pageSize: 25 } },
}}
pageSizeOptions={[5, 10, 25]}
paginationMode="client"
sx={{ height: "100vh" }}
// rowBuffer={30}
rowHeight={46}
scrollbarSize={0}
disableVirtualization
disableColumnMenu
onRowClick={(row: any) => onRowClick(row.id)}
/>
</Box>
</Grid>
</Grid>
</Box>
);
};

350
apps/bridge-frontend/app/_components/Sidebar.tsx Normal file
View file

@ -0,0 +1,350 @@
"use client";
import { FC } from "react";
import {
Box,
Grid,
Typography,
List,
ListItemButton,
ListItemIcon,
ListItemText,
ListItemSecondaryAction,
Drawer,
} from "@mui/material";
import {
ExpandCircleDown as ExpandCircleDownIcon,
AccountCircle as AccountCircleIcon,
Chat as ChatIcon,
PermPhoneMsg as PhoneIcon,
WhatsApp as WhatsAppIcon,
Facebook as FacebookIcon,
} from "@mui/icons-material";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { fonts } from "@/app/_styles/theme";
import LinkLogo from "@/public/link-logo-small.png";
// import { useSession, signOut } from "next-auth/react";
const openWidth = 270;
const closedWidth = 100;
const MenuItem = ({
name,
href,
Icon,
iconSize,
inset = false,
selected = false,
open = true,
badge,
target = "_self",
}: any) => (
<Link href={href} target={target}>
<ListItemButton
sx={{
p: 0,
mb: 1,
bl: iconSize === 0 ? "1px solid white" : "inherit",
}}
selected={selected}
>
{iconSize > 0 ? (
<ListItemIcon
sx={{
color: `white`,
minWidth: 0,
mr: 2,
textAlign: "center",
margin: open ? "0 8 0 0" : "0 auto",
}}
>
<Box
sx={{
width: iconSize,
height: iconSize,
mr: 0.5,
mt: "-4px",
}}
>
<Icon />
</Box>
</ListItemIcon>
) : (
<Box
sx={{
width: 30,
height: "28px",
position: "relative",
ml: "9px",
mr: "1px",
}}
>
<Box
sx={{
width: "1px",
height: "56px",
backgroundColor: "white",
position: "absolute",
left: "3px",
top: "-10px",
}}
/>
<Box
sx={{
width: "42px",
height: "42px",
position: "absolute",
top: "-27px",
left: "3px",
border: "solid 1px #fff",
borderColor: "transparent transparent transparent #fff",
borderRadius: "60px",
rotate: "-35deg",
}}
/>
</Box>
)}
{open && (
<ListItemText
inset={inset}
primary={
<Typography
variant="body1"
sx={{
fontSize: 16,
fontWeight: "bold",
border: 0,
textAlign: "left",
color: "white",
}}
>
{name}
</Typography>
}
/>
)}
{badge && badge > 0 ? (
<ListItemSecondaryAction>
<Typography
color="textSecondary"
variant="body1"
className="badge"
sx={{
backgroundColor: "#FFB620",
color: "black !important",
borderRadius: 10,
px: 1,
fontSize: 12,
fontWeight: "bold",
}}
>
{badge}
</Typography>
</ListItemSecondaryAction>
) : null}
</ListItemButton>
</Link>
);
interface SidebarProps {
open: boolean;
setOpen: (open: boolean) => void;
}
export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
const pathname = usePathname();
const { poppins } = fonts;
// const { data: session } = useSession();
// const username = session?.user?.name || "User";
// const logout = () => {
// signOut({ callbackUrl: "/login" });
// };
return (
<Drawer
sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
variant="permanent"
anchor="left"
open={open}
PaperProps={{
sx: {
width: open ? openWidth : closedWidth,
border: 0,
overflow: "visible",
},
}}
>
<Box
sx={{
position: "absolute",
top: 20,
right: open ? -8 : -16,
color: "#1C75FD",
rotate: open ? "90deg" : "-90deg",
}}
onClick={() => {
setOpen!(!open);
}}
>
<ExpandCircleDownIcon
sx={{
width: 30,
height: 30,
background: "white",
borderRadius: 500,
}}
/>
</Box>
<Grid
container
direction="column"
justifyContent="space-between"
wrap="nowrap"
spacing={0}
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
>
<Grid item container>
<Grid item sx={{ width: open ? "40px" : "100%" }}>
<Box
sx={{
width: "40px",
height: "40px",
margin: open ? "0" : "0 auto",
}}
>
<Image
src={LinkLogo}
alt="Link logo"
width={40}
height={40}
style={{
objectFit: "cover",
filter: "grayscale(100) brightness(100)",
}}
/>
</Box>
.
</Grid>
{open && (
<Grid item>
<Typography
variant="h2"
sx={{
fontSize: 26,
color: "white",
fontWeight: 700,
mt: 1,
ml: 0.5,
fontFamily: poppins.style.fontFamily,
}}
>
CDR Bridge
</Typography>
</Grid>
)}
</Grid>
<Grid item>
<Box
sx={{
height: "0.5px",
width: "100%",
backgroundColor: "#666",
mb: 1,
}}
/>
</Grid>
<Grid
item
container
direction="column"
sx={{
mt: "6px",
overflow: "scroll",
scrollbarWidth: "none",
msOverflowStyle: "none",
"&::-webkit-scrollbar": { display: "none" },
}}
flexGrow={1}
>
<List
component="nav"
sx={{
a: {
textDecoration: "none",
".MuiListItemButton-root": {
p: 1,
borderRadius: 2,
"&:hover": {
background: "#555",
},
".MuiTypography-root": {
p: {
color: "#999 !important",
fontSize: 16,
},
},
".badge": {
p: { fontSize: 12, color: "black !important" },
},
},
".Mui-selected": {
background: "#444",
color: "#fff !important",
".MuiTypography-root": {
p: {
color: "#fff !important",
fontSize: 16,
},
},
".badge": {
p: { fontSize: 12, color: "black !important" },
},
},
},
}}
>
<MenuItem
name="Whatsapp"
href="/whatsapp"
selected={pathname.endsWith("/whatsapp")}
Icon={WhatsAppIcon}
iconSize={20}
/>
<MenuItem
name="Signal"
href="/signal"
selected={pathname.startsWith("/signal")}
Icon={ChatIcon}
iconSize={20}
/>
<MenuItem
name="Facebook"
href="/facebook"
selected={pathname.startsWith("/facebook")}
Icon={FacebookIcon}
iconSize={20}
/>
<MenuItem
name="Voice"
href="/voice"
selected={pathname.startsWith("/voice")}
Icon={PhoneIcon}
iconSize={20}
/>
<MenuItem
name="Users"
href="/users"
selected={pathname.startsWith("/users")}
Icon={AccountCircleIcon}
iconSize={20}
/>
</List>
</Grid>
</Grid>
</Drawer>
);
};