From 2b1cc7af755d9c7dcb10f941b33dc4e5dd443378 Mon Sep 17 00:00:00 2001 From: Angel Beltran Date: Sun, 25 Jan 2026 01:23:52 -0700 Subject: [PATCH] updated accounts page: display user info and list shops --- internal/server/ui/router.go | 5 + styles/index.css | 322 ++++++++++++++++++ .../shops/link-sections/amazon.html.tmpl | 1 + .../shops/link-sections/big_cartel.html.tmpl | 1 + .../shops/link-sections/ebay.html.tmpl | 2 + .../shops/link-sections/ecwid.html.tmpl | 2 + .../shops/link-sections/etsy.html.tmpl | 13 + .../shops/link-sections/shopify.html.tmpl | 2 + .../link-sections/square_online.html.tmpl | 2 + .../shops/link-sections/squarespace.html.tmpl | 2 + .../shops/link-sections/tiktok.html.tmpl | 1 + .../walmart_marketplace.html.tmpl | 2 + .../shops/link-sections/wix.html.tmpl | 1 + .../link-sections/woo_commerce.html.tmpl | 2 + .../shops/link-sections/zoho.html.tmpl | 2 + templates/layout.html.tmpl | 4 +- .../accounts/{acctID.int64}/index.html.tmpl | 123 ++++++- 17 files changed, 469 insertions(+), 18 deletions(-) create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/amazon.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/big_cartel.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/ebay.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/ecwid.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/etsy.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/shopify.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/square_online.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/squarespace.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/tiktok.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/walmart_marketplace.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/wix.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/woo_commerce.html.tmpl create mode 100644 templates/components/accounts/{acctID.int64}/shops/link-sections/zoho.html.tmpl diff --git a/internal/server/ui/router.go b/internal/server/ui/router.go index 8df51d9..a970d58 100644 --- a/internal/server/ui/router.go +++ b/internal/server/ui/router.go @@ -65,6 +65,11 @@ func Routes( return accounts.NewPlatform(s) }, + // strings + "lowerCamelCase": func(s string) string { + return strings.ToLower(strings.Join(strings.Split(s, " "), "_")) + }, + // arithmetic "addInt": func(a, b int) int { return a + b diff --git a/styles/index.css b/styles/index.css index a1145ee..2a2e7af 100644 --- a/styles/index.css +++ b/styles/index.css @@ -7,6 +7,7 @@ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --color-sky-400: oklch(74.6% 0.16 232.661); --color-black: #000; --color-white: #fff; --text-sm: 0.875rem; @@ -213,9 +214,21 @@ .m-\[1em\] { margin: 1em; } + .m-\[1rem\] { + margin: 1rem; + } .m-\[2em\] { margin: 2em; } + .my-\[0\.5em\] { + margin-block: 0.5em; + } + .my-\[1rem\] { + margin-block: 1rem; + } + .my-\[2rem\] { + margin-block: 2rem; + } .mt-\[0\.25em\] { margin-top: 0.25em; } @@ -228,12 +241,18 @@ .mb-\[0\.5em\] { margin-bottom: 0.5em; } + .mb-\[0\.5rem\] { + margin-bottom: 0.5rem; + } .mb-\[1\.25rem\] { margin-bottom: 1.25rem; } .mb-\[1em\] { margin-bottom: 1em; } + .mb-\[1rem\] { + margin-bottom: 1rem; + } .mb-\[3em\] { margin-bottom: 3em; } @@ -252,9 +271,21 @@ .hidden { display: none; } + .inline { + display: inline; + } + .inline-block { + display: inline-block; + } .table { display: table; } + .h-\[1em\] { + height: 1em; + } + .h-\[2em\] { + height: 2em; + } .h-\[2rem\] { height: 2rem; } @@ -300,6 +331,9 @@ .resize { resize: both; } + .list-none { + list-style-type: none; + } .grid-cols-\[6rem_10fr_6rem\] { grid-template-columns: 6rem 10fr 6rem; } @@ -324,6 +358,9 @@ .gap-y-\[2em\] { row-gap: 2em; } + .self-center { + align-self: center; + } .overflow-x-auto { overflow-x: auto; } @@ -333,6 +370,9 @@ .overflow-y-hidden { overflow-y: hidden; } + .rounded { + border-radius: 0.25rem; + } .rounded-\[50\%\] { border-radius: 50%; } @@ -354,6 +394,10 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } + .border-dotted { + --tw-border-style: dotted; + border-style: dotted; + } .border-sidebar-border { border-color: var(--sidebar-border); } @@ -378,15 +422,42 @@ .p-\[1em\] { padding: 1em; } + .p-\[1rem\] { + padding: 1rem; + } + .px-\[0\.5em\] { + padding-inline: 0.5em; + } + .px-\[0\.75em\] { + padding-inline: 0.75em; + } + .px-\[2em\] { + padding-inline: 2em; + } + .py-\[0\.5em\] { + padding-block: 0.5em; + } + .py-\[1em\] { + padding-block: 1em; + } + .py-\[1rem\] { + padding-block: 1rem; + } .pt-\[1em\] { padding-top: 1em; } .pr-\[2em\] { padding-right: 2em; } + .pb-\[0\.5em\] { + padding-bottom: 0.5em; + } .pb-\[1em\] { padding-bottom: 1em; } + .pb-\[1rem\] { + padding-bottom: 1rem; + } .text-center { text-align: center; } @@ -460,6 +531,50 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } + .group-open\:border-b-\[0\.5rem\] { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 0.5rem; + } + } + .group-open\:border-b-\[0\.25rem\] { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 0.25rem; + } + } + .group-open\:border-b-\[1px\] { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } + } + .group-open\:border-b-\[1rem\] { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1rem; + } + } + .group-open\:border-b-accent { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-color: var(--accent); + } + } + .group-open\:border-b-background { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-color: var(--background); + } + } + .group-open\:border-b-black { + &:is(:where(.group):is([open], :popover-open, :open) *) { + border-bottom-color: var(--color-black); + } + } + .group-open\:bg-background { + &:is(:where(.group):is([open], :popover-open, :open) *) { + background-color: var(--background); + } + } .group-hover\:scale-120 { &:is(:where(.group):hover *) { @media (hover: hover) { @@ -470,6 +585,197 @@ } } } + .marker\:inline { + & *::marker { + display: inline; + } + &::marker { + display: inline; + } + & *::-webkit-details-marker { + display: inline; + } + &::-webkit-details-marker { + display: inline; + } + } + .marker\:inline-block { + & *::marker { + display: inline-block; + } + &::marker { + display: inline-block; + } + & *::-webkit-details-marker { + display: inline-block; + } + &::-webkit-details-marker { + display: inline-block; + } + } + .marker\:list-none { + & *::marker { + list-style-type: none; + } + &::marker { + list-style-type: none; + } + & *::-webkit-details-marker { + list-style-type: none; + } + &::-webkit-details-marker { + list-style-type: none; + } + } + .marker\:bg-accent { + & *::marker { + background-color: var(--accent); + } + &::marker { + background-color: var(--accent); + } + & *::-webkit-details-marker { + background-color: var(--accent); + } + &::-webkit-details-marker { + background-color: var(--accent); + } + } + .marker\:text-sky-400 { + & *::marker { + color: var(--color-sky-400); + } + &::marker { + color: var(--color-sky-400); + } + & *::-webkit-details-marker { + color: var(--color-sky-400); + } + &::-webkit-details-marker { + color: var(--color-sky-400); + } + } + .after\:float-right { + &::after { + content: var(--tw-content); + float: right; + } + } + .after\:text-\[1em\] { + &::after { + content: var(--tw-content); + font-size: 1em; + } + } + .after\:text-\[2em\] { + &::after { + content: var(--tw-content); + font-size: 2em; + } + } + .after\:text-\[3em\] { + &::after { + content: var(--tw-content); + font-size: 3em; + } + } + .after\:leading-\[1em\] { + &::after { + content: var(--tw-content); + --tw-leading: 1em; + line-height: 1em; + } + } + .after\:font-\[2em\] { + &::after { + content: var(--tw-content); + --tw-font-weight: 2em; + font-weight: 2em; + } + } + .after\:font-\[3em\] { + &::after { + content: var(--tw-content); + --tw-font-weight: 3em; + font-weight: 3em; + } + } + .after\:font-bold { + &::after { + content: var(--tw-content); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + } + .after\:content-\[\'\&\#9654\'\] { + &::after { + --tw-content: '▶'; + content: var(--tw-content); + } + } + .after\:content-\[\'\&\#9655\'\] { + &::after { + --tw-content: '▷'; + content: var(--tw-content); + } + } + .after\:content-\[\'\&\#9656\'\] { + &::after { + --tw-content: '▸'; + content: var(--tw-content); + } + } + .after\:content-\[\'\&\#x25B6\'\] { + &::after { + --tw-content: '▶'; + content: var(--tw-content); + } + } + .after\:content-\[\'\+\'\] { + &::after { + --tw-content: '+'; + content: var(--tw-content); + } + } + .after\:content-\[\'\>\'\] { + &::after { + --tw-content: '>'; + content: var(--tw-content); + } + } + .after\:content-\[\'▷\'\] { + &::after { + --tw-content: '▷'; + content: var(--tw-content); + } + } + .after\:content-\[\>\] { + &::after { + --tw-content: >; + content: var(--tw-content); + } + } + .group-open\:after\:content-\[\'\+\'\] { + &:is(:where(.group):is([open], :popover-open, :open) *) { + &::after { + --tw-content: '+'; + content: var(--tw-content); + } + } + } + .group-open\:after\:content-\[\'-\'\] { + &:is(:where(.group):is([open], :popover-open, :open) *) { + &::after { + --tw-content: '-'; + content: var(--tw-content); + } + } + } + .open\:bg-background { + &:is([open], :popover-open, :open) { + background-color: var(--background); + } + } .hover\:scale-110 { &:hover { @media (hover: hover) { @@ -558,6 +864,11 @@ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } } + .\[open\]\:bg-background { + &:is(open) { + background-color: var(--background); + } + } } @layer base { select { @@ -947,6 +1258,15 @@ inherits: false; initial-value: 1; } +@property --tw-content { + syntax: "*"; + initial-value: ""; + inherits: false; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { @@ -968,6 +1288,8 @@ --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; + --tw-content: ""; + --tw-leading: initial; } } } diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/amazon.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/amazon.html.tmpl new file mode 100644 index 0000000..13f341d --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/amazon.html.tmpl @@ -0,0 +1 @@ +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/big_cartel.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/big_cartel.html.tmpl new file mode 100644 index 0000000..13f341d --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/big_cartel.html.tmpl @@ -0,0 +1 @@ +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/ebay.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/ebay.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/ebay.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/ecwid.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/ecwid.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/ecwid.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/etsy.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/etsy.html.tmpl new file mode 100644 index 0000000..061d678 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/etsy.html.tmpl @@ -0,0 +1,13 @@ +{{- $acctID := .Identity.Account }} + +{{- $etsyUser := .Etsy.GetUserPointerByAccountID $acctID.AccountID }} +{{- if $etsyUser }} +

