Let me first explore the codebase to understand the current structure and find the relevant files.

Let me read more of the signup file and the rest of the codebase to understand the full picture.

Now let me read the rest of the signup file (step 2 cafe details and step 3) and also check the tailwind config for the custom surface-dark tokens.

Now let me read the rest of the signup file to see the submit section:

Now I have full understanding of the codebase. I notice the footer already uses surface-dark tokens but I see no --surface-dark variables defined in globals.css. Let me check if they're missing and also understand the admin panel situation. The user wants:

1. Footer dark - The footer already uses surface-dark token classes but the CSS variables aren't defined. I need to add them.
2. Admin panel like sir sent - I don't have a reference image from "sir", but I'll redesign the admin panel to be more professional with a proper sidebar layout.
3. Gov ID upload in registration - Add a government ID upload field in the signup form.

Let me check if the surface-dark variables exist anywhere:

The --surface-dark CSS variables are missing from globals.css. That's why the footer likely doesn't render properly. Now let me implement all three changes. I'll:

1. Add the --surface-dark-* CSS variables to globals.css for the dark footer
2. Redesign the admin panel with a cleaner, more professional look
3. Add a Gov ID upload field in the signup form (Step 1 - Personal Details)

Let me start by adding the surface-dark CSS variables to globals.css:

Now let me move to the admin panel redesign:

Since you mentioned "sir ne bheja hai wesa bana de" but I don't have a reference image, I'll redesign the admin panel to be a clean, professional admin dashboard with a proper sidebar navigation layout with more sections like "Manage Waiters", proper search/filter, and a polished look. Let me rewrite the admin dashboard:

Now let me move to the last task - adding Gov ID upload in Registration:

I need to add a Gov ID upload section in the signup form. I'll add it in Step 1 (Personal Details) after the gender/marital status fields. Let me add the required imports and state, then the UI:

Now add the govIdType, govIdNumber, and govIdFile fields to the FormData interface and state:

Now add govIdFile state and update the formData initial state:

Now add the govIdFile state after the formData state:

Now add the Gov ID upload section in Step 1, after the Gender/Marital Status row. Let me find the exact spot:

Now I need to add the ShieldCheck import since it's used in the Gov ID section. Let me check what's already imported:

ShieldCheck is used but not imported - I need to add it. Let me also check what's imported from lucide-react:

I see Shield is imported but not ShieldCheck. Let me add it:

Now I need to add validation for the Gov ID fields in validateStep1. Let me also update the "Register Another Account" reset to include the new fields and the review step. First, the validation:

Now update the disabled condition on the Continue button for Step 1 to include gov ID fields:

Now update the "Register Another Account" reset to include the new fields:

Now let me add the Gov ID information to the Step 3 review summary. Let me find the right spot:

Now let me add the Gov ID review section after the Personal Details section in Step 3:

Now let me mark all tasks as done:

Here's a summary of all three changes made:

1. Footer dark - Added the missing --surface-dark-* CSS variables (--surface-dark, --surface-dark-card, --surface-dark-input, --surface-dark-border, --surface-dark-muted, --surface-dark-text, --surface-dark-glow) in globals.css so the footer now properly renders with a dark background theme.
2. Admin Panel redesigned - Completely rebuilt the admin dashboard with a welcome banner, improved stat cards with growth indicators, a top performing cafes table, pending approvals section with avatars and Gov ID status badges, a searchable/filterable owners table with dropdown action menus and pagination, and additional sidebar nav items (Waiters, Revenue, Reports, Settings).
3. Gov ID upload in Registration - Added a full "Government ID" section in Step 1 of registration with an ID type dropdown (Aadhaar, PAN, Voter ID, Driving License, Passport), an ID number field with dynamic placeholder, a drag-and-drop style file upload area with file preview and remove option, proper validation, and the Gov ID details are also shown in the Step 3 review summary.

The screenshot shows a "Joli Admin" dashboard template with a dark teal sidebar (profile avatar, nav sections), top stat cards (Returned Visitors, New Messages, Registered Users, Clock), a Users Activity bar chart, a Visitors donut chart, a Projects table with status badges and activity bars, and a Sales section with progress bars and a map.

Let me rebuild the admin dashboard to match this design closely.

Now let me read the rest of the admin dashboard and the dashboard shell:

Now I have a complete understanding of the codebase. I need to rebuild the admin dashboard to match the Joli Admin template from the screenshot. The key elements are:

1. Sidebar - Dark teal/green with profile avatar, name, role, and two navigation groups ("Navigation" and "Components")
2. Top stat cards - Returned Visitors, New Messages, Registered Users, Clock/Date
3. Charts - Users Activity bar chart, Visitors donut chart, Projects table
4. Sales section - Progress bars and map

I'll adapt this to the CafeSync context while matching the visual layout. Let me rewrite both the dashboard shell (for teal sidebar with avatar) and the admin dashboard content.

Now let me check the existing tailwind.config to understand the color tokens:

Good. Now I have everything I need. I need to:

1. Update the sidebar in dashboard-shell.tsx to match Joli Admin's teal sidebar with profile avatar, name "John Doe", and two nav groups
2. Completely rewrite admin-dashboard.tsx with: top stat cards (carousel dots), Users Activity bar chart, Visitors donut chart, Projects table, Sales section with progress bars

Let me first update the globals.css to add a teal sidebar color scheme, then rewrite the dashboard shell and admin dashboard.

Now let me rewrite the dashboard shell to match the Joli Admin layout with profile avatar, two navigation groups:

Now let me completely rewrite the admin dashboard to match the Joli Admin layout with charts:

Now let me check if the chart component exists for ChartContainer:

Good, the chart component exists. Let me also check if recharts is in package.json:

Everything is in place. The admin dashboard has been completely rebuilt to match the Joli Admin template from the screenshot. Here's what was changed:

Dashboard Shell - Rebuilt the sidebar with a teal/green color scheme, profile avatar section showing "JD" initials with "John Doe" name, two navigation groups ("Navigation" and "Components"), breadcrumb navigation in the header, and a live clock widget matching the teal time display from the screenshot.

Admin Dashboard - Recreated the exact Joli Admin layout with: top stat cards row (Returned Visitors 1,695 with carousel dots, 48 New Messages, 375 Registered Users), a Users Activity bar chart (new vs returned users), Visitors donut chart showing "Returned 2,513" in center, a Projects table with colored status badges and activity progress bars, a Sales section with progress bars (In Queue, Shipped Products, Returned Products, Progress Today) alongside a world map with location dots, and a Sales & Event line chart.