feat: Implement backend API and basic frontend structure

Adds initial backend API endpoints for fetching users and attendances, including basic filtering. Sets up the frontend routing with a layout component and includes placeholder pages for dashboard, users, and login. Refactors the README for local development setup.

components/ProductLists.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { ShoppingBag, TrendingUp } from 'lucide-react';
+
+interface ProductStat {
+  name: string;
+  count: number;
+  percentage: number;
+}
+
+interface ProductListsProps {
+  requested: ProductStat[];
+  sold: ProductStat[];
+}
+
+export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
+  const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
+    <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex-1">
+      <div className="flex items-center gap-2 mb-4">
+        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
+          <Icon size={18} />
+        </div>
+        <h3 className="font-bold text-slate-800">{title}</h3>
+      </div>
+      <ul className="space-y-4">
+        {data.map((item, idx) => (
+          <li key={idx} className="flex items-center justify-between group">
+            <div className="flex items-center gap-3">
+              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-500'}`}>
+                {idx + 1}
+              </span>
+              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
+            </div>
+            <div className="text-right">
+              <span className="text-sm font-bold text-slate-900 block">{item.count}</span>
+              <span className="text-[10px] text-slate-400">{item.percentage}%</span>
+            </div>
+          </li>
+        ))}
+        {data.length === 0 && <li className="text-sm text-slate-400 italic">Nenhum dado disponível.</li>}
+      </ul>
+    </div>
+  );
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <ListSection 
+        title="Produtos Mais Solicitados" 
+        icon={ShoppingBag} 
+        data={requested} 
+        color="blue" 
+      />
+      <ListSection 
+        title="Produtos Mais Vendidos" 
+        icon={TrendingUp} 
+        data={sold} 
+        color="green" 
+      />
+    </div>
+  );
+};