SidharthPL/Canteen-Management-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vendor Dashboard and Store dashboard added

Browse Source
This commit is contained in:
Sidharth Prabhu
2026-04-09 15:35:42 +05:30
parent dd3e811cdf
commit 4dc0b37bad
9 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
backend/mvnw vendored Normal file → Executable file
View File

23
backend/src/main/java/com/rit/canteen/sales/service/SystemUserService.java
View File

@@ -4,6 +4,7 @@ import com.rit.canteen.sales.model.SystemUser;
import com.rit.canteen.sales.repository.SystemUserRepository;
import jakarta.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
@@ -19,6 +20,12 @@ public class SystemUserService {
@Autowired
private BCryptPasswordEncoder passwordEncoder;
@Value("${app.master.username:admin}")
private String masterUsername;
@Value("${app.master.password:admin}")
private String masterPassword;
@PostConstruct
public void init() {
// Handle migration from old credentials if they exist
@@ -28,31 +35,31 @@ public class SystemUserService {
repository.delete(oldUser);
System.out.println(">>> REMOVED OBSOLETE MASTER USER: admin@ritcanteen.com");
} else {
oldUser.setEmail("admin");
oldUser.setPassword(passwordEncoder.encode("admin"));
oldUser.setEmail(masterUsername);
oldUser.setPassword(passwordEncoder.encode(masterPassword));
repository.save(oldUser);
System.out.println(">>> MIGRATED MASTER USER: admin / admin");
}
});
// Ensure 'admin' user exists and has the correct password
Optional<SystemUser> adminUser = repository.findByEmail("admin");
Optional<SystemUser> adminUser = repository.findByEmail(masterUsername);
if (adminUser.isPresent()) {
SystemUser admin = adminUser.get();
admin.setPassword(passwordEncoder.encode("admin"));
admin.setPassword(passwordEncoder.encode(masterPassword));
admin.setRole("MASTER");
repository.save(admin);
System.out.println(">>> UPDATED MASTER USER PASSWORD: admin / admin");
System.out.println(">>> UPDATED MASTER USER PASSWORD: " + masterUsername + " / " + masterPassword);
} else {
SystemUser master = new SystemUser();
master.setName("Admin Master");
master.setEmail("admin");
master.setPassword(passwordEncoder.encode("admin"));
master.setEmail(masterUsername);
master.setPassword(passwordEncoder.encode(masterPassword));
master.setRole("MASTER");
master.setPermissions(List.of("dashboard", "sale", "customers", "purchases", "inventory", "expense", "reports", "stores", "table", "wallet", "promotions", "feedback"));
master.setViewOnly(false);
repository.save(master);
System.out.println(">>> SEEDED MASTER USER: admin / admin");
System.out.println(">>> SEEDED MASTER USER: " + masterUsername + " / " + masterPassword);
}
}

8
backend/src/main/resources/application.properties
View File

@@ -1,11 +1,15 @@
spring.application.name=backend
server.address=0.0.0.0
spring.datasource.url=jdbc:postgresql://localhost:5432/canteen_automation
spring.datasource.url=jdbc:postgresql://localhost:5432/positeasy
spring.datasource.username=postgres
spring.datasource.password=Abiram@07
spring.datasource.password=sidharth
spring.datasource.driver-class-name=org.postgresql.Driver
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
# Master Account Credentials
app.master.username=admin
app.master.password=admin

6
frontend/src/components/Sidebar.tsx
View File