Etsy User: {{ $etsyUser.UserID }}; Shop ID: {{ $etsyUser.ShopID }}

+{{- else }} +

+ {{/* TODO: create this link dynamically, not EVERYTIME THE PAGE IS LOADED */}} + + Link Your Etsy Store! + +

+{{- end }} diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/shopify.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/shopify.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/shopify.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/square_online.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/square_online.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/square_online.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/squarespace.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/squarespace.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/squarespace.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/tiktok.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/tiktok.html.tmpl new file mode 100644 index 0000000..13f341d --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/tiktok.html.tmpl @@ -0,0 +1 @@ +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/walmart_marketplace.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/walmart_marketplace.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/walmart_marketplace.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/wix.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/wix.html.tmpl new file mode 100644 index 0000000..13f341d --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/wix.html.tmpl @@ -0,0 +1 @@ +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/woo_commerce.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/woo_commerce.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/woo_commerce.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/components/accounts/{acctID.int64}/shops/link-sections/zoho.html.tmpl b/templates/components/accounts/{acctID.int64}/shops/link-sections/zoho.html.tmpl new file mode 100644 index 0000000..f495547 --- /dev/null +++ b/templates/components/accounts/{acctID.int64}/shops/link-sections/zoho.html.tmpl @@ -0,0 +1,2 @@ + +Coming soon! diff --git a/templates/layout.html.tmpl b/templates/layout.html.tmpl index f0481ff..1a0378d 100644 --- a/templates/layout.html.tmpl +++ b/templates/layout.html.tmpl @@ -107,7 +107,7 @@ -
+
{{/* This is where the page_body template will be inserted into the page */}} {{- block "body" . }}{{ end }}
@@ -132,9 +132,9 @@ > diff --git a/templates/pages/accounts/{acctID.int64}/index.html.tmpl b/templates/pages/accounts/{acctID.int64}/index.html.tmpl index 1d1690e..6190f11 100644 --- a/templates/pages/accounts/{acctID.int64}/index.html.tmpl +++ b/templates/pages/accounts/{acctID.int64}/index.html.tmpl @@ -2,22 +2,113 @@ {{- define "title" }} Inventory++ Account {{ end }} -{{- $acctID := .Identity.Account }} +{{- $acctID := .Identity.Account.AccountID }} -
-

