Implemented Dashboard MockupUI

.gitignore

@@ -1,30 +1,30 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-notes/
-upload_site.sh
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.eslintcache
-
-# testing
-/coverage
-
-.idea/
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-git
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+notes/
+upload_site.sh
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.eslintcache
+
+# testing
+/coverage
+
+.idea/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+git

src/components/Dashboard/Blocks.tsx

@@ -1,23 +0,0 @@
-import { Block } from "../../types";
-import moment from "moment";
-
-const Blocks = (props: { blocks: Block[] }) => {
-  const blocks: Block[] = Array.from(new Set(props.blocks))
-    .sort((a: Block, b: Block) => b.id - a.id)
-    .slice(0, 5);
-
-  return (
-    <div className="box overflow-hidden" style={{ height: "13em" }}>
-      <h3>previous blocks</h3>
-      <div>
-        {blocks.map((b) => (
-          <div key={b.id}>
-            {moment(b.timestamp).format("DD/MM/YYYY HH:mm:ss")}: {b.id}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Blocks;

src/components/Dashboard/Channels.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import SubBlock from "./ui/SubBlock";
+import Line from "./ui/Line";
+
+const Channels = (props: {}) => {
+
+  return (
+    <SubBlock title="Channels">
+      <Line content={"created"} value={5} />
+      <Line content={"total"} value={10000} />
+    </SubBlock>
+  );
+};
+
+export default Channels;

src/components/Dashboard/Election.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import SubBlock from "./ui/SubBlock";
+import Line from "./ui/Line";
+
+const Election = (props: {}) => {
+
+  return (
+    <SubBlock title="Election">
+      <Line content={"candidates"} value={5} />
+      <Line content={"votes"} value={232} />
+      <Line content={"staked"} value={99093123} />
+    </SubBlock>
+  );
+};
+
+export default Election;

src/components/Dashboard/Forum.tsx

@@ -1,84 +1,16 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import { LatestPost, Spinner } from "..";
+import SubBlock from "./ui/SubBlock";
+import Line from "./ui/Line";
 
-import { Post, Thread } from "../../types";
-import {
-  Grid,
-  Paper,
-  makeStyles,
-  Theme,
-  createStyles,
-  Toolbar,
-  AppBar,
-  Typography,
-} from "@material-ui/core";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      backgroundColor: "#4038FF",
-    },
-    title: {
-      textAlign: "left",
-      flexGrow: 1,
-      padding: "10px",
-      color: "#fff",
-    },
-  })
-);
-
-const Forum = (props: { posts: Post[]; threads: Thread[] }) => {
-  const { handles, posts, threads, startTime } = props;
-  const classes = useStyles();
+const Forum = (props: {}) => {
 
   return (
-    <Grid
-      style={{ textAlign: "center", backgroundColor: "#000", color: "#fff" }}
-      item
-      lg={6}
-      xs={12}
-    >
-      <Paper
-        style={{
-          textAlign: "center",
-          backgroundColor: "#4038FF",
-          color: "#fff",
-          minHeight: 600,
-          maxHeight: 600,
-          overflow: "auto",
-        }}
-      >
-        <AppBar className={classes.root} position="static">
-          <Toolbar>
-            <Typography variant="h5" className={classes.title}>
-              <Link style={{ color: "#fff" }} to={"/forum"}>
-                Posts
-              </Link>
-            </Typography>
-          </Toolbar>
-        </AppBar>
-
-        {posts.length ? (
-          posts
-            .sort((a, b) => b.id - a.id)
-            .slice(0, 10)
-            .map((post) => (
-              <LatestPost
-                key={post.id}
-                selectThread={() => {}}
-                handles={handles}
-                post={post}
-                thread={threads.find((t) => t.id === post.threadId)}
-                startTime={startTime}
-              />
-            ))
-        ) : (
-          <Spinner />
-        )}
-      </Paper>
-    </Grid>
+    <SubBlock title="Forum">
+      <Line content={"threads new"} value={13} />
+      <Line content={"threads total"} value={432} />
+      <Line content={"posts new"} value={99} />
+      <Line content={"posts total"} value={712} />
+    </SubBlock>
   );
 };
 

src/components/Dashboard/Memberships.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import SubBlock from "./ui/SubBlock";
+import Line from "./ui/Line";
+
+const Memberships = (props: {}) => {
+
+  return (
+    <SubBlock title="Memberships">
+      <Line content={"created"} value={99} />
+      <Line content={"created"} value={100} />
+      <Line content={"total"} value={8000} />
+    </SubBlock>
+  );
+};
+
+export default Memberships;

src/components/Dashboard/Proposals.tsx

@@ -1,84 +0,0 @@
-import { Link } from "react-router-dom";
-import { ProposalTable } from "..";
-import {
-  createStyles,
-  makeStyles,
-  Grid,
-  Paper,
-  AppBar,
-  Toolbar,
-  Typography,
-  Theme,
-} from "@material-ui/core";
-import { Council, Member, ProposalDetail, Post } from "../../types";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    grid: { textAlign: "center", backgroundColor: "#000", color: "#fff" },
-    root: { flexGrow: 1, backgroundColor: "#4038FF" },
-    title: { textAlign: "left", flexGrow: 1 },
-    paper: {
-      textAlign: "center",
-      backgroundColor: "#4038FF",
-      color: "#fff",
-      minHeight: 600,
-      maxHeight: 600,
-      overflow: `hidden`,
-    },
-  })
-);
-
-const Proposals = (props: {
-  proposals: ProposalDetail[];
-  validators: string[];
-  councils: Council[];
-  members: Member[];
-  posts: Post[];
-  startTime: number;
-  block: number;
-  status: { council: Council };
-  gridSize: GridSize;
-}) => {
-  const classes = useStyles();
-  const { proposals, validators, councils, members, posts, block, status } =
-    props;
-  const pending = proposals.filter((p) => p && p.result === "Pending");
-
-  return (
-    <Grid className={classes.grid} item lg={props.gridSize} xs={12}>
-      <Paper className={classes.paper}>
-        <AppBar className={classes.root} position="static">
-          <Toolbar>
-            <Typography variant="h6" className={classes.title}>
-              Active Proposals: {pending.length}
-            </Typography>
-            <Link className="m-3 text-light" to={"/proposals"}>
-              All
-            </Link>
-            <Link className="m-3 text-light" to={"/spending"}>
-              Spending
-            </Link>
-            <Link className="m-3 text-light" to={"/councils"}>
-              Votes
-            </Link>
-          </Toolbar>
-        </AppBar>
-        <div className="h-100 overflow-auto">
-          <ProposalTable
-            block={block}
-            hideNav={true}
-            proposals={pending}
-            members={members}
-            council={status.council}
-            councils={councils}
-            posts={posts}
-            status={status}
-            validators={validators}
-          />
-        </div>
-      </Paper>
-    </Grid>
-  );
-};
-
-export default Proposals;

