From db8869602e4b960ac083ee76709050cff6983c3f Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Tue, 9 Feb 2021 14:42:06 +0100
Subject: [PATCH] plans

---
 packages/dashboard/package.json               |   1 +
 packages/dashboard/src/components/Layout.js   |   2 +-
 packages/dashboard/src/components/Table.js    |  49 ++-
 .../api/{fixtures => stubs/user}/downloads.js |   0
 .../{fixtures => stubs/user}/downloads.json   |   0
 .../api/{fixtures => stubs/user}/uploads.js   |   0
 .../api/{fixtures => stubs/user}/uploads.json |   0
 packages/dashboard/src/pages/downloads.js     |   3 +-
 packages/dashboard/src/pages/payments.js      |  69 +++-
 packages/dashboard/src/pages/plans.js         | 389 ++++++++++++++++++
 packages/dashboard/src/pages/uploads.js       |   3 +-
 11 files changed, 477 insertions(+), 39 deletions(-)
 rename packages/dashboard/src/pages/api/{fixtures => stubs/user}/downloads.js (100%)
 rename packages/dashboard/src/pages/api/{fixtures => stubs/user}/downloads.json (100%)
 rename packages/dashboard/src/pages/api/{fixtures => stubs/user}/uploads.js (100%)
 rename packages/dashboard/src/pages/api/{fixtures => stubs/user}/uploads.json (100%)
 create mode 100644 packages/dashboard/src/pages/plans.js

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 2ec5ebbb..fbe0939f 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -12,6 +12,7 @@
     "@ory/kratos-client": "^0.5.4-alpha.1",
     "@tailwindcss/forms": "^0.2.1",
     "autoprefixer": "^10.2.4",
+    "classnames": "^2.2.6",
     "dayjs": "^1.10.4",
     "express-jwt": "^6.0.0",
     "formik": "^2.2.6",
