Skip to content

Commit ee88468

Browse files
navneetsharmauinavneetsharmaui
committed
Added the products route to the sales route in the dashboard
1 parent 6fef6e5 commit ee88468

File tree

17 files changed

+621
-0
lines changed

17 files changed

+621
-0
lines changed

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<style>
2+
h1 {
3+
font-size: 2.8em;
4+
font-weight: 700;
5+
margin: 0 0 0.5em 0;
6+
}
7+
@media (min-width: 480px) {
8+
h1 {
9+
font-size: 4em;
10+
}
11+
}
12+
</style>
13+
14+
<script lang="ts" context="module">
15+
import type { ErrorLoad } from '@sveltejs/kit';
16+
17+
export const load: ErrorLoad = ({ error, status }) => ({
18+
props: {
19+
title: `${status}: ${error?.message || ''}`,
20+
status,
21+
error,
22+
},
23+
});
24+
</script>
25+
26+
<script lang="ts">
27+
// Start: Local Imports
28+
// Models
29+
import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface';
30+
31+
// Components
32+
import HeadTags from '$components/head-tags/HeadTags.svelte';
33+
34+
// Start: Sevelte Imports
35+
import { dev } from '$app/env';
36+
// End: Sevelte Imports
37+
38+
// End: Local Imports
39+
// Start: Exported Properties
40+
export let status: string;
41+
42+
export let error: Error;
43+
// End: Exported Properties
44+
45+
const metaData: Partial<IMetaTagProperties> = {
46+
title: `${status} | Sveltekit`,
47+
description: '404 page of Sveltekit starter project',
48+
};
49+
</script>
50+
51+
<!-- Start: Header Tage -->
52+
<HeadTags metaData="{metaData}" />
53+
<!-- End: Header Tage -->
54+
55+
<!-- Start: Error View Layout -->
56+
<div class="md:container md:mx-auto">
57+
<div class="flex flex-col justify-center items-center">
58+
<!-- Start: Error Status Code -->
59+
<h1>
60+
{status}
61+
</h1>
62+
<!-- End: Error Status Code -->
63+
<p>
64+
{error.name}
65+
</p>
66+
<!-- Start: Error Message container -->
67+
{#if dev && error.stack}
68+
<pre> {error.message} </pre>
69+
{/if}
70+
<!-- End: Error Message container -->
71+
</div>
72+
</div>
73+
<!-- End: Error View Layout -->

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<script lang="ts" context="module">
2+
import type { Load } from '@sveltejs/kit';
3+
4+
export const load: Load = ({ page }) => {
5+
const { params } = page;
6+
if (!params.productId || Number.isNaN(params.productId) || Number(params.productId) > 5) {
7+
return {
8+
status: 404,
9+
error: `Not product found with id ${params.productId}`,
10+
};
11+
}
12+
return {
13+
props: {
14+
productId: params.productId,
15+
},
16+
status: 200,
17+
};
18+
};
19+
</script>
20+
21+
<script lang="ts">
22+
import StatsCard from '$ui/components/cards/StatsCard.svelte';
23+
import { page } from '$app/stores';
24+
25+
export let productId!: string;
26+
</script>
27+
28+
<div class="w-full flex flex-col px-4 md:px-10 mx-auto">
29+
<div class="w-full py-4">
30+
<h1 class="font-semibold text-xl"> Sales of product {productId} </h1>
31+
</div>
32+
<div class="w-full flex flex-col lg:flex-row space-x-0 space-y-2 lg:space-x-2 lg:space-y-0">
33+
<div class="w-full lg:w-6/12">
34+
<StatsCard
35+
statSubtitle="SALES"
36+
statTitle="2,356"
37+
statArrow="down"
38+
statPercent="3.48"
39+
statPercentColor="text-red-500"
40+
statDescripiron="Since last week"
41+
statIconName="fas fa-chart-pie"
42+
statIconColor="bg-red-500"
43+
/>
44+
</div>
45+
<div class="w-full lg:w-6/12">
46+
<StatsCard
47+
statSubtitle="SALES"
48+
statTitle="2,356"
49+
statArrow="down"
50+
statPercent="3.48"
51+
statPercentColor="text-red-500"
52+
statDescripiron="Since last week"
53+
statIconName="fas fa-chart-pie"
54+
statIconColor="bg-red-500"
55+
/>
56+
</div>
57+
</div>
58+
<div class="w-full">
59+
<ul
60+
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"
61+
>
62+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
63+
<a
64+
sveltekit:prefetch
65+
href="{`/dashboard/sales/${productId}/overview`}"
66+
class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
67+
'overview',
68+
)
69+
? 'font-semibold'
70+
: 'font-normal'}"
71+
>
72+
Overview
73+
</a>
74+
</li>
75+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
76+
<a
77+
sveltekit:prefetch
78+
href="{`/dashboard/sales/${productId}/subscriptions`}"
79+
class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
80+
'subscriptions',
81+
)
82+
? 'font-semibold'
83+
: 'font-normal'}"
84+
>
85+
Subscriptions
86+
</a>
87+
</li>
88+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
89+
<a
90+
sveltekit:prefetch
91+
href="{`/dashboard/sales/${productId}/invoices`}"
92+
class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
93+
'invoices',
94+
)
95+
? 'font-semibold'
96+
: 'font-normal'}"
97+
>
98+
Invoices
99+
</a>
100+
</li>
101+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
102+
<a
103+
sveltekit:prefetch
104+
href="{`/dashboard/sales/${productId}/customers`}"
105+
class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
106+
'customers',
107+
)
108+
? 'font-semibold'
109+
: 'font-normal'}"
110+
>
111+
Customers
112+
</a>
113+
</li>
114+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
115+
<a
116+
sveltekit:prefetch
117+
href="{`/dashboard/sales/${productId}/deposits`}"
118+
class="text-sm transition-all uppercase px-5 py-3 block leading-normal {$page.path.includes(
119+
'deposits',
120+
)
121+
? 'font-semibold'
122+
: 'font-normal'}"
123+
>
124+
Deposits
125+
</a>
126+
</li>
127+
</ul>
128+
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 py-6">
129+
<div class="py-5 flex-auto w-full">
130+
<div class="w-full">
131+
<slot />
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</div>

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

