Browse Source

Added the products route to the sales route in the dashboard

main
Navneet Sharma 3 months ago
parent
commit
ee88468c96
  1. 73
      src/routes/dashboard/sales/[productId]/__error.svelte
  2. 136
      src/routes/dashboard/sales/[productId]/__layout.svelte
  3. 0
      src/routes/dashboard/sales/[productId]/customers/[customerId]/index.svelte
  4. 3
      src/routes/dashboard/sales/[productId]/customers/__layout.svelte
  5. 0
      src/routes/dashboard/sales/[productId]/customers/index.svelte
  6. 3
      src/routes/dashboard/sales/[productId]/deposits/index.svelte
  7. 8
      src/routes/dashboard/sales/[productId]/index.svelte
  8. 73
      src/routes/dashboard/sales/[productId]/invoices/[invoice]/__error.svelte
  9. 64
      src/routes/dashboard/sales/[productId]/invoices/[invoice]/index.svelte
  10. 73
      src/routes/dashboard/sales/[productId]/invoices/__error.svelte
  11. 168
      src/routes/dashboard/sales/[productId]/invoices/__layout.svelte
  12. 5
      src/routes/dashboard/sales/[productId]/invoices/index.svelte
  13. 9
      src/routes/dashboard/sales/[productId]/overview/index.svelte
  14. 0
      src/routes/dashboard/sales/[productId]/subscriptions/[subscriptionId]/index.svelte
  15. 3
      src/routes/dashboard/sales/[productId]/subscriptions/__layout.svelte
  16. 0
      src/routes/dashboard/sales/[productId]/subscriptions/index.svelte
  17. 3
      src/routes/dashboard/sales/__layout.svelte

73
src/routes/dashboard/sales/[productId]/__error.svelte

@ -0,0 +1,73 @@ @@ -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 -->

136
src/routes/dashboard/sales/[productId]/__layout.svelte

@ -0,0 +1,136 @@ @@ -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>

0
src/routes/dashboard/sales/[productId]/customers/[customerId]/index.svelte

3
src/routes/dashboard/sales/[productId]/customers/__layout.svelte

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
<div class="w-full">
<h2> Customers </h2>
</div>

0
src/routes/dashboard/sales/[productId]/customers/index.svelte

3
src/routes/dashboard/sales/[productId]/deposits/index.svelte

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
<div class="w-full">
<h2> Deposits </h2>
</div>

8
src/routes/dashboard/sales/[productId]/index.svelte

@ -0,0 +1,8 @@ @@ -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
src/routes/dashboard/sales/[productId]/invoices/[invoice]/__error.svelte

@ -0,0 +1,73 @@ @@ -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
src/routes/dashboard/sales/[productId]/invoices/[invoice]/index.svelte

@ -0,0 +1,64 @@ @@ -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>

73
src/routes/dashboard/sales/[productId]/invoices/__error.svelte

@ -0,0 +1,73 @@ @@ -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 -->

168
src/routes/dashboard/sales/[productId]/invoices/__layout.svelte