diff --git a/packages/dashboard/src/components/Layout.js b/packages/dashboard/src/components/Layout.js
index 85f65837..5b8eb272 100644
--- a/packages/dashboard/src/components/Layout.js
+++ b/packages/dashboard/src/components/Layout.js
@@ -225,7 +225,7 @@ export default function Layout({ title, children }) {
         </div>
       </main>
 
-      <footer>
+      <footer className="mb-4 sm:mb-6">
         <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl text-sm text-gray-500 text-center sm:text-left">
           <span className="block sm:inline">© 2021 Skynet Labs Inc.</span>{" "}
           <span className="block sm:inline">All rights reserved.</span>
diff --git a/packages/dashboard/src/components/Table.js b/packages/dashboard/src/components/Table.js
index 4d9e1b56..9c65bdc5 100644
--- a/packages/dashboard/src/components/Table.js
+++ b/packages/dashboard/src/components/Table.js
@@ -1,12 +1,37 @@
-const pageSize = 10;
+import { useEffect } from "react";
+import classnames from "classnames";
+
+const pageSize = 2;
+
+function Button({ children, disabled, className, ...props }) {
+  return (
+    <button
+      type="button"
+      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,
+          "cursor-auto opacity-50": disabled,
+        },
+        className
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
 
 export default function Table({ data, headers, actions, page, setPage }) {
   const lastPage = Math.ceil(data.length / pageSize);
-
-  if (page > lastPage) setPage(lastPage);
-
   const dataSlice = data.slice(pageSize * (page - 1), pageSize * (page - 1) + pageSize);
 
+  useEffect(() => {
+    if (page > lastPage) setPage(lastPage);
+    if (page < 1) setPage(1);
+  }, [page, lastPage, setPage]);
+
   return (
     <div className="flex flex-col">
       <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
@@ -63,20 +88,12 @@ export default function Table({ data, headers, actions, page, setPage }) {
                 </p>
               </div>
               <div className="flex-1 flex justify-between sm:justify-end">
-                <a
-                  href="#"
-                  className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                  onClick={() => (page > 1 ? setPage(page - 1) : undefined)}
-                >
+                <Button disabled={page <= 1} onClick={() => setPage(page - 1)}>
                   Previous
-                </a>
-                <a
-                  href="#"
-                  className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                  onClick={() => (page < lastPage ? setPage(page + 1) : undefined)}
-                >
+                </Button>
+                <Button className="ml-3" disabled={page >= lastPage} onClick={() => setPage(page + 1)}>
                   Next
-                </a>
+                </Button>
               </div>
             </nav>
           </div>
diff --git a/packages/dashboard/src/pages/api/fixtures/downloads.js b/packages/dashboard/src/pages/api/stubs/user/downloads.js
similarity index 100%
rename from packages/dashboard/src/pages/api/fixtures/downloads.js
rename to packages/dashboard/src/pages/api/stubs/user/downloads.js
diff --git a/packages/dashboard/src/pages/api/fixtures/downloads.json b/packages/dashboard/src/pages/api/stubs/user/downloads.json
similarity index 100%
rename from packages/dashboard/src/pages/api/fixtures/downloads.json
rename to packages/dashboard/src/pages/api/stubs/user/downloads.json
diff --git a/packages/dashboard/src/pages/api/fixtures/uploads.js b/packages/dashboard/src/pages/api/stubs/user/uploads.js
similarity index 100%
rename from packages/dashboard/src/pages/api/fixtures/uploads.js
rename to packages/dashboard/src/pages/api/stubs/user/uploads.js
diff --git a/packages/dashboard/src/pages/api/fixtures/uploads.json b/packages/dashboard/src/pages/api/stubs/user/uploads.json
similarity index 100%
rename from packages/dashboard/src/pages/api/fixtures/uploads.json
rename to packages/dashboard/src/pages/api/stubs/user/uploads.json
diff --git a/packages/dashboard/src/pages/downloads.js b/packages/dashboard/src/pages/downloads.js
index 1a708cc2..5194b42d 100644
--- a/packages/dashboard/src/pages/downloads.js
+++ b/packages/dashboard/src/pages/downloads.js
@@ -5,6 +5,7 @@ import useSWR from "swr";
 import Layout from "../components/Layout";
 import Table from "../components/Table";
 
+const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const fetcher = (url) => fetch(url).then((r) => r.json());
 const headers = [
   { key: "name", name: "Name" },
@@ -16,7 +17,7 @@ const actions = [];
 
 export default function Downloads() {
   const [page, setPage] = useState(1);
-  const { data, error } = useSWR("/user/downloads", fetcher);
+  const { data, error } = useSWR(`${apiPrefix}/user/downloads`, fetcher);
 
   return (
     <Layout title="Your downloads">
diff --git a/packages/dashboard/src/pages/payments.js b/packages/dashboard/src/pages/payments.js
index 7615bd00..6fdf6cef 100644
--- a/packages/dashboard/src/pages/payments.js
+++ b/packages/dashboard/src/pages/payments.js
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import Layout from "../components/Layout";
 
 export default function Payments() {
@@ -16,7 +17,7 @@ export default function Payments() {
             <div className="bg-white overflow-hidden shadow rounded-lg">
               <div className="px-4 py-5 sm:p-6">
                 <dt className="text-sm font-medium text-gray-500 truncate">Next invoice</dt>
-                <dd className="mt-1 text-3xl font-semibold text-gray-900">-</dd>
+                <dd className="mt-1 text-3xl font-semibold text-gray-900">&mdash;</dd>
               </div>
             </div>
             <div className="bg-white overflow-hidden shadow rounded-lg">
@@ -161,10 +162,17 @@ export default function Payments() {
             <form action="#" method="POST">
               <div className="shadow sm:rounded-md sm:overflow-hidden">
                 <div className="bg-white py-6 px-4 space-y-6 sm:p-6">
-                  <div>
-                    <h2 id="plan_heading" className="text-lg leading-6 font-medium text-gray-900">
-                      Plan
-                    </h2>
+                  <div className="-ml-4 -mt-2 flex items-center justify-between flex-wrap sm:flex-nowrap">
+                    <div className="ml-4 mt-2">
+                      <h3 id="plan_heading" className="text-lg leading-6 font-medium text-gray-900">
+                        Plan
+                      </h3>
+                    </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>
+                      </Link>
+                    </div>
                   </div>
                   <fieldset>
                     <legend className="sr-only">Pricing plans</legend>
@@ -178,18 +186,19 @@ export default function Payments() {
                               type="radio"
                               className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
                               aria-describedby="plan-option-pricing-0 plan-option-limit-0"
+                              defaultChecked
                             />
-                            <span className="ml-3 font-medium text-gray-900">Startup</span>
+                            <span className="ml-3 font-medium text-gray-900">Free</span>
                           </label>
                           <p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
                             {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">$29 / mo</span>
+                            <span className="font-medium">&mdash;</span>
                             {/* On: "text-orange-700", Off: "text-gray-500" */}
-                            <span>($290 / yr)</span>
+                            {/* <span>($290 / yr)</span> */}
                           </p>
                           {/* On: "text-orange-700", Off: "text-gray-500" */}
                           <p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            Up to 5 active job postings
+                            Unlimited bandwidth with throttled speed
                           </p>
                         </div>
                       </li>
@@ -202,19 +211,17 @@ export default function Payments() {
                               type="radio"
                               className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
                               aria-describedby="plan-option-pricing-1 plan-option-limit-1"
-                              defaultChecked
                             />
-                            <span className="ml-3 font-medium text-gray-900">Business</span>
+                            <span className="ml-3 font-medium text-gray-900">Skynet Plus</span>
                           </label>
                           <p id="plan-option-pricing-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
                             {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">$99 / mo</span>
-                            {/* On: "text-orange-700", Off: "text-gray-500" */}
-                            <span>($990 / yr)</span>
+                            <span className="font-medium">$5 / mo</span>
+                            {/* On: "text-orange-700", Off: "text-gray-500" */} <span>($50 / yr)</span>
                           </p>
                           {/* On: "text-orange-700", Off: "text-gray-500" */}
                           <p id="plan-option-limit-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            Up to 25 active job postings
+                            1 TB premium bandwidth with full speed
                           </p>
                         </div>
                       </li>
@@ -228,17 +235,39 @@ export default function Payments() {
                               className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
                               aria-describedby="plan-option-pricing-2 plan-option-limit-2"
                             />
-                            <span className="ml-3 font-medium text-gray-900">Enterprise</span>
+                            <span className="ml-3 font-medium text-gray-900">Skynet Pro</span>
                           </label>
                           <p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
                             {/* On: "text-orange-900", Off: "text-gray-900" */}
-                            <span className="font-medium">$249 / mo</span>
-                            {/* On: "text-orange-700", Off: "text-gray-500" */}
-                            <span>($2490 / yr)</span>
+                            <span className="font-medium">$20 / mo</span>
+                            {/* On: "text-orange-700", Off: "text-gray-500" */} <span>($200 / yr)</span>
                           </p>
                           {/* On: "text-orange-700", Off: "text-gray-500" */}
                           <p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
-                            Unlimited active job postings
+                            5 TB premium bandwidth with full speed
+                          </p>
+                        </div>
+                      </li>
+                      <li>
+                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
+                        <div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
+                          <label className="flex items-center text-sm cursor-pointer">
+                            <input
+                              name="pricing_plan"
+                              type="radio"
+                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
+                              aria-describedby="plan-option-pricing-2 plan-option-limit-2"
+                            />
+                            <span className="ml-3 font-medium text-gray-900">Skynet Extreme</span>
+                          </label>
+                          <p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
+                            {/* On: "text-orange-900", Off: "text-gray-900" */}
+                            <span className="font-medium">$80 / mo</span>
+                            {/* On: "text-orange-700", Off: "text-gray-500" */} <span>($800 / yr)</span>
+                          </p>
+                          {/* On: "text-orange-700", Off: "text-gray-500" */}
+                          <p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
+                            20 TB premium bandwidth with full speed
                           </p>
                         </div>
                       </li>
diff --git a/packages/dashboard/src/pages/plans.js b/packages/dashboard/src/pages/plans.js
new file mode 100644
index 00000000..c6287beb
--- /dev/null
+++ b/packages/dashboard/src/pages/plans.js
@@ -0,0 +1,389 @@
+import Layout from "../components/Layout";
+
+export default function Payments() {
+  return (
+    <Layout title="Pricing Plans">
+      {/* This example requires Tailwind CSS v2.0+ */}
+      <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="sm:flex sm:flex-col sm:align-center">
+            <p className="mt-5 text-xl text-gray-500 sm:text-center">
+              Start using for free, then add a plan to improve the experience. Account plans unlock additional features.
+            </p>
+            <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"
+              >
+                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"
+              >
+                Yearly billing
+              </button>
+            </div>
+          </div>
+          <div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
+            <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
+              <div className="p-6">
+                <h2 className="text-lg leading-6 font-medium text-gray-900">Free</h2>
+                <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
+                <p className="mt-8">
+                  <span className="text-4xl font-extrabold text-gray-900">no cost</span>
+                </p>
+                <a
+                  href="#"
+                  className="opacity-50 mt-8 block w-full bg-gray-400 border border-gray-400 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
+                >
+                  Active
+                </a>
+              </div>
+              <div className="pt-6 pb-8 px-6">
+                <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
+                <ul className="mt-6 space-y-4">
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
+              <div className="p-6">
+                <h2 className="text-lg leading-6 font-medium text-gray-900">Skynet Plus</h2>
+                <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
+                <p className="mt-8">
+                  <span className="text-4xl font-extrabold text-gray-900">$5</span>
+                  <span className="text-base font-medium text-gray-500">/mo</span>
+                </p>
+                <a
+                  href="#"
+                  className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
+                >
+                  Buy Skynet Plus
+                </a>
+              </div>
+              <div className="pt-6 pb-8 px-6">
+                <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
+                <ul className="mt-6 space-y-4">
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
+              <div className="p-6">
+                <h2 className="text-lg leading-6 font-medium text-gray-900">Skynet Pro</h2>
+                <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
+                <p className="mt-8">
+                  <span className="text-4xl font-extrabold text-gray-900">$20</span>
+                  <span className="text-base font-medium text-gray-500">/mo</span>
+                </p>
+                <a
+                  href="#"
+                  className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
+                >
+                  Buy Skynet Pro
+                </a>
+              </div>
+              <div className="pt-6 pb-8 px-6">
+                <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
+                <ul className="mt-6 space-y-4">
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Faucibus volutpat magna.</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
+              <div className="p-6">
+                <h2 className="text-lg leading-6 font-medium text-gray-900">Skynet Extreme</h2>
+                <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
+                <p className="mt-8">
+                  <span className="text-4xl font-extrabold text-gray-900">$80</span>
+                  <span className="text-base font-medium text-gray-500">/mo</span>
+                </p>
+                <a
+                  href="#"
+                  className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
+                >
+                  Buy Skynet Extreme
+                </a>
+              </div>
+              <div className="pt-6 pb-8 px-6">
+                <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
+                <ul className="mt-6 space-y-4">
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Faucibus volutpat magna.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Id sed tellus in varius quisque.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Risus egestas faucibus.</span>
+                  </li>
+                  <li className="flex space-x-3">
+                    {/* Heroicon name: solid/check */}
+                    <svg
+                      className="flex-shrink-0 h-5 w-5 text-green-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span className="text-sm text-gray-500">Risus cursus ullamcorper.</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/packages/dashboard/src/pages/uploads.js b/packages/dashboard/src/pages/uploads.js
index add42056..be743c51 100644
--- a/packages/dashboard/src/pages/uploads.js
+++ b/packages/dashboard/src/pages/uploads.js
@@ -5,6 +5,7 @@ import useSWR from "swr";
 import Layout from "../components/Layout";
 import Table from "../components/Table";
 
+const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const fetcher = (url) => fetch(url).then((r) => r.json());
 const headers = [
   { key: "name", name: "Name" },
@@ -16,7 +17,7 @@ const actions = [];
 
 export default function Downloads() {
   const [page, setPage] = useState(1);
-  const { data, error } = useSWR("/user/uploads", fetcher);
+  const { data, error } = useSWR(`${apiPrefix}/user/uploads`, fetcher);
 
   return (
     <Layout title="Your uploads">