Whitespace-only changes.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="w-full">
2+
<h2> Customers </h2>
3+
</div>

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

Whitespace-only changes.

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="w-full">
2+
<h2> Deposits </h2>
3+
</div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts" context="module">
2+
import type { Load } from '@sveltejs/kit';
3+
4+
export const load: Load = ({ page }) => ({
5+
status: 302,
6+
redirect: `/dashboard/sales/${page.params.productId}/overview`,
7+
});
8+
</script>

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<style>
2+
h1 {
3+
font-size: 2.8em;
4+
font-weight: 700;
5+
margin: 0 0 0.5em 0;
6+
}
7+
@media (min-width: 480px) {
8+
h1 {
9+
font-size: 4em;
10+
}
11+
}
12+
</style>
13+
14+
<script lang="ts" context="module">
15+
import type { ErrorLoad } from '@sveltejs/kit';
16+
17+
export const load: ErrorLoad = ({ error, status }) => ({
18+
props: {
19+
title: `${status}: ${error?.message || ''}`,
20+
status,
21+
error,
22+
},
23+
});
24+
</script>
25+
26+
<script lang="ts">
27+
// Start: Local Imports
28+
// Models
29+
import type { IMetaTagProperties } from '$models/interfaces/imeta-tag-properties.interface';
30+
31+
// Components
32+
import HeadTags from '$components/head-tags/HeadTags.svelte';
33+
34+
// Start: Sevelte Imports
35+
import { dev } from '$app/env';
36+
// End: Sevelte Imports
37+
38+
// End: Local Imports
39+
// Start: Exported Properties
40+
export let status: string;
41+
42+
export let error: Error;
43+
// End: Exported Properties
44+
45+
const metaData: Partial<IMetaTagProperties> = {
46+
title: `${status} | Sveltekit`,
47+
description: '404 page of Sveltekit starter project',
48+
};
49+
</script>
50+
51+
<!-- Start: Header Tage -->
52+
<HeadTags metaData="{metaData}" />
53+
<!-- End: Header Tage -->
54+
55+
<!-- Start: Error View Layout -->
56+
<div class="md:container md:mx-auto">
57+
<div class="flex flex-col justify-center items-center">
58+
<!-- Start: Error Status Code -->
59+
<h1>
60+
{status}
61+
</h1>
62+
<!-- End: Error Status Code -->
63+
<p>
64+
{error.name}
65+
</p>
66+
<!-- Start: Error Message container -->
67+
{#if dev && error.stack}
68+
<pre> {error.message} </pre>
69+
{/if}
70+
<!-- End: Error Message container -->
71+
</div>
72+
</div>
73+
<!-- End: Error View Layout -->

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script lang="ts" context="module">
2+
import type { Load } from '@sveltejs/kit';
3+
4+
export const load: Load = ({ page }) => {
5+
const { params } = page;
6+
if (!params.invoice || Number.isNaN(params.invoice) || Number(params.invoice) > 88888) {
7+
return {
8+
status: 404,
9+
error: 'Not Invoice found with given id',
10+
};
11+
}
12+
return {
13+
props: {
14+
invoice: page.params.invoice,
15+
},
16+
status: 200,
17+
};
18+
};
19+
</script>
20+
21+
<script lang="ts">
22+
export let invoice: number;
23+
</script>
24+
25+
<div class="w-full flex flex-col p-6">
26+
<div class="w-full flex flex-col items-center justify-center">
27+
<div class="w-full">
28+
<span class="font-semibold"> Stankonia </span>
29+
</div>
30+
<div class="w-full">
31+
<span class="font-semibold text-3xl"> $8000 </span>
32+
</div>
33+
<div class="w-full flex flex-row">
34+
<span class="text-xs text-gray-400"> DUE TODAY </span>
35+
<span class="text-xs text-gray-400 px-2"> INVOICED 10/31/2020 </span>
36+
</div>
37+
</div>
38+
<div class="w-full flex flex-row text-xs my-2">
39+
<span> Invoice </span>
40+
<span class="px-2">
41+
#{invoice}
42+
</span>
43+
</div>
44+
<div class="w-full flex flex-col items-center justify-center mt-6">
45+
<div
46+
class="w-full border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between"
47+
>
48+
<div> Pro Plan </div>
49+
<div> $6000 </div>
50+
</div>
51+
<div
52+
class="w-full border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between"
53+
>
54+
<div> Custom </div>
55+
<div> $2000 </div>
56+
</div>
57+
<div
58+
class="w-full border-b-[1px] border-t-[1px] border-solid border-gray-200 py-4 flex flex-row justify-between font-semibold"
59+
>
60+
<div> Net Total </div>
61+
<div> $8000 </div>
62+
</div>
63+
</div>
64+
</div>

0 commit comments

Comments
 (0)