src/components/Dashboard/Validation.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import SubBlock from "./ui/SubBlock";
+import Line from "./ui/Line";
+
+const Validation = (props: {}) => {
+
+  return (
+    <SubBlock title="Validation">
+      <Line content={"count"} value={5} />
+      <Line content={"minted"} value={100} />
+      <Line content={"staked"} value={99093123} />
+    </SubBlock>
+  );
+};
+
+export default Validation;

src/components/Dashboard/Videos.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import SubBlock from "./ui/SubBlock";
+import Line from "./ui/Line";
+
+const Videos = (props: {}) => {
+
+  return (
+    <SubBlock title="Videos">
+      <Line content={"created"} value={5} />
+      <Line content={"total"} value={10000} />
+    </SubBlock>
+  );
+};
+
+export default Videos;

src/components/Dashboard/index.tsx

@@ -1,15 +1,16 @@
 import React from "react";
-import Council from "./Council";
-import Forum from "./Forum";
-import Proposals from "./Proposals";
-import Validators from "../Validators";
-import Openings from "../Openings";
 import { IState } from "../../types";
 import { Container, Grid } from "@material-ui/core";
+import Memberships from "./Memberships";
+import Channels from "./Channels";
+import Videos from "./Videos";
+import Forum from "./Forum";
+import Election from "./Election";
+import Validation from "./Validation";
+import SubBlock from "./ui/SubBlock";
+import Banner from "./ui/Banner";
 
 interface IProps extends IState {
-  toggleStar: (a: string) => void;
-  toggleFooter: () => void;
 }
 
 const Dashboard = (props: IProps) => {
@@ -33,56 +34,34 @@ const Dashboard = (props: IProps) => {
     domain,
   } = props;
 
+  const _description1 = "For a given council period {so there needs to be an input field for this}, I want to see a nice one page dashboard which shows the following, and nothing else (each at end of period)"
+  const _description2 = "new tokens minted size of budget at end of period amount of debt at end of period number of workers at end of period"
+
   return (
     <div style={{ flexGrow: 1 }}>
       <Container maxWidth="xl">
         <Grid container spacing={3}>
-          <Proposals
-            fetchProposals={props.fetchProposals}
-            block={status.block ? status.block.id : 0}
-            members={members}
-            councils={councils}
-            posts={posts}
-            proposals={proposals}
-            proposalPosts={props.proposalPosts}
-            validators={validators}
-            status={status}
-            gridSize={6}
+          <Banner description={_description1}/>
+        </Grid>
+        <Grid container spacing={3}>
+          <Memberships
+          />
+          <Channels
           />
-          <Council
-            getMember={getMember}
-            councils={councils}
-            council={status.council}
-            posts={posts}
-            proposals={proposals}
-            stars={stars}
-            status={status}
-            validators={validators}
-            domain={domain}
-            gridSize={6}
+          <Videos
           />
           <Forum
-            updateForum={props.updateForum}
-            posts={posts}
-            threads={threads}
-            startTime={status.startTime}
           />
-          <Openings openings={openings} />
-          <Validators
-            toggleStar={toggleStar}
-            councils={councils}
-            members={members}
-            posts={posts}
-            proposals={proposals}
-            nominators={nominators}
-            validators={validators}
-            stashes={stashes}
-            stars={stars}
-            stakes={stakes}
-            rewardPoints={rewardPoints}
-            tokenomics={tokenomics}
-            status={status}
+          <Election
           />
+          <Validation 
+          />
+        </Grid>
+        <Grid container spacing={3}>
+          <Banner title="WG" description={_description2}/>
+        </Grid>
+        <Grid container spacing={3}>
+          <Banner title="Proposals" description={_description2}/>
         </Grid>
       </Container>
     </div>

src/components/Dashboard/ui/Banner.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  Paper,
+  Grid,
+  makeStyles,
+  Theme,
+  createStyles,
+  Toolbar,
+  Typography,
+  AppBar,
+} from "@material-ui/core";
+import { IState } from "../../../types";
+import Line from "./Line";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    grid: { textAlign: "center", backgroundColor: "#000", color: "#fff" },
+    root: { flexGrow: 1, backgroundColor: "#4038FF", boxShadow: "none", paddingLeft:"16px"  },
+    title: { textAlign: "left", flexGrow: 1, color: '#000' },
+    toolbar: { minHeight:'40px' },
+    description: { textAlign: "left", flexGrow: 1, color: '#000', 
+        paddingLeft:"16px", paddingRight:"16px", paddingTop:"8px", paddingBottom:"8px"
+    },
+    paper: {
+      textAlign: "center",
+      backgroundColor: "#4038FF",
+      color: "#fff",
+      minHeight: 50,
+      maxHeight: 200,
+      overflow: "auto",
+      paddingTop:"6px",
+      paddingBottom:"6px"
+    },
+  })
+);
+
+const Banner = (props: {
+  title: string;
+  description: string;
+}) => {
+  const { 
+    title,
+    description
+  } = props;
+  const classes = useStyles();
+
+  return (
+    <Grid className={classes.grid} item xs={12}>
+      <Paper className={classes.paper}>
+        { title && 
+          <AppBar className={classes.root} position="static">
+            <Toolbar disableGutters={true} className={classes.toolbar}>
+              <Typography variant="h6" className={classes.title}>
+                {title}
+              </Typography>
+            </Toolbar>
+          </AppBar>
+        }
+        <Line content={description} />
+        {/* <Typography variant="body1" className={classes.description}>
+            {description}
+        </Typography> */}
+      </Paper>
+    </Grid>
+  );
+};
+
+export default Banner;