@@ -198,7 +198,7 @@ const Sidebar = () => {
className={cn(
"w-full flex items-center justify-between p-2.5 rounded-xl text-sm font-semibold transition-all duration-200 group",
openMenus.includes(item.title)
? "text-[#521c4b] bg-[#521c4b]/5"
? "text-[#0f4475] bg-[#0f4475]/5"
: "text-[#475569] hover:bg-gray-50 hover:text-[#1e293b]"
)}
>
@@ -234,7 +234,7 @@ const Sidebar = () => {
className={({ isActive }) => cn(
"flex items-center gap-3 py-2 px-4 rounded-lg text-[13px] font-medium transition-all group relative",
isActive
? "text-white bg-[#521c4b] shadow-md shadow-[#521c4b]/10"
? "text-white bg-[#0f4475] shadow-md shadow-[#0f4475]/10"
: "text-[#64748b] hover:text-[#1e293b] hover:translate-x-1"
)}
>
@@ -267,7 +267,7 @@ const Sidebar = () => {
className={({ isActive }) => cn(
"flex items-center gap-3 p-2.5 rounded-xl text-sm font-semibold transition-all duration-200 group",
isActive
? "bg-[#521c4b] text-white shadow-lg shadow-[#521c4b]/15"
? "bg-[#0f4475] text-white shadow-lg shadow-[#0f4475]/15"
: "text-[#475569] hover:bg-gray-50 hover:text-[#1e293b]"
)}
>

30
frontend/src/pages/Dashboard.tsx
View File

@@ -50,7 +50,7 @@ const Dashboard = () => {
<motion.div
animate={{ scale: [1, 1.1, 1], opacity: [0.5, 1, 0.5] }}
transition={{ repeat: Infinity, duration: 1.5 }}
className="text-[#521c4b] font-black uppercase tracking-widest text-sm"
className="text-[#0f4475] font-black uppercase tracking-widest text-sm"
>
Loading Business Intelligence...
</motion.div>
@@ -74,7 +74,7 @@ const Dashboard = () => {
<button title="Navigate back to previous section" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
<ArrowRight className="rotate-180 text-slate-400" size={18} />
</button>
<h2 className="text-xs font-black text-[#521c4b] uppercase tracking-widest">Dashboard</h2>
<h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Dashboard</h2>
</div>
<h1 className="text-2xl font-black text-slate-800">Good morning</h1>
<p className="text-[10px] text-slate-400 font-medium flex items-center gap-1.5">
@@ -85,7 +85,7 @@ const Dashboard = () => {
<div className="flex items-center gap-3">
<div className="relative group">
<select title="Filter by store type or category" className="appearance-none bg-white border border-slate-200 rounded-xl px-4 py-2 pr-10 text-xs font-bold text-slate-600 outline-none focus:border-[#521c4b] transition-all cursor-pointer shadow-sm">
<select title="Filter by store type or category" className="appearance-none bg-white border border-slate-200 rounded-xl px-4 py-2 pr-10 text-xs font-bold text-slate-600 outline-none focus:border-[#0f4475] transition-all cursor-pointer shadow-sm">
<option>Store Type: All</option>
</select>
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
@@ -105,11 +105,11 @@ const Dashboard = () => {
key={tab}
title={`View ${tab} analysis and trends`}
onClick={() => setActiveTab(tab)}
className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#521c4b]' : 'text-slate-400 hover:text-slate-600'}`}
className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#0f4475]' : 'text-slate-400 hover:text-slate-600'}`}
>
{tab}
{activeTab === tab && (
<motion.div layoutId="tabLineMain" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#521c4b]" />
<motion.div layoutId="tabLineMain" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0f4475]" />
)}
</button>
))}
@@ -117,7 +117,7 @@ const Dashboard = () => {
<div className="flex items-center justify-end mb-4 gap-4">
<div className="flex items-center gap-2">
<div className="w-2.5 h-2.5 rounded-full border-2 border-[#521c4b]/30 bg-[#521c4b]/10" />
<div className="w-2.5 h-2.5 rounded-full border-2 border-[#0f4475]/30 bg-[#0f4475]/10" />
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Today's Revenue</span>
</div>
</div>
@@ -194,7 +194,7 @@ const Dashboard = () => {
key={range}
title={`Analyze data from ${range.toLowerCase()}`}
onClick={() => setTimeRange(range)}
className={`whitespace-nowrap px-3 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${timeRange === range ? 'text-white bg-[#521c4b] shadow-md shadow-[#521c4b]/20' : 'text-slate-400 hover:text-slate-600'}`}
className={`whitespace-nowrap px-3 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${timeRange === range ? 'text-white bg-[#0f4475] shadow-md shadow-[#0f4475]/20' : 'text-slate-400 hover:text-slate-600'}`}
>
{range}
</button>
@@ -202,7 +202,7 @@ const Dashboard = () => {
</div>
{/* Total Orders Card */}
<div title="View detailed order volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group hover:border-[#521c4b]/30 transition-all cursor-pointer">
<div title="View detailed order volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group hover:border-[#0f4475]/30 transition-all cursor-pointer">
<div className="flex items-center gap-3">
<div className="p-2 bg-amber-50 text-amber-500 rounded-xl group-hover:scale-110 transition-transform">
<ShoppingBag size={20} />
@@ -216,9 +216,9 @@ const Dashboard = () => {
</div>
{/* Expenses Card */}
<div title="Track operational expenditures and overhead" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group hover:border-[#521c4b]/30 transition-all cursor-pointer">
<div title="Track operational expenditures and overhead" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[130px] flex flex-col justify-between group hover:border-[#0f4475]/30 transition-all cursor-pointer">
<div className="flex items-center gap-3">
<div className="p-2 bg-slate-50 text-[#521c4b] rounded-xl shadow-sm group-hover:bg-[#521c4b]/10 transition-colors">
<div className="p-2 bg-slate-50 text-[#0f4475] rounded-xl shadow-sm group-hover:bg-[#0f4475]/10 transition-colors">
<Wallet size={20} />
</div>
<h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Expenses</h4>
@@ -249,7 +249,7 @@ const Dashboard = () => {
))}
</div>
<div className="mt-8">
<button title="Refresh and sync comprehensive business insights" className="w-full py-3 border border-dashed border-slate-200 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest hover:border-[#521c4b]/30 hover:text-[#521c4b] transition-all">
<button title="Refresh and sync comprehensive business insights" className="w-full py-3 border border-dashed border-slate-200 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest hover:border-[#0f4475]/30 hover:text-[#0f4475] transition-all">
Generate More Insights
</button>
</div>
@@ -259,15 +259,15 @@ const Dashboard = () => {
<div className="col-span-12 lg:col-span-7 bg-white rounded-[32px] border border-slate-100 shadow-sm p-8">
<div className="flex items-center justify-between mb-8">
<h3 className="text-sm font-black text-slate-800 tracking-tight uppercase tracking-widest">Store Performance</h3>
<button title="View detailed metrics for all geographic locations" className="text-[10px] font-black text-[#521c4b] uppercase tracking-widest hover:underline">View All Locations</button>
<button title="View detailed metrics for all geographic locations" className="text-[10px] font-black text-[#0f4475] uppercase tracking-widest hover:underline">View All Locations</button>
</div>
<div className="space-y-6">
{(storeOverview.length > 0 ? storeOverview : [{name: 'No active sales currently', sale: 0, orders: 0, taxes: 0, purchase: 0}]).map((store: any, idx: number) => (
<div key={idx} className="p-6 rounded-[28px] border border-slate-50 bg-slate-50/30 group hover:bg-white hover:shadow-lg hover:border-transparent transition-all border-l-4 border-l-[#521c4b]/30">
<div key={idx} className="p-6 rounded-[28px] border border-slate-50 bg-slate-50/30 group hover:bg-white hover:shadow-lg hover:border-transparent transition-all border-l-4 border-l-[#0f4475]/30">
<p className="text-xs font-black text-slate-800 mb-6 uppercase tracking-widest flex items-center justify-between">
{store.name}
<ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#521c4b]" />
<ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#0f4475]" />
</p>
<div className="grid grid-cols-4 gap-4">
<div className="space-y-1.5">
@@ -292,7 +292,7 @@ const Dashboard = () => {
</div>
<div className="mt-10 flex justify-center">
<button title="Execute a granular comparison across different store cohorts" className="flex items-center gap-3 px-8 py-3 bg-[#521c4b] text-white text-[11px] font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-[#521c4b]/20 hover:scale-105 transition-all group">
<button title="Execute a granular comparison across different store cohorts" className="flex items-center gap-3 px-8 py-3 bg-[#0f4475] text-white text-[11px] font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-[#0f4475]/20 hover:scale-105 transition-all group">
Detailed Comparison
<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
</button>

4
frontend/src/pages/Login.tsx
View File

@@ -18,8 +18,8 @@ import buildingPhoto from '../assets/ritchennai.webp';
const Login = () => {
const [role, setRole] = useState<'manager' | 'master'>('manager');
const [showPassword, setShowPassword] = useState(false);
const [username, setUsername] = useState('admin');
const [password, setPassword] = useState('admin');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();
// Ensure any previous session is completely wiped out when arriving at the login screen

16
frontend/src/pages/PurchaseAnalytics.tsx
View File

@@ -169,7 +169,7 @@ const PurchaseAnalytics = () => {
if (isLoading) {
return (
<div className="h-full flex flex-col items-center justify-center gap-4">
<Loader2 className="animate-spin text-[#521c4b]" size={40} />
<Loader2 className="animate-spin text-[#0f4475]" size={40} />
<p className="text-sm font-bold text-slate-500 uppercase tracking-widest">Calculating Market Analytics...</p>
</div>
);
@@ -180,12 +180,12 @@ const PurchaseAnalytics = () => {
{/* Header */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<h1 className="text-2xl font-black text-[#521c4b] tracking-tight uppercase">Purchase Analytics</h1>
<h1 className="text-2xl font-black text-[#0f4475] tracking-tight uppercase">Purchase Analytics</h1>
<div className="flex items-center gap-2 mt-1">
<span className="bg-[#521c4b]/10 text-[#521c4b] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
<span className="bg-[#0f4475]/10 text-[#0f4475] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
Start: {format(dateRange.start, 'yyyy-MM-dd')}
</span>
<span className="bg-[#521c4b]/10 text-[#521c4b] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
<span className="bg-[#0f4475]/10 text-[#0f4475] text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
End: {format(dateRange.end, 'yyyy-MM-dd')}
</span>
</div>
@@ -193,7 +193,7 @@ const PurchaseAnalytics = () => {
<div className="flex items-center gap-3">
<button
onClick={() => setFilterType('all')}
className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all ${filterType === 'all' ? 'bg-[#521c4b] text-white shadow-lg' : 'bg-white border text-slate-500 border-slate-200 hover:bg-slate-50'}`}
className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all ${filterType === 'all' ? 'bg-[#0f4475] text-white shadow-lg' : 'bg-white border text-slate-500 border-slate-200 hover:bg-slate-50'}`}
>
Show All
</button>
@@ -230,7 +230,7 @@ const PurchaseAnalytics = () => {
<input
type="text"
placeholder="Search products..."
className="pl-9 pr-4 py-2 border border-[#e2e8f0] rounded-xl text-xs outline-none focus:border-[#521c4b]/30 transition-all font-medium"
className="pl-9 pr-4 py-2 border border-[#e2e8f0] rounded-xl text-xs outline-none focus:border-[#0f4475]/30 transition-all font-medium"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
@@ -253,7 +253,7 @@ const PurchaseAnalytics = () => {
) : (
filteredAnalytics.map((item, idx) => (
<tr key={idx} className="hover:bg-gray-50/50 transition-colors group">
<td className="px-6 py-4"><p className="text-xs font-bold text-[#1e293b] group-hover:text-[#521c4b]">{item.product}</p></td>
<td className="px-6 py-4"><p className="text-xs font-bold text-[#1e293b] group-hover:text-[#0f4475]">{item.product}</p></td>
<td className="px-6 py-4 text-xs font-bold text-[#475569]">{item.qty}</td>
<td className="px-6 py-4 text-xs font-bold text-[#475569] text-right">₹{item.basePrice.toFixed(2)}</td>
<td className="px-6 py-4 text-right">
@@ -285,7 +285,7 @@ const PurchaseAnalytics = () => {
<div className="grid grid-cols-2 gap-4">
<button
onClick={() => setFilterType('up')}
className={`p-4 rounded-2xl flex flex-col items-center justify-center gap-2 transition-all cursor-pointer hover:border-[#521c4b]/50 border-2 ${filterType === 'up' ? 'bg-[#521c4b] text-white border-[#521c4b]' : 'bg-gray-50 text-slate-400 border-transparent hover:bg-slate-100'}`}
className={`p-4 rounded-2xl flex flex-col items-center justify-center gap-2 transition-all cursor-pointer hover:border-[#0f4475]/50 border-2 ${filterType === 'up' ? 'bg-[#0f4475] text-white border-[#0f4475]' : 'bg-gray-50 text-slate-400 border-transparent hover:bg-slate-100'}`}
>
<TrendingUp size={20} />
<span className="text-[10px] font-bold uppercase tracking-wider">Inflation</span>

12
frontend/src/pages/PurchaseSummary.tsx
View File

@@ -53,7 +53,7 @@ const PurchaseSummary = () => {
<motion.div
animate={{ scale: [1, 1.05, 1] }}
transition={{ repeat: Infinity, duration: 2 }}
className="text-[#521c4b] font-black uppercase tracking-widest text-xs"
className="text-[#0f4475] font-black uppercase tracking-widest text-xs"
>
Compiling Fiscal Intelligence...
</motion.div>
@@ -78,7 +78,7 @@ const PurchaseSummary = () => {
<button title="Back" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
<ArrowRight className="rotate-180 text-slate-400" size={18} />
</button>
<h2 className="text-xs font-black text-[#521c4b] uppercase tracking-widest">Purchases</h2>
<h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Purchases</h2>
</div>
<h1 className="text-2xl font-black text-slate-800">Summary</h1>
</div>
@@ -88,7 +88,7 @@ const PurchaseSummary = () => {
<button
key={range}
onClick={() => setActiveRange(range)}
className={`px-4 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${activeRange === range ? 'text-white bg-[#521c4b] shadow-md shadow-[#521c4b]/20' : 'text-slate-400 hover:text-slate-600'}`}
className={`px-4 py-2 text-[10px] font-black uppercase tracking-widest transition-all rounded-xl ${activeRange === range ? 'text-white bg-[#0f4475] shadow-md shadow-[#0f4475]/20' : 'text-slate-400 hover:text-slate-600'}`}
>
{range}
</button>
@@ -118,7 +118,7 @@ const PurchaseSummary = () => {
</motion.div>
))}
<div className="col-span-2 bg-[#521c4b] p-6 rounded-[32px] shadow-lg shadow-[#521c4b]/20 text-white relative overflow-hidden group">
<div className="col-span-2 bg-[#0f4475] p-6 rounded-[32px] shadow-lg shadow-[#0f4475]/20 text-white relative overflow-hidden group">
<div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl" />
<div className="relative z-10 flex items-end justify-between">
<div>
@@ -173,7 +173,7 @@ const PurchaseSummary = () => {
<div className="flex items-center gap-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
<input type="text" title="Search" placeholder="Filter bills..." className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold outline-none focus:border-[#521c4b] transition-all" />
<input type="text" title="Search" placeholder="Filter bills..." className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold outline-none focus:border-[#0f4475] transition-all" />
</div>
<button title="Filter" className="p-2.5 bg-slate-50 rounded-xl text-slate-500 border border-slate-100"><Filter size={16} /></button>
</div>
@@ -205,7 +205,7 @@ const PurchaseSummary = () => {
</span>
</td>
<td className="px-6 py-5 text-right text-xs font-black text-rose-500">₹{bill.balance.toLocaleString()}</td>
<td className="px-6 py-5 text-right text-xs font-black text-[#521c4b]">₹{bill.amount.toLocaleString()}</td>
<td className="px-6 py-5 text-right text-xs font-black text-[#0f4475]">₹{bill.amount.toLocaleString()}</td>
</tr>
))}
</tbody>

26
frontend/src/pages/StoreDashboard.tsx
View File

@@ -100,7 +100,7 @@ const StoreDashboard = () => {
<button title="Return to previous screen" className="p-1.5 hover:bg-slate-100 rounded-lg transition-all">
<ArrowRight className="rotate-180 text-slate-400" size={18} />
</button>
<h2 className="text-xs font-black text-[#521c4b] uppercase tracking-widest">Store Dashboard</h2>
<h2 className="text-xs font-black text-[#0f4475] uppercase tracking-widest">Store Dashboard</h2>
</div>
<h1 className="text-2xl font-black text-slate-800">Good morning, RIT Canteen</h1>
</div>
@@ -108,7 +108,7 @@ const StoreDashboard = () => {
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="relative group">
<select title="Switch established store location" className="appearance-none bg-white border border-slate-200 rounded-xl px-4 py-2 pr-10 text-xs font-bold text-slate-600 outline-none focus:border-[#521c4b] transition-all cursor-pointer shadow-sm">
<select title="Switch established store location" className="appearance-none bg-white border border-slate-200 rounded-xl px-4 py-2 pr-10 text-xs font-bold text-slate-600 outline-none focus:border-[#0f4475] transition-all cursor-pointer shadow-sm">
<option>RIT Canteen</option>
</select>
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
@@ -116,7 +116,7 @@ const StoreDashboard = () => {
</div>
</div>
<div className="relative group">
<select title="Toggle between available display views" className="appearance-none bg-white border border-slate-200 rounded-xl px-4 py-2 pr-10 text-xs font-bold text-slate-600 outline-none focus:border-[#521c4b] transition-all cursor-pointer shadow-sm">
<select title="Toggle between available display views" className="appearance-none bg-white border border-slate-200 rounded-xl px-4 py-2 pr-10 text-xs font-bold text-slate-600 outline-none focus:border-[#0f4475] transition-all cursor-pointer shadow-sm">
<option>All</option>
</select>
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
@@ -132,7 +132,7 @@ const StoreDashboard = () => {
<Star size={18} fill="#f59e0b" />
</button>
</div>
<div title="Authenticated User: Abiram" className="w-8 h-8 rounded-full bg-[#521c4b] text-white flex items-center justify-center font-bold text-sm shadow-md cursor-pointer hover:ring-2 ring-[#521c4b]/20 transition-all">
<div title="Authenticated User: Abiram" className="w-8 h-8 rounded-full bg-[#0f4475] text-white flex items-center justify-center font-bold text-sm shadow-md cursor-pointer hover:ring-2 ring-[#0f4475]/20 transition-all">
A
</div>
</div>
@@ -148,11 +148,11 @@ const StoreDashboard = () => {
key={tab}
title={`Visualize ${tab.toLowerCase()} throughput data`}
onClick={() => setActiveTab(tab)}
className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#521c4b]' : 'text-slate-400 hover:text-slate-600'}`}
className={`pb-4 text-[11px] font-black uppercase tracking-widest transition-all relative ${activeTab === tab ? 'text-[#0f4475]' : 'text-slate-400 hover:text-slate-600'}`}
>
{tab}
{activeTab === tab && (
<motion.div layoutId="tabLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#521c4b]" />
<motion.div layoutId="tabLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0f4475]" />
)}
</button>
))}
@@ -224,18 +224,18 @@ const StoreDashboard = () => {
key={range}
title={`Filter metrics by ${range.toLowerCase()}`}
onClick={() => setTimeRange(range)}
className={`whitespace-nowrap px-2 py-2 text-[10px] font-black uppercase tracking-tighter transition-all relative ${timeRange === range ? 'text-[#521c4b]' : 'text-slate-400 hover:text-slate-600'}`}
className={`whitespace-nowrap px-2 py-2 text-[10px] font-black uppercase tracking-tighter transition-all relative ${timeRange === range ? 'text-[#0f4475]' : 'text-slate-400 hover:text-slate-600'}`}
>
{range}
{timeRange === range && (
<motion.div layoutId="rangeLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#521c4b]" />
<motion.div layoutId="rangeLineStore" className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0f4475]" />
)}
</button>
))}
</div>
{/* Total Orders Card */}
<div title="View detailed store volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group cursor-pointer hover:border-[#521c4b]/30 transition-all">
<div title="View detailed store volume and throughput" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm relative h-[180px] flex flex-col justify-between group cursor-pointer hover:border-[#0f4475]/30 transition-all">
<div className="flex items-center gap-3">
<div className="p-2 bg-amber-50 text-amber-500 rounded-xl group-hover:scale-110 transition-transform">
<ShoppingBag size={20} />
@@ -249,9 +249,9 @@ const StoreDashboard = () => {
</div>
{/* Expenses Card */}
<div title="Monitor store operational expenditures" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[150px] flex flex-col justify-between group cursor-pointer hover:border-[#521c4b]/30 transition-all">
<div title="Monitor store operational expenditures" className="bg-white p-6 rounded-[24px] border border-slate-100 shadow-sm h-[150px] flex flex-col justify-between group cursor-pointer hover:border-[#0f4475]/30 transition-all">
<div className="flex items-center gap-3">
<div className="p-2 bg-amber-100 text-[#521c4b] rounded-xl shadow-sm">
<div className="p-2 bg-amber-100 text-[#0f4475] rounded-xl shadow-sm">
<Wallet size={20} />
</div>
<h4 className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Expenses</h4>
@@ -297,7 +297,7 @@ const StoreDashboard = () => {
<img src={item.image} alt={item.name} className="w-full h-full object-cover" />
</div>
<div className="space-y-0.5">
<p className="text-[9px] font-black text-[#521c4b] uppercase tracking-widest brightness-110">{item.category}</p>
<p className="text-[9px] font-black text-[#0f4475] uppercase tracking-widest brightness-110">{item.category}</p>
<p className="text-xs font-black text-slate-800 uppercase tracking-tight">{item.name}</p>
</div>
</div>
@@ -328,7 +328,7 @@ const StoreDashboard = () => {
</div>
<div className="mt-8 flex justify-end">
<button title="Analyze subsequent business cycles" className="flex items-center gap-2 px-6 py-2.5 bg-[#521c4b]/5 hover:bg-[#521c4b]/10 text-[#521c4b] text-[11px] font-black uppercase tracking-widest rounded-2xl transition-all group">
<button title="Analyze subsequent business cycles" className="flex items-center gap-2 px-6 py-2.5 bg-[#0f4475]/5 hover:bg-[#0f4475]/10 text-[#0f4475] text-[11px] font-black uppercase tracking-widest rounded-2xl transition-all group">
Next
<ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
</button>