Account: {{ $acctID.Email }}

-

{{ .Identity.Claims.Name }}

+
+

+
+
+ +
+ +
+ + {{ .Identity.Claims.Name }} + + + + {{ or .Identity.Claims.Nickname .Identity.Claims.Subject }} + + +
+ +
+

-{{- $etsyUser := .Etsy.GetUserPointerByAccountID $acctID.AccountID }} -{{- if $etsyUser }} -

Etsy User: {{ $etsyUser.UserID }}; Shop ID: {{ $etsyUser.ShopID }}

-{{- else }} -

- {{/* TODO: create this link dynamically, not EVERYTIME THE PAGE IS LOADED */}} - - Link Your Etsy Store! - -

-{{- end }} -

View Reports

+ +
+
+ +

+ Shops +

+ + +
    + {{- define "shop-list-entry" }} + {{/* .Platform, .AccountID */}} +
  • +
    + +

    {{.Platform}}

    +     + +
    + {{- $pathSegment := lowerCamelCase .Platform }} + {{- + component + (printf "/accounts/%d/shops/link-sections/%s" .AccountID $pathSegment) + }} +
    +
    +
    • + {{- end }} + {{- template "shop-list-entry" (props "Platform" "Amazon" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Big Cartel" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "eBay" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Etsy" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Ecwid" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Shopify" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Square Online" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Squarespace" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Tiktok" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Walmart Marketplace" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Wix" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Woo Commerce" "AccountID" $acctID) }} + {{- template "shop-list-entry" (props "Platform" "Zoho" "AccountID" $acctID) }} +
+
+