src/components/Dashboard/ui/Line.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {
+  Box
+} from "@material-ui/core";
+
+const Line = (props: {
+    content: String,
+    value: Number
+}) => {
+  const { 
+    content,
+    value
+  } = props;
+
+  return (
+    <Box sx={{ display: 'flex', paddingLeft:'16px', paddingRight:'16px', color: '#000' }} >
+			<Box sx={{ flexGrow: 1, textAlign: "left" }}>{content}</Box>
+			<Box sx={{ textAlign: "right" }}>{value}</Box>
+    </Box>
+  );
+};
+
+export default Line;

src/components/Dashboard/ui/SubBlock.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  Paper,
+  Grid,
+  makeStyles,
+  Theme,
+  createStyles,
+  Toolbar,
+  Typography,
+  AppBar,
+} from "@material-ui/core";
+import { IState } from "../../../types";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    grid: { textAlign: "center", backgroundColor: "#000", color: "#fff" },
+    root: { flexGrow: 1, backgroundColor: "#4038FF", boxShadow: "none", paddingLeft:"16px" },
+    title: { textAlign: "left", flexGrow: 1, color: '#000' },
+    toolbar: { minHeight:'40px' },
+    paper: {
+      textAlign: "center",
+      backgroundColor: "#4038FF",
+      color: "#fff",
+      minHeight: 100,
+      maxHeight: 400,
+      overflow: "auto",
+      paddingTop:"6px",
+      paddingBottom:"6px"
+    },
+  })
+);
+
+const SubBlock = (props: {
+  title: string,
+  children: any
+}) => {
+  const { 
+    title,
+    children
+  } = props;
+  const classes = useStyles();
+
+  return (
+    <Grid className={classes.grid} item xs={4} md={4} sm={12}>
+      <Paper className={classes.paper}>
+        { title && 
+          <AppBar className={classes.root} position="static">
+            <Toolbar disableGutters={true} className={classes.toolbar}>
+              <Typography variant="h6" className={classes.title}>
+                {title}
+              </Typography>
+            </Toolbar>
+          </AppBar>
+        }
+        {children}
+      </Paper>
+    </Grid>
+  );
+};
+
+export default SubBlock;