From fb42ac7ce9658a0210fd9253f76c32ad403fa60d Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Fri, 12 Feb 2021 00:31:52 +0100
Subject: [PATCH] main page

---
 packages/dashboard/src/components/Table.js    |  10 +-
 packages/dashboard/src/config.js              |   2 +
 .../src/pages/api/stubs/user/downloads.js     |   8 +-
 .../src/pages/api/stubs/user/downloads.json   |  87 ++---
 .../src/pages/api/stubs/user/uploads.js       |   8 +-
 packages/dashboard/src/pages/index.js         | 307 ++++--------------
 packages/dashboard/src/pages/payments.js      |   2 +-
 packages/dashboard/src/pages/plans.js         |   4 +-
 8 files changed, 132 insertions(+), 296 deletions(-)

diff --git a/packages/dashboard/src/components/Table.js b/packages/dashboard/src/components/Table.js
index 8c52c116..d3ef61bb 100644
--- a/packages/dashboard/src/components/Table.js
+++ b/packages/dashboard/src/components/Table.js
@@ -8,7 +8,7 @@ function Button({ children, disabled, className, ...props }) {
       className={classnames(
         "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white",
         {
-          "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500": !disabled,
+          "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500": !disabled,
           "cursor-auto opacity-50": disabled,
         },
         className
@@ -24,7 +24,7 @@ function Button({ children, disabled, className, ...props }) {
 export default function Table({ items, count, headers, actions, offset, setOffset, pageSize = 10 }) {
   useEffect(() => {
     if (offset < 0) setOffset(0);
-    else if (offset >= count) setOffset(count - (count % pageSize));
+    else if (offset >= count) setOffset(Math.floor(count / pageSize - 1) * pageSize);
     else if (offset % pageSize) setOffset(offset - (offset % pageSize));
   }, [offset, pageSize, setOffset]);
 
@@ -66,7 +66,7 @@ export default function Table({ items, count, headers, actions, offset, setOffse
                     ))}
                     {actions.map(({ key, name, action }) => (
                       <td key={key} className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <a href="#" className="text-indigo-600 hover:text-indigo-900" onClick={action}>
+                        <a href="#" className="text-green-600 hover:text-green-900" onClick={action}>
                           {name}
                         </a>
                       </td>
@@ -82,7 +82,7 @@ export default function Table({ items, count, headers, actions, offset, setOffse
             >
               <div className="hidden sm:block">
                 <p className="text-sm text-gray-700">
-                  Showing <span className="font-medium">{offset ? offset + 1 : 0}</span> to{" "}
+                  Showing <span className="font-medium">{count ? offset + 1 : 0}</span> to{" "}
                   <span className="font-medium">{offset + pageSize > count ? count : offset + pageSize}</span> of{" "}
                   <span className="font-medium">{count}</span> results
                 </p>
@@ -93,7 +93,7 @@ export default function Table({ items, count, headers, actions, offset, setOffse
                 </Button>
                 <Button
                   className="ml-3"
-                  disabled={offset + pageSize > count}
+                  disabled={offset + pageSize >= count}
                   onClick={() => setOffset(offset + pageSize)}
                 >
                   Next
diff --git a/packages/dashboard/src/config.js b/packages/dashboard/src/config.js
index 8db99504..5a004456 100644
--- a/packages/dashboard/src/config.js
+++ b/packages/dashboard/src/config.js
@@ -36,4 +36,6 @@ export default {
     certificatePath: process.env.TLS_CERT_PATH || "",
     keyPath: process.env.TLS_KEY_PATH || "",
   },
+
+  tiers: {},
 };
diff --git a/packages/dashboard/src/pages/api/stubs/user/downloads.js b/packages/dashboard/src/pages/api/stubs/user/downloads.js
index 7dd0dc1f..c4a24c03 100644
--- a/packages/dashboard/src/pages/api/stubs/user/downloads.js
+++ b/packages/dashboard/src/pages/api/stubs/user/downloads.js
@@ -1,4 +1,8 @@
+import items from "./downloads.json";
+
 export default (req, res) => {
-  res.statusCode = 200;
-  res.json(require("./downloads.json"));
+  const offset = parseInt(req.query?.offset ?? 0, 10);
+  const pageSize = parseInt(req.query?.pageSize ?? 10, 10);
+
+  res.json({ items: items.slice(offset, offset + pageSize), count: items.length, pageSize, offset });
 };
diff --git a/packages/dashboard/src/pages/api/stubs/user/downloads.json b/packages/dashboard/src/pages/api/stubs/user/downloads.json
index e38e37c0..edf6ff0d 100644
--- a/packages/dashboard/src/pages/api/stubs/user/downloads.json
+++ b/packages/dashboard/src/pages/api/stubs/user/downloads.json
@@ -1,43 +1,44 @@
-{
-  "items": [
-    {
-      "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
-      "name": "ugabuga.pdf",
-      "size": 123123,
-      "uploadedOn": "2020-04-02T08:02:17-05:00"
-    },
-    {
-      "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
-      "name": "ugabuga.pdf",
-      "size": 8912739812,
-      "uploadedOn": "2020-04-02T08:02:17-05:00"
-    },
-    {
-      "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
-      "name": "ugabuga.pdf",
-      "size": 123123,
-      "uploadedOn": "2020-04-02T08:02:17-05:00"
-    },
-    {
-      "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
-      "name": "ugabuga.pdf",
-      "size": 83943,
-      "uploadedOn": "2020-04-02T08:02:17-05:00"
-    },
-    {
-      "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
-      "name": "ugabuga.pdf",
-      "size": 3290489120,
-      "uploadedOn": "2020-04-02T08:02:17-05:00"
-    },
-    {
-      "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
-      "name": "ugabuga.pdf",
-      "size": 1290389,
-      "uploadedOn": "2020-04-02T08:02:17-05:00"
-    }
-  ],
-  "offset": 0,
-  "pageSize": 10,
-  "count": 6
-}
+[
+  {
+    "id": 1111,
+    "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
+    "name": "ugabuga.pdf",
+    "size": 123123,
+    "downloadedOn": "2020-04-02T08:02:17-05:00"
+  },
+  {
+    "id": 2222,
+    "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
+    "name": "ugabuga.pdf",
+    "size": 8912739812,
+    "downloadedOn": "2020-04-02T08:02:17-05:00"
+  },
+  {
+    "id": 3333,
+    "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
+    "name": "ugabuga.pdf",
+    "size": 123123,
+    "downloadedOn": "2020-04-02T08:02:17-05:00"
+  },
+  {
+    "id": 4444,
+    "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
+    "name": "ugabuga.pdf",
+    "size": 83943,
+    "downloadedOn": "2020-04-02T08:02:17-05:00"
+  },
+  {
+    "id": 5555,
+    "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
+    "name": "ugabuga.pdf",
+    "size": 3290489120,
+    "downloadedOn": "2020-04-02T08:02:17-05:00"
+  },
+  {
+    "id": 6666,
+    "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
+    "name": "ugabuga.pdf",
+    "size": 1290389,
+    "downloadedOn": "2020-04-02T08:02:17-05:00"
+  }
+]
diff --git a/packages/dashboard/src/pages/api/stubs/user/uploads.js b/packages/dashboard/src/pages/api/stubs/user/uploads.js
index 019f548c..ad8b3d20 100644
--- a/packages/dashboard/src/pages/api/stubs/user/uploads.js
+++ b/packages/dashboard/src/pages/api/stubs/user/uploads.js
@@ -1,4 +1,8 @@
+import items from "./uploads.json";
+
 export default (req, res) => {
-  res.statusCode = 200;
-  res.json(require("./uploads.json"));
+  const offset = parseInt(req.query?.offset ?? 0, 10);
+  const pageSize = parseInt(req.query?.pageSize ?? 10, 10);
+
+  res.json({ items: items.slice(offset, offset + pageSize), count: items.length, pageSize, offset });
 };
diff --git a/packages/dashboard/src/pages/index.js b/packages/dashboard/src/pages/index.js
index 710acc8b..27eb6709 100644
--- a/packages/dashboard/src/pages/index.js
+++ b/packages/dashboard/src/pages/index.js
@@ -1,12 +1,21 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
 import prettyBytes from "pretty-bytes";
 import Link from "next/link";
 import useSWR from "swr";
 import Layout from "../components/Layout";
 
+dayjs.extend(relativeTime);
+
+const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const fetcher = (url) => fetch(url).then((r) => r.json());
+const currentPeriodDownload = Math.floor(Math.random() * 1000000000000) + 1;
+const currentPeriodUpload = Math.floor(Math.random() * 1000000000000) + 1;
 
 export default function Home() {
-  // const { data: user, error } = useSWR("/user", fetcher);
+  const { data: user } = useSWR("/user", fetcher);
+  const { data: downloads } = useSWR(`${apiPrefix}/user/downloads?pageSize=3&offset=0`, fetcher);
+  const { data: uploads } = useSWR(`${apiPrefix}/user/uploads?pageSize=3&offset=0`, fetcher);
 
   return (
     <Layout title="Dashboard">
@@ -15,7 +24,7 @@ export default function Home() {
           <div className="flex flex-col bg-white overflow-hidden shadow rounded-lg">
             <div className="flex-grow px-4 py-5 sm:p-6">
               <div className="flex items-center">
-                <div className="flex-shrink-0 bg-indigo-500 rounded-md p-3">
+                <div className="flex-shrink-0 bg-green-500 rounded-md p-3">
                   {/* Heroicon name: outline/users */}
                   <svg
                     className="h-6 w-6 text-white"
@@ -29,7 +38,7 @@ export default function Home() {
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       strokeWidth={2}
-                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                      d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
                     />
                   </svg>
                 </div>
@@ -44,7 +53,7 @@ export default function Home() {
             <div className="bg-gray-50 px-4 py-4 sm:px-6">
               <div className="text-sm">
                 <Link href="/payments">
-                  <a className="font-medium text-indigo-600 hover:text-indigo-500">
+                  <a className="font-medium text-green-600 hover:text-green-500">
                     View current payments<span className="sr-only">Total Subscribers stats</span>
                   </a>
                 </Link>
@@ -68,31 +77,31 @@ export default function Home() {
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       strokeWidth={2}
-                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
+                      d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
                     />
                   </svg>
                 </div>
                 <div className="ml-5 w-0 flex-1">
-                  <dt className="text-sm font-medium text-gray-500 truncate">Current period download</dt>
+                  <dt className="text-sm font-medium text-gray-500 truncate">Storage used</dt>
                   <dd className="flex items-baseline">
-                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(189237982173)}</div>
+                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.storageUsed ?? 0)}</div>
                   </dd>
                 </div>
               </div>
             </div>
             <div className="bg-gray-50 px-4 py-4 sm:px-6">
-              <div className="text-sm">
+              {/* <div className="text-sm">
                 <Link href="/downloads">
-                  <a className="font-medium text-indigo-600 hover:text-indigo-500">View all downloads</a>
+                  <a className="font-medium text-green-600 hover:text-green-500">View all downloads</a>
                 </Link>
-              </div>
+              </div> */}
             </div>
           </div>
 
           <div className="flex flex-col bg-white overflow-hidden shadow rounded-lg">
             <div className="flex-grow px-4 py-5 sm:p-6">
               <div className="flex items-center">
-                <div className="flex-shrink-0 bg-red-500 rounded-md p-3">
+                <div className="flex-shrink-0 bg-green-500 rounded-md p-3">
                   {/* Heroicon name: outline/cursor-click */}
                   <svg
                     className="h-6 w-6 text-white"
@@ -105,24 +114,26 @@ export default function Home() {
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       strokeWidth={2}
-                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                     />
                   </svg>
                 </div>
                 <div className="ml-5 w-0 flex-1">
-                  <dt className="text-sm font-medium text-gray-500 truncate">Current period upload</dt>
+                  <dt className="text-sm font-medium text-gray-500 truncate">Current period usage</dt>
                   <dd className="flex items-baseline">
-                    <div className="text-2xl font-semibold text-grey-900">{prettyBytes(9237982173)}</div>
+                    <div className="text-2xl font-semibold text-red-600">{prettyBytes(currentPeriodDownload)}</div>
+                    <div className="text-2xl font-semibold text-gray-900 px-1">/</div>
+                    <div className="text-2xl font-semibold text-blue-600">{prettyBytes(currentPeriodUpload)}</div>
                   </dd>
                 </div>
               </div>
             </div>
             <div className="bg-gray-50 px-4 py-4 sm:px-6">
-              <div className="text-sm">
+              {/* <div className="text-sm">
                 <Link href="/uploads">
-                  <a className="font-medium text-indigo-600 hover:text-indigo-500">View all uploads</a>
+                  <a className="font-medium text-green-600 hover:text-green-500">View all uploads</a>
                 </Link>
-              </div>
+              </div> */}
             </div>
           </div>
         </dl>
@@ -138,11 +149,12 @@ export default function Home() {
             {/* This example requires Tailwind CSS v2.0+ */}
             <div className="bg-white shadow overflow-hidden sm:rounded-md">
               <ul className="divide-y divide-gray-200">
-                <li>
-                  <a href="#" className="block hover:bg-gray-50">
+                {(downloads?.items ?? []).slice(0, 3).map((item) => (
+                  <li key={item.id}>
+                    {/* <a href="#" className="block hover:bg-gray-50"> */}
                     <div className="px-4 py-4 sm:px-6">
                       <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
+                        <p className="text-sm font-medium text-green-600 truncate">{item.name || item.skylink}</p>
                       </div>
                       <div className="mt-2 sm:flex sm:justify-between">
                         <div className="sm:flex">
@@ -159,129 +171,35 @@ export default function Home() {
                                 strokeLinecap="round"
                                 strokeLinejoin="round"
                                 strokeWidth={2}
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
+                                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
                               />
                             </svg>
-                            {prettyBytes(12389128893)}
+                            {prettyBytes(item.size)}
                           </p>
                         </div>
                         <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                          {/* Heroicon name: solid/calendar */}
                           <svg
-                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+                            className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400"
                             xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            aria-hidden="true"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
                           >
                             <path
-                              fillRule="evenodd"
-                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                              clipRule="evenodd"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                             />
                           </svg>
-                          <time dateTime="2020-01-07">January 7, 2020</time>
+
+                          <time dateTime={item.downloadedOn}>{dayjs(item.downloadedOn).fromNow()}</time>
                         </div>
                       </div>
                     </div>
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="block hover:bg-gray-50">
-                    <div className="px-4 py-4 sm:px-6">
-                      <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
-                      </div>
-                      <div className="mt-2 sm:flex sm:justify-between">
-                        <div className="sm:flex">
-                          <p className="flex items-center text-sm text-gray-500">
-                            {/* Heroicon name: solid/users */}
-                            <svg
-                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
-                              />
-                            </svg>
-                            {prettyBytes(1112)}
-                          </p>
-                        </div>
-                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                          {/* Heroicon name: solid/calendar */}
-                          <svg
-                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fillRule="evenodd"
-                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                              clipRule="evenodd"
-                            />
-                          </svg>
-                          <time dateTime="2020-01-07">January 7, 2020</time>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="block hover:bg-gray-50">
-                    <div className="px-4 py-4 sm:px-6">
-                      <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
-                      </div>
-                      <div className="mt-2 sm:flex sm:justify-between">
-                        <div className="sm:flex">
-                          <p className="flex items-center text-sm text-gray-500">
-                            {/* Heroicon name: solid/users */}
-                            <svg
-                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
-                              />
-                            </svg>
-                            {prettyBytes(4124)}
-                          </p>
-                        </div>
-                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                          {/* Heroicon name: solid/calendar */}
-                          <svg
-                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fillRule="evenodd"
-                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                              clipRule="evenodd"
-                            />
-                          </svg>
-                          <time dateTime="2020-01-07">January 7, 2020</time>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
-                </li>
+                    {/* </a> */}
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
@@ -293,11 +211,12 @@ export default function Home() {
             {/* This example requires Tailwind CSS v2.0+ */}
             <div className="bg-white shadow overflow-hidden sm:rounded-md">
               <ul className="divide-y divide-gray-200">
-                <li>
-                  <a href="#" className="block hover:bg-gray-50">
+                {(uploads?.items ?? []).slice(0, 3).map((item) => (
+                  <li key={item.id}>
+                    {/* <a href="#" className="block hover:bg-gray-50"> */}
                     <div className="px-4 py-4 sm:px-6">
                       <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
+                        <p className="text-sm font-medium text-green-600 truncate">{item.name || item.skylink}</p>
                       </div>
                       <div className="mt-2 sm:flex sm:justify-between">
                         <div className="sm:flex">
@@ -314,129 +233,35 @@ export default function Home() {
                                 strokeLinecap="round"
                                 strokeLinejoin="round"
                                 strokeWidth={2}
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
                               />
                             </svg>
-                            {prettyBytes(234674)}
+                            {prettyBytes(item.size)}
                           </p>
                         </div>
                         <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                          {/* Heroicon name: solid/calendar */}
                           <svg
-                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+                            className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400"
                             xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            aria-hidden="true"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
                           >
                             <path
-                              fillRule="evenodd"
-                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                              clipRule="evenodd"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                             />
                           </svg>
-                          <time dateTime="2020-01-07">January 7, 2020</time>
+
+                          <time dateTime={item.uploadedOn}>{dayjs(item.uploadedOn).fromNow()}</time>
                         </div>
                       </div>
                     </div>
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="block hover:bg-gray-50">
-                    <div className="px-4 py-4 sm:px-6">
-                      <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
-                      </div>
-                      <div className="mt-2 sm:flex sm:justify-between">
-                        <div className="sm:flex">
-                          <p className="flex items-center text-sm text-gray-500">
-                            {/* Heroicon name: solid/users */}
-                            <svg
-                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                              />
-                            </svg>
-                            {prettyBytes(43215)}
-                          </p>
-                        </div>
-                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                          {/* Heroicon name: solid/calendar */}
-                          <svg
-                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fillRule="evenodd"
-                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                              clipRule="evenodd"
-                            />
-                          </svg>
-                          <time dateTime="2020-01-07">January 7, 2020</time>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
-                </li>
-                <li>
-                  <a href="#" className="block hover:bg-gray-50">
-                    <div className="px-4 py-4 sm:px-6">
-                      <div className="flex items-center justify-between">
-                        <p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
-                      </div>
-                      <div className="mt-2 sm:flex sm:justify-between">
-                        <div className="sm:flex">
-                          <p className="flex items-center text-sm text-gray-500">
-                            {/* Heroicon name: solid/users */}
-                            <svg
-                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                              />
-                            </svg>
-                            {prettyBytes(123)}
-                          </p>
-                        </div>
-                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
-                          {/* Heroicon name: solid/calendar */}
-                          <svg
-                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fillRule="evenodd"
-                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                              clipRule="evenodd"
-                            />
-                          </svg>
-                          <time dateTime="2020-01-07">January 7, 2020</time>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
-                </li>
+                    {/* </a> */}
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
diff --git a/packages/dashboard/src/pages/payments.js b/packages/dashboard/src/pages/payments.js
index 6fdf6cef..8b4f3283 100644
--- a/packages/dashboard/src/pages/payments.js
+++ b/packages/dashboard/src/pages/payments.js
@@ -170,7 +170,7 @@ export default function Payments() {
                     </div>
                     <div className="ml-4 mt-2 flex-shrink-0">
                       <Link href="/plans">
-                        <a className="font-medium text-indigo-600 hover:text-indigo-500">help me choose a plan</a>
+                        <a className="font-medium text-green-600 hover:text-green-500">help me choose a plan</a>
                       </Link>
                     </div>
                   </div>
diff --git a/packages/dashboard/src/pages/plans.js b/packages/dashboard/src/pages/plans.js
index c6287beb..ee319e69 100644
--- a/packages/dashboard/src/pages/plans.js
+++ b/packages/dashboard/src/pages/plans.js
@@ -13,13 +13,13 @@ export default function Payments() {
             <div className="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
               <button
                 type="button"
-                className="relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"
+                className="relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-green-500 focus:z-10 sm:w-auto sm:px-8"
               >
                 Monthly billing
               </button>
               <button
                 type="button"
-                className="ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"
+                className="ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-green-500 focus:z-10 sm:w-auto sm:px-8"
               >
                 Yearly billing
               </button>