David/JEISA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[dyad] Updated the dashboard with a new color palette - wrote 6 file(s)

Browse source
This commit is contained in:
davidels1 2025-09-09 01:14:51 +02:00
parent 26cd13764e
commit d5c747dbb5
6 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Header.tsx
View file

@ -10,11 +10,11 @@ const Header = () => {
const [isSheetOpen, setSheetOpen] = useState(false);
return (
<header className="bg-slate-700 p-4 flex justify-between items-center text-white">
<header className="bg-primary-dark p-4 flex justify-between items-center text-white">
<div className="flex items-center">
<Sheet open={isSheetOpen} onOpenChange={setSheetOpen}>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="md:hidden mr-2 hover:bg-slate-600">
<Button variant="ghost" size="icon" className="md:hidden mr-2 hover:bg-slate-blue">
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
@ -34,7 +34,7 @@ const Header = () => {
<Input
type="search"
placeholder="Search..."
className="pl-10 bg-slate-600 border-none placeholder-gray-200 text-white focus:bg-slate-500"
className="pl-10 bg-slate-blue border-none placeholder-gray-200 text-white focus:bg-slate-blue"
/>
</div>
<Avatar>

2
src/components/SidebarNav.tsx
View file

@ -9,7 +9,7 @@ export const SidebarNav = ({ onLinkClick }: SidebarNavProps) => {
const navLinkClasses = ({ isActive }: { isActive: boolean }) =>
`flex items-center px-4 py-2 rounded-lg transition-colors duration-200 ${
isActive
? 'bg-slate-700 text-white'
? 'bg-primary-dark text-white'
: 'text-gray-700 hover:bg-gray-200'
}`;

2
src/components/StockActivityChart.tsx
View file

@ -15,7 +15,7 @@ const StockActivityChart = () => {
return (
<Card className="col-span-1">
<CardHeader>
<CardTitle className="bg-pink-500 text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Monthly Activity</CardTitle>
<CardTitle className="bg-slate-blue text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Monthly Activity</CardTitle>
</CardHeader>
<CardContent className="h-80">
<ResponsiveContainer width="100%" height="100%">

2
src/components/StockChart.tsx
View file

@ -15,7 +15,7 @@ const StockChart = () => {
return (
<Card className="col-span-1 lg:col-span-2">
<CardHeader>
<CardTitle className="bg-orange-500 text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Stock Movement</CardTitle>
<CardTitle className="bg-teal-accent text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Stock Movement</CardTitle>
</CardHeader>
<CardContent className="h-80">
<ResponsiveContainer width="100%" height="100%">

8
src/pages/Index.tsx
View file

@ -11,25 +11,25 @@ const Index = () => {
title="Total Stock Value"
value="R2,253,478.35"
icon={<DollarSign className="h-6 w-6 text-white" />}
iconBgColor="bg-pink-500"
iconBgColor="bg-slate-blue"
/>
<StatCard
title="Items in Stock"
value="2,350"
icon={<Package className="h-6 w-6 text-white" />}
iconBgColor="bg-orange-500"
iconBgColor="bg-teal-accent"
/>
<StatCard
title="Stock Out (30 days)"
value="924"
icon={<ArrowDown className="h-6 w-6 text-white" />}
iconBgColor="bg-purple-500"
iconBgColor="bg-slate-blue"
/>
<StatCard
title="Low Stock Alerts"
value="12"
icon={<AlertTriangle className="h-6 w-6 text-white" />}
iconBgColor="bg-slate-700"
iconBgColor="bg-primary-dark"
/>
</div>
<div className="grid gap-8 md:grid-cols-1 lg:grid-cols-3">

6
tailwind.config.ts
View file

@ -19,6 +19,10 @@ export default {
},
extend: {
colors: {
'primary-dark': '#332D56',
'slate-blue': '#4E6688',
'teal-accent': '#71C0BB',
'light-lime': '#E3EEB2',
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
@ -93,4 +97,4 @@ export default {
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
} satisfies Config;