diff --git a/apps/ui/src/Route.tsx b/apps/ui/src/Route.tsx
index 6a0d8550..35a49207 100644
--- a/apps/ui/src/Route.tsx
+++ b/apps/ui/src/Route.tsx
@@ -109,6 +109,7 @@ import EditScheduleModal from 'modals/EditScheduleModal'
import VoiceOptionsModal from 'modals/VoiceOptionsModal'
import LlmSettingsModal from 'modals/LlmSettingsModal'
import { InviteUsers, CreateUserAccess } from 'pages/InviteUsers'
+import { Pods, PodsContent } from 'pages/Pods'
const Route = () => {
const { loading } = useContext(AuthContext)
@@ -411,6 +412,20 @@ const Route = () => {
key={document.location.href}
/> */}
+
+ } key={document.location.href}>
+ {/* } key={document.location.href} /> */}
+ }
+ key={document.location.href}
+ />
+ {/* }
+ key={document.location.href}
+ /> */}
+
{/* } key={document.location.href}>
} key={document.location.href} />
*/}
diff --git a/apps/ui/src/pages/Datasource/Datasource.tsx b/apps/ui/src/pages/Datasource/Datasource.tsx
index 1735172a..04ba753f 100644
--- a/apps/ui/src/pages/Datasource/Datasource.tsx
+++ b/apps/ui/src/pages/Datasource/Datasource.tsx
@@ -58,6 +58,7 @@ const Datasource = () => {
+
{
{outlet}
+
diff --git a/apps/ui/src/pages/Navigation/MainNavigation.tsx b/apps/ui/src/pages/Navigation/MainNavigation.tsx
index ee1a64d8..bc20ba77 100644
--- a/apps/ui/src/pages/Navigation/MainNavigation.tsx
+++ b/apps/ui/src/pages/Navigation/MainNavigation.tsx
@@ -35,6 +35,7 @@ import Tooltip from 'share-ui/components/Tooltip/Tooltip'
import Chats from 'share-ui/components/Icon/Icons/components/Chats'
import Integrations from 'share-ui/components/Icon/Icons/components/integrations'
import FineTuning from 'share-ui/components/Icon/Icons/components/FineTuning'
+import Book from 'share-ui/components/Icon/Icons/components/Book'
const MainNavigation = ({ user }: { user: any }) => {
const { getDomainConfig } = useDomainConfig()
@@ -183,6 +184,16 @@ const MainNavigation = ({ user }: { user: any }) => {
)}
+
+
+ onHandleClick('/pods')}
+ >
+
+ {includes(active, 'pods') && }
+
+
{/* {isDiscover && (
diff --git a/apps/ui/src/pages/Pods/Card.tsx b/apps/ui/src/pages/Pods/Card.tsx
new file mode 100644
index 00000000..fcc26755
--- /dev/null
+++ b/apps/ui/src/pages/Pods/Card.tsx
@@ -0,0 +1,76 @@
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { CardActionArea } from '@mui/material';
+import Box from '@mui/material/Box'
+
+export default function ActionAreaCard({ item, selected, selectCard }: any) {
+ const color = 'rgba(34, 51, 84, 0.7)'
+ const isSelected = selected && selected === item.id
+ return (
+ selectCard(item.id)}>
+
+
+
+
+
+ {item.name}
+
+
+ {item.price}
+
+
+
+
+
+ {item.ram}
+
+
+ 8 max
+
+
+
+
+
+ {item.vram} * {item.cram}
+
+
+ High
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/ui/src/pages/Pods/Details.tsx b/apps/ui/src/pages/Pods/Details.tsx
new file mode 100644
index 00000000..2e799db1
--- /dev/null
+++ b/apps/ui/src/pages/Pods/Details.tsx
@@ -0,0 +1,216 @@
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField'
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button'
+import { borderBoxStyles, chipStyles, buttonStyles } from './styles'
+import styled from 'styled-components';
+import Slider from '@mui/material/Slider'
+import Card from '@mui/material/Card';
+import { CardActionArea } from '@mui/material';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+const sliderMarks = [
+ { value: 1, label: '1' },
+ { value: 2, label: '2' },
+ { value: 3, label: '3' },
+ { value: 4, label: '4' },
+ { value: 5, label: '5' },
+]
+
+const Details = () => {
+ return (
+
+
+
+ Configure Deployment
+
+
+
+
+
+
+ Pod Template
+
+
+
+
+ 
+
+
+ RunPod Pytorch 2.0.1
+
+
+ runpod/pytorch:2.0.1-py3.10-cuda11.8.0-devel-ubuntu22.04
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ GPU Count
+
+ `${value}`}
+ valueLabelDisplay="auto"
+ step={1}
+ max={5}
+ min={1}
+ marks={sliderMarks}
+ sx={{ color: '#000000' }}
+ />
+
+
+
+
+ Instance Pricing
+
+
+
+
+
+
+
+
+ On-Demand
+
+
+ Non-Interruptible
+
+
+ $0.74/hr
+
+
+ Pay as you go, with costs based on actual usage time.
+
+
+
+
+
+
+
+
+
+
+
+ On-Demand
+
+
+ Non-Interruptible
+
+
+ $0.74/hr
+
+
+ Pay as you go, with costs based on actual usage time.
+
+
+
+
+
+
+
+
+
+
+
+
+ } label="Encrypt Volume" />
+ } label="SSH Terminal Access" />
+ } label="Start Jupyter Notebook" />
+
+
+
+
+
+
+
+ )
+}
+
+export default Details
+
+
+const StyledPodTemplate = styled.div`
+ width: 100%;
+ background: #ffffff;
+ border-radius: 10px;
+ padding: 5px 2rem 5px 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`
\ No newline at end of file
diff --git a/apps/ui/src/pages/Pods/FilterPods.tsx b/apps/ui/src/pages/Pods/FilterPods.tsx
new file mode 100644
index 00000000..68b54549
--- /dev/null
+++ b/apps/ui/src/pages/Pods/FilterPods.tsx
@@ -0,0 +1,130 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Slider from '@mui/material/Slider'
+// import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+// import IconButton from '@mui/material/IconButton'
+// import Fingerprint from '@mui/icons-material/Fingerprint'
+import { black, white } from './styles'
+const sliderMarks = [
+ { value: 1, label: '1' },
+ { value: 2, label: '2' },
+ { value: 3, label: '3' },
+ { value: 4, label: '4' },
+ { value: 5, label: '5' },
+ { value: 8, label: '8' },
+ { value: 10, label: '10' },
+]
+
+
+const buttonStyles = {
+ color: black,
+ textTransform: 'capitalize',
+ fontSize: '0.8125rem',
+ fontWeight: 'bold',
+}
+
+const FilterPods = () => {
+ return (
+
+
+ {}}
+ aria-label="Platform"
+ >
+
+ GPU
+
+
+
+ CPU
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Filter GPUs by VRAM
+
+ `${value}`}
+ valueLabelDisplay="auto"
+ step={1}
+ max={10}
+ min={1}
+ marks={sliderMarks}
+ sx={{ color: black }}
+ size='small'
+ />
+
+
+ )
+}
+
+export default FilterPods
\ No newline at end of file
diff --git a/apps/ui/src/pages/Pods/Pods.tsx b/apps/ui/src/pages/Pods/Pods.tsx
new file mode 100644
index 00000000..42949b81
--- /dev/null
+++ b/apps/ui/src/pages/Pods/Pods.tsx
@@ -0,0 +1,121 @@
+import { StyledAppContainer } from 'components/Layout/LayoutStyle'
+import ListHeader from 'routes/components/ListHeader'
+
+import {
+ StyledChatWrapper,
+ StyledContainer,
+ StyledLeftColumn,
+ StyledMainWrapper,
+ } from 'routes/ChatRouteLayout'
+import { useNavigate, useOutlet } from 'react-router-dom'
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+const cpu = [
+ { cpu: 'runpod/base:0.5.1-cpu', ram: '46 GB', running: true },
+ { cpu: 'runpod/base:0.5.1-cpu', ram: '32 GB', running: false },
+ { cpu: 'runpod/base:0.5.1-cpu', ram: '16 GB', running: true },
+ { cpu: 'runpod/base:0.5.1-cpu', ram: '128 GB', running: false },
+ { cpu: 'runpod/base:0.5.1-cpu', ram: '46 GB', running: false },
+ { cpu: 'runpod/base:0.5.1-cpu', ram: '50 GB', running: true },
+]
+
+
+const Pods = () => {
+ const navigate = useNavigate()
+ const outlet = useOutlet()
+
+ return (
+
+
+
+
+
+ navigate('/pods/create-pod'),
+ },
+ ]}
+ />
+
+ {cpu.map((item, index) => (
+
+
+
+
+ Compute
+
+
+ CPU: {item.cpu}
+
+
+ RAM: {item.ram}
+
+
+
+
+
+
+ {item.running ? 'Running' : 'Stopped'}
+
+
+
+
+ ))}
+
+
+
+
+ {outlet}
+
+
+
+
+ )
+}
+
+export default Pods
+
+
+// export const StyledContainer = styled.div`
+// display: flex;
+// justify-content: space-between;
+// width: 100%;
+// height: 100%;
+// overflow: hidden;
+// position: relative;
+// `
+// export const StyledMainWrapper = styled.div`
+// padding: 16px;
+// padding-right: 0;
+// margin-right: 20px;
+// border-radius: 16px;
+// background: ${({ theme }) => theme.body.componentsWrapperBg};
+// display: flex;
+// justify-content: center;
+// width: 100%;
+// height: 100%;
+// `
\ No newline at end of file
diff --git a/apps/ui/src/pages/Pods/PodsContent.tsx b/apps/ui/src/pages/Pods/PodsContent.tsx
new file mode 100644
index 00000000..e8931dd0
--- /dev/null
+++ b/apps/ui/src/pages/Pods/PodsContent.tsx
@@ -0,0 +1,141 @@
+import styled from 'styled-components'
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+import ActionAreaCard from './Card'
+import Details from './Details'
+import FilterPods from './FilterPods'
+import Price from './Price'
+
+import { chipStyles, borderBoxStyles } from './styles'
+import React from 'react';
+
+const Line = ({ label }: { label: string }) => {
+ return (
+
+
+
+
+
+
+ )
+}
+
+const temp_data = {
+ 'NVIDIA': [
+ { name: 'RTX 4090', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '28 vCPU', id: 1 },
+ { name: 'H100 SXM', price: '$1/hr', ram: '23 GB RAM', vram: '90 GB RAM', cram: '24 vCPU', id: 2 },
+ { name: 'H100 PCIe', price: '$0.32/hr', ram: '44 GB RAM', vram: '140 GB RAM', cram: '32 vCPU', id: 3 },
+ { name: 'L40', price: '$0.74/hr', ram: '55 GB RAM', vram: '130 GB RAM', cram: '22 vCPU', id: 4 },
+ { name: 'RTX 6000 Ada', price: '$2.01/hr', ram: '32 GB RAM', vram: '150 GB RAM', cram: '32 vCPU', id: 5 },
+ { name: 'RTX 4000 Ada', price: '$1.4/hr', ram: '16 GB RAM', vram: '100 GB RAM', cram: '64 vCPU', id: 6 },
+ { name: 'RTX 3090', price: '$0.20/hr', ram: '12 GB RAM', vram: '250 GB RAM', cram: '56 vCPU', id: 7 },
+ { name: 'RTX A4500', price: '$0.32/hr', ram: '8 GB RAM', vram: '300 GB RAM', cram: '12 vCPU', id: 8 },
+ ],
+ 'AMD': [
+ { name: 'RTX', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 9 },
+ { name: 'RTX A4000', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 10 },
+ { name: 'A100 SXM', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 11 },
+ { name: 'RTX 6000 Ada', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 12 },
+ { name: 'A100 PCIe', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 13 },
+ { name: 'H100 PCIe', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 14 },
+ { name: 'RTX', price: '$0.74/hr', ram: '48 GB RAM', vram: '125 GB RAM', cram: '32 vCPU', id: 15 },
+ ]
+}
+
+
+const PodsContent = () => {
+ const [selectPod, setSelectPod] = React.useState(1)
+
+ const data_keys = Object.keys(temp_data)
+ return (
+
+
+
+
+
+ Select an Instance
+
+
+
+
+
+
+
+
+ {data_keys.map((key: string, index: number) => (
+
+
+
+ {temp_data[key].map((item, i) => (
+
+
+
+ ))}
+
+
+ ))}
+
+
+
+ {selectPod &&
+ <>
+