-
Notifications
You must be signed in to change notification settings - Fork 0
/
dashboard.html
138 lines (109 loc) · 7.09 KB
/
dashboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retail Record - Dashboard</title>
<!-- stylesheet and script files -->
<link rel="stylesheet" href="/dist/style.css">
<script defer src="/dist/dashboard.js"></script>
<!-- supabase -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<!-- favicon img -->
<link rel="shortcut icon" href="/images/favicon-rr.png" type="image/x-icon">
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
<!-- toastify -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
</head>
<body class="px-5 lg:px-10 xl:px-20 overflow-x-hidden">
<div class="hasFade overlay fixed bg-zinc-900 z-10"></div>
<!-- ! MODAL -->
<div id="addCatModal" class="hasFade modal px-5 bg-white rounded fixed z-40 mx-auto inset-x-0 pt-2 pb-4 ">
<div class="header">
<p class="text-lg font-semibold">Add a new category</p>
</div>
<form action="#" class="addCatForm mt-5 flex flex-col gap-y-3">
<input id="name" name="name" required minlength="3" type="text" class="input p-2" placeholder="Category Name, e.g: Biscuits *">
<input id="total" name="total" type="tel" class="input p-2" placeholder="Total Sales Amount ₦ (if applicable)">
<div class="btnCtn flex items-center justify-between mt-5">
<button onclick="closeModal()" class="w-[45%] h-[50px] button border border-slate-500 bg-white text-black hover:opacity-70" type="button">Cancel</button>
<button id="addCatBtn" class="button w-[45%] h-[50px] hover:opacity-70" type="submit">Add</button>
</div>
</form>
</div>
<!-- ! NAVBAR -->
<nav class="pt-3 flex items-center justify-between relative">
<i id="navToggler" class="bi bi-filter-left bg-slate-100 text-xl rounded-full px-3 py-2 transition-all hover:bg-slate-200 lg:cursor-pointer" title="Menu"></i>
<div class="profile">
<div class="imgCtn w-10 h-10 rounded-full">
<p id="profilePic" class="font-semibold transition-all text-white bg-[hsl(216,93%,44%)] rounded-full text-center py-2 hover:bg-[hsl(216,93%,34%)] cursor-pointer"><span class="invisible">K</span></p>
</div>
</div>
<ul class="nav absolute bg-white rounded flex flex-col top-16 z-10" style="left: -100%;">
<li onclick="logOut()" class="cursor-pointer hover:bg-slate-100 px-4 py-2"><i class="bi bi-power mr-2 text-lg"></i>Log Out</li>
<li class="cursor-pointer disabled hover:bg-slate-100 px-4 py-2"><a href="/profile" class="hover:opacity-100"><i class="bi bi-person mr-2 text-lg"></i>Profile</a></li>
</ul>
</nav>
<section class="dashboard font-medium lg:mt-12 mt-8 flex flex-wrap items-center justify-between">
<div class="dashboard__welcomeMsg">
<p class="text-slate-600 ">Welcome back</p>
<div id="loadName" class="loading-state text-object w-[150px]"></div>
</div>
<div id="loadingDashboard" class="bg-white border w-[270px] h-[104px] flex flex-col gap-y-4 border-slate-300 rounded lg:px-10 px-5 py-3 mt-5 lg:mt-0">
<div class="text-object2 loading-state"></div>
<div class="text-object loading-state"></div>
<div class="text-object2 loading-state"></div>
</div>
<!-- <div class="dashboard__salesSummary bg-blue text-white rounded lg:px-10 px-5 py-3 mt-5 lg:mt-0 shadow-md">
<p class="text-xl font-medium">Total Sales</p>
<p class="text-slate-300">As of 13th Febuary 2023</p>
<p class="totalSales text-lg"><span class="text-sm">₦</span>500,000</p>
</div> -->
</section>
<hr class="mt-3">
<section class="categories mt-5">
<div class="header flex items-center justify-between">
<p class="text-xl font-medium">Goods Categories</p>
<div onclick="openModal()" class="add underline cursor-pointer">
<p class="text-blue transition-all hover:opacity-80">Add Category</p>
</div>
</div>
<div class="categories__ctn mt-7 lg:mt-9 gap-6 mb-5">
<div class="category loadindCategory bg-white border border-slate-300 text-white px-5 rounded py-4 relative">
<div class="text-object loading-state"></div>
<div class="text-object2 loading-state mt-5"></div>
<div class="img-object absolute right-5 loading-state rounded-full top-[30%]"></div>
<div title="Delete Category" class="absolute top-[-.5rem] img-object2 loading-state rounded-full right-[-.4rem]"></div>
</div>
<div class="category loadindCategory bg-white border border-slate-300 text-white px-5 rounded py-4 relative">
<div class="text-object loading-state"></div>
<div class="text-object2 loading-state mt-5"></div>
<div class="img-object absolute right-5 loading-state rounded-full top-[30%]"></div>
<div title="Delete Category" class="absolute top-[-.5rem] img-object2 loading-state rounded-full right-[-.4rem]"></div>
</div>
<div class="category loadindCategory bg-white border border-slate-300 text-white px-5 rounded py-4 relative">
<div class="text-object loading-state"></div>
<div class="text-object2 loading-state mt-5"></div>
<div class="img-object absolute right-5 loading-state rounded-full top-[30%]"></div>
<div title="Delete Category" class="absolute top-[-.5rem] img-object2 loading-state rounded-full right-[-.4rem]"></div>
</div>
<!-- <div class="category bg-blue text-white px-5 rounded py-4 relative shadow-md">
<p class="category__name text-lg font-medium underline">Biscuits</p>
<div class="totalCtn flex items-center gap-x-1 pt-3">
<p>Total :</p>
<p class="thisSales"><span class="text-sm">₦</span>3,500</p>
</div>
<i title="Add Record" class="bi bi-plus-lg absolute right-5 text-black bg-white rounded-full px-2 py-1 text-xl top-[30%] transition-all hover:bg-slate-200 cursor-pointer"></i>
<i title="Delete Category" class="bi bi-x-circle-fill absolute top-[-.5rem] text-white rounded-full px-1 bg-opacity-40 bg-black right-[-.4rem] transition-all hover:bg-opacity-60 cursor-pointer"></i>
</div> -->
</div>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</html>