@ -0,0 +1,168 @@ @@ -0,0 +1,168 @@
<script lang="ts">
import { page } from '$app/stores';
type Invoice = {
id: number;
customer: string;
billingAddress: string;
shippingAddress: string;
year: number;
city: string;
total: number;
status: string;
};
const invoices: Invoice[] = [
{
id: 11111,
customer: 'John Doe',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
city: 'New York',
total: 100,
status: 'Paid',
year: 2019,
},
{
id: 22222,
customer: 'Jhon cena',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
city: 'San Francisco',
total: 200,
status: 'Overdue',
year: 2018,
},
{
id: 33333,
customer: 'Micheal Scott',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
city: 'Los Angeles',
total: 300,
status: 'Due Today',
year: 2017,
},
{
id: 44444,
customer: 'Jane Doe',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
city: 'New York',
total: 400,
status: 'Paid',
year: 2016,
},
{
id: 55555,
customer: 'John Doe',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
city: 'Las Vegas',
total: 500,
status: 'Paid',
year: 2015,
},
{
id: 66666,
customer: 'Jane Doe',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
city: 'New Jersey',
total: 600,
status: 'Paid',
year: 2014,
},
{
id: 77777,
customer: 'John Doe',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
total: 700,
city: 'New York',
status: 'Paid',
year: 2013,
},
{
id: 88888,
customer: 'Jane Doe',
billingAddress: '123 Main St',
shippingAddress: '123 Main St',
total: 800,
city: 'Chicago',
status: 'Paid',
year: 2012,
},
];
let invoiceId!: number;
const toggleInvoice = (invoice: Invoice): void => {
invoiceId = invoice.id;
};
</script>
<div class="w-full flex flex-col">
<div class="w-full flex flex-col md:flex-row justify-center items-center gap-2">
<div class="flex flex-col justify-center items-start md:items-start w-full md:w-28">
<div>
<span class="uppercase text-sm"> Overdue </span>
</div>
<div>
<p class="text-sm font-medium"> $10, 800 </p>
</div>
</div>
<div
class="w-full flex flex-col justify-center items-start md:items-center md:w-[calc(100%-14rem)]"
>
<div class="relative py-2 w-full justify-center items-center">
<div class="overflow-hidden h-2 text-xs flex rounded bg-green-300">
<div
class="w-[35%] shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-300"
></div>
</div>
</div>
</div>
<div class="flex flex-col justify-center items-start md:items-end w-full md:w-28">
<div>
<span class="uppercase text-sm"> Due soon </span>
</div>
<div>
<p class="text-sm font-medium"> $10, 800 </p>
</div>
</div>
</div>
<div class="w-full flex flex-col py-4">
<div class="w-full py-4">
<h4 class="uppercase text-sm"> Invoice List </h4>
</div>
<div
class="w-full rounded-lg shadow-md border-[1px] border-solid border-gray-100 flex flex-col md:flex-row divide-x-0 divide-y md:divide-x md:divide-y-0"
>
<div class="flex flex-col w-full md:w-1/2 max-h-[30rem] overflow-x-auto">
{#each invoices as invoice, index (invoice.id)}
<a
sveltekit:prefetch
href="{`/dashboard/sales/${$page.params.productId}/invoices/${invoice.id}`}"
class="w-full flex flex-row justify-between p-5 hover:bg-gray-100 {$page
.params.invoice === `${invoice.id}`
? 'bg-gray-100'
: ''} transition-all duration-200 ease-in-out"
on:click="{() => toggleInvoice(invoice)}"
>
<div class="flex flex-col items-start">
<h5 class="font-semibold"> {invoice.city} </h5>
<p class="text-xs text-gray-400"> {invoice.year} </p>
</div>
<div class="flex flex-col items-end">
<h5 class="font-semibold"> ${invoice.total} </h5>
<p class="text-xs text-red-500"> {invoice.status} </p>
</div>
</a>
{/each}
</div>
<div class="flex flex-col w-full md:w-1/2">
<slot />
</div>
</div>
</div>
</div>

5
src/routes/dashboard/sales/[productId]/invoices/index.svelte

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
<div class="w-full flex flex-col">
<div class="w-full flex flex-col items-center justify-center">
<h5> Graph </h5>
</div>
</div>

9
src/routes/dashboard/sales/[productId]/overview/index.svelte

@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
<script lang="ts">
import SalesOrderTable from '$components/tables/SalesOrderTable.svelte';
</script>
<div class="w-full flex flex-col space-y-4">
<div class="w-full">
<SalesOrderTable />
</div>
</div>

0
src/routes/dashboard/sales/[productId]/subscriptions/[subscriptionId]/index.svelte

3
src/routes/dashboard/sales/[productId]/subscriptions/__layout.svelte

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
<div class="w-full">
<h2> Subscriptions </h2>
</div>

0
src/routes/dashboard/sales/[productId]/subscriptions/index.svelte

3
src/routes/dashboard/sales/__layout.svelte

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
<div class="w-full">
<slot />
</div>
Loading…
Cancel
Save