├── .node-version
├── css
    ├── frontend.scss
    ├── fonts.scss
    ├── icon.scss
    ├── progress.scss
    ├── notification.scss
    ├── path.scss
    ├── card.scss
    ├── modal.scss
    ├── aside.scss
    ├── table.scss
    ├── admin.scss
    ├── button.scss
    ├── navbar.scss
    └── forms.scss
├── public
    ├── _headers
    ├── favicon.ico
    └── _routes.json
├── remix.env.d.ts
├── .gitignore
├── .eslintrc.js
├── types
    ├── cloudflare.d.ts
    ├── build.d.ts
    └── remix.d.ts
├── postcss.config.js
├── remix.config.js
├── README.md
├── tailwind.config.js
├── app
    ├── entry.client.tsx
    ├── components
    │   └── tools.tsx
    ├── tsconfig.json
    ├── utils.ts
    ├── entry.server.tsx
    ├── routes
    │   ├── dash.tsx
    │   ├── _index.tsx
    │   ├── customer.$id.tsx
    │   ├── products.tsx
    │   ├── product.$id.tsx
    │   ├── supplier.$id.tsx
    │   ├── suppliers.tsx
    │   ├── customers.tsx
    │   ├── employees.tsx
    │   ├── orders.tsx
    │   ├── employee.$id.tsx
    │   ├── search.tsx
    │   └── order.$id.tsx
    └── root.tsx
├── functions
    ├── tsconfig.json
    └── [[remix]].ts
├── wrangler.toml
├── package.json
└── db
    └── schema.sql


/.node-version:
--------------------------------------------------------------------------------
1 | 16.13.0
2 | 


--------------------------------------------------------------------------------
/css/frontend.scss:
--------------------------------------------------------------------------------
1 | /* color definitions */
2 | $nav-bg-color: #eeeeee;
3 | 
4 | 


--------------------------------------------------------------------------------
/public/_headers:
--------------------------------------------------------------------------------
1 | /build/*
2 |   Cache-Control: public, max-age=31536000, s-maxage=31536000
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jacob-ebey/remix-d1-northwind/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/node" />
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /.cache
4 | /.wrangler
5 | /build
6 | /public/build
7 | .env
8 | /app/css/admin.css


--------------------------------------------------------------------------------
/public/_routes.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": 1,
3 |   "include": ["/*"],
4 |   "exclude": ["/build/*", "/favicon.ico"]
5 | }
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import('eslint').Linter.Config} */
2 | module.exports = {
3 |   extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
4 | };
5 | 


--------------------------------------------------------------------------------
/types/cloudflare.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@cloudflare/workers-types" />
2 | 
3 | interface Env {
4 |   CF_PAGES?: 1;
5 |   DB: D1Database;
6 |   SESSION_SECRET: string;
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     "postcss-import": {},
4 |     "postcss-nested": {},
5 |     tailwindcss: {},
6 |     autoprefixer: {},
7 |   },
8 | };
9 | 


--------------------------------------------------------------------------------
/css/fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 |   font-family: 'Inter';
3 |   font-style: normal;
4 |   font-weight: 400;
5 |   font-display: swap;
6 |   src: url(https://fonts.gstatic.com/s/inter/v1/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZg.ttf) format('truetype');
7 | }
8 | 


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('@remix-run/dev').AppConfig} */
 2 | module.exports = {
 3 |   ignoredRouteFiles: ["**/.*"],
 4 |   serverDependenciesToBundle: [/~/],
 5 |   serverModuleFormat: "esm",
 6 |   future: {
 7 |     v2_routeConvention: true,
 8 |   },
 9 | };
10 | 


--------------------------------------------------------------------------------
/css/icon.scss:
--------------------------------------------------------------------------------
 1 | .material-icons {
 2 |     @apply inline-flex justify-center items-center w-6 h-6;
 3 | }
 4 | 
 5 | .material-icons.widget-icon {
 6 |     @apply w-20 h-20;
 7 | }
 8 | 
 9 | .material-icons.large {
10 |     @apply w-12 h-12;
11 | }
12 | 
13 | .material-icons span {
14 |     @apply inline-flex;
15 | }
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to Remix!
 2 | 
 3 | - [Remix Docs](https://remix.run/docs)
 4 | 
 5 | ## Development
 6 | 
 7 | From your terminal:
 8 | 
 9 | ```sh
10 | npm run dev
11 | ```
12 | 
13 | This starts your app in development mode, rebuilding assets on file changes.
14 | 
15 | ## Deployment
16 | 
17 | Wire it up via the CF Dashboard. More info to come.
18 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require("tailwindcss/colors");
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   content: ["app/**/*.{ts,tsx}"],
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         sky: colors.sky,
10 |         cyan: colors.cyan,
11 |       },
12 |     },
13 |   },
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/css/progress.scss:
--------------------------------------------------------------------------------
 1 | progress {
 2 |   @apply h-3 rounded-full overflow-hidden;
 3 | }
 4 | 
 5 | progress::-webkit-progress-bar {
 6 |   @apply bg-gray-200;
 7 | }
 8 | 
 9 | progress::-webkit-progress-value {
10 |   @apply bg-green-500;
11 | }
12 | 
13 | progress::-moz-progress-bar {
14 |   @apply bg-green-500;
15 | }
16 | 
17 | progress::-ms-fill {
18 |   @apply bg-green-500 border-0;
19 | }


--------------------------------------------------------------------------------
/css/notification.scss:
--------------------------------------------------------------------------------
 1 | .notification {
 2 |     @apply px-3 py-6 rounded;
 3 | }
 4 | 
 5 | .notification:not(:last-child) {
 6 |     @apply mb-6;
 7 | }
 8 | 
 9 | .notification.blue {
10 |     @apply bg-blue-500 text-white;
11 | }
12 | 
13 | .notification.green {
14 |     @apply bg-green-500 text-white;
15 | }
16 | 
17 | .notification.red {
18 |     @apply bg-red-500 text-white;
19 | }
20 | 
21 | 


--------------------------------------------------------------------------------
/css/path.scss:
--------------------------------------------------------------------------------
 1 | .is-title-bar {
 2 |     @apply p-6 border-b border-gray-100;
 3 | }
 4 | 
 5 | .is-title-bar li {
 6 |     @apply inline-block pr-3 text-2xl text-gray-500;
 7 | }
 8 | 
 9 | .is-title-bar li:not(:last-child):after {
10 |     content: "/";
11 |     @apply inline-block pl-3;
12 | }
13 | 
14 | .is-title-bar li:last-child {
15 |     @apply pr-0 font-black text-black;
16 | }
17 | 
18 | 


--------------------------------------------------------------------------------
/types/build.d.ts:
--------------------------------------------------------------------------------
1 | import { type ServerBuild } from "@remix-run/cloudflare";
2 | 
3 | export const assets: ServerBuild["assets"];
4 | export const assetsBuildDirectory: ServerBuild["assetsBuildDirectory"];
5 | export const entry: ServerBuild["entry"];
6 | export const future: ServerBuild["future"];
7 | export const publicPath: ServerBuild["publicPath"];
8 | export const routes: ServerBuild["routes"];
9 | 


--------------------------------------------------------------------------------
/types/remix.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="@remix-run/dev" />
 2 | /// <reference types="@remix-run/cloudflare" />
 3 | 
 4 | import "@remix-run/server-runtime";
 5 | import { type Session } from "@remix-run/server-runtime";
 6 | 
 7 | declare module "@remix-run/server-runtime" {
 8 |   export interface AppLoadContext {
 9 |     cf?: IncomingRequestCfProperties<unknown>;
10 |     DB: D1Database;
11 |     session: Session;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
 1 | import { RemixBrowser } from "@remix-run/react";
 2 | import { startTransition, StrictMode } from "react";
 3 | import { hydrateRoot } from "react-dom/client";
 4 | 
 5 | function hydrate() {
 6 |   startTransition(() => {
 7 |     hydrateRoot(
 8 |       document,
 9 |       <StrictMode>
10 |         <RemixBrowser />
11 |       </StrictMode>
12 |     );
13 |   });
14 | }
15 | 
16 | if (typeof requestIdleCallback === "function") {
17 |   requestIdleCallback(hydrate);
18 | } else {
19 |   // Safari doesn't support requestIdleCallback
20 |   // https://caniuse.com/requestidlecallback
21 |   setTimeout(hydrate, 1);
22 | }
23 | 


--------------------------------------------------------------------------------
/functions/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["../types/cloudflare.d.ts", "**/*.ts"],
 3 |   "compilerOptions": {
 4 |     "target": "esnext",
 5 |     "module": "esnext",
 6 |     "lib": ["esnext"],
 7 |     "isolatedModules": true,
 8 |     "esModuleInterop": true,
 9 |     "moduleResolution": "node",
10 |     "resolveJsonModule": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "baseUrl": ".",
14 |     "paths": {
15 |       "~/*": ["../app/*"],
16 |       "#build": ["../types/build.d.ts", "../build/index.js"]
17 |     },
18 | 
19 |     // Wrangler takes care of building everything in the `functions` director.
20 |     "noEmit": true
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/wrangler.toml:
--------------------------------------------------------------------------------
 1 | name = "remix-d1-northwind"
 2 | compatibility_date = "2023-01-18"
 3 | compatibility_flags = ["streams_enable_constructors"]
 4 | 
 5 | [[env.local.d1_databases]]
 6 | binding = "DB"
 7 | database_name = "d1-northwind"
 8 | database_id = "1"
 9 | 
10 | [[env.dev.d1_databases]]
11 | binding = "DB"
12 | database_name = "d1-northwind-staging"
13 | database_id = "b98e08e0-bb6b-4b15-b7af-33f3b215f577"
14 | 
15 | [[env.production.d1_databases]]
16 | binding = "DB"
17 | database_name = "d1-northwind"
18 | database_id = "699ec5da-e0a9-44d1-91d3-7b1daae10736"
19 | 
20 | [[d1_databases]]
21 | binding = "DB"
22 | database_name = "d1-northwind"
23 | database_id = "699ec5da-e0a9-44d1-91d3-7b1daae10736"
24 | 


--------------------------------------------------------------------------------
/app/components/tools.tsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "@remix-run/react";
 2 | 
 3 | export function AddTableField(props: {
 4 |   name: string;
 5 |   link?: string;
 6 |   value: string | number;
 7 | }) {
 8 |   return (
 9 |     <div className="field">
10 |       <label className="label">{props.name}</label>
11 |       <div className="field-body">
12 |         <div className="field">
13 |           <div className="control icons-left">
14 |             {props.link ? (
15 |               <Link to={props.link} className="link">
16 |                 {props.value}
17 |               </Link>
18 |             ) : (
19 |               `${props.value}`
20 |             )}
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/app/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["../types/remix.d.ts", "**/*.ts", "**/*.tsx"],
 3 |   "exclude": ["functions/**/*"],
 4 |   "compilerOptions": {
 5 |     "target": "ES2019",
 6 |     "module": "ESNext",
 7 |     "lib": ["DOM", "DOM.Iterable", "ES2019"],
 8 |     "types": ["@cloudflare/workers-types"],
 9 |     "isolatedModules": true,
10 |     "esModuleInterop": true,
11 |     "moduleResolution": "node",
12 |     "resolveJsonModule": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "jsx": "react-jsx",
16 |     "baseUrl": ".",
17 |     "paths": {
18 |       "~/*": ["./*"]
19 |     },
20 | 
21 |     // Remix takes care of building everything in the `app` directory.
22 |     "noEmit": true
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/app/utils.ts:
--------------------------------------------------------------------------------
 1 | import { defer, type Session } from "@remix-run/cloudflare";
 2 | 
 3 | export async function maybeDefer<T extends Record<string, unknown>>(
 4 |   session: Session,
 5 |   data: T
 6 | ) {
 7 |   const delay = Number(session.get("delay") || 0);
 8 |   const shouldDefer = Boolean(session.get("defer"));
 9 | 
10 |   if (!shouldDefer) {
11 |     await new Promise((resolve) => setTimeout(resolve, delay));
12 |   }
13 | 
14 |   for (const [key, value] of Object.entries(data)) {
15 |     if (value instanceof Promise) {
16 |       if (shouldDefer) {
17 |         (data as any)[key] = new Promise((resolve) =>
18 |           setTimeout(resolve, delay)
19 |         ).then(() => value);
20 |       } else {
21 |         (data as any)[key] = await value;
22 |       }
23 |     }
24 |   }
25 | 
26 |   return defer(data);
27 | }
28 | 


--------------------------------------------------------------------------------
/css/card.scss:
--------------------------------------------------------------------------------
 1 | .card {
 2 |   @apply bg-white border border-gray-100 rounded;
 3 | }
 4 | 
 5 | .card.has-table .card-content {
 6 |   @apply p-0;
 7 | }
 8 | 
 9 | .card-content {
10 |   @apply p-6;
11 | }
12 | 
13 | .card-content hr {
14 |   @apply my-6 -mx-6;
15 | }
16 | 
17 | .card.empty .card-content {
18 |   @apply text-center py-12 text-gray-500;
19 | }
20 | 
21 | .card-header {
22 |   @apply flex items-stretch border-b border-gray-100;
23 | }
24 | 
25 | .card-header-title, .card-header-icon {
26 |   @apply flex items-center py-3 px-4;
27 | }
28 | 
29 | .card-header-title {
30 |   @apply flex-grow font-bold ;
31 | }
32 | 
33 | .card-header-icon {
34 |   @apply justify-center;
35 | }
36 | 
37 | .widget-label h3 {
38 |   @apply text-lg leading-tight text-gray-500;
39 | }
40 | 
41 | .widget-label h1 {
42 |   @apply text-3xl leading-tight font-semibold;
43 | }
44 | 
45 | .form-screen .card {
46 |   @apply w-11/12 lg:w-5/12 shadow-2xl rounded-lg;
47 | }


--------------------------------------------------------------------------------
/css/modal.scss:
--------------------------------------------------------------------------------
 1 | .modal {
 2 |     @apply hidden items-center flex-col justify-center overflow-hidden fixed inset-0 z-40;
 3 | }
 4 | 
 5 | .modal.active {
 6 |     @apply flex;
 7 | }
 8 | 
 9 | .modal-background {
10 |     @apply absolute inset-0 bg-gray-900 bg-opacity-80;
11 | }
12 | 
13 | .modal-card {
14 |     max-height: calc(100vh - 160px);
15 |     @apply w-full flex flex-col overflow-hidden relative
16 |     lg:mx-auto lg:w-2/5;
17 | }
18 | 
19 | .modal-card-body {
20 |     @apply bg-white flex-grow flex-shrink overflow-auto p-6 space-y-2;
21 | }
22 | 
23 | .modal-card-head,
24 | .modal-card-foot {
25 |     @apply flex items-center flex-shrink-0 justify-start px-6 py-4 relative bg-gray-100 border-gray-200;
26 | }
27 | 
28 | .modal-card-head {
29 |     @apply border-b rounded-t;
30 | }
31 | 
32 | .modal-card-foot {
33 |     @apply border-t rounded-b;
34 | }
35 | 
36 | .modal-card-foot .button:not(:last-child) {
37 |     @apply mr-2;
38 | }
39 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
 1 | import { type EntryContext } from "@remix-run/cloudflare";
 2 | import { RemixServer } from "@remix-run/react";
 3 | import isbot from "isbot";
 4 | import { renderToReadableStream } from "react-dom/server";
 5 | 
 6 | export default async function handleRequest(
 7 |   request: Request,
 8 |   responseStatusCode: number,
 9 |   responseHeaders: Headers,
10 |   remixContext: EntryContext
11 | ) {
12 |   const body = await renderToReadableStream(
13 |     <RemixServer context={remixContext} url={request.url} />,
14 |     {
15 |       onError(error) {
16 |         console.error("renderToReadableStream error");
17 |         console.error(error);
18 |         responseStatusCode = 500;
19 |       },
20 |     }
21 |   );
22 | 
23 |   if (isbot(request.headers.get("user-agent"))) {
24 |     await body.allReady;
25 |   }
26 | 
27 |   responseHeaders.set("Content-Type", "text/html");
28 |   return new Response(body, {
29 |     headers: responseHeaders,
30 |     status: responseStatusCode,
31 |   });
32 | }
33 | 


--------------------------------------------------------------------------------
/functions/[[remix]].ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createRequestHandler,
 3 |   createCookieSessionStorage,
 4 | } from "@remix-run/cloudflare";
 5 | import { type AppLoadContext } from "@remix-run/server-runtime";
 6 | 
 7 | import * as build from "#build";
 8 | 
 9 | let remixHandler: ReturnType<typeof createRequestHandler>;
10 | 
11 | export const onRequest: PagesFunction<Env> = async (ctx) => {
12 |   if (!remixHandler) {
13 |     remixHandler = createRequestHandler(
14 |       build as any,
15 |       ctx.env.CF_PAGES ? "production" : "development"
16 |     );
17 |   }
18 | 
19 |   const sessionStorage = createCookieSessionStorage({
20 |     cookie: {
21 |       httpOnly: true,
22 |       path: "/",
23 |       secure: Boolean(ctx.request.url.match(/^(http|ws)s:\/\//)),
24 |       secrets: [ctx.env.SESSION_SECRET],
25 |     },
26 |   });
27 | 
28 |   const session = await sessionStorage.getSession(
29 |     ctx.request.headers.get("Cookie")
30 |   );
31 | 
32 |   const loadContext: AppLoadContext = {
33 |     cf: ctx.request.cf,
34 |     DB: ctx.env.DB,
35 |     session,
36 |   };
37 | 
38 |   const response = await remixHandler(ctx.request, loadContext);
39 |   response.headers.set(
40 |     "Set-Cookie",
41 |     await sessionStorage.commitSession(session)
42 |   );
43 | 
44 |   return response;
45 | };
46 | 


--------------------------------------------------------------------------------
/css/aside.scss:
--------------------------------------------------------------------------------
 1 | .aside {
 2 |     @apply w-60 -left-60 fixed top-0 z-40 h-screen bg-gray-800 transition-all lg:left-0;
 3 | }
 4 | 
 5 | .aside-tools {
 6 |     @apply flex flex-row w-full bg-gray-900 text-white flex-1 px-3 h-14 items-center;
 7 | }
 8 | 
 9 | .aside-mobile-expanded .aside {
10 |     @apply left-0;
11 | }
12 | 
13 | .aside-mobile-expanded .navbar {
14 |     @apply ml-60;
15 | }
16 | 
17 | .aside-mobile-expanded #app {
18 |     @apply ml-60;
19 | }
20 | 
21 | .aside-mobile-expanded,
22 | .aside-mobile-expanded body {
23 |     @apply overflow-hidden lg:overflow-visible;
24 | }
25 | 
26 | .menu-label {
27 |     @apply p-3 text-xs uppercase text-gray-400;
28 | }
29 | 
30 | .menu-clock {
31 |     @apply p-3 text-xs uppercase text-white;
32 | }
33 | 
34 | .menu-list li a {
35 |     @apply py-2 flex text-gray-300;
36 | }
37 | 
38 | .menu-list li > a {
39 |     @apply hover:bg-gray-700;
40 | }
41 | 
42 | .menu-list li a .menu-item-label {
43 |     @apply flex-grow;
44 | }
45 | 
46 | .menu-list li a .icon {
47 |     @apply w-12 flex-none;
48 | }
49 | 
50 | .menu-list li > a.active {
51 |     @apply bg-gray-700;
52 | }
53 | 
54 | .menu-list li.active > a {
55 |     @apply bg-gray-700;
56 | }
57 | 
58 | .menu-list li ul a {
59 |     @apply p-3 text-sm;
60 | }
61 | 
62 | .menu-list li.active ul {
63 |     @apply block bg-gray-600;
64 | }
65 | 
66 | 


--------------------------------------------------------------------------------
/css/table.scss:
--------------------------------------------------------------------------------
 1 | table {
 2 |     @apply w-full;
 3 | }
 4 | 
 5 | thead {
 6 |     @apply hidden lg:table-header-group;
 7 | }
 8 | 
 9 | tr {
10 |     @apply max-w-full block relative border-b-4 border-gray-100
11 |     lg:table-row lg:border-b-0;
12 | }
13 | 
14 | tr:last-child {
15 |     @apply border-b-0;
16 | }
17 | 
18 | th {
19 |     @apply lg:text-left lg:py-2 lg:px-3;
20 | }
21 | 
22 | td {
23 |     @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
24 |     lg:table-cell lg:text-left lg:py-2 lg:px-3 lg:align-middle lg:border-b-0;
25 | }
26 | 
27 | tr:nth-child(odd) td {
28 |     @apply lg:bg-gray-50;
29 | }
30 | 
31 | td:last-child {
32 |     @apply border-b-0;
33 | }
34 | 
35 | tbody tr:hover td {
36 |     @apply lg:bg-gray-100;
37 | }
38 | 
39 | td:before {
40 |     content: attr(data-label);
41 |     @apply font-semibold pr-3 text-left lg:hidden;
42 | }
43 | 
44 | td.checkbox-cell,
45 | th.checkbox-cell {
46 |     @apply lg:w-5;
47 | }
48 | 
49 | td.progress-cell progress {
50 |     @apply flex w-2/5 self-center
51 |     lg:w-full;
52 | }
53 | 
54 | td.image-cell {
55 |     @apply border-b-0 lg:w-6;
56 | }
57 | 
58 | td.image-cell:before,
59 | td.actions-cell:before {
60 |     @apply hidden;
61 | }
62 | 
63 | td.image-cell .image {
64 |     @apply w-24 h-24 mx-auto lg:w-6 lg:h-6;
65 | }
66 | 
67 | .table-pagination {
68 |     @apply px-6 py-3 border-t border-gray-100;
69 | }
70 | 
71 | 


--------------------------------------------------------------------------------
/app/routes/dash.tsx:
--------------------------------------------------------------------------------
 1 | import { json, type LoaderArgs } from "@remix-run/cloudflare";
 2 | import { useLoaderData } from "@remix-run/react";
 3 | 
 4 | export function loader({ context: { cf } }: LoaderArgs) {
 5 |   return json({
 6 |     colo: cf?.colo || "unknown",
 7 |     country: (cf && "country" in cf ? cf?.country : null) || "country",
 8 |   });
 9 | }
10 | 
11 | export default function Dashboard() {
12 |   const { colo, country } = useLoaderData<typeof loader>();
13 | 
14 |   return (
15 |     <div className="card-content">
16 |       <div className="grid grid-cols-2 gap-4">
17 |         <div>
18 |           <p className="text-xl">Worker</p>
19 |           <p className="text-gray-800 text-sm">Colo: {colo}</p>
20 |           <p className="text-gray-800 text-sm">Country: {country}</p>
21 |         </div>
22 |         {/* <div>
23 |           <p className="text-xl">SQL Metrics</p>
24 |           <p className="text-gray-800 text-sm">Query count: {stats.queries}</p>
25 |           <p className="text-gray-800 text-sm">
26 |             Results count: {stats.results}
27 |           </p>
28 |           <p className="text-gray-800 text-sm"># SELECT: {stats.select}</p>
29 |           <p className="text-gray-800 text-sm">
30 |             # SELECT WHERE: {stats.select_where}
31 |           </p>
32 |           <p className="text-gray-800 text-sm">
33 |             # SELECT LEFT JOIN: {stats.select_leftjoin}
34 |           </p>
35 |         </div> */}
36 |       </div>
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "sideEffects": false,
 4 |   "scripts": {
 5 |     "build": "npm run build:css && npm run build:remix",
 6 |     "build:css": "postcss ./css/admin.scss -o ./app/css/admin.css",
 7 |     "build:remix": "remix build",
 8 |     "dev": "npm run build:css && concurrently \"npm:dev:*\"",
 9 |     "dev:css": "postcss ./css/admin.scss -o ./app/css/admin.css --watch",
10 |     "dev:remix": "remix watch",
11 |     "dev:cloudflare": "wrangler pages dev public --compatibility-date=2023-01-18 --persist --d1 DB --binding SESSION_SECRET=s --env local --live-reload",
12 |     "typecheck": "tsc"
13 |   },
14 |   "dependencies": {
15 |     "@remix-run/cloudflare": "^1.11.0",
16 |     "@remix-run/react": "^1.11.0",
17 |     "@remix-run/serve": "^1.11.0",
18 |     "isbot": "^3.6.5",
19 |     "react": "^18.2.0",
20 |     "react-dom": "^18.2.0"
21 |   },
22 |   "devDependencies": {
23 |     "@cloudflare/workers-types": "*",
24 |     "@remix-run/dev": "^1.11.0",
25 |     "@remix-run/eslint-config": "^1.11.0",
26 |     "@types/react": "^18.0.25",
27 |     "@types/react-dom": "^18.0.8",
28 |     "autoprefixer": "^10.4.13",
29 |     "better-sqlite3": "^8.0.1",
30 |     "concurrently": "^7.6.0",
31 |     "eslint": "^8.27.0",
32 |     "postcss": "^8.4.21",
33 |     "postcss-cli": "^10.1.0",
34 |     "postcss-import": "^15.1.0",
35 |     "postcss-nested": "^6.0.0",
36 |     "tailwindcss": "^3.2.4",
37 |     "typescript": "^4.8.4",
38 |     "wrangler": "^2.8.0"
39 |   },
40 |   "engines": {
41 |     "node": ">=14"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/css/admin.scss:
--------------------------------------------------------------------------------
 1 | @import "aside.scss";
 2 | @import "button.scss";
 3 | @import "card.scss";
 4 | @import "forms.scss";
 5 | @import "icon.scss";
 6 | @import "modal.scss";
 7 | @import "navbar.scss";
 8 | @import "notification.scss";
 9 | @import "path.scss";
10 | @import "progress.scss";
11 | @import "table.scss";
12 | 
13 | @tailwind base;
14 | @tailwind components;
15 | @tailwind utilities;
16 | 
17 | body {
18 |   @apply bg-gray-50 text-base pt-14 lg:pl-60;
19 | }
20 | 
21 | #app {
22 |   @apply w-screen transition-all lg:w-auto;
23 | }
24 | 
25 | .video {
26 |   position: relative;
27 |   padding-top: 56.25%;
28 | }
29 | 
30 | .console {
31 |   height: 600px;
32 | }
33 | 
34 | .link {
35 |   @apply text-blue-600;
36 | }
37 | 
38 | .main-section {
39 |   @apply p-6;
40 | 
41 |   animation: fadeIn ease 0.5s;
42 |   opacity: 1;
43 | }
44 | 
45 | .dropdown {
46 |   @apply cursor-pointer;
47 | }
48 | 
49 | .clipped,
50 | .clipped body {
51 |   @apply overflow-hidden;
52 | }
53 | 
54 | .m-clipped,
55 | .m-clipped body {
56 |   @apply overflow-hidden lg:overflow-visible;
57 | }
58 | 
59 | .form-screen body {
60 |   @apply p-0;
61 | }
62 | 
63 | .form-screen .main-section {
64 |   @apply flex h-screen items-center justify-center;
65 | }
66 | 
67 | .fade-out {
68 |   animation: fadeOut ease 0.5s;
69 |   opacity: 0;
70 | }
71 | @keyframes fadeOut {
72 |   0% {
73 |     opacity: 1;
74 |   }
75 |   100% {
76 |     opacity: 0;
77 |   }
78 | }
79 | 
80 | @keyframes fadeIn {
81 |   0% {
82 |     opacity: 0;
83 |   }
84 |   100% {
85 |     opacity: 1;
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/css/button.scss:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   @apply inline-flex bg-white text-black border-gray-50 border cursor-pointer justify-center px-4 py-2 text-center
 3 |     whitespace-nowrap rounded
 4 |     hover:border-gray-500
 5 |     focus:outline-none;
 6 | }
 7 | 
 8 | .button.addon-right {
 9 |   @apply rounded-r-none;
10 | }
11 | 
12 | .button.addon-left {
13 |   @apply rounded-l-none;
14 | }
15 | 
16 | .button.small {
17 |   @apply text-xs p-1;
18 | }
19 | 
20 | .button.small.textual {
21 |   @apply px-3;
22 | }
23 | 
24 | .button.active {
25 |   @apply border-gray-300 hover:border-gray-500;
26 | }
27 | 
28 | .button.green {
29 |   @apply bg-green-500 border-green-500 text-white hover:bg-green-600;
30 | }
31 | 
32 | .button.indigo {
33 |   @apply bg-indigo-500 border-indigo-500 text-white hover:bg-indigo-600;
34 | }
35 | 
36 | .button.red {
37 |   @apply bg-red-500 border-red-500 text-white hover:bg-red-600;
38 | }
39 | 
40 | .button.pink {
41 |   @apply bg-pink-500 border-pink-500 text-white hover:bg-pink-600;
42 | }
43 | 
44 | .button.yellow {
45 |   @apply bg-yellow-500 border-yellow-500 text-black hover:bg-yellow-600;
46 | }
47 | 
48 | .button.blue {
49 |   @apply bg-blue-500 border-blue-500 text-white hover:bg-blue-600;
50 | }
51 | 
52 | .button.light {
53 |   @apply bg-gray-100 border-gray-100 hover:bg-gray-200;
54 | }
55 | 
56 | .buttons {
57 |   @apply flex items-center flex-wrap justify-start;
58 | }
59 | 
60 | .buttons.nowrap {
61 |   @apply flex-nowrap;
62 | }
63 | 
64 | .buttons.right {
65 |   @apply justify-end;
66 | }
67 | 
68 | .buttons .button {
69 |   @apply mx-1;
70 | }
71 | 


--------------------------------------------------------------------------------
/app/routes/_index.tsx:
--------------------------------------------------------------------------------
 1 | export default function Index() {
 2 |   return (
 3 |     <>
 4 |       <div className="card-content">
 5 |         <p className="text-2xl">Welcome to Northwind Traders</p>
 6 |         <div className="pt-2">
 7 |           <p className="text-gray-400 text-lg">Running on Cloudflare's D1</p>
 8 |         </div>
 9 |         <img
10 |           alt=""
11 |           className="float-right object-scale-down w-96"
12 |           src="https://imagedelivery.net/4wj01aQOZZ0hemsvbxWAvA/763bcbcd-da6d-46ec-f5e1-70c1c1a33d00/public"
13 |         />
14 |         <p className="text-base pt-4">
15 |           This is a demo of the Northwind dataset, running on{" "}
16 |           <a
17 |             className="link"
18 |             href="https://workers.cloudflare.com/"
19 |             target="_new"
20 |           >
21 |             Cloudflare Workers
22 |           </a>
23 |           , and D1 - Cloudflare's newest SQL database, running on SQLite.
24 |         </p>
25 |         <p className="text-base pt-4">
26 |           Read our{" "}
27 |           <a
28 |             className="link"
29 |             href="https://blog.cloudflare.com/introducing-d1"
30 |             target="_new"
31 |           >
32 |             D1 announcement
33 |           </a>{" "}
34 |           to learn more about D1.
35 |         </p>
36 |         <p className="text-base pt-4">
37 |           This dataset was sourced from{" "}
38 |           <a
39 |             className="link"
40 |             href="https://github.com/jpwhite3/northwind-SQLite3"
41 |             target="_new"
42 |           >
43 |             northwind-SQLite3
44 |           </a>
45 |           .
46 |         </p>
47 |         <p className="text-base pt-4">
48 |           You can use the UI to explore Supplies, Orders, Customers, Employees
49 |           and Products, or you can use search if you know what you're looking
50 |           for.
51 |         </p>
52 | 
53 |         {/*
54 |                 <Iframe iframe={`<iframe src="https://iframe.videodelivery.net/6edaeeba976aca2e7dae8a21aa2e60ef" style="border: none; position: absolute; top: 0; height: 100%; width: 100%" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true" />`} />
55 |                 */}
56 |       </div>
57 |     </>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/css/navbar.scss:
--------------------------------------------------------------------------------
  1 | @layer components {
  2 |   .navbar, .navbar-menu, .navbar-start, .navbar-end {
  3 |     @apply lg:flex lg:items-stretch;
  4 |   }
  5 | 
  6 |   .navbar {
  7 |     @apply top-0 left-0 right-0 fixed flex bg-white h-14 border-b border-gray-100 z-30 w-screen transition-all
  8 |     lg:pl-60 lg:w-auto;
  9 |   }
 10 | 
 11 |   .navbar-brand {
 12 |     @apply flex-1 items-stretch flex h-14;
 13 |   }
 14 | 
 15 |   .navbar-brand.is-right {
 16 |     @apply flex-none lg:hidden;
 17 |   }
 18 | 
 19 |   .navbar-brand .navbar-item {
 20 |     @apply items-center flex;
 21 |   }
 22 | 
 23 |   .navbar-item, .navbar-link {
 24 |     @apply block py-2 px-3;
 25 |   }
 26 | 
 27 |   .navbar-item {
 28 |     @apply flex-grow-0 flex-shrink-0 relative lg:flex lg:items-center;
 29 |   }
 30 | 
 31 |   .navbar-item.mobile-aside-button {
 32 |     @apply lg:hidden;
 33 |   }
 34 | 
 35 |   .navbar-item.has-divider {
 36 |     @apply lg:border-r lg:border-gray-100;
 37 |   }
 38 | 
 39 |   .navbar-item > .navbar-link {
 40 |     @apply flex items-center bg-gray-100 lg:bg-transparent;
 41 |   }
 42 | 
 43 |   .navbar-item .icon + span {
 44 |     @apply ml-2;
 45 |   }
 46 | 
 47 |   .navbar-item.has-user-avatar > .navbar-link {
 48 |     @apply flex items-center;
 49 |   }
 50 | 
 51 |   .navbar-item.has-user-avatar .user-avatar {
 52 |     @apply w-6 h-6 mr-3 inline-flex;
 53 |   }
 54 | 
 55 |   .navbar-item.dropdown {
 56 |     @apply p-0 lg:py-2 lg:px-3;
 57 |   }
 58 | 
 59 |   .navbar-item.dropdown > .navbar-link .icon:last-child {
 60 |     @apply hidden lg:inline-flex;
 61 |   }
 62 | 
 63 |   .navbar-item.desktop-icon-only {
 64 |     @apply lg:w-16 lg:justify-center;
 65 |   }
 66 | 
 67 |   .navbar-item.desktop-icon-only span:last-child {
 68 |     @apply lg:hidden;
 69 |   }
 70 | 
 71 |   .navbar-item .input {
 72 |     @apply border-0;
 73 |   }
 74 | 
 75 |   .navbar-menu {
 76 |     max-height: calc(100vh - 3.5rem);
 77 |     @apply hidden absolute w-screen top-14 left-0 bg-white border-b border-gray-100 overflow-auto shadow
 78 |     lg:flex lg:flex-grow lg:static lg:border-b-0 lg:overflow-visible lg:shadow-none;
 79 |   }
 80 | 
 81 |   .navbar-menu.active {
 82 |     @apply block;
 83 |   }
 84 | 
 85 |   .navbar-end {
 86 |     @apply lg:justify-end lg:ml-auto;
 87 |   }
 88 | 
 89 |   .navbar-item .navbar-dropdown {
 90 |     @apply text-sm lg:border-gray-200 lg:border-t-2
 91 |     lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:shadow-md lg:rounded-b;
 92 |   }
 93 | 
 94 |   .navbar-item:not(.active) .navbar-dropdown {
 95 |     @apply lg:hidden;
 96 |   }
 97 | 
 98 |   .navbar-item.active:not(.dropdown), .navbar-item.active.dropdown > .navbar-link {
 99 |     @apply text-blue-500;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/app/routes/customer.$id.tsx:
--------------------------------------------------------------------------------
  1 | import { type LoaderArgs } from "@remix-run/cloudflare";
  2 | import { Await, Link, useLoaderData } from "@remix-run/react";
  3 | import { Suspense } from "react";
  4 | 
  5 | import { AddTableField } from "~/components/tools";
  6 | import { maybeDefer } from "~/utils";
  7 | 
  8 | export function loader({ context, params }: LoaderArgs) {
  9 |   const customerPromise = context.DB.prepare(
 10 |     `
 11 |     SELECT Id, CompanyName, ContactName, ContactTitle, Address, City, Region, PostalCode, Country, Phone, Fax
 12 |     FROM Customer
 13 |     WHERE Id = ?1
 14 |   `
 15 |   )
 16 |     .bind(params.id)
 17 |     .first<{
 18 |       Id: string;
 19 |       CompanyName: string;
 20 |       ContactName: string;
 21 |       ContactTitle: string;
 22 |       Address: string;
 23 |       City: string;
 24 |       Region: string;
 25 |       PostalCode: string;
 26 |       Country: string;
 27 |       Phone: string;
 28 |       Fax: string;
 29 |     }>()
 30 |     .then((r) => r || null);
 31 | 
 32 |   return maybeDefer(context.session, {
 33 |     customerPromise,
 34 |   });
 35 | }
 36 | 
 37 | export default function Customer() {
 38 |   const { customerPromise } = useLoaderData<typeof loader>();
 39 | 
 40 |   return (
 41 |     <Suspense
 42 |       fallback={
 43 |         <div className="card-content">
 44 |           <h2>Loading customer...</h2>
 45 |         </div>
 46 |       }
 47 |     >
 48 |       <Await
 49 |         resolve={customerPromise}
 50 |         children={(customer) =>
 51 |           !customer ? (
 52 |             <div className="card-content">
 53 |               <h2>Customer not found</h2>
 54 |             </div>
 55 |           ) : (
 56 |             <div className="card mb-6">
 57 |               <header className="card-header">
 58 |                 <p className="card-header-title">
 59 |                   <span className="icon material-icons">ballot</span>
 60 |                   <span className="ml-2">Customer information</span>
 61 |                 </p>
 62 |               </header>
 63 |               <div className="card-content">
 64 |                 <div className="grid grid-cols-2 gap-4">
 65 |                   <div>
 66 |                     <AddTableField
 67 |                       name="Company Name"
 68 |                       value={customer.CompanyName}
 69 |                     />
 70 |                     <AddTableField
 71 |                       name="Contact Name"
 72 |                       value={customer.ContactName}
 73 |                     />
 74 |                     <AddTableField
 75 |                       name="Contact Title"
 76 |                       value={customer.ContactTitle}
 77 |                     />
 78 |                     <AddTableField name="Address" value={customer.Address} />
 79 |                     <AddTableField name="City" value={customer.City} />
 80 |                   </div>
 81 |                   <div>
 82 |                     <AddTableField
 83 |                       name="Postal Code"
 84 |                       value={customer.PostalCode}
 85 |                     />
 86 |                     <AddTableField name="Region" value={customer.Region} />
 87 |                     <AddTableField name="Country" value={customer.Country} />
 88 |                     <AddTableField name="Phone" value={customer.Phone} />
 89 |                     <AddTableField name="Fax" value={customer.Fax} />
 90 |                   </div>
 91 |                 </div>
 92 | 
 93 |                 <hr />
 94 | 
 95 |                 <div className="field grouped">
 96 |                   <div className="control">
 97 |                     <Link to="/customers" className="button red">
 98 |                       Go back
 99 |                     </Link>
100 |                   </div>
101 |                 </div>
102 |               </div>
103 |             </div>
104 |           )
105 |         }
106 |       />
107 |     </Suspense>
108 |   );
109 | }
110 | 


--------------------------------------------------------------------------------
/app/routes/products.tsx:
--------------------------------------------------------------------------------
  1 | import { Suspense } from "react";
  2 | import { type LoaderArgs } from "@remix-run/cloudflare";
  3 | import { Await, Link, useLoaderData, useRevalidator } from "@remix-run/react";
  4 | 
  5 | import { maybeDefer } from "~/utils";
  6 | 
  7 | export function loader({ context }: LoaderArgs) {
  8 |   const productsPromise = context.DB.prepare(
  9 |     `
 10 |     SELECT Id, ProductName, SupplierId, CategoryId, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued
 11 |     FROM Product
 12 |     LIMIT ?1
 13 |     OFFSET ?2
 14 |   `
 15 |   )
 16 |     .bind(20, 0)
 17 |     .all<{
 18 |       Id: number;
 19 |       ProductName: string;
 20 |       SupplierId: string;
 21 |       CategoryId: string;
 22 |       QuantityPerUnit: string;
 23 |       UnitPrice: string;
 24 |       UnitsInStock: string;
 25 |       UnitsOnOrder: string;
 26 |       ReorderLevel: string;
 27 |       Discontinued: string;
 28 |     }>()
 29 |     .then((res) => res.results);
 30 | 
 31 |   return maybeDefer(context.session, {
 32 |     productsPromise,
 33 |   });
 34 | }
 35 | 
 36 | export default function Products() {
 37 |   const { productsPromise } = useLoaderData<typeof loader>();
 38 |   const revalidator = useRevalidator();
 39 | 
 40 |   return (
 41 |     <Suspense
 42 |       fallback={
 43 |         <div className="card-content">
 44 |           <h2>Loading products...</h2>
 45 |         </div>
 46 |       }
 47 |     >
 48 |       <Await
 49 |         resolve={productsPromise}
 50 |         children={(products) =>
 51 |           products.length === 0 ? (
 52 |             <div className="card-content">
 53 |               <h2>No products...</h2>
 54 |             </div>
 55 |           ) : (
 56 |             <div className="card has-table">
 57 |               <header className="card-header">
 58 |                 <p className="card-header-title">Products</p>
 59 |                 <button
 60 |                   className="card-header-icon"
 61 |                   onClick={() => {
 62 |                     revalidator.revalidate();
 63 |                   }}
 64 |                 >
 65 |                   <span className="material-icons">redo</span>
 66 |                 </button>
 67 |               </header>
 68 |               <div className="card-content">
 69 |                 <table>
 70 |                   <thead>
 71 |                     <tr>
 72 |                       <th>Name</th>
 73 |                       <th>Qt per unit</th>
 74 |                       <th>Price</th>
 75 |                       <th>Stock</th>
 76 |                       <th>Orders</th>
 77 |                       <th></th>
 78 |                     </tr>
 79 |                   </thead>
 80 |                   <tbody>
 81 |                     {products.map((product, index) => {
 82 |                       return (
 83 |                         <tr key={product.Id}>
 84 |                           <td data-label="Product">
 85 |                             <Link
 86 |                               className="link"
 87 |                               to={`/product/${product.Id}`}
 88 |                             >
 89 |                               {product.ProductName}
 90 |                             </Link>
 91 |                           </td>
 92 |                           <td data-label="Qpu">{product.QuantityPerUnit}</td>
 93 |                           <td data-label="Price">${product.UnitPrice}</td>
 94 |                           <td data-label="Stock">{product.UnitsInStock}</td>
 95 |                           <td data-label="Orders">{product.UnitsOnOrder}</td>
 96 |                         </tr>
 97 |                       );
 98 |                     })}
 99 |                   </tbody>
100 |                 </table>
101 |                 {/* <Paginate pages={pages} page={page} setPage={setPage} /> */}
102 |               </div>
103 |             </div>
104 |           )
105 |         }
106 |       />
107 |     </Suspense>
108 |   );
109 | }
110 | 


--------------------------------------------------------------------------------
/db/schema.sql:
--------------------------------------------------------------------------------
 1 | PRAGMA foreign_keys=off;
 2 | DROP TABLE IF EXISTS "Employee";
 3 | DROP TABLE IF EXISTS "Category";
 4 | DROP TABLE IF EXISTS "Customer";
 5 | DROP TABLE IF EXISTS "Shipper";
 6 | DROP TABLE IF EXISTS "Supplier";
 7 | DROP TABLE IF EXISTS "Order";
 8 | DROP TABLE IF EXISTS "Product";
 9 | DROP TABLE IF EXISTS "OrderDetail";
10 | DROP TABLE IF EXISTS "CustomerCustomerDemo";
11 | DROP TABLE IF EXISTS "CustomerDemographic";
12 | DROP TABLE IF EXISTS "Region";
13 | DROP TABLE IF EXISTS "Territory";
14 | DROP TABLE IF EXISTS "EmployeeTerritory";
15 | DROP VIEW IF EXISTS [ProductDetails_V];
16 | CREATE TABLE IF NOT EXISTS "Employee" ( "Id" INTEGER PRIMARY KEY, "LastName" VARCHAR(8000) NULL, "FirstName" VARCHAR(8000) NULL, "Title" VARCHAR(8000) NULL, "TitleOfCourtesy" VARCHAR(8000) NULL, "BirthDate" VARCHAR(8000) NULL, "HireDate" VARCHAR(8000) NULL, "Address" VARCHAR(8000) NULL, "City" VARCHAR(8000) NULL, "Region" VARCHAR(8000) NULL, "PostalCode" VARCHAR(8000) NULL, "Country" VARCHAR(8000) NULL, "HomePhone" VARCHAR(8000) NULL, "Extension" VARCHAR(8000) NULL, "Photo" BLOB NULL, "Notes" VARCHAR(8000) NULL, "ReportsTo" INTEGER NULL, "PhotoPath" VARCHAR(8000) NULL);
17 | CREATE TABLE IF NOT EXISTS "Category" ( "Id" INTEGER PRIMARY KEY, "CategoryName" VARCHAR(8000) NULL, "Description" VARCHAR(8000) NULL);
18 | CREATE TABLE IF NOT EXISTS "Customer" ( "Id" VARCHAR(8000) PRIMARY KEY, "CompanyName" VARCHAR(8000) NULL, "ContactName" VARCHAR(8000) NULL, "ContactTitle" VARCHAR(8000) NULL, "Address" VARCHAR(8000) NULL, "City" VARCHAR(8000) NULL, "Region" VARCHAR(8000) NULL, "PostalCode" VARCHAR(8000) NULL, "Country" VARCHAR(8000) NULL, "Phone" VARCHAR(8000) NULL, "Fax" VARCHAR(8000) NULL);
19 | CREATE TABLE IF NOT EXISTS "Shipper" ( "Id" INTEGER PRIMARY KEY, "CompanyName" VARCHAR(8000) NULL, "Phone" VARCHAR(8000) NULL);
20 | CREATE TABLE IF NOT EXISTS "Supplier" ( "Id" INTEGER PRIMARY KEY, "CompanyName" VARCHAR(8000) NULL, "ContactName" VARCHAR(8000) NULL, "ContactTitle" VARCHAR(8000) NULL, "Address" VARCHAR(8000) NULL, "City" VARCHAR(8000) NULL, "Region" VARCHAR(8000) NULL, "PostalCode" VARCHAR(8000) NULL, "Country" VARCHAR(8000) NULL, "Phone" VARCHAR(8000) NULL, "Fax" VARCHAR(8000) NULL, "HomePage" VARCHAR(8000) NULL);
21 | CREATE TABLE IF NOT EXISTS "Order" ( "Id" INTEGER PRIMARY KEY, "CustomerId" VARCHAR(8000) NULL, "EmployeeId" INTEGER NOT NULL, "OrderDate" VARCHAR(8000) NULL, "RequiredDate" VARCHAR(8000) NULL, "ShippedDate" VARCHAR(8000) NULL, "ShipVia" INTEGER NULL, "Freight" DECIMAL NOT NULL, "ShipName" VARCHAR(8000) NULL, "ShipAddress" VARCHAR(8000) NULL, "ShipCity" VARCHAR(8000) NULL, "ShipRegion" VARCHAR(8000) NULL, "ShipPostalCode" VARCHAR(8000) NULL, "ShipCountry" VARCHAR(8000) NULL);
22 | CREATE TABLE IF NOT EXISTS "Product" ( "Id" INTEGER PRIMARY KEY, "ProductName" VARCHAR(8000) NULL, "SupplierId" INTEGER NOT NULL, "CategoryId" INTEGER NOT NULL, "QuantityPerUnit" VARCHAR(8000) NULL, "UnitPrice" DECIMAL NOT NULL, "UnitsInStock" INTEGER NOT NULL, "UnitsOnOrder" INTEGER NOT NULL, "ReorderLevel" INTEGER NOT NULL, "Discontinued" INTEGER NOT NULL);
23 | CREATE TABLE IF NOT EXISTS "OrderDetail" ( "Id" VARCHAR(8000) PRIMARY KEY, "OrderId" INTEGER NOT NULL, "ProductId" INTEGER NOT NULL, "UnitPrice" DECIMAL NOT NULL, "Quantity" INTEGER NOT NULL, "Discount" DOUBLE NOT NULL);
24 | CREATE TABLE IF NOT EXISTS "CustomerCustomerDemo" ( "Id" VARCHAR(8000) PRIMARY KEY, "CustomerTypeId" VARCHAR(8000) NULL);
25 | CREATE TABLE IF NOT EXISTS "CustomerDemographic" ( "Id" VARCHAR(8000) PRIMARY KEY, "CustomerDesc" VARCHAR(8000) NULL);
26 | CREATE TABLE IF NOT EXISTS "Region" ( "Id" INTEGER PRIMARY KEY, "RegionDescription" VARCHAR(8000) NULL);
27 | CREATE TABLE IF NOT EXISTS "Territory" ( "Id" VARCHAR(8000) PRIMARY KEY, "TerritoryDescription" VARCHAR(8000) NULL, "RegionId" INTEGER NOT NULL);
28 | CREATE TABLE IF NOT EXISTS "EmployeeTerritory" ( "Id" VARCHAR(8000) PRIMARY KEY, "EmployeeId" INTEGER NOT NULL, "TerritoryId" VARCHAR(8000) NULL);
29 | CREATE VIEW [ProductDetails_V] as select p.*, c.CategoryName, c.Description as [CategoryDescription], s.CompanyName as [SupplierName], s.Region as [SupplierRegion] from [Product] p join [Category] c on p.CategoryId = c.id join [Supplier] s on s.id = p.SupplierId;
30 | 


--------------------------------------------------------------------------------
/app/routes/product.$id.tsx:
--------------------------------------------------------------------------------
  1 | import { type LoaderArgs } from "@remix-run/cloudflare";
  2 | import { Await, Link, useLoaderData } from "@remix-run/react";
  3 | import { Suspense } from "react";
  4 | 
  5 | import { AddTableField } from "~/components/tools";
  6 | import { maybeDefer } from "~/utils";
  7 | 
  8 | export function loader({ context, params }: LoaderArgs) {
  9 |   const productPromise = context.DB.prepare(
 10 |     `
 11 |     SELECT Product.Id, ProductName, SupplierId, CategoryId, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued, Supplier.CompanyName AS SupplierName
 12 |     FROM Product, Supplier
 13 |     WHERE Product.Id = ?1 AND Supplier.Id=Product.SupplierId
 14 |   `
 15 |   )
 16 |     .bind(params.id)
 17 |     .first<{
 18 |       Id: number;
 19 |       ProductName: string;
 20 |       SupplierId: string;
 21 |       CategoryId: string;
 22 |       QuantityPerUnit: string;
 23 |       UnitPrice: string;
 24 |       UnitsInStock: string;
 25 |       UnitsOnOrder: string;
 26 |       ReorderLevel: string;
 27 |       Discontinued: string;
 28 |       SupplierName: string;
 29 |     }>()
 30 |     .then((r) => r || null);
 31 | 
 32 |   return maybeDefer(context.session, {
 33 |     productPromise,
 34 |   });
 35 | }
 36 | 
 37 | export default function Product() {
 38 |   const { productPromise } = useLoaderData<typeof loader>();
 39 | 
 40 |   return (
 41 |     <Suspense
 42 |       fallback={
 43 |         <div className="card-content">
 44 |           <h2>Loading product...</h2>
 45 |         </div>
 46 |       }
 47 |     >
 48 |       <Await
 49 |         resolve={productPromise}
 50 |         children={(product) =>
 51 |           !product ? (
 52 |             <div className="card-content">
 53 |               <h2>Product not found</h2>
 54 |             </div>
 55 |           ) : (
 56 |             <div className="card mb-6">
 57 |               <header className="card-header">
 58 |                 <p className="card-header-title">
 59 |                   <span className="icon material-icons">ballot</span>
 60 |                   <span className="ml-2">Product information</span>
 61 |                 </p>
 62 |               </header>
 63 | 
 64 |               <div className="card-content">
 65 |                 <div className="grid grid-cols-2 gap-4">
 66 |                   <div>
 67 |                     <AddTableField
 68 |                       name="Product Name"
 69 |                       value={product.ProductName}
 70 |                     />
 71 |                     <AddTableField
 72 |                       name="Supplier"
 73 |                       link={`/supplier/${product.SupplierId}`}
 74 |                       value={product.SupplierName}
 75 |                     />
 76 |                     <AddTableField
 77 |                       name="Quantity Per Unit"
 78 |                       value={product.QuantityPerUnit}
 79 |                     />
 80 |                     <AddTableField
 81 |                       name="Unit Price"
 82 |                       value={`$${product.UnitPrice}`}
 83 |                     />
 84 |                   </div>
 85 |                   <div>
 86 |                     <AddTableField
 87 |                       name="Units In Stock"
 88 |                       value={product.UnitsInStock}
 89 |                     />
 90 |                     <AddTableField
 91 |                       name="Units In Order"
 92 |                       value={product.UnitsOnOrder}
 93 |                     />
 94 |                     <AddTableField
 95 |                       name="Reorder Level"
 96 |                       value={product.ReorderLevel}
 97 |                     />
 98 |                     <AddTableField
 99 |                       name="Discontinued"
100 |                       value={product.Discontinued}
101 |                     />
102 |                   </div>
103 |                 </div>
104 | 
105 |                 <hr />
106 | 
107 |                 <div className="field grouped">
108 |                   <div className="control">
109 |                     <Link to="/products" className="button red">
110 |                       Go back
111 |                     </Link>
112 |                   </div>
113 |                 </div>
114 |               </div>
115 |             </div>
116 |           )
117 |         }
118 |       />
119 |     </Suspense>
120 |   );
121 | }
122 | 


--------------------------------------------------------------------------------
/app/routes/supplier.$id.tsx:
--------------------------------------------------------------------------------
  1 | import { type LoaderArgs } from "@remix-run/cloudflare";
  2 | import { Await, Link, useLoaderData } from "@remix-run/react";
  3 | import { Suspense } from "react";
  4 | 
  5 | import { AddTableField } from "~/components/tools";
  6 | import { maybeDefer } from "~/utils";
  7 | 
  8 | export function loader({ context, params }: LoaderArgs) {
  9 |   const supplierPromise = context.DB.prepare(
 10 |     `
 11 |     SELECT Id, CompanyName, ContactName, ContactTitle, Address, City, Region, PostalCode, Country, Phone, Fax, HomePage
 12 |     FROM Supplier
 13 |     WHERE Id = ?1
 14 |   `
 15 |   )
 16 |     .bind(params.id)
 17 |     .first<{
 18 |       Id: number;
 19 |       ContactName: string;
 20 |       CompanyName: string;
 21 |       ContactTitle: string;
 22 |       City: string;
 23 |       Country: string;
 24 |       Address: string;
 25 |       Region: string;
 26 |       PostalCode: string;
 27 |       Phone: string;
 28 |       Fax?: string;
 29 |       HomePage?: string;
 30 |     }>()
 31 |     .then((r) => r || null);
 32 | 
 33 |   return maybeDefer(context.session, {
 34 |     supplierPromise,
 35 |   });
 36 | }
 37 | 
 38 | export default function Supplier() {
 39 |   const { supplierPromise } = useLoaderData<typeof loader>();
 40 | 
 41 |   return (
 42 |     <Suspense
 43 |       fallback={
 44 |         <div className="card-content">
 45 |           <h2>Loading supplier...</h2>
 46 |         </div>
 47 |       }
 48 |     >
 49 |       <Await
 50 |         resolve={supplierPromise}
 51 |         children={(supplier) =>
 52 |           !supplier ? (
 53 |             <div className="card-content">
 54 |               <h2>Supplier not found</h2>
 55 |             </div>
 56 |           ) : (
 57 |             <div className="card mb-6">
 58 |               <header className="card-header">
 59 |                 <p className="card-header-title">
 60 |                   <span className="icon material-icons">ballot</span>
 61 |                   <span className="ml-2">Supplier information</span>
 62 |                 </p>
 63 |               </header>
 64 |               <div className="card-content">
 65 |                 <div className="grid grid-cols-2 gap-4">
 66 |                   <div>
 67 |                     <AddTableField
 68 |                       name="Company Name"
 69 |                       value={supplier.CompanyName}
 70 |                     />
 71 |                     <AddTableField
 72 |                       name="Contact Name"
 73 |                       value={supplier.ContactName}
 74 |                     />
 75 |                     <AddTableField
 76 |                       name="Contact Title"
 77 |                       value={supplier.ContactTitle}
 78 |                     />
 79 |                     <AddTableField name="Address" value={supplier.Address} />
 80 |                     <AddTableField name="City" value={supplier.City} />
 81 |                   </div>
 82 |                   <div>
 83 |                     <AddTableField name="Region" value={supplier.Region} />
 84 |                     <AddTableField
 85 |                       name="Postal Code"
 86 |                       value={supplier.PostalCode}
 87 |                     />
 88 |                     <AddTableField name="Country" value={supplier.Country} />
 89 |                     <AddTableField name="Phone" value={supplier.Phone} />
 90 |                     {supplier.Fax ? (
 91 |                       <AddTableField name="Fax" value={supplier.Fax} />
 92 |                     ) : (
 93 |                       false
 94 |                     )}
 95 |                     {supplier.HomePage ? (
 96 |                       <AddTableField
 97 |                         name="Home Page"
 98 |                         value={supplier.HomePage}
 99 |                       />
100 |                     ) : (
101 |                       false
102 |                     )}
103 |                   </div>
104 |                 </div>
105 | 
106 |                 <hr />
107 | 
108 |                 <div className="field grouped">
109 |                   <div className="control">
110 |                     <Link to="/suppliers" className="button red">
111 |                       Go back
112 |                     </Link>
113 |                   </div>
114 |                 </div>
115 |               </div>
116 |             </div>
117 |           )
118 |         }
119 |       />
120 |     </Suspense>
121 |   );
122 | }
123 | 


--------------------------------------------------------------------------------
/app/routes/suppliers.tsx:
--------------------------------------------------------------------------------
  1 | import { Suspense } from "react";
  2 | import { type LoaderArgs } from "@remix-run/cloudflare";
  3 | import { Await, Link, useLoaderData, useRevalidator } from "@remix-run/react";
  4 | 
  5 | import { maybeDefer } from "~/utils";
  6 | 
  7 | export async function loader({ context }: LoaderArgs) {
  8 |   const suppliersPromise = context.DB.prepare(
  9 |     `
 10 |     SELECT Id, CompanyName, ContactName, ContactTitle, Address, City, Region, PostalCode, Country, Phone, Fax, HomePage
 11 |     FROM Supplier
 12 |     LIMIT ?1
 13 |     OFFSET ?2
 14 |   `
 15 |   )
 16 |     .bind(20, 0)
 17 |     .all<{
 18 |       Id: number;
 19 |       ContactName: string;
 20 |       CompanyName: string;
 21 |       ContactTitle: string;
 22 |       City: string;
 23 |       Country: string;
 24 |     }>()
 25 |     .then((res) => res.results);
 26 | 
 27 |   return maybeDefer(context.session, {
 28 |     suppliersPromise: suppliersPromise,
 29 |   });
 30 | }
 31 | 
 32 | export default function Suppliers() {
 33 |   const { suppliersPromise } = useLoaderData<typeof loader>();
 34 |   const revalidator = useRevalidator();
 35 | 
 36 |   return (
 37 |     <Suspense
 38 |       fallback={
 39 |         <div className="card-content">
 40 |           <h2>Loading suppliers...</h2>
 41 |         </div>
 42 |       }
 43 |     >
 44 |       <Await
 45 |         resolve={suppliersPromise}
 46 |         children={(suppliers) =>
 47 |           suppliers.length === 0 ? (
 48 |             <div className="card-content">
 49 |               <h2>No suppliers...</h2>
 50 |             </div>
 51 |           ) : (
 52 |             <div className="card has-table">
 53 |               <header className="card-header">
 54 |                 <p className="card-header-title">Suppliers</p>
 55 |                 <button
 56 |                   className="card-header-icon"
 57 |                   onClick={() => {
 58 |                     revalidator.revalidate();
 59 |                   }}
 60 |                 >
 61 |                   <span className="material-icons">redo</span>
 62 |                 </button>
 63 |               </header>
 64 |               <div className="card-content">
 65 |                 <table>
 66 |                   <thead>
 67 |                     <tr>
 68 |                       <th></th>
 69 |                       <th>Company</th>
 70 |                       <th>Contact</th>
 71 |                       <th>Title</th>
 72 |                       <th>City</th>
 73 |                       <th>Country</th>
 74 |                       <th></th>
 75 |                     </tr>
 76 |                   </thead>
 77 |                   <tbody>
 78 |                     {suppliers.map((supplier) => {
 79 |                       return (
 80 |                         <tr key={supplier.Id}>
 81 |                           <td className="image-cell">
 82 |                             <div className="image">
 83 |                               <img
 84 |                                 alt=""
 85 |                                 src={`https://avatars.dicebear.com/v2/initials/${
 86 |                                   supplier.ContactName.split(" ")[0]
 87 |                                 }-${
 88 |                                   supplier.ContactName.split(" ").slice(-1)[0]
 89 |                                 }.svg`}
 90 |                                 className="rounded-full"
 91 |                               />
 92 |                             </div>
 93 |                           </td>
 94 |                           <td data-label="Company">
 95 |                             <Link
 96 |                               className="link"
 97 |                               to={`/supplier/${supplier.Id}`}
 98 |                             >
 99 |                               {supplier.CompanyName}
100 |                             </Link>
101 |                           </td>
102 |                           <td data-label="Contact">{supplier.ContactName}</td>
103 |                           <td data-label="Title">{supplier.ContactTitle}</td>
104 |                           <td data-label="Title">{supplier.City}</td>
105 |                           <td data-label="Title">{supplier.Country}</td>
106 |                         </tr>
107 |                       );
108 |                     })}
109 |                   </tbody>
110 |                 </table>
111 |                 {/* <Paginate pages={pages} page={page} setPage={setPage} /> */}
112 |               </div>
113 |             </div>
114 |           )
115 |         }
116 |       />
117 |     </Suspense>
118 |   );
119 | }
120 | 


--------------------------------------------------------------------------------
/app/routes/customers.tsx:
--------------------------------------------------------------------------------
  1 | import { Suspense } from "react";
  2 | import { type LoaderArgs } from "@remix-run/cloudflare";
  3 | import { Await, Link, useLoaderData, useRevalidator } from "@remix-run/react";
  4 | 
  5 | import { maybeDefer } from "~/utils";
  6 | 
  7 | export function loader({ context }: LoaderArgs) {
  8 |   const customersPromise = context.DB.prepare(
  9 |     `
 10 |     SELECT Id, CompanyName, ContactName, ContactTitle, Address, City, Region, PostalCode, Country, Phone, Fax
 11 |     FROM Customer
 12 |     LIMIT ?1
 13 |     OFFSET ?2
 14 |   `
 15 |   )
 16 |     .bind(20, 0)
 17 |     .all<{
 18 |       Id: string;
 19 |       CompanyName: string;
 20 |       ContactName: string;
 21 |       ContactTitle: string;
 22 |       Address: string;
 23 |       City: string;
 24 |       Region: string;
 25 |       PostalCode: string;
 26 |       Country: string;
 27 |       Phone: string;
 28 |       Fax: string;
 29 |     }>()
 30 |     .then((res) => res.results);
 31 | 
 32 |   return maybeDefer(context.session, {
 33 |     customersPromise,
 34 |   });
 35 | }
 36 | 
 37 | export default function Customers() {
 38 |   const { customersPromise } = useLoaderData<typeof loader>();
 39 |   const revalidator = useRevalidator();
 40 | 
 41 |   return (
 42 |     <Suspense
 43 |       fallback={
 44 |         <div className="card-content">
 45 |           <h2>Loading customers...</h2>
 46 |         </div>
 47 |       }
 48 |     >
 49 |       <Await
 50 |         resolve={customersPromise}
 51 |         children={(customers) =>
 52 |           customers.length === 0 ? (
 53 |             <div className="card-content">
 54 |               <h2>No customers...</h2>
 55 |             </div>
 56 |           ) : (
 57 |             <div className="card has-table">
 58 |               <header className="card-header">
 59 |                 <p className="card-header-title">Customers</p>
 60 |                 <button
 61 |                   className="card-header-icon"
 62 |                   onClick={() => {
 63 |                     revalidator.revalidate();
 64 |                   }}
 65 |                 >
 66 |                   <span className="material-icons">redo</span>
 67 |                 </button>
 68 |               </header>
 69 |               <div className="card-content">
 70 |                 <table>
 71 |                   <thead>
 72 |                     <tr>
 73 |                       <th></th>
 74 |                       <th>Company</th>
 75 |                       <th>Contact</th>
 76 |                       <th>Title</th>
 77 |                       <th>City</th>
 78 |                       <th>Country</th>
 79 |                       <th></th>
 80 |                     </tr>
 81 |                   </thead>
 82 |                   <tbody>
 83 |                     {customers.map((customer, index) => {
 84 |                       return (
 85 |                         <tr key={customer.Id}>
 86 |                           <td className="image-cell">
 87 |                             <div className="image">
 88 |                               <img
 89 |                                 alt=""
 90 |                                 src={`https://avatars.dicebear.com/v2/initials/${
 91 |                                   customer.ContactName.split(" ")[0]
 92 |                                 }-${
 93 |                                   customer.ContactName.split(" ").slice(-1)[0]
 94 |                                 }.svg`}
 95 |                                 className="rounded-full"
 96 |                               />
 97 |                             </div>
 98 |                           </td>
 99 |                           <td data-label="Company">
100 |                             <Link
101 |                               className="link"
102 |                               to={`/customer/${customer.Id}`}
103 |                             >
104 |                               {customer.CompanyName}
105 |                             </Link>
106 |                           </td>
107 |                           <td data-label="Contact">{customer.ContactName}</td>
108 |                           <td data-label="Title">{customer.ContactTitle}</td>
109 |                           <td data-label="City">{customer.City}</td>
110 |                           <td data-label="Country">{customer.Country}</td>
111 |                         </tr>
112 |                       );
113 |                     })}
114 |                   </tbody>
115 |                 </table>
116 |                 {/* <Paginate pages={pages} page={page} setPage={setPage} /> */}
117 |               </div>
118 |             </div>
119 |           )
120 |         }
121 |       />
122 |     </Suspense>
123 |   );
124 | }
125 | 


--------------------------------------------------------------------------------
/app/routes/employees.tsx:
--------------------------------------------------------------------------------
  1 | import { Suspense } from "react";
  2 | import { type LoaderArgs } from "@remix-run/cloudflare";
  3 | import { Await, Link, useLoaderData, useRevalidator } from "@remix-run/react";
  4 | 
  5 | import { maybeDefer } from "~/utils";
  6 | 
  7 | export function loader({ context }: LoaderArgs) {
  8 |   const employeesPromise = context.DB.prepare(
  9 |     `
 10 |     SELECT Id, LastName, FirstName, Title, TitleOfCourtesy, BirthDate, HireDate, Address, City, Region, PostalCode, Country, HomePhone, Extension, Photo, Notes, ReportsTo, PhotoPath
 11 |     FROM Employee
 12 |     LIMIT ?1
 13 |     OFFSET ?2
 14 |   `
 15 |   )
 16 |     .bind(20, 0)
 17 |     .all<{
 18 |       Id: number;
 19 |       LastName: string;
 20 |       FirstName: string;
 21 |       Title: string;
 22 |       TitleOfCourtesy: string;
 23 |       BirthDate: string;
 24 |       HireDate: string;
 25 |       Address: string;
 26 |       City: string;
 27 |       Region: string;
 28 |       PostalCode: string;
 29 |       Country: string;
 30 |       HomePhone: string;
 31 |       Extension: string;
 32 |       Photo: string;
 33 |       Notes: string;
 34 |       ReportsTo: string;
 35 |       PhotoPath: string;
 36 |     }>()
 37 |     .then((res) => res.results);
 38 | 
 39 |   return maybeDefer(context.session, {
 40 |     employeesPromise,
 41 |   });
 42 | }
 43 | 
 44 | export default function Employees() {
 45 |   const { employeesPromise } = useLoaderData<typeof loader>();
 46 |   const revalidator = useRevalidator();
 47 | 
 48 |   return (
 49 |     <Suspense
 50 |       fallback={
 51 |         <div className="card-content">
 52 |           <h2>Loading employees...</h2>
 53 |         </div>
 54 |       }
 55 |     >
 56 |       <Await
 57 |         resolve={employeesPromise}
 58 |         children={(employees) =>
 59 |           employees.length === 0 ? (
 60 |             <div className="card-content">
 61 |               <h2>No employees...</h2>
 62 |             </div>
 63 |           ) : (
 64 |             <div className="card has-table">
 65 |               <header className="card-header">
 66 |                 <p className="card-header-title">Employees</p>
 67 |                 <button
 68 |                   className="card-header-icon"
 69 |                   onClick={() => {
 70 |                     revalidator.revalidate();
 71 |                   }}
 72 |                 >
 73 |                   <span className="material-icons">redo</span>
 74 |                 </button>
 75 |               </header>
 76 |               <div className="card-content">
 77 |                 <table>
 78 |                   <thead>
 79 |                     <tr>
 80 |                       <th></th>
 81 |                       <th>Name</th>
 82 |                       <th>Title</th>
 83 |                       <th>City</th>
 84 |                       <th>Phone</th>
 85 |                       <th>Country</th>
 86 |                       <th></th>
 87 |                     </tr>
 88 |                   </thead>
 89 |                   <tbody>
 90 |                     {employees.map((employee) => {
 91 |                       return (
 92 |                         <tr key={employee.Id}>
 93 |                           <td className="image-cell">
 94 |                             <div className="image">
 95 |                               <img
 96 |                                 alt=""
 97 |                                 src={`https://avatars.dicebear.com/v2/initials/${employee.FirstName[0]}-${employee.LastName[0]}.svg`}
 98 |                                 className="rounded-full"
 99 |                               />
100 |                             </div>
101 |                           </td>
102 |                           <td data-label="Name">
103 |                             <Link
104 |                               className="link"
105 |                               to={`/employee/${employee.Id}`}
106 |                             >{`${employee.FirstName} ${employee.LastName}`}</Link>
107 |                           </td>
108 |                           <td data-label="Title">{employee.Title}</td>
109 |                           <td data-label="City">{employee.City}</td>
110 |                           <td data-label="Phone">{employee.HomePhone}</td>
111 |                           <td data-label="Country">{employee.Country}</td>
112 |                         </tr>
113 |                       );
114 |                     })}
115 |                   </tbody>
116 |                 </table>
117 |                 {/* <Paginate pages={pages} page={page} setPage={setPage} /> */}
118 |               </div>
119 |             </div>
120 |           )
121 |         }
122 |       />
123 |     </Suspense>
124 |   );
125 | }
126 | 


--------------------------------------------------------------------------------
/app/routes/orders.tsx:
--------------------------------------------------------------------------------
  1 | import { Suspense } from "react";
  2 | import { type LoaderArgs } from "@remix-run/cloudflare";
  3 | import { Await, Link, useLoaderData, useRevalidator } from "@remix-run/react";
  4 | 
  5 | import { maybeDefer } from "~/utils";
  6 | 
  7 | export function loader({ context }: LoaderArgs) {
  8 |   const ordersPromise = context.DB.prepare(
  9 |     `
 10 |     SELECT SUM(OrderDetail.UnitPrice * OrderDetail.Discount * OrderDetail.Quantity) AS TotalProductsDiscount, SUM(OrderDetail.UnitPrice * OrderDetail.Quantity) AS TotalProductsPrice, SUM(OrderDetail.Quantity) AS TotalProductsItems, COUNT(OrderDetail.OrderId) AS TotalProducts, "Order".Id, CustomerId, EmployeeId, OrderDate, RequiredDate, ShippedDate, ShipVia, Freight, ShipName, ShipAddress, ShipCity, ShipRegion, ShipPostalCode, ShipCountry, ProductId FROM "Order", OrderDetail
 11 |     WHERE OrderDetail.OrderId = "Order".Id
 12 |     GROUP BY "Order".Id
 13 |     LIMIT ?1
 14 |     OFFSET ?2
 15 |   `
 16 |   )
 17 |     .bind(20, 0)
 18 |     .all<{
 19 |       Id: number;
 20 |       TotalProductsDiscount: number;
 21 |       TotalProductsPrice: number;
 22 |       TotalProductsItems: number;
 23 |       TotalProducts: number;
 24 |       CustomerId: string;
 25 |       EmployeeId: string;
 26 |       OrderDate: string;
 27 |       RequiredDate: string;
 28 |       ShippedDate: string;
 29 |       ShipVia: string;
 30 |       Freight: string;
 31 |       ShipName: string;
 32 |       ShipAddress: string;
 33 |       ShipCity: string;
 34 |       ShipRegion: string;
 35 |       ShipPostalCode: string;
 36 |       ShipCountry: string;
 37 |       ProductId: number;
 38 |       OrderDetail: string;
 39 |     }>()
 40 |     .then((res) => res.results);
 41 | 
 42 |   return maybeDefer(context.session, {
 43 |     ordersPromise,
 44 |   });
 45 | }
 46 | 
 47 | export default function Orders() {
 48 |   const { ordersPromise } = useLoaderData<typeof loader>();
 49 |   const revalidator = useRevalidator();
 50 | 
 51 |   return (
 52 |     <Suspense
 53 |       fallback={
 54 |         <div className="card-content">
 55 |           <h2>Loading products...</h2>
 56 |         </div>
 57 |       }
 58 |     >
 59 |       <Await
 60 |         resolve={ordersPromise}
 61 |         children={(orders) =>
 62 |           orders.length === 0 ? (
 63 |             <div className="card-content">
 64 |               <h2>No orders...</h2>
 65 |             </div>
 66 |           ) : (
 67 |             <div className="card has-table">
 68 |               <header className="card-header">
 69 |                 <p className="card-header-title">Orders</p>
 70 |                 <button
 71 |                   className="card-header-icon"
 72 |                   onClick={() => {
 73 |                     revalidator.revalidate();
 74 |                   }}
 75 |                 >
 76 |                   <span className="material-icons">redo</span>
 77 |                 </button>
 78 |               </header>
 79 |               <div className="card-content">
 80 |                 <table>
 81 |                   <thead>
 82 |                     <tr>
 83 |                       <th>Id</th>
 84 |                       <th>Total Price</th>
 85 |                       <th>Products</th>
 86 |                       <th>Quantity</th>
 87 |                       <th>Shipped</th>
 88 |                       <th>Ship Name</th>
 89 |                       <th>City</th>
 90 |                       <th>Country</th>
 91 |                       <th></th>
 92 |                     </tr>
 93 |                   </thead>
 94 |                   <tbody>
 95 |                     {orders.map((order, index) => {
 96 |                       return (
 97 |                         <tr key={order.Id}>
 98 |                           <td data-label="Id">
 99 |                             <Link className="link" to={`/order/${order.Id}`}>
100 |                               {order.Id}
101 |                             </Link>
102 |                           </td>
103 |                           <td data-label="Price">{`$${order.TotalProductsPrice.toFixed(
104 |                             2
105 |                           )}`}</td>
106 |                           <td data-label="Products">{order.TotalProducts}</td>
107 |                           <td data-label="Quantity">
108 |                             {order.TotalProductsItems}
109 |                           </td>
110 |                           <td data-label="Date">{order.OrderDate}</td>
111 |                           <td data-label="Name">{order.ShipName}</td>
112 |                           <td data-label="City">{order.ShipCity}</td>
113 |                           <td data-label="Country">{order.ShipCountry}</td>
114 |                         </tr>
115 |                       );
116 |                     })}
117 |                   </tbody>
118 |                 </table>
119 |                 {/* <Paginate pages={pages} page={page} setPage={setPage} /> */}
120 |               </div>
121 |             </div>
122 |           )
123 |         }
124 |       />
125 |     </Suspense>
126 |   );
127 | }
128 | 


--------------------------------------------------------------------------------
/app/routes/employee.$id.tsx:
--------------------------------------------------------------------------------
  1 | import { type LoaderArgs } from "@remix-run/cloudflare";
  2 | import { Await, Link, useLoaderData } from "@remix-run/react";
  3 | import { Suspense } from "react";
  4 | 
  5 | import { AddTableField } from "~/components/tools";
  6 | import { maybeDefer } from "~/utils";
  7 | 
  8 | export function loader({ context, params }: LoaderArgs) {
  9 |   const employeePromise = context.DB.prepare(
 10 |     `
 11 |     SELECT Report.Id AS ReportId, Report.FirstName AS ReportFirstName, Report.LastName AS ReportLastName, Employee.Id, Employee.LastName, Employee.FirstName, Employee.Title, Employee.TitleOfCourtesy, Employee.BirthDate, Employee.HireDate, Employee.Address, Employee.City, Employee.Region, Employee.PostalCode, Employee.Country, Employee.HomePhone, Employee.Extension, Employee.Photo, Employee.Notes, Employee.ReportsTo, Employee.PhotoPath
 12 |     FROM Employee
 13 |     LEFT JOIN Employee AS Report ON Report.Id = Employee.ReportsTo
 14 |     WHERE Employee.Id = ?1
 15 |   `
 16 |   )
 17 |     .bind(params.id)
 18 |     .first<{
 19 |       Id: number;
 20 |       LastName: string;
 21 |       FirstName: string;
 22 |       Title: string;
 23 |       TitleOfCourtesy: string;
 24 |       BirthDate: string;
 25 |       HireDate: string;
 26 |       Address: string;
 27 |       City: string;
 28 |       Region: string;
 29 |       PostalCode: string;
 30 |       Country: string;
 31 |       HomePhone: string;
 32 |       Extension: string;
 33 |       Photo: string;
 34 |       Notes: string;
 35 |       ReportsTo: string;
 36 |       PhotoPath: string;
 37 |       ReportFirstName: string;
 38 |       ReportLastName: string;
 39 |     }>()
 40 |     .then((r) => r || null);
 41 | 
 42 |   return maybeDefer(context.session, {
 43 |     employeePromise,
 44 |   });
 45 | }
 46 | 
 47 | export default function Employee() {
 48 |   const { employeePromise } = useLoaderData<typeof loader>();
 49 | 
 50 |   return (
 51 |     <Suspense
 52 |       fallback={
 53 |         <div className="card-content">
 54 |           <h2>Loading employee...</h2>
 55 |         </div>
 56 |       }
 57 |     >
 58 |       <Await
 59 |         resolve={employeePromise}
 60 |         children={(employee) =>
 61 |           !employee ? (
 62 |             <div className="card-content">
 63 |               <h2>Employee not found</h2>
 64 |             </div>
 65 |           ) : (
 66 |             <div className="card mb-6">
 67 |               <header className="card-header">
 68 |                 <p className="card-header-title">
 69 |                   <span className="icon material-icons">ballot</span>
 70 |                   <span className="ml-2">Employee information</span>
 71 |                 </p>
 72 |               </header>
 73 |               <div className="card-content">
 74 |                 <div className="grid grid-cols-2 gap-4">
 75 |                   <div>
 76 |                     <AddTableField
 77 |                       name="Name"
 78 |                       value={`${employee.FirstName} ${employee.LastName}`}
 79 |                     />
 80 |                     <AddTableField name="Title" value={employee.Title} />
 81 |                     <AddTableField
 82 |                       name="Title Of Courtesy"
 83 |                       value={employee.TitleOfCourtesy}
 84 |                     />
 85 |                     <AddTableField
 86 |                       name="Birth Date"
 87 |                       value={employee.BirthDate}
 88 |                     />
 89 |                     <AddTableField name="Hire Date" value={employee.HireDate} />
 90 |                     <AddTableField name="Address" value={employee.Address} />
 91 |                     <AddTableField name="City" value={employee.City} />
 92 |                   </div>
 93 |                   <div>
 94 |                     <AddTableField
 95 |                       name="Postal Code"
 96 |                       value={employee.PostalCode}
 97 |                     />
 98 |                     <AddTableField name="Country" value={employee.Country} />
 99 |                     <AddTableField
100 |                       name="Home Phone"
101 |                       value={employee.HomePhone}
102 |                     />
103 |                     <AddTableField
104 |                       name="Extension"
105 |                       value={employee.Extension}
106 |                     />
107 |                     <AddTableField name="Notes" value={employee.Notes} />
108 |                     {employee.ReportsTo ? (
109 |                       <AddTableField
110 |                         name="Reports To"
111 |                         link={`/employee/${employee.ReportsTo}`}
112 |                         value={`${employee.ReportFirstName} ${employee.ReportLastName}`}
113 |                       />
114 |                     ) : (
115 |                       false
116 |                     )}
117 |                   </div>
118 |                 </div>
119 | 
120 |                 <hr />
121 | 
122 |                 <div className="field grouped">
123 |                   <div className="control">
124 |                     <Link to="/employees" className="button red">
125 |                       Go back
126 |                     </Link>
127 |                   </div>
128 |                 </div>
129 |               </div>
130 |             </div>
131 |           )
132 |         }
133 |       />
134 |     </Suspense>
135 |   );
136 | }
137 | 


--------------------------------------------------------------------------------
/css/forms.scss:
--------------------------------------------------------------------------------
  1 | @layer components {
  2 |     .field:not(:last-child) {
  3 |         @apply mb-3;
  4 |     }
  5 | 
  6 |     .field.spaced:not(:last-child) {
  7 |         @apply mb-6;
  8 |     }
  9 | 
 10 |     .field-body .field .field {
 11 |         @apply mb-0;
 12 |     }
 13 | 
 14 |     .field.addons {
 15 |         @apply flex justify-start;
 16 |     }
 17 | 
 18 |     .field.addons .control.expanded {
 19 |         @apply flex-grow flex-shrink;
 20 |     }
 21 | 
 22 |     .field.addons .control:first-child:not(:only-child) .input,
 23 |     .field.addons .control:first-child:not(:only-child) .select select {
 24 |         @apply rounded-r-none border-r-0;
 25 |     }
 26 | 
 27 |     .field.addons .control:last-child:not(:only-child) .input,
 28 |     .field.addons .control:last-child:not(:only-child) .select select {
 29 |         @apply rounded-l-none border-l-0;
 30 |     }
 31 | 
 32 |     .field.grouped {
 33 |         @apply flex justify-start;
 34 |     }
 35 | 
 36 |     .field.grouped > .control:not(:last-child) {
 37 |         @apply mr-3;
 38 |     }
 39 | 
 40 |     .field.grouped.multiline {
 41 |         @apply flex-wrap;
 42 |     }
 43 | 
 44 |     .label {
 45 |         @apply block font-bold mb-2;
 46 |     }
 47 | 
 48 |     .control {
 49 |         @apply relative;
 50 |     }
 51 | 
 52 |     .control.icons-left,
 53 |     .control.icons-right {
 54 |         @apply relative;
 55 |     }
 56 | 
 57 |     .input,
 58 |     .textarea,
 59 |     .select select,
 60 |     .file-cta,
 61 |     .file-name {
 62 |         @apply px-3 py-2 border border-gray-400 rounded;
 63 |     }
 64 | 
 65 |     .input,
 66 |     .select select,
 67 |     .file-cta,
 68 |     .file-name {
 69 |         @apply h-10;
 70 |     }
 71 | 
 72 |     .input,
 73 |     .textarea,
 74 |     .select select {
 75 |         @apply w-full max-w-full focus:border-gray-100 focus:ring focus:outline-none bg-white;
 76 |     }
 77 | 
 78 |     .input[readonly] {
 79 |         @apply pointer-events-none bg-gray-100;
 80 |     }
 81 | 
 82 |     .textarea {
 83 |         @apply h-24;
 84 |     }
 85 | 
 86 |     .control.icons-left .icon,
 87 |     .control.icons-right .icon {
 88 |         @apply absolute top-0 z-10 w-10 h-10;
 89 |     }
 90 | 
 91 |     .control.icons-left .input,
 92 |     .control.icons-left .select select {
 93 |         @apply pl-10;
 94 |     }
 95 | 
 96 |     .control.icons-left .icon.left {
 97 |         @apply left-0;
 98 |     }
 99 | 
100 |     .control.icons-right .input,
101 |     .control.icons-right .select select {
102 |         @apply pr-10;
103 |     }
104 | 
105 |     .control.icons-right .icon.right {
106 |         @apply right-0;
107 |     }
108 | 
109 |     .help {
110 |         @apply block text-xs text-gray-500 mt-1;
111 |     }
112 | 
113 |     .file {
114 |         @apply flex items-stretch justify-start relative;
115 |     }
116 | 
117 |     .upload {
118 |         @apply inline-flex;
119 |     }
120 | 
121 |     .upload input[type="file"] {
122 |         @apply absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer;
123 |     }
124 | }
125 | 
126 | .checkbox,
127 | .radio,
128 | .switch {
129 |     @apply inline-flex items-center cursor-pointer relative;
130 | }
131 | 
132 | .checkbox input[type="checkbox"],
133 | .radio input[type="radio"],
134 | .switch input[type="checkbox"] {
135 |     @apply absolute left-0 opacity-0;
136 | }
137 | 
138 | .checkbox input[type="checkbox"] + .check,
139 | .radio input[type="radio"] + .check,
140 | .switch input[type="checkbox"] + .check {
141 |     @apply border-gray-300 border hover:border-gray-400;
142 | }
143 | 
144 | .checkbox input[type="checkbox"] + .check,
145 | .radio input[type="radio"] + .check {
146 |     @apply block w-5 h-5;
147 | }
148 | 
149 | .checkbox input[type="checkbox"] + .check {
150 |     @apply rounded;
151 | }
152 | 
153 | .switch input[type="checkbox"] + .check {
154 |     @apply flex items-center flex-shrink-0 w-12 h-6 p-0.5 bg-gray-200;
155 | }
156 | 
157 | .radio input[type="radio"] + .check,
158 | .switch input[type="checkbox"] + .check,
159 | .switch input[type="checkbox"] + .check:before {
160 |     @apply rounded-full;
161 | }
162 | 
163 | .checkbox input[type="checkbox"]:checked + .check,
164 | .radio input[type="radio"]:checked + .check {
165 |     @apply bg-no-repeat bg-center bg-blue-500 border-blue-500 border-4;
166 | }
167 | 
168 | .checkbox input[type="checkbox"]:checked + .check {
169 |     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
170 | }
171 | 
172 | .radio input[type="radio"]:checked + .check {
173 |     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
174 | }
175 | 
176 | .switch input[type="checkbox"]:checked + .check {
177 |     @apply bg-blue-500 border-blue-500;
178 | }
179 | 
180 | .switch input[type="checkbox"] + .check:before {
181 |     content: "";
182 |     @apply block w-5 h-5 bg-white border border-gray-300;
183 | }
184 | 
185 | .switch input[type="checkbox"]:checked + .check:before {
186 |     transform: translate3d(110%, 0, 0);
187 |     @apply border-blue-500;
188 | }
189 | 
190 | .checkbox .control-label,
191 | .radio .control-label,
192 | .switch .control-label {
193 |     @apply pl-2;
194 | }
195 | 


--------------------------------------------------------------------------------
/app/routes/search.tsx:
--------------------------------------------------------------------------------
  1 | import { Suspense } from "react";
  2 | import { type LoaderArgs } from "@remix-run/cloudflare";
  3 | import {
  4 |   Await,
  5 |   Form,
  6 |   Link,
  7 |   useLoaderData,
  8 |   useNavigate,
  9 |   useSearchParams,
 10 | } from "@remix-run/react";
 11 | 
 12 | import { maybeDefer } from "~/utils";
 13 | 
 14 | export function loader({ context, request }: LoaderArgs) {
 15 |   const url = new URL(request.url);
 16 |   const query = url.searchParams.get("q");
 17 |   const table = url.searchParams.get("t") || "products";
 18 | 
 19 |   const searchPromise = !query
 20 |     ? // TODO: this shouldn't be needed and is a bug in remix
 21 |       (null as unknown as Promise<any[]>)
 22 |     : context.DB.prepare(
 23 |         table == "products"
 24 |           ? `
 25 |           SELECT Id, ProductName, SupplierId, CategoryId, QuantityPerUnit, UnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued
 26 |           FROM Product
 27 |           WHERE ProductName
 28 |           LIKE ?2
 29 |           LIMIT ?1
 30 |         `
 31 |           : `
 32 |           SELECT Id, CompanyName, ContactName, ContactTitle, Address, City, Region, PostalCode, Country, Phone, Fax
 33 |           FROM Customer
 34 |           WHERE CompanyName LIKE ?2 OR ContactName LIKE ?2 OR ContactTitle LIKE ?2 OR Address LIKE ?2
 35 |           LIMIT ?1`
 36 |       )
 37 |         .bind(50, `%${query}%`)
 38 |         .all()
 39 |         .then((res) => res.results);
 40 | 
 41 |   return maybeDefer(context.session, {
 42 |     searchPromise,
 43 |   });
 44 | }
 45 | 
 46 | export default function Search() {
 47 |   const { searchPromise } = useLoaderData<typeof loader>();
 48 |   const navigate = useNavigate();
 49 |   const [searchParams] = useSearchParams();
 50 |   const query = searchParams.get("q") || "";
 51 |   const table = searchParams.get("t") || "products";
 52 | 
 53 |   return (
 54 |     <div className="card">
 55 |       <div className="card-content">
 56 |         <Form
 57 |           replace
 58 |           onChange={(event) => {
 59 |             if (
 60 |               event.target instanceof HTMLInputElement &&
 61 |               event.target.name === "t"
 62 |             ) {
 63 |               const searchParams = new URLSearchParams();
 64 |               searchParams.set("q", query);
 65 |               searchParams.set("t", event.target.value);
 66 |               navigate(`?${searchParams.toString()}`, { replace: true });
 67 |             }
 68 |           }}
 69 |         >
 70 |           <div className="field">
 71 |             <label className="label">Search Database</label>
 72 |             <div className="field-body">
 73 |               <div className="field">
 74 |                 <div className="control icons-left">
 75 |                   <input
 76 |                     type="text"
 77 |                     name="q"
 78 |                     placeholder="Enter keyword..."
 79 |                     defaultValue={query}
 80 |                     className="input w-1/2"
 81 |                   />
 82 |                   <button type="submit" className="icon left material-icons">
 83 |                     search
 84 |                   </button>
 85 |                 </div>
 86 |               </div>
 87 |             </div>
 88 |           </div>
 89 | 
 90 |           <div className="field">
 91 |             <label className="label">Tables</label>
 92 |             <div className="field-body">
 93 |               <div className="field grouped multiline">
 94 |                 <div className="control">
 95 |                   <label className="radio">
 96 |                     <input
 97 |                       type="radio"
 98 |                       name="t"
 99 |                       value="products"
100 |                       defaultChecked={table === "products"}
101 |                     />
102 |                     <span className="check"></span>
103 |                     <span className="control-label">Products</span>
104 |                   </label>
105 |                 </div>
106 |                 <div className="control">
107 |                   <label className="radio">
108 |                     <input
109 |                       type="radio"
110 |                       name="t"
111 |                       value="customers"
112 |                       defaultChecked={table === "customers"}
113 |                     />
114 |                     <span className="check"></span>
115 |                     <span className="control-label">Customers</span>
116 |                   </label>
117 |                 </div>
118 |               </div>
119 |             </div>
120 |           </div>
121 |         </Form>
122 | 
123 |         <p className="text-black font-bold text-lg">Search results</p>
124 |         <Suspense fallback={<p className="mt-6">Loading...</p>}>
125 |           <Await resolve={searchPromise}>
126 |             {(results) => {
127 |               if (!results || results.length === 0) {
128 |                 return <p className="mt-6">No results</p>;
129 |               }
130 |               return (
131 |                 <ul>
132 |                   {results.map((r: any, idx) => (
133 |                     <li key={r.Id}>
134 |                       {table == "products" ? (
135 |                         <>
136 |                           <span className="block text-base mt-2 link">
137 |                             <Link to={`/product/${r.Id}`}>{r.ProductName}</Link>
138 |                           </span>
139 |                           <span className="block text-gray-400 text-sm">
140 |                             #{idx + 1}, Quantity Per Unit: {r.QuantityPerUnit},
141 |                             Price: {r.UnitPrice}, Stock: {r.UnitsInStock}
142 |                           </span>
143 |                         </>
144 |                       ) : (
145 |                         <>
146 |                           <span className="block text-base mt-2 link">
147 |                             <Link to={`/customer/${r.Id}`}>
148 |                               {r.CompanyName}
149 |                             </Link>
150 |                           </span>
151 |                           <span className="block text-gray-400 text-sm">
152 |                             #{idx + 1}, Contact: {r.ContactName}, Title:{" "}
153 |                             {r.ContactTitle}, Phone: {r.Phone}
154 |                           </span>
155 |                         </>
156 |                       )}
157 |                     </li>
158 |                   ))}
159 |                 </ul>
160 |               );
161 |             }}
162 |           </Await>
163 |         </Suspense>
164 |       </div>
165 |     </div>
166 |   );
167 | }
168 | 


--------------------------------------------------------------------------------
/app/routes/order.$id.tsx:
--------------------------------------------------------------------------------
  1 | import { type LoaderArgs } from "@remix-run/cloudflare";
  2 | import { Await, Link, useLoaderData } from "@remix-run/react";
  3 | import { Suspense } from "react";
  4 | 
  5 | import { AddTableField } from "~/components/tools";
  6 | import { maybeDefer } from "~/utils";
  7 | 
  8 | export function loader({ context, params }: LoaderArgs) {
  9 |   const ordersQuery = context.DB.prepare(
 10 |     `
 11 |       SELECT Shipper.CompanyName AS ShipViaCompanyName, SUM(OrderDetail.UnitPrice * OrderDetail.Discount * OrderDetail.Quantity) AS TotalProductsDiscount, SUM(OrderDetail.UnitPrice * OrderDetail.Quantity) AS TotalProductsPrice, SUM(OrderDetail.Quantity) AS TotalProductsItems, COUNT(OrderDetail.OrderId) AS TotalProducts, "Order".Id, CustomerId, EmployeeId, OrderDate, RequiredDate, ShippedDate, ShipVia, Freight, ShipName, ShipAddress, ShipCity, ShipRegion, ShipPostalCode, ShipCountry, ProductId
 12 |       FROM "Order", OrderDetail, Shipper
 13 |       WHERE OrderDetail.OrderId = "Order".Id AND "Order".Id = ?1 AND "Order".ShipVia = Shipper.Id
 14 |       GROUP BY "Order".Id
 15 |     `
 16 |   ).bind(params.id);
 17 | 
 18 |   const productsQuery = context.DB.prepare(
 19 |     `
 20 |       SELECT OrderDetail.OrderId, OrderDetail.Quantity, OrderDetail.UnitPrice AS OrderUnitPrice, OrderDetail.Discount, Product.Id, ProductName, SupplierId, CategoryId, QuantityPerUnit, Product.UnitPrice AS ProductUnitPrice, UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued
 21 |       FROM Product, OrderDetail
 22 |       WHERE OrderDetail.OrderId = ?1 AND OrderDetail.ProductId = Product.Id
 23 |     `
 24 |   ).bind(params.id);
 25 | 
 26 |   const orderPromise = context.DB.batch([ordersQuery, productsQuery]).then(
 27 |     ([ordersResult, productsResult]) => {
 28 |       const orders = (ordersResult.results || []) as {
 29 |         OrderId: number;
 30 |         Quantity: number;
 31 |         CustomerId: number;
 32 |         ShipName: string;
 33 |         TotalProducts: number;
 34 |         TotalProductsItems: number;
 35 |         TotalProductsPrice: number;
 36 |         TotalProductsDiscount: number;
 37 |         ShipViaCompanyName: string;
 38 |         Freight: number;
 39 |         OrderDate: string;
 40 |         RequiredDate: string;
 41 |         ShippedDate: string;
 42 |         ShipCity: string;
 43 |         ShipRegion: string;
 44 |         ShipPostalCode: string;
 45 |         ShipCountry: string;
 46 |       }[];
 47 |       const products = (productsResult.results || []) as {
 48 |         Id: number;
 49 |         ProductName: string;
 50 |         SupplierId: string;
 51 |         CategoryId: string;
 52 |         QuantityPerUnit: string;
 53 |         UnitPrice: string;
 54 |         UnitsInStock: string;
 55 |         UnitsOnOrder: string;
 56 |         ReorderLevel: string;
 57 |         Discontinued: string;
 58 |         SupplierName: string;
 59 |         OrderUnitPrice: number;
 60 |         Quantity: number;
 61 |         Discount: number;
 62 |       }[];
 63 | 
 64 |       return {
 65 |         stats: {
 66 |           results: products.length + 1,
 67 |         },
 68 |         order: (orders ? orders[0] : {}) as typeof orders[0],
 69 |         products: products,
 70 |       };
 71 |     }
 72 |   );
 73 | 
 74 |   return maybeDefer(context.session, {
 75 |     orderPromise,
 76 |   });
 77 | }
 78 | 
 79 | export default function Product() {
 80 |   const { orderPromise } = useLoaderData<typeof loader>();
 81 | 
 82 |   return (
 83 |     <Suspense
 84 |       fallback={
 85 |         <div className="card-content">
 86 |           <h2>Loading order...</h2>
 87 |         </div>
 88 |       }
 89 |     >
 90 |       <Await
 91 |         resolve={orderPromise}
 92 |         children={({ order, products }) =>
 93 |           !order ? (
 94 |             <div className="card-content">
 95 |               <h2>Order not found</h2>
 96 |             </div>
 97 |           ) : (
 98 |             <div className="card mb-6">
 99 |               <header className="card-header">
100 |                 <p className="card-header-title">
101 |                   <span className="icon material-icons">ballot</span>
102 |                   <span className="ml-2">Order information</span>
103 |                 </p>
104 |               </header>
105 |               <div className="card-content">
106 |                 <div className="grid grid-cols-2 gap-4">
107 |                   <div>
108 |                     <AddTableField
109 |                       name="Customer Id"
110 |                       link={`/customer/${order.CustomerId}`}
111 |                       value={order.CustomerId}
112 |                     />
113 |                     <AddTableField name="Ship Name" value={order.ShipName} />
114 |                     <AddTableField
115 |                       name="Total Products"
116 |                       value={order.TotalProducts}
117 |                     />
118 |                     <AddTableField
119 |                       name="Total Quantity"
120 |                       value={order.TotalProductsItems}
121 |                     />
122 |                     <AddTableField
123 |                       name="Total Price"
124 |                       value={`$${order.TotalProductsPrice.toFixed(2)}`}
125 |                     />
126 |                     <AddTableField
127 |                       name="Total Discount"
128 |                       value={`$${order.TotalProductsDiscount.toFixed(2)}`}
129 |                     />
130 |                     <AddTableField
131 |                       name="Ship Via"
132 |                       value={order.ShipViaCompanyName}
133 |                     />
134 |                     <AddTableField
135 |                       name="Freight"
136 |                       value={`$${order.Freight.toFixed(2)}`}
137 |                     />
138 |                   </div>
139 |                   <div>
140 |                     <AddTableField name="Order Date" value={order.OrderDate} />
141 |                     <AddTableField
142 |                       name="Required Date"
143 |                       value={order.RequiredDate}
144 |                     />
145 |                     <AddTableField
146 |                       name="Shipped Date"
147 |                       value={order.ShippedDate}
148 |                     />
149 |                     <AddTableField name="Ship City" value={order.ShipCity} />
150 |                     <AddTableField
151 |                       name="Ship Region"
152 |                       value={order.ShipRegion}
153 |                     />
154 |                     <AddTableField
155 |                       name="Ship Postal Code"
156 |                       value={order.ShipPostalCode}
157 |                     />
158 |                     <AddTableField
159 |                       name="Ship Country"
160 |                       value={order.ShipCountry}
161 |                     />
162 |                   </div>
163 |                 </div>
164 |               </div>
165 |               <div className="card has-table">
166 |                 <header className="card-header">
167 |                   <p className="card-header-title">Products in Order</p>
168 |                 </header>
169 |                 <div className="card-content">
170 |                   <table>
171 |                     <thead>
172 |                       <tr>
173 |                         <th>Product</th>
174 |                         <th>Quantity</th>
175 |                         <th>Order Price</th>
176 |                         <th>Total Price</th>
177 |                         <th>Discount</th>
178 |                       </tr>
179 |                     </thead>
180 |                     <tbody>
181 |                       {products.map((product, index) => {
182 |                         return (
183 |                           <tr key={product.Id}>
184 |                             <td data-label="Product">
185 |                               <Link
186 |                                 className="link"
187 |                                 to={`/product/${product.Id}`}
188 |                               >
189 |                                 {product.ProductName}
190 |                               </Link>
191 |                             </td>
192 |                             <td data-label="Quantity">{product.Quantity}</td>
193 |                             <td data-label="OrderPrice">{`$${product.OrderUnitPrice.toFixed(
194 |                               2
195 |                             )}`}</td>
196 |                             <td data-label="TotalPrice">{`$${(
197 |                               product.OrderUnitPrice * product.Quantity
198 |                             ).toFixed(2)}`}</td>
199 |                             <td data-label="Discount">{`${
200 |                               product.Discount * 100
201 |                             }%`}</td>
202 |                           </tr>
203 |                         );
204 |                       })}
205 |                     </tbody>
206 |                   </table>
207 |                 </div>
208 |               </div>
209 |               <div className="card-content">
210 |                 <div className="field grouped">
211 |                   <div className="control">
212 |                     <Link to="/orders" className="button red">
213 |                       Go back
214 |                     </Link>
215 |                   </div>
216 |                 </div>
217 |               </div>
218 |             </div>
219 |           )
220 |         }
221 |       />
222 |     </Suspense>
223 |   );
224 | }
225 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import {
  3 |   json,
  4 |   redirect,
  5 |   type ActionArgs,
  6 |   type LinksFunction,
  7 |   type LoaderArgs,
  8 |   type MetaFunction,
  9 | } from "@remix-run/cloudflare";
 10 | import {
 11 |   Form,
 12 |   Links,
 13 |   Meta,
 14 |   NavLink,
 15 |   Outlet,
 16 |   Scripts,
 17 |   ScrollRestoration,
 18 |   useLoaderData,
 19 |   useNavigation,
 20 |   useSubmit,
 21 | } from "@remix-run/react";
 22 | 
 23 | import adminStylesHref from "./css/admin.css";
 24 | 
 25 | export function loader({ context }: LoaderArgs) {
 26 |   return json({
 27 |     delay: context.session.get("delay"),
 28 |     shouldDefer: Boolean(context.session.get("defer")),
 29 |   });
 30 | }
 31 | 
 32 | export async function action({ context, request }: ActionArgs) {
 33 |   const formData = await request.formData();
 34 |   const delay = Number(formData.get("delay"));
 35 |   const shouldDefer = Boolean(formData.get("defer"));
 36 | 
 37 |   console.log({ delay });
 38 |   context.session.set("delay", delay);
 39 |   context.session.set("defer", shouldDefer);
 40 | 
 41 |   const url = new URL(request.headers.get("Referer") || request.url);
 42 |   return redirect(url.pathname);
 43 | }
 44 | 
 45 | export let links: LinksFunction = () => [
 46 |   {
 47 |     rel: "stylesheet",
 48 |     href: "https://fonts.googleapis.com/icon?family=Material+Icons",
 49 |   },
 50 |   { rel: "stylesheet", href: adminStylesHref },
 51 | ];
 52 | 
 53 | export const meta: MetaFunction = () => ({
 54 |   charset: "utf-8",
 55 |   title: "Northwind Traders | Remix D1 Demo",
 56 |   viewport: "width=device-width,initial-scale=1",
 57 | });
 58 | 
 59 | function updateClock() {
 60 |   const clockElement = document.getElementById("clock");
 61 |   if (clockElement) {
 62 |     const now = new Date();
 63 |     clockElement.innerHTML = now.toLocaleTimeString();
 64 |   }
 65 | }
 66 | 
 67 | export default function App() {
 68 |   const { delay, shouldDefer } = useLoaderData<typeof loader>();
 69 |   const navigation = useNavigation();
 70 |   const submit = useSubmit();
 71 |   const [subMenu, setSubMenu] = useState(false);
 72 | 
 73 |   useEffect(() => {
 74 |     updateClock();
 75 |     const interval = setInterval(updateClock, 1000);
 76 | 
 77 |     return () => {
 78 |       clearInterval(interval);
 79 |     };
 80 |   }, []);
 81 | 
 82 |   return (
 83 |     <html className="no-js" lang="en-US">
 84 |       <head>
 85 |         <Meta />
 86 |         <Links />
 87 |       </head>
 88 |       <body>
 89 |         <div id="app">
 90 |           <nav id="navbar-main" className="navbar is-fixed-top">
 91 |             <div className="navbar-brand">
 92 |               <button
 93 |                 onClick={() => {
 94 |                   document.documentElement.classList.toggle(
 95 |                     "aside-mobile-expanded"
 96 |                   );
 97 |                 }}
 98 |                 className="mobile-aside-button navbar-item"
 99 |               >
100 |                 <span className="icon mobile-aside-button material-icons">
101 |                   menu
102 |                 </span>
103 |               </button>
104 |             </div>
105 |             <div className="navbar-brand is-right">
106 |               <button
107 |                 className="navbar-item --jb-navbar-menu-toggle"
108 |                 data-target="navbar-menu"
109 |               >
110 |                 <span className="icon material-icons">more_vert</span>
111 |               </button>
112 |             </div>
113 |             <div className="navbar-menu" id="navbar-menu">
114 |               <div id="clock" className="navbar-item ml-6 text-gray-800"></div>
115 |               <div className="navbar-end">
116 |                 <div
117 |                   className={`navbar-item dropdown has-divider ${
118 |                     subMenu ? "active" : ""
119 |                   }`}
120 |                 >
121 |                   <button
122 |                     className="navbar-link"
123 |                     onClick={() => {
124 |                       setSubMenu(!subMenu);
125 |                     }}
126 |                   >
127 |                     <span className="icon material-icons">menu</span>
128 |                     <span>SQLite Links</span>
129 |                     <span className="icon material-icons">
130 |                       keyboard_arrow_down
131 |                     </span>
132 |                   </button>
133 |                   <div className="navbar-dropdown">
134 |                     <a
135 |                       href="https://blog.cloudflare.com/introducing-d1"
136 |                       className="navbar-item"
137 |                     >
138 |                       <span className="icon material-icons">link</span>
139 |                       <span>Introducing D1</span>
140 |                     </a>
141 |                     <a
142 |                       href="https://www.sqlite.org/lang.html"
143 |                       className="navbar-item"
144 |                     >
145 |                       <span className="icon material-icons">link</span>
146 |                       <span>SQLite SQL Flavour</span>
147 |                     </a>
148 |                     <a
149 |                       href="https://developers.cloudflare.com/workers/learning/using-durable-objects/"
150 |                       className="navbar-item"
151 |                     >
152 |                       <span className="icon material-icons">link</span>
153 |                       <span>Durable Objects</span>
154 |                     </a>
155 |                   </div>
156 |                 </div>
157 |               </div>
158 |             </div>
159 |           </nav>
160 | 
161 |           <aside className="aside is-placed-left is-expanded">
162 |             <div className="aside-tools">
163 |               <div>
164 |                 <b className="font-black">Northwind</b> Traders
165 |               </div>
166 |             </div>
167 |             <div className="menu is-menu-main">
168 |               <p className="menu-label">General</p>
169 |               <ul className="menu-list">
170 |                 <li>
171 |                   <NavLink
172 |                     to="/"
173 |                     className={({ isActive }) =>
174 |                       isActive ? "active" : undefined
175 |                     }
176 |                     end
177 |                   >
178 |                     <span className="icon material-icons">home</span>
179 |                     <span className="menu-item-label">Home</span>
180 |                   </NavLink>
181 |                   <NavLink
182 |                     to="/dash"
183 |                     className={({ isActive }) =>
184 |                       isActive ? "active" : undefined
185 |                     }
186 |                   >
187 |                     <span className="icon material-icons">
188 |                       display_settings
189 |                     </span>
190 |                     <span className="menu-item-label">Dashboard</span>
191 |                   </NavLink>
192 |                 </li>
193 |               </ul>
194 |               <p className="menu-label">Backoffice</p>
195 |               <ul className="menu-list">
196 |                 <li>
197 |                   <NavLink
198 |                     to="/suppliers"
199 |                     className={({ isActive }) =>
200 |                       isActive ? "active" : undefined
201 |                     }
202 |                   >
203 |                     <span className="icon material-icons">inventory</span>
204 |                     <span className="menu-item-label">Suppliers</span>
205 |                   </NavLink>
206 |                 </li>
207 |                 <li>
208 |                   <NavLink
209 |                     to="/products"
210 |                     className={({ isActive }) =>
211 |                       isActive ? "active" : undefined
212 |                     }
213 |                   >
214 |                     <span className="icon material-icons">
215 |                       production_quantity_limits
216 |                     </span>
217 |                     <span className="menu-item-label">Products</span>
218 |                   </NavLink>
219 |                 </li>
220 |                 <li>
221 |                   <NavLink
222 |                     to="/orders"
223 |                     className={({ isActive }) =>
224 |                       isActive ? "active" : undefined
225 |                     }
226 |                   >
227 |                     <span className="icon material-icons">shopping_cart</span>
228 |                     <span className="menu-item-label">Orders</span>
229 |                   </NavLink>
230 |                 </li>
231 |                 <li>
232 |                   <NavLink
233 |                     to="/employees"
234 |                     className={({ isActive }) =>
235 |                       isActive ? "active" : undefined
236 |                     }
237 |                   >
238 |                     <span className="icon material-icons">badge</span>
239 |                     <span className="menu-item-label">Employees</span>
240 |                   </NavLink>
241 |                 </li>
242 |                 <li>
243 |                   <NavLink
244 |                     to="/customers"
245 |                     className={({ isActive }) =>
246 |                       isActive ? "active" : undefined
247 |                     }
248 |                   >
249 |                     <span className="icon material-icons">group</span>
250 |                     <span className="menu-item-label">Customers</span>
251 |                   </NavLink>
252 |                 </li>
253 |                 <li>
254 |                   <NavLink
255 |                     to="/search"
256 |                     className={({ isActive }) =>
257 |                       isActive ? "active" : undefined
258 |                     }
259 |                   >
260 |                     <span className="icon material-icons">search</span>
261 |                     <span className="menu-item-label">Search</span>
262 |                   </NavLink>
263 |                 </li>
264 |               </ul>
265 |               <Form
266 |                 replace
267 |                 method="post"
268 |                 className="mt-4 p-3"
269 |                 onChange={(event) => {
270 |                   if (
271 |                     event.target instanceof HTMLInputElement &&
272 |                     event.target.name === "defer" &&
273 |                     event.target.form
274 |                   ) {
275 |                     submit(event.target.form, { replace: true });
276 |                   }
277 |                 }}
278 |               >
279 |                 <div className="field">
280 |                   <label className="label text-[#D1D5DB]">
281 |                     Data delay (ms)
282 |                   </label>
283 |                   <div className="field-body">
284 |                     <div className="field">
285 |                       <div className="control">
286 |                         <input
287 |                           type="text"
288 |                           inputMode="numeric"
289 |                           name="delay"
290 |                           defaultValue={delay || 0}
291 |                           min={0}
292 |                           className="input"
293 |                         />
294 |                       </div>
295 |                     </div>
296 |                   </div>
297 |                 </div>
298 | 
299 |                 <div className="field">
300 |                   <label className="label text-[#D1D5DB]">Data loading</label>
301 |                   <div className="field-body">
302 |                     <div className="field grouped multiline">
303 |                       <div className="control">
304 |                         <label className="radio">
305 |                           <input
306 |                             type="radio"
307 |                             name="defer"
308 |                             value=""
309 |                             defaultChecked={!shouldDefer}
310 |                           />
311 |                           <span className="check"></span>
312 |                           <span className="control-label text-[#D1D5DB]">
313 |                             await
314 |                           </span>
315 |                         </label>
316 |                       </div>
317 |                       <div className="control">
318 |                         <label className="radio">
319 |                           <input
320 |                             type="radio"
321 |                             name="defer"
322 |                             value="1"
323 |                             defaultChecked={shouldDefer}
324 |                           />
325 |                           <span className="check"></span>
326 |                           <span className="control-label text-[#D1D5DB]">
327 |                             defer
328 |                           </span>
329 |                         </label>
330 |                       </div>
331 |                     </div>
332 |                   </div>
333 |                 </div>
334 |               </Form>
335 |             </div>
336 |           </aside>
337 | 
338 |           <section
339 |             className={
340 |               "section main-section " +
341 |               (navigation.state === "loading" ? "fade-out" : "")
342 |             }
343 |           >
344 |             <Outlet />
345 |           </section>
346 |         </div>
347 | 
348 |         <ScrollRestoration />
349 |         <Scripts />
350 |       </body>
351 |     </html>
352 |   );
353 | }
354 | 


--------------------------------------------------------------------------------