-
Notifications
You must be signed in to change notification settings - Fork 101
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added the products route to the sales route in the dashboard
- Loading branch information
1 parent
6fef6e5
commit ee88468
Showing
17 changed files
with
621 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <style> | ||
| h1 { | ||
| font-size: 2.8em; | ||
| font-weight: 700; | ||
| margin: 0 0 0.5em 0; | ||
| } | ||
| @media (min-width: 480px) { | ||
| h1 { | ||
| font-size: 4em; | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <script lang="ts" context="module"> | ||
| import type { ErrorLoad } from '@sveltejs/kit'; | ||
| export const load: ErrorLoad = ({ error, status }) => ({ | ||
| props: { | ||
| title: `${status}: ${error?.message || ''}`, | ||
| status, | ||
| error, | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| // Start: Local Imports | ||
| // Models | ||
| import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface'; | ||
| // Components | ||
| import HeadTags from '$components/head-tags/HeadTags.svelte'; | ||
| // Start: Sevelte Imports | ||
| import { dev } from '$app/env'; | ||
| // End: Sevelte Imports | ||
| // End: Local Imports | ||
| // Start: Exported Properties | ||
| export let status: string; | ||
| export let error: Error; | ||
| // End: Exported Properties | ||
| const metaData: Partial<IMetaTagProperties> = { | ||
| title: `${status} | Sveltekit`, | ||
| description: '404 page of Sveltekit starter project', | ||
| }; | ||
| </script> | ||
|
|
||
| <!-- Start: Header Tage --> | ||
| <HeadTags metaData="{metaData}" /> | ||
| <!-- End: Header Tage --> | ||
|
|
||
| <!-- Start: Error View Layout --> | ||
| <div class="md:container md:mx-auto"> | ||
| <div class="flex flex-col justify-center items-center"> | ||
| <!-- Start: Error Status Code --> | ||
| <h1> | ||
| {status} | ||
| </h1> | ||
| <!-- End: Error Status Code --> | ||
| <p> | ||
| {error.name} | ||
| </p> | ||
| <!-- Start: Error Message container --> | ||
| {#if dev && error.stack} | ||
| <pre> {error.message} </pre> | ||
| {/if} | ||
| <!-- End: Error Message container --> | ||
| </div> | ||
| </div> | ||
| <!-- End: Error View Layout --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| <script lang="ts" context="module"> | ||
| import type { Load } from '@sveltejs/kit'; | ||
| export const load: Load = ({ page }) => { | ||
| const { params } = page; | ||
| if (!params.productId || Number.isNaN(params.productId) || Number(params.productId) > 5) { | ||
| return { | ||
| status: 404, | ||
| error: `Not product found with id ${params.productId}`, | ||
| }; | ||
| } | ||
| return { | ||
| props: { | ||
| productId: params.productId, | ||
| }, | ||
| status: 200, | ||
| }; | ||
| }; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import StatsCard from '$ui/components/cards/StatsCard.svelte'; | ||
| import { page } from '$app/stores'; | ||
| export let productId!: string; | ||
| </script> | ||
|
|
||
| <div class="w-full flex flex-col px-4 md:px-10 mx-auto"> | ||
| <div class="w-full py-4"> | ||
| <h1 class="font-semibold text-xl"> Sales of product {productId} </h1> | ||
| </div> | ||
| <div class="w-full flex flex-col lg:flex-row space-x-0 space-y-2 lg:space-x-2 lg:space-y-0"> | ||
| <div class="w-full lg:w-6/12"> | ||
| <StatsCard | ||
| statSubtitle="SALES" | ||
| statTitle="2,356" | ||
| statArrow="down" | ||
| statPercent="3.48" | ||
| statPercentColor="text-red-500" | ||
| statDescripiron="Since last week" | ||
| statIconName="fas fa-chart-pie" | ||
| statIconColor="bg-red-500" | ||
| /> | ||
| </div> | ||
| <div class="w-full lg:w-6/12"> | ||
| <StatsCard | ||
| statSubtitle="SALES" | ||
| statTitle="2,356" | ||
| statArrow="down" | ||
| statPercent="3.48" | ||
| statPercentColor="text-red-500" | ||
| statDescripiron="Since last week" | ||
| statIconName="fas fa-chart-pie" | ||
| statIconColor="bg-red-500" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="w-full"> | ||
| <ul | ||
| class="flex flex-row w-full min-w-full overflow-x-auto mb-0 list-none pt-3 pb-4 border-b-[1px] border-solid border-gray-100" | ||
| > | ||
| <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"> | ||
| <a | ||
| sveltekit:prefetch | ||
| href="{`/dashboard/sales/${productId}/overview`}" | ||
| class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes( | ||
| 'overview', | ||
| ) | ||
| ? 'font-semibold' | ||
| : 'font-normal'}" | ||
| > | ||
| Overview | ||
| </a> | ||
| </li> | ||
| <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"> | ||
| <a | ||
| sveltekit:prefetch | ||
| href="{`/dashboard/sales/${productId}/subscriptions`}" | ||
| class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes( | ||
| 'subscriptions', | ||
| ) | ||
| ? 'font-semibold' | ||
| : 'font-normal'}" | ||
| > | ||
| Subscriptions | ||
| </a> | ||
| </li> | ||
| <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"> | ||
| <a | ||
| sveltekit:prefetch | ||
| href="{`/dashboard/sales/${productId}/invoices`}" | ||
| class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes( | ||
| 'invoices', | ||
| ) | ||
| ? 'font-semibold' | ||
| : 'font-normal'}" | ||
| > | ||
| Invoices | ||
| </a> | ||
| </li> | ||
| <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"> | ||
| <a | ||
| sveltekit:prefetch | ||
| href="{`/dashboard/sales/${productId}/customers`}" | ||
| class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes( | ||
| 'customers', | ||
| ) | ||
| ? 'font-semibold' | ||
| : 'font-normal'}" | ||
| > | ||
| Customers | ||
| </a> | ||
| </li> | ||
| <li class="-mb-px mr-2 last:mr-0 flex-auto text-center"> | ||
| <a | ||
| sveltekit:prefetch | ||
| href="{`/dashboard/sales/${productId}/deposits`}" | ||
| class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes( | ||
| 'deposits', | ||
| ) | ||
| ? 'font-semibold' | ||
| : 'font-normal'}" | ||
| > | ||
| Deposits | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 py-6"> | ||
| <div class="py-5 flex-auto w-full"> | ||
| <div class="w-full"> | ||
| <slot /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
Empty file.
3 changes: 3 additions & 0 deletions
3
src/routes/dashboard/sales/[productId]/customers/__layout.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <div class="w-full"> | ||
| <h2> Customers </h2> | ||
| </div> |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <div class="w-full"> | ||
| <h2> Deposits </h2> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <script lang="ts" context="module"> | ||
| import type { Load } from '@sveltejs/kit'; | ||
| export const load: Load = ({ page }) => ({ | ||
| status: 302, | ||
| redirect: `/dashboard/sales/${page.params.productId}/overview`, | ||
| }); | ||
| </script> |
73 changes: 73 additions & 0 deletions
73
src/routes/dashboard/sales/[productId]/invoices/[invoice]/__error.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <style> | ||
| h1 { | ||
| font-size: 2.8em; | ||
| font-weight: 700; | ||
| margin: 0 0 0.5em 0; | ||
| } | ||
| @media (min-width: 480px) { | ||
| h1 { | ||
| font-size: 4em; | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <script lang="ts" context="module"> | ||
| import type { ErrorLoad } from '@sveltejs/kit'; | ||
| export const load: ErrorLoad = ({ error, status }) => ({ | ||
| props: { | ||
| title: `${status}: ${error?.message || ''}`, | ||
| status, | ||
| error, | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| // Start: Local Imports | ||
| // Models | ||
| import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface'; | ||
| // Components | ||
| import HeadTags from '$components/head-tags/HeadTags.svelte'; | ||
| // Start: Sevelte Imports | ||
| import { dev } from '$app/env'; | ||
| // End: Sevelte Imports | ||
| // End: Local Imports | ||
| // Start: Exported Properties | ||
| export let status: string; | ||
| export let error: Error; | ||
| // End: Exported Properties | ||
| const metaData: Partial<IMetaTagProperties> = { | ||
| title: `${status} | Sveltekit`, | ||
| description: '404 page of Sveltekit starter project', | ||
| }; | ||
| </script> | ||
|
|
||
| <!-- Start: Header Tage --> | ||
| <HeadTags metaData="{metaData}" /> | ||
| <!-- End: Header Tage --> | ||
|
|
||
| <!-- Start: Error View Layout --> | ||
| <div class="md:container md:mx-auto"> | ||
| <div class="flex flex-col justify-center items-center"> | ||
| <!-- Start: Error Status Code --> | ||
| <h1> | ||
| {status} | ||
| </h1> | ||
| <!-- End: Error Status Code --> | ||
| <p> | ||
| {error.name} | ||
| </p> | ||
| <!-- Start: Error Message container --> | ||
| {#if dev && error.stack} | ||
| <pre> {error.message} </pre> | ||
| {/if} | ||
| <!-- End: Error Message container --> | ||
| </div> | ||
| </div> | ||
| <!-- End: Error View Layout --> |
64 changes: 64 additions & 0 deletions
64
src/routes/dashboard/sales/[productId]/invoices/[invoice]/index.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <script lang="ts" context="module"> | ||
| import type { Load } from '@sveltejs/kit'; | ||
| export const load: Load = ({ page }) => { | ||
| const { params } = page; | ||
| if (!params.invoice || Number.isNaN(params.invoice) || Number(params.invoice) > 88888) { | ||
| return { | ||
| status: 404, | ||
| error: 'Not Invoice found with given id', | ||
| }; | ||
| } | ||
| return { | ||
| props: { | ||
| invoice: page.params.invoice, | ||
| }, | ||
| status: 200, | ||
| }; | ||
| }; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| export let invoice: number; | ||
| </script> | ||
|
|
||
| <div class="w-full flex flex-col p-6"> | ||
| <div class="w-full flex flex-col items-center justify-center"> | ||
| <div class="w-full"> | ||
| <span class="font-semibold"> Stankonia </span> | ||
| </div> | ||
| <div class="w-full"> | ||
| <span class="font-semibold text-3xl"> $8000 </span> | ||
| </div> | ||
| <div class="w-full flex flex-row"> | ||
| <span class="text-xs text-gray-400"> DUE TODAY </span> | ||
| <span class="text-xs text-gray-400 px-2"> INVOICED 10/31/2020 </span> | ||
| </div> | ||
| </div> | ||
| <div class="w-full flex flex-row text-xs my-2"> | ||
| <span> Invoice </span> | ||
| <span class="px-2"> | ||
| #{invoice} | ||
| </span> | ||
| </div> | ||
| <div class="w-full flex flex-col items-center justify-center mt-6"> | ||
| <div | ||
| class="w-full border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between" | ||
| > | ||
| <div> Pro Plan </div> | ||
| <div> $6000 </div> | ||
| </div> | ||
| <div | ||
| class="w-full border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between" | ||
| > | ||
| <div> Custom </div> | ||
| <div> $2000 </div> | ||
| </div> | ||
| <div | ||
| class="w-full border-b-[1px] border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between font-semibold" | ||
| > | ||
| <div> Net Total </div> | ||
| <div> $8000 </div> | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.
ee88468There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: