Dashboard

import DashboardMainPannel from '@/features/dashboard/Components/DashboardMainPannel'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_with-sidebar/dashboard')({
  component: RouteComponent,
})

function RouteComponent() {
  return (
    <div>
      <DashboardMainPannel />
    </div>
  )
}

import CardContainer from '../../../shared/ui/CardContainer/CardContainer'

export default function DashboardMainPannel() {
  return (
    <section className={styles.container}>
      {/* Grid of dashboard cards */}
      <CardContainer>
        <h1>Grid test</h1>
      </CardContainer>
      
      <CardContainer>
        <h1>Grid test</h1>
      </CardContainer>
      
      <CardContainer>
        <h1>Grid test</h1>
      </CardContainer>
      
      {/* Additional cards... */}
    </section>
  )
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

@media (min-width: 1200px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

import { create } from 'zustand'

interface DashboardState {
  stats: {
    active_auctions: number;
    total_bids: number;
    revenue: number;
  };
  auctions: Auction[];
  activity: ActivityItem[];
  loading: boolean;
  error: string | null;
  
  fetchDashboardData: () => Promise<void>;
  refreshAuctions: () => Promise<void>;
}

export const useDashboardStore = create<DashboardState>((set) => ({
  stats: { active_auctions: 0, total_bids: 0, revenue: 0 },
  auctions: [],
  activity: [],
  loading: false,
  error: null,
  
  fetchDashboardData: async () => {
    set({ loading: true });
    try {
      const [stats, auctions, activity] = await Promise.all([
        apiGET('/dashboard/stats'),
        apiGET('/auctions/active'),
        apiGET('/dashboard/activity')
      ]);
      
      set({ stats, auctions, activity, loading: false });
    } catch (error) {
      set({ error: error.message, loading: false });
    }
  },
  
  refreshAuctions: async () => {
    const auctions = await apiGET('/auctions/active');
    set({ auctions });
  }
}));

import { Button } from '@shared/ui/Button/Button'
import CreateAuctionButton from '@/widgets/Create-auction/CreateAuctionButton'

export default function DashboardActionPannel() {
  return (
    <aside className={styles.actionPanel}>
      <h2>Quick Actions</h2>
      
      <CreateAuctionButton />
      
      <Button variant="secondary" fullWidth>
        View All Auctions
      </Button>
      
      <Button variant="secondary" fullWidth>
        Manage Bidders
      </Button>
      
      <Button variant="secondary" fullWidth>
        View Reports
      </Button>
      
      <hr />
      
      <h3>Recent Alerts</h3>
      <ul className={styles.alerts}>
        {/* Alert items */}
      </ul>
    </aside>